/* ============================================================================
   twin_fx.css — «КОСМИЧЕСКИЙ ПАСПОРТ» reveal FX v2.
   Движок + 3 конкурирующие вариации:
     A «Рождение твоей вселенной» — #twinfx.fx-a.v2  (.fx-* / .fx2-*)
     B «Гравировка паспорта»      — #twinfx.fx-b.v2  (.tfx-* под #twinfx.fx-b)
     C «Gacha-паспорт»            — #twin-fx         (.tfx-* под #twin-fx)
   Контракт: только transform/opacity/filter анимации; fixed-оверлей поверх
   всего; никаких layout-инвалидаций формы. Дефолт off (см. server twin_fx).
   ========================================================================== */

/* ===================== БАЗА ДВИЖКА (вариации A и B) ====================== */
#twinfx{ position:fixed; inset:0; z-index:100000; touch-action:none; contain:strict;
  font-family:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer;
  -webkit-user-select:none; user-select:none;
  --ez-grav:  cubic-bezier(.70,0,.30,1);
  --ez-inhale:cubic-bezier(.55,0,.85,.40);
  --ez-burst: cubic-bezier(.16,1,.30,1);
  --ez-focus: cubic-bezier(.33,1,.68,1);
  --ez-title: cubic-bezier(.22,1,.36,1);
  --ez-land:  cubic-bezier(.40,0,.20,1);
  --ez-pop:   cubic-bezier(.34,1.56,.64,1);
  --ez-crest: cubic-bezier(.30,0,.15,1);
  --ez-arc:   cubic-bezier(.20,.75,.25,1); }
#twinfx *{ pointer-events:none; margin:0; padding:0; border:0; box-sizing:border-box; }

/* ============ ВАРИАЦИЯ A · «Рождение твоей вселенной» ==================== */
/* дефолты вертикали (база 360×740; JS даёт инлайн-оверрайды на малых) */
#twinfx.fx-a.v2{ --fxCy:42vh; --fx2CrestY:-25vh; --fx2yV:36vh; --fx2yM:43vh;
  --fx2yMo:50vh; --fx2Ph:58vh; --fx2TwinY:71vh; --fx2TwinD:68px; }

/* слои-эффекты (ретайминг v2) */
#twinfx.fx-a .fx-dim{ position:absolute; inset:0; z-index:1; opacity:0;
  background:radial-gradient(120% 120% at 50% var(--fxCy,42vh),
    rgba(15,12,29,.90) 0%, rgba(5,4,12,.975) 68%); }
#twinfx canvas.fx-stars{ position:absolute; inset:0; z-index:2; width:100%; height:100%;
  transform:translateZ(0); }
#twinfx .fx-core{ position:absolute; z-index:3; left:50%; top:var(--fxCy,42vh);
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, var(--gold,#ffd98a) 34%,
    var(--accent,#b388ff) 62%, transparent 74%);
  transform:scale(0); opacity:0; }
#twinfx .fx-rings{ position:absolute; inset:0; z-index:4; }
#twinfx .fx-ring{ position:absolute; left:50%; top:var(--fxCy,42vh);
  width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; opacity:0; }
#twinfx .fx-ring.g{ border:2px solid rgba(255,217,138,.9); }
#twinfx .fx-ring.v{ border:3px solid rgba(179,136,255,.65); }
#twinfx .fx-flash{ position:absolute; inset:0; z-index:5; background:#fff; opacity:0; }

/* герб: .fx2-crest статичен; вся анимация на *Anim-обёртках */
#twinfx .fx2-crest{ position:absolute; z-index:6; left:0; right:0; top:var(--fxCy,42vh);
  height:0; --fxD:120px; }
#twinfx .fx2-crest .fx-rays{ position:absolute; left:50%; top:0;
  width:calc(var(--fxD)*2.4); height:calc(var(--fxD)*2.4);
  margin:calc(var(--fxD)*-1.2) 0 0 calc(var(--fxD)*-1.2); opacity:0; }
#twinfx .fx2-auraPos, #twinfx .fx2-glyphPos{ position:absolute; left:50%; top:0;
  width:0; height:0; display:flex; align-items:center; justify-content:center; }
#twinfx .fx2-glyphAura{ position:absolute; width:220px; height:220px;
  margin:-110px 0 0 -110px; left:50%; top:50%; border-radius:50%; opacity:0; }
#twinfx .fx2-glyphAnim{ opacity:0; }
#twinfx .fx2-glyph{ font-size:clamp(96px,30vw,120px); line-height:1;
  background:linear-gradient(178deg,#fff3d6 0%, var(--gold,#ffd98a) 55%, #b8923e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,217,138,.45)); }   /* drop-shadow статичен */
#twinfx .fx2-sunPos{ position:absolute; left:0; right:0; top:82px; text-align:center; }
#twinfx .fx2-sunAnim{ opacity:0; }
#twinfx .fx2-sunLine{ font-size:clamp(19px,5.6vw,23px); font-weight:700; letter-spacing:.01em;
  color:var(--text,#f2eefb); white-space:nowrap;
  text-shadow:0 0 18px rgba(179,136,255,.45), 0 1px 2px rgba(5,4,12,.6); }
#twinfx .fx2-sunLine.long{ font-size:clamp(14px,4.3vw,17px); }

/* строки штрихов: слоты абсолютны — ноль layout */
#twinfx .fx2-lines{ position:absolute; inset:0; z-index:7; }
#twinfx .fx2-line{ position:absolute; left:0; right:0; text-align:center; opacity:0;
  white-space:nowrap; max-width:88vw; margin:0 auto; }
#twinfx .fx2-line.v{ top:var(--fx2yV); }
#twinfx .fx2-line.m{ top:var(--fx2yM); }
#twinfx .fx2-line.v, #twinfx .fx2-line.m{ font-size:clamp(17px,4.8vw,20px); font-weight:600;
  letter-spacing:.005em; color:var(--text,#f2eefb);
  text-shadow:0 0 14px rgba(255,217,138,.28), 0 1px 2px rgba(5,4,12,.6); }
#twinfx .fx2-pl{ font-weight:400; }
#twinfx .fx2-pl.pv{ color:var(--accent2,#ff7eb6); }
#twinfx .fx2-pl.pm{ color:#ff8a5c; }
#twinfx .fx2-line.mo{ top:var(--fx2yMo); font-size:clamp(15px,4.2vw,17px); font-weight:500;
  color:#c8bce8; text-shadow:0 1px 2px rgba(5,4,12,.6); }
#twinfx .fx2-wake{ position:absolute; left:9vw; right:9vw; height:1.5px; opacity:0;
  transform:scaleX(0);
  background:linear-gradient(90deg, rgba(255,217,138,0), var(--gold,#ffd98a) 30%, #fff3d6); }
#twinfx .fx2-wake.v{ top:calc(var(--fx2yV) + 30px); transform-origin:left; }
#twinfx .fx2-wake.m{ top:calc(var(--fx2yM) + 30px); transform-origin:right;
  background:linear-gradient(270deg, rgba(255,217,138,0), var(--gold,#ffd98a) 30%, #fff3d6); }
#twinfx .fx2-glint{ position:absolute; left:50%; top:calc(var(--fx2yMo) + 6px);
  width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff6e8;
  box-shadow:0 0 12px 4px rgba(255,217,138,.8); opacity:0; }
#twinfx .fx2-phrase{ position:absolute; left:0; right:0; top:var(--fx2Ph); text-align:center;
  opacity:0; font-size:clamp(16px,4.6vw,19px); font-weight:600; font-style:italic;
  letter-spacing:.02em;
  background:linear-gradient(178deg,#fff3d6 0%, var(--gold,#ffd98a) 55%, #b8923e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,217,138,.30)); }

/* близнец: статичный слот, анимация на .fx2-twinAnim */
#twinfx .fx2-twin{ position:absolute; z-index:8; left:50%; top:var(--fx2TwinY);
  width:var(--fx2TwinD); height:var(--fx2TwinD); --fxD:var(--fx2TwinD);
  margin:calc(var(--fx2TwinD)/-2) 0 0 calc(var(--fx2TwinD)/-2); }
#twinfx .fx2-twinAnim{ position:absolute; inset:0; opacity:0; }
#twinfx .fx-glow{ position:absolute; inset:-28%; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(179,136,255,.38) 0%,
    rgba(255,126,182,.14) 46%, transparent 70%); }
#twinfx .fx-rim{ position:absolute; inset:-5px; border-radius:50%; opacity:0;
  border:2px solid var(--gold,#ffd98a);
  box-shadow:0 0 24px rgba(255,217,138,.35), inset 0 0 12px rgba(255,217,138,.18); }
#twinfx .fx-disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:#0b0819; transform:translateZ(0); }
#twinfx .fx-photo{ width:100%; height:100%; object-fit:cover; display:block; }
/* элемент-градиенты диска = точь-в-точь инлайн-портрет → бесшовный FLIP */
#twinfx .fx-disc[data-el="fire"]{  background:radial-gradient(120% 120% at 30% 25%, #ffc9a8 0%, #ff8a5c 55%, #c2582f 100%); }
#twinfx .fx-disc[data-el="earth"]{ background:radial-gradient(120% 120% at 30% 25%, #a9f2d0 0%, #5be3a7 55%, #2f9067 100%); }
#twinfx .fx-disc[data-el="air"]{   background:radial-gradient(120% 120% at 30% 25%, #c4e9ff 0%, #6fd0ff 55%, #3d84b6 100%); }
#twinfx .fx-disc[data-el="water"]{ background:radial-gradient(120% 120% at 30% 25%, #b3c6ff 0%, #5b8cff 55%, #3556bd 100%); }
#twinfx .fx-disc.has-photo{ background:#0b0819; }
/* фолбэк-печать (гербовая) */
#twinfx .fx-seal{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 calc(var(--fxD)*.22) rgba(11,8,25,.35), inset 0 2px 0 rgba(255,255,255,.35); }
#twinfx .fx-const{ position:absolute; inset:0; opacity:.20; }
#twinfx .fx-mono{ font-size:calc(var(--fxD)*.42); font-weight:800; line-height:1;
  color:#1a1030; text-shadow:0 1px 0 rgba(255,255,255,.28); }
#twinfx .fx-glyph{ position:absolute; right:4%; bottom:4%;
  width:calc(var(--fxD)*.24); height:calc(var(--fxD)*.24); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--fxD)*.13); line-height:1; color:#fff;
  background:rgba(15,12,29,.85); border:1px solid rgba(255,255,255,.08); }
#twinfx .fx2-twinName{ position:absolute; left:50%; top:calc(100% + 10px);
  width:80vw; margin-left:-40vw; text-align:center; opacity:0;
  font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--text,#f2eefb);
  text-shadow:0 0 12px rgba(179,136,255,.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#twinfx .fx-brand{ position:absolute; z-index:9; left:0; right:0; text-align:center;
  bottom:calc(24px + var(--sab, env(safe-area-inset-bottom,0px)));
  font-size:11px; letter-spacing:.12em; color:var(--hint,#9b91c4); opacity:0; }

/* will-change; .settled снимает у всех КРОМЕ .fx2-twinAnim */
#twinfx.fx-a.v2 .fx2-glyphAnim, #twinfx.fx-a.v2 .fx2-twinAnim,
#twinfx.fx-a.v2 .fx-core, #twinfx.fx-a.v2 .fx-ring{ will-change:transform,opacity; }
#twinfx.fx-a.v2.settled .fx2-glyphAnim, #twinfx.fx-a.v2.settled .fx-core,
#twinfx.fx-a.v2.settled .fx-ring{ will-change:auto; }

/* — монтаж FULL: мастер-таймлайн (все от t0 = кадр .play) — */
#twinfx.fx-a.v2.play .fx-dim   { animation:fxDim 150ms ease-out both; }
#twinfx.fx-a.v2.play .fx-core  { animation:fxCore 380ms var(--ez-grav) 300ms both,
                                           fxInhale 100ms var(--ez-inhale) 680ms both,
                                           fxCoreOut 50ms linear 780ms both; }
#twinfx.fx-a.v2.play .fx-flash { animation:fxFlash 280ms linear 780ms both; }
#twinfx.fx-a.v2.play .fx-ring.g{ animation:fxRingG 450ms var(--ez-burst) 780ms both; }
#twinfx.fx-a.v2.play .fx-ring.v{ animation:fxRingV 450ms var(--ez-burst) 810ms both; }
#twinfx.fx-a.v2.play .fx-rings { animation:fxChroma 90ms steps(1,end) 850ms both; }
#twinfx.fx-a.v2.play .fx-rays  { animation:fxRays 630ms var(--ez-burst) 850ms both; }
#twinfx.fx-a.v2.play .fx2-glyphAnim{ animation:fx2GlyphIn 300ms var(--ez-pop) 780ms both,
                                               fx2Crest 260ms var(--ez-crest) 1300ms forwards; }
#twinfx.fx-a.v2.play .fx2-glyphAura{ animation:fx2AuraIn 220ms linear 900ms both,
                                               fx2CrestAura 260ms var(--ez-crest) 1300ms forwards; }
#twinfx.fx-a.v2.play .fx2-sunAnim{ animation:fx2Line 220ms var(--ez-title) 900ms both,
                                             fx2CrestSun 260ms var(--ez-crest) 1300ms forwards; }
#twinfx.fx-a.v2.play .fx2-wake.v{ animation:fx2WakeIn 210ms var(--ez-crest) 1395ms both,
                                            fx2WakeSettle 400ms linear 1605ms both; }
#twinfx.fx-a.v2.play .fx2-line.v{ animation:fx2Line 240ms var(--ez-title) 1500ms both; }
#twinfx.fx-a.v2.play .fx2-wake.m{ animation:fx2WakeIn 185ms var(--ez-crest) 1690ms both,
                                            fx2WakeSettle 400ms linear 1875ms both; }
#twinfx.fx-a.v2.play .fx2-line.m{ animation:fx2Line 240ms var(--ez-title) 1790ms both; }
#twinfx.fx-a.v2.play .fx2-glint { animation:fx2Glint 300ms linear 1900ms both; }
#twinfx.fx-a.v2.play .fx2-line.mo{ animation:fx2LineMo 240ms var(--ez-title) 1960ms both; }
#twinfx.fx-a.v2.play .fx2-lines { animation:fx2Pack 220ms var(--ez-crest) 2300ms forwards; }
#twinfx.fx-a.v2.play .fx2-phrase{ animation:fx2Line 260ms var(--ez-title) 2300ms both; }
#twinfx.fx-a.v2.play .fx-brand  { animation:fxBrand 400ms linear 1200ms both; }

/* эстафета звезда→DOM: класс .fly ставит JS на 2480 (после записи --sdx/--sdy) */
#twinfx.fx-a.v2.fly .fx2-twinAnim{ animation:fx2TwinArc 300ms var(--ez-arc) both; }
#twinfx.fx-a.v2.fly .fx-disc    { animation:fx2DiscLit 220ms linear both; }
#twinfx.fx-a.v2.fly .fx-glow    { animation:fxGlowIn 300ms linear both; }
#twinfx.fx-a.v2.fly .fx-rim     { animation:fx2RimIn 150ms linear 170ms both; }
#twinfx.fx-a.v2.fly .fx2-twinName{ animation:fx2Line 200ms var(--ez-title) 220ms both; }
/* скип после вспышки: близнец мгновенно в слот */
#twinfx.fx-a.v2.cut .fx2-twinAnim{ animation:none !important; opacity:1; transform:none;
  transition:opacity 120ms linear; }
#twinfx.fx-a.v2.cut .fx-disc, #twinfx.fx-a.v2.cut .fx-rim,
#twinfx.fx-a.v2.cut .fx2-twinName{ animation:none !important; opacity:1; filter:none; }

/* — SHORT (~1.6с): только такт 3, ноль знаковых утверждений — */
#twinfx.fx-a.v2.fx-short .fx2-phrase{ top:calc(var(--fx2TwinY) + 60px); }
#twinfx.fx-a.v2.fx-short .fx2-twinName{ top:calc(100% + 46px); }
#twinfx.fx-a.v2.fx-short.play .fx-dim  { animation:fxDim 150ms ease-out both; }
#twinfx.fx-a.v2.fx-short.play .fx-flash{ animation:fxFlashS 220ms linear 300ms both; }
#twinfx.fx-a.v2.fx-short.play .fx2-twinAnim{ animation:fx2ShortPop 260ms var(--ez-pop) 300ms both; }
#twinfx.fx-a.v2.fx-short.play .fx-disc { animation:fx2DiscLit 220ms linear 300ms both; }
#twinfx.fx-a.v2.fx-short.play .fx-glow { animation:fxGlowIn 300ms linear 340ms both; }
#twinfx.fx-a.v2.fx-short.play .fx-rim  { animation:fx2RimIn 150ms linear 480ms both; }
#twinfx.fx-a.v2.fx-short.play .fx2-phrase{ animation:fx2Line 260ms var(--ez-title) 380ms both; }
#twinfx.fx-a.v2.fx-short.play .fx2-twinName{ animation:fx2Line 260ms var(--ez-title) 440ms both; }
#twinfx.fx-a.v2.fx-short.play .fx-brand{ animation:fxBrand 300ms linear 520ms both; }
#twinfx.fx-a.v2.fx-short.play .fx-core, #twinfx.fx-a.v2.fx-short.play .fx-ring{ animation:none; }

@keyframes fxDim    { from{opacity:0} to{opacity:1} }
@keyframes fxCore   { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes fxInhale { from{transform:scale(1)} to{transform:scale(.85)} }
@keyframes fxCoreOut{ from{transform:scale(.85);opacity:1} to{transform:scale(2.2);opacity:0} }
@keyframes fxFlash  { 0%{opacity:0} 18%{opacity:.96} 40%{opacity:.65} 100%{opacity:0} }
@keyframes fxFlashS { 0%{opacity:0} 25%{opacity:.65} 100%{opacity:0} }
@keyframes fxRingG  { from{transform:scale(.2);opacity:1}  to{transform:scale(8);opacity:0} }
@keyframes fxRingV  { from{transform:scale(.2);opacity:.8} to{transform:scale(8.6);opacity:0} }
@keyframes fxChroma { from{filter:hue-rotate(-16deg) brightness(1.5) saturate(1.4)} to{filter:none} }
@keyframes fxRays   { 0%{opacity:0;transform:scale(.7) rotate(-8deg)}
                      25%{opacity:.55} 100%{opacity:0;transform:scale(1.12) rotate(6deg)} }
@keyframes fxGlowIn { from{opacity:0} to{opacity:.35} }
@keyframes fxBrand  { from{opacity:0} to{opacity:.7} }
/* «гербовая печать»: провал ~.94 и возврат через --ez-pop */
@keyframes fx2GlyphIn{ 0%{transform:scale(1.6);opacity:0;filter:brightness(2.4)}
  30%{opacity:1;filter:brightness(1.6)} 100%{transform:scale(1);opacity:1;filter:brightness(1)} }
@keyframes fx2AuraIn{ from{opacity:0} to{opacity:.30} }
@keyframes fx2Crest    { to{transform:translateY(var(--fx2CrestY)) scale(.58)} }
@keyframes fx2CrestAura{ to{transform:translateY(var(--fx2CrestY)) scale(.58)} }
@keyframes fx2CrestSun { to{transform:translateY(calc(var(--fx2CrestY) - 1vh)) scale(.88);opacity:.92} }
@keyframes fx2Line  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes fx2LineMo{ from{opacity:0;transform:translateY(8px)} to{opacity:.9;transform:none} }
@keyframes fx2WakeIn{ from{opacity:1;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
@keyframes fx2WakeSettle{ from{opacity:1} to{opacity:.35} }
@keyframes fx2Glint { 0%{transform:translateX(-36vw);opacity:0} 40%{opacity:.9}
                      100%{transform:translateX(36vw);opacity:0} }
@keyframes fx2Pack  { to{transform:translateY(-2.5vh)} }
@keyframes fx2TwinArc{
  0%{transform:translate(var(--sdx,0px),var(--sdy,-8vh)) scale(.06);opacity:.9}
  45%{transform:translate(calc(var(--sdx,0px)*.35),calc(var(--sdy,-8vh)*.55 - 6vh)) scale(.55)}
  100%{transform:translate(0,0) scale(1);opacity:1} }
@keyframes fx2DiscLit{ from{filter:brightness(.3)} to{filter:brightness(1)} }
@keyframes fx2RimIn { from{opacity:0} to{opacity:1} }
@keyframes fx2ShortPop{ from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

/* посадка A (FLIP: JS на 2850 или при скипе) */
#twinfx.fx-a.v2.landing .fx2-twinAnim{ animation:none !important;
  transition:transform 300ms var(--ez-land); opacity:1; }
#twinfx.fx-a.v2.landing.fast .fx2-twinAnim{ transition-duration:180ms; }
#twinfx.fx-a.v2.landing .fx-rim{ animation:none; opacity:1; transition:opacity 240ms linear; }
#twinfx.fx-a.v2.landing .fx-disc{ animation:none !important; filter:none; }
#twinfx.fx-a.v2.landing .fx-dim, #twinfx.fx-a.v2.landing canvas.fx-stars,
#twinfx.fx-a.v2.landing .fx2-crest, #twinfx.fx-a.v2.landing .fx2-lines,
#twinfx.fx-a.v2.landing .fx-brand, #twinfx.fx-a.v2.landing .fx-glow,
#twinfx.fx-a.v2.landing .fx2-twinName, #twinfx.fx-a.v2.landing .fx-flash,
#twinfx.fx-a.v2.landing .fx-core, #twinfx.fx-a.v2.landing .fx-rings
  { transition:opacity 240ms linear; opacity:0 !important; animation:none !important; }
#twinfx.fading{ transition:opacity 250ms linear; opacity:0; }
#twinfx.fading.fast{ transition-duration:180ms; }

/* reduced motion A: статичный сводный кадр, fade 300мс (hold 1900, тотал 2500) */
#twinfx.fx-a.fx-rm{ opacity:0; transition:opacity 300ms ease-out; }
#twinfx.fx-a.fx-rm.play{ opacity:1; }
#twinfx.fx-a.fx-rm .fx-dim{ opacity:1; }
#twinfx.fx-a.fx-rm .fx2-glyphAnim{ opacity:1; transform:translateY(var(--fx2CrestY)) scale(.58); }
#twinfx.fx-a.fx-rm .fx2-glyphAura{ opacity:.30; transform:translateY(var(--fx2CrestY)) scale(.58); }
#twinfx.fx-a.fx-rm .fx2-sunAnim{ opacity:.92; transform:translateY(calc(var(--fx2CrestY) - 1vh)) scale(.88); }
#twinfx.fx-a.fx-rm .fx2-line{ opacity:1; }
#twinfx.fx-a.fx-rm .fx2-line.mo{ opacity:.9; }
#twinfx.fx-a.fx-rm .fx2-wake{ opacity:.35; transform:scaleX(1); }
#twinfx.fx-a.fx-rm .fx2-lines{ transform:translateY(-2.5vh); }
#twinfx.fx-a.fx-rm .fx2-phrase{ opacity:1; }
#twinfx.fx-a.fx-rm .fx2-twinAnim{ opacity:1; }
#twinfx.fx-a.fx-rm .fx-rim{ opacity:1; } #twinfx.fx-a.fx-rm .fx-glow{ opacity:.35; }
#twinfx.fx-a.fx-rm .fx2-twinName{ opacity:1; }
#twinfx.fx-a.fx-rm .fx-brand{ opacity:.7; }
#twinfx.fx-a.fx-rm.fx-short .fx2-lines{ transform:none; }
/* rm может прийти и без media (класс .rm приложения) → гасим безусловно */
#twinfx.fx-rm *{ animation:none !important; }

/* ============ ВАРИАЦИЯ B · «Гравировка паспорта» ========================= */
#twinfx.fx-b{
  --e-draw:cubic-bezier(.30,0,.10,1);  --e-slam:cubic-bezier(.22,1,.36,1);
  --e-stamp:cubic-bezier(.30,1.40,.44,1); --e-soft:cubic-bezier(.33,0,.20,1);
  --e-name:cubic-bezier(.19,1,.22,1);  --e-flip:cubic-bezier(.40,0,.20,1); }
#twinfx.fx-b.skipping{ transition:opacity 120ms linear; opacity:0; }
#twinfx.fx-b.skipping *{ animation-play-state:paused !important; }

/* пергамент: непрозрачен, БЕЗ backdrop-filter — mid-Android дышит */
#twinfx.fx-b .tfx-backdrop{ position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 100% at 50% 30%, #141021 0%, #0b0a14 75%); }
#twinfx.fx-b.play .tfx-backdrop{ animation:tfxBd 120ms ease-out both; }
@keyframes tfxBd{ from{opacity:0} to{opacity:1} }
#twinfx.fx-b canvas.tfx-dust{ position:absolute; inset:0; width:100%; height:100%;
  transform:translateZ(0); }
#twinfx.fx-b .tfx-stage{ position:absolute; inset:0; transform-origin:50% 40%; }
#twinfx.fx-b .tfx-doc{ position:absolute; inset:0; }

/* L-скобки «страницы» */
#twinfx.fx-b .tfx-corner{ position:absolute; width:22px; height:22px; opacity:0; }
#twinfx.fx-b .tfx-corner.c1{ left:14px; top:14px;
  border-left:1.5px solid rgba(255,217,138,.55); border-top:1.5px solid rgba(255,217,138,.55); }
#twinfx.fx-b .tfx-corner.c2{ right:14px; top:14px;
  border-right:1.5px solid rgba(255,217,138,.55); border-top:1.5px solid rgba(255,217,138,.55); }
#twinfx.fx-b .tfx-corner.c3{ left:14px; bottom:14px;
  border-left:1.5px solid rgba(255,217,138,.55); border-bottom:1.5px solid rgba(255,217,138,.55); }
#twinfx.fx-b .tfx-corner.c4{ right:14px; bottom:14px;
  border-right:1.5px solid rgba(255,217,138,.55); border-bottom:1.5px solid rgba(255,217,138,.55); }
#twinfx.fx-b.play .tfx-corner{ animation:tfxCorn 620ms linear both; }
@keyframes tfxCorn{ 0%{opacity:0} 19%{opacity:.03} 100%{opacity:.28} }

/* печать */
#twinfx.fx-b .tfx-sig{ position:absolute; }
#twinfx.fx-b .tfx-penPos{ position:absolute; width:0; height:0; }
#twinfx.fx-b .tfx-pen{ position:absolute; left:-16px; top:-4px; transform:rotate(-32deg);
  filter:drop-shadow(0 0 8px rgba(255,232,180,.9)); opacity:0; }
#twinfx.fx-b.play .tfx-pen{ animation:tfxPenIn 80ms ease-out 40ms both,
                                      tfxPenOut 80ms linear 200ms forwards; }
@keyframes tfxPenIn { from{opacity:0;transform:rotate(-32deg) scale(0)} to{opacity:1;transform:rotate(-32deg) scale(1)} }
@keyframes tfxPenOut{ to{opacity:0} }
#twinfx.fx-b .tfx-engrave{ position:absolute; inset:0; }
#twinfx.fx-b.play .tfx-engrave{ animation:tfxEngrOut 80ms linear 620ms forwards; }
#twinfx.fx-b.short.play .tfx-engrave{ animation-delay:500ms; }
@keyframes tfxEngrOut{ to{opacity:0} }
/* нити (scaleX) + перья (translateX по нити) — техника v1 */
#twinfx.fx-b .tfx-seg{ position:absolute; height:1.75px; transform-origin:0 50%;
  transform:rotate(var(--ang)) scaleX(0);
  background:linear-gradient(90deg, rgba(255,217,138,0) 0%, rgba(255,217,138,.85) 35%, #fff3d6 100%); }
#twinfx.fx-b.play .tfx-seg{ animation-name:tfxSeg; animation-timing-function:var(--e-draw); animation-fill-mode:both; }
@keyframes tfxSeg{ from{transform:rotate(var(--ang)) scaleX(0)} to{transform:rotate(var(--ang)) scaleX(1)} }
#twinfx.fx-b .tfx-tip{ position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:#fff6dd; box-shadow:0 0 8px 2px rgba(255,232,180,.9); opacity:0; }
#twinfx.fx-b.play .tfx-tip{ animation-name:tfxTip; animation-timing-function:var(--e-draw); animation-fill-mode:both; }
@keyframes tfxTip{ 0%{opacity:1;transform:rotate(var(--ang)) translateX(0)}
  80%{opacity:1} 100%{opacity:0;transform:rotate(var(--ang)) translateX(var(--len))} }

/* залитая печать */
#twinfx.fx-b .tfx-sealface{ position:absolute; inset:0; border-radius:50%; opacity:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 26%, #2b2150 0%, #17102e 78%);
  border:2px solid rgba(255,217,138,.9); }
#twinfx.fx-b .tfx-sealface::before{ content:""; position:absolute; inset:7%;
  border-radius:50%; border:1px dashed rgba(255,217,138,.45); }
@supports (background: repeating-conic-gradient(#000 0 1deg, #fff 1deg 2deg)){
  #twinfx.fx-b .tfx-sealface::after{ content:""; position:absolute; inset:0; border-radius:50%;
    background:repeating-conic-gradient(rgba(255,217,138,.06) 0 3deg, transparent 3deg 6deg); } }
#twinfx.fx-b .tfx-sglyph{ position:relative; z-index:1; line-height:1;
  /* iOS: чернила глифа выступают за em-бокс, а background-clip:text не красит
     за пределами бокса → «обрезанный» хвост. Симметричный паддинг = запас фона. */
  padding:.22em .26em;
  filter:drop-shadow(0 0 6px rgba(255,217,138,.35)); }
#twinfx.fx-b.play .tfx-sealface{ animation:tfxSlam 170ms var(--e-slam) 620ms both; }
@keyframes tfxSlam{
  0%  {opacity:0;transform:scale(1.12);filter:brightness(2.1) drop-shadow(0 0 18px rgba(255,217,138,.95))}
  45% {opacity:1;transform:scale(.985);filter:brightness(1.35) drop-shadow(0 0 10px rgba(255,217,138,.6))}
  100%{opacity:1;transform:scale(1)   ;filter:brightness(1)    drop-shadow(0 0 6px  rgba(255,217,138,.35))} }
#twinfx.fx-b .tfx-sealflash{ position:absolute; inset:-10%; border-radius:50%; opacity:0;
  background:radial-gradient(closest-side, rgba(255,232,180,.85) 0%, transparent 70%); }
#twinfx.fx-b.play .tfx-sealflash{ animation:tfxBFlash 180ms linear 620ms both; }
@keyframes tfxBFlash{ 0%{opacity:0;transform:scale(.9)} 35%{opacity:.8} 100%{opacity:0;transform:scale(1.12)} }

/* золотой градиент текста */
#twinfx.fx-b .tfx-gold{ background:linear-gradient(178deg,#fff3d6 0%, var(--gold,#ffd98a) 55%, #b8923e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* тексты документа */
#twinfx.fx-b .tfx-line1{ position:absolute; left:0; right:0; text-align:center; opacity:0;
  font-weight:700; color:#fff; letter-spacing:.02em; padding:0 4vw;
  text-shadow:0 0 18px rgba(179,136,255,.35); }
#twinfx.fx-b.play .tfx-line1{ animation:tfxUp2 220ms var(--e-name) 700ms both; }
@keyframes tfxUp2{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
#twinfx.fx-b .tfx-rows{ position:absolute; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
#twinfx.fx-b .tfx-row{ position:relative; display:inline-block; white-space:nowrap;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis; opacity:0;
  font-size:clamp(13px,4vw,15px); font-weight:600; letter-spacing:.01em;
  color:var(--text,#f2eefb); }
#twinfx.fx-b .tfx-row .p{ font-size:16px; font-weight:400; letter-spacing:0;
  background:linear-gradient(178deg,#fff3d6 0%, var(--gold,#ffd98a) 55%, #b8923e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
#twinfx.fx-b .tfx-row .d{ font-size:11px; font-variant:small-caps; letter-spacing:.08em;
  color:rgba(255,217,138,.72); text-decoration:none; }
#twinfx.fx-b .tfx-row.r-moon{ font-size:13px; font-weight:500; color:rgba(242,238,251,.85); }
#twinfx.fx-b .tfx-uline{ display:block; height:1px; margin-top:3px; overflow:hidden; }
#twinfx.fx-b .tfx-uline .f{ display:block; width:100%; height:1px; transform:translateX(-101%);
  background:linear-gradient(90deg, rgba(255,217,138,0), rgba(255,217,138,.85) 30%, #fff3d6); }
/* штампы: вход 40мс БЕЗ overshoot — документы не пружинят */
#twinfx.fx-b.play .tfx-row.r-venus{ animation:tfxStampIn 40ms linear 1150ms both; }
#twinfx.fx-b.play .tfx-row.r-venus .f{ animation:tfxUline 180ms var(--e-draw) 1330ms both; }
#twinfx.fx-b.play .tfx-row.r-mars{ animation:tfxStampIn 40ms linear 1500ms both; }
#twinfx.fx-b.play .tfx-row.r-mars .f{ animation:tfxUline 180ms var(--e-draw) 1680ms both; }
#twinfx.fx-b.play .tfx-row.r-moon{ animation:tfxMoonIn 220ms var(--e-soft) 1850ms both; }
@keyframes tfxStampIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes tfxUline{ to{transform:translateX(0)} }
@keyframes tfxMoonIn{ from{opacity:0;transform:translateY(4px)} to{opacity:.85;transform:translateY(0)} }

/* холд-кадр: единственное движение — тихий shine (спроектированный скриншот) */
#twinfx.fx-b .tfx-shine{ position:absolute; left:0; right:0; top:8vh; bottom:30vh; opacity:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,243,214,1) 50%, transparent 60%);
  mix-blend-mode:soft-light; }
#twinfx.fx-b.play .tfx-shine{ animation:tfxShine 1800ms ease-in-out 1700ms infinite alternate; }
#twinfx.fx-b.short.play .tfx-shine{ animation-delay:900ms; }
@keyframes tfxShine{ from{opacity:0} to{opacity:.02} }

/* «человеческая» строка */
#twinfx.fx-b .tfx-star{ position:absolute; left:0; right:0; text-align:center; opacity:0;
  font:italic 15px Georgia,"Times New Roman",serif; color:#e8ddc0; letter-spacing:.01em;
  text-shadow:0 0 14px rgba(255,217,138,.18); }
#twinfx.fx-b.play .tfx-star{ animation:tfxUp2 260ms var(--e-name) 2150ms both; }
#twinfx.fx-b.short.play .tfx-star{ animation-delay:400ms; }

/* виза близнеца */
#twinfx.fx-b .tfx-visa{ position:absolute; opacity:0; transform:rotate(-4deg); --vtilt:4deg; }
#twinfx.fx-b.short .tfx-visa{ transform:rotate(-3deg); --vtilt:3deg; }
/* штамп-виза наклонена, а подписи под ней — ровные (основатель 2026-10-11: «кривовато»):
   контр-поворот на тот же угол, ось — верх строки, чтобы зазор до овала не плыл */
#twinfx.fx-b .tfx-visaname, #twinfx.fx-b .tfx-cline{ transform-origin:50% 0; transform:rotate(var(--vtilt,0deg)); }
#twinfx.fx-b .tfx-vring{ position:absolute; inset:0; width:100%; height:100%; }
#twinfx.fx-b .tfx-vclip{ position:absolute; inset:3px; border-radius:50%; overflow:hidden;
  display:block; }
#twinfx.fx-b .tfx-vimg{ width:100%; height:100%; object-fit:cover; display:block; }
#twinfx.fx-b .tfx-vfall{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:
    radial-gradient(1.5px 1.5px at 26% 22%, rgba(255,243,214,.9), transparent 100%),
    radial-gradient(1px 1px   at 71% 31%, rgba(255,243,214,.7), transparent 100%),
    radial-gradient(1px 1px   at 62% 74%, rgba(179,136,255,.8), transparent 100%),
    radial-gradient(60% 50% at 50% 38%, #2b2150 0%, #17102e 80%); }
#twinfx.fx-b .tfx-vm{ font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1;
  padding:.14em .18em; }
#twinfx.fx-b .tfx-vg{ font-size:11px; line-height:1; color:rgba(179,136,255,.85); }
#twinfx.fx-b .tfx-visaname{ position:absolute; left:50%; top:calc(100% + 6px);
  width:34vw; margin-left:-17vw; text-align:center;
  font-size:10.5px; color:#c8bce8; letter-spacing:.04em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Основатель 2026-07-24: +26px вылезания хватало длинным именам, чтобы столкнуться с соседней
   колонкой («…Macy» упирался в плашку космика). Сузили до +14px — длинное имя переносится на
   2-ю строку внутри СВОЕЙ колонки (white-space:normal), вертикаль меряется по факту (buildB). */
#twinfx.fx-b .tfx-visa.v3 .tfx-visaname{ width:calc(100% + 14px); margin-left:calc(-50% - 7px);
  white-space:normal; overflow:visible; text-overflow:clip; font-size:10px; line-height:1.25; }
#twinfx.fx-b.play .tfx-visa{ animation:tfxVisa 180ms var(--e-stamp) 2300ms both; }
#twinfx.fx-b.short.play .tfx-visa{ animation-delay:600ms; }
@keyframes tfxVisa{
  0%  {opacity:0;transform:rotate(-4deg) scale(1.3);filter:brightness(1.6)}
  60% {opacity:1;transform:rotate(-4deg) scale(.97)}
  100%{opacity:1;transform:rotate(-4deg) scale(1);filter:brightness(1)} }
#twinfx.fx-b .tfx-visaname{ opacity:0; }
#twinfx.fx-b.play .tfx-visaname{ animation:tfxVn 200ms linear 2500ms both; }
#twinfx.fx-b.short.play .tfx-visaname{ animation-delay:820ms; }
@keyframes tfxVn{ from{opacity:0} to{opacity:.85} }
#twinfx.fx-b .tfx-mark{ position:absolute; right:46px; text-align:right; opacity:0;
  top:calc(max(15px, var(--sat, env(safe-area-inset-top))) + 3px);
  font-size:10px; letter-spacing:.18em; color:var(--hint,#9b91c4); }
#twinfx.fx-b.play .tfx-mark{ animation:tfxMk 300ms linear both; }
@keyframes tfxMk{ from{opacity:0} to{opacity:.65} }
/* верхний левый угол, зеркально «✦ AstraSignos» (.tfx-mark): низ экрана занят кнопкой и строкой
   тура «Дальше — твой день…», подпись туда налезала (основатель 2026-10-11) */
#twinfx.fx-b .tfx-credit{ position:absolute; left:40px; opacity:0;
  top:calc(max(15px, var(--sat, env(safe-area-inset-top))) - 1px); padding:6px; white-space:nowrap; z-index:10;
  font-size:9.5px; line-height:1; letter-spacing:.04em; color:var(--hint,#9b91c4);
  pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#twinfx.fx-b.play .tfx-credit{ animation:tfxCr 400ms linear 2600ms both; }
#twinfx.fx-b.short.play .tfx-credit{ animation-delay:900ms; }
#twinfx.fx-b.rm .tfx-credit{ opacity:.55; }
@keyframes tfxCr{ from{opacity:0} to{opacity:.55} }
#twinfx.fx-b .tfx-crpop{ position:absolute; left:50%; transform:translate(-50%, -6px); opacity:0;
  top:calc(max(15px, var(--sat, env(safe-area-inset-top))) + 24px); width:min(320px, calc(100vw - 32px)); z-index:11;
  padding:10px 12px; border-radius:12px; background:#141026;
  border:1px solid rgba(179,136,255,.28); box-shadow:0 8px 24px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:6px; font-size:11px; line-height:1.35; color:#d9d2f0;
  transition:opacity .18s ease, transform .18s ease; }
#twinfx.fx-b .tfx-crrow{ overflow-wrap:anywhere; }
#twinfx.fx-b .tfx-crrow b{ font-weight:600; color:#fff; }
#twinfx.fx-b .tfx-crsrc{ font-size:10px; color:var(--hint,#9b91c4); }
#twinfx.fx-b.cr-open .tfx-crpop{ opacity:1; transform:translate(-50%, 0); }
#twinfx.fx-b.cr-open .tfx-credit{ opacity:.9 !important; animation:none; }
@media (prefers-reduced-motion: reduce){ #twinfx.fx-b .tfx-crpop{ transition:none; } }

/* «выдох»: FLIP летит ТОЛЬКО главная виза; соседние топ-3 гаснут на месте */
#twinfx.fx-b.out .tfx-visa.v-main{ animation:none;
  transition:transform 300ms var(--e-flip), opacity 300ms var(--e-flip);
  transform:translate(var(--fdx,0px),var(--fdy,0px)) rotate(0deg) scale(var(--fk,1));
  opacity:0; }
#twinfx.fx-b.out .tfx-visa:not(.v-main){ animation:none;
  transition:opacity 220ms var(--e-flip); opacity:0; }
#twinfx.fx-b.short.out .tfx-visa{ transition-duration:140ms; }
#twinfx.fx-b.out .tfx-backdrop, #twinfx.fx-b.out .tfx-doc>:not(.tfx-visa){
  transition:opacity 300ms var(--e-flip); opacity:0; }
#twinfx.fx-b.out .tfx-doc{ transition:transform 300ms var(--e-flip); transform:scale(.98); }

/* reduced motion B: статичный документ (холд-кадр + виза), fade 300мс */
#twinfx.fx-b.rm *, #twinfx.fx-b.rm *::before, #twinfx.fx-b.rm *::after{
  animation:none !important; transition:none !important; }
#twinfx.fx-b.rm .tfx-pen, #twinfx.fx-b.rm .tfx-seg, #twinfx.fx-b.rm .tfx-tip,
#twinfx.fx-b.rm .tfx-sealflash, #twinfx.fx-b.rm .tfx-shine{ display:none; }
#twinfx.fx-b.rm .tfx-backdrop{ opacity:1; }
#twinfx.fx-b.rm .tfx-corner{ opacity:.28; }
#twinfx.fx-b.rm .tfx-sealface{ opacity:1; transform:scale(1);
  filter:brightness(1) drop-shadow(0 0 6px rgba(255,217,138,.35)); }
#twinfx.fx-b.rm .tfx-line1, #twinfx.fx-b.rm .tfx-row, #twinfx.fx-b.rm .tfx-star,
#twinfx.fx-b.rm .tfx-visa{ opacity:1; }
#twinfx.fx-b.rm .tfx-row.r-moon{ opacity:.85; }
#twinfx.fx-b.rm .tfx-uline .f{ transform:none; }
#twinfx.fx-b.rm .tfx-visaname{ opacity:.85; }
#twinfx.fx-b.rm .tfx-mark{ opacity:.65; }
#twinfx.fx-b.rm{ opacity:0; transition:opacity 300ms linear !important; }
#twinfx.fx-b.rm.play{ opacity:1; }
#twinfx.fx-b.rm.out{ opacity:0; transition-duration:300ms !important; }
#twinfx.fx-b.rm.skipping{ opacity:0; transition-duration:120ms !important; }

/* ============ ВАРИАЦИЯ C · «Gacha-паспорт» =============================== */
#twin-fx{ position:fixed; inset:0; z-index:100000; contain:strict;
  height:100vh; height:100dvh; touch-action:none; cursor:pointer;
  font-family:inherit; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; }
#twin-fx *{ margin:0; padding:0; border:0; box-sizing:border-box; pointer-events:none; }
#twin-fx{ --tfx-d:min(62vw, 38vh, 280px);
  --tfx-tw:clamp(72px, calc(var(--tfx-d)*.33), 88px); }
@media (max-height:600px){ #twin-fx{ --tfx-d:min(62vw, 34vh, 280px); } }
#twin-fx .tfx-dim{ position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 100% at 50% 42%, rgba(15,12,29,.78) 0%, rgba(6,4,14,.92) 78%, rgba(4,3,10,.96) 100%); }
#twin-fx .tfx-canvas{ position:absolute; inset:0; width:100%; height:100%; }
#twin-fx .tfx-stage{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding-top:var(--sat, env(safe-area-inset-top));
  transform-origin:50% 50%; will-change:transform,opacity; }
#twin-fx .tfx-eyebrow{ font-size:11px; font-weight:800; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--tfx-el,var(--tfx-tier)); opacity:0; margin-bottom:2.2vh;
  text-shadow:0 0 12px var(--tfx-el-glow,var(--tfx-glow)); }
#twin-fx .tfx-ringwrap{ position:relative; width:var(--tfx-d); height:var(--tfx-d);
  will-change:transform,filter; opacity:0; }
#twin-fx .tfx-ring{ position:absolute; inset:0; overflow:visible; }
#twin-fx .tfx-dial{ position:absolute; inset:0; opacity:0; }
#twin-fx .tfx-dial span{ position:absolute; left:50%; top:50%; width:0; height:0;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--tfx-d)*.085); line-height:1; color:#cfc4ee; }
#twin-fx .tfx-disc{ position:absolute; inset:9px; border-radius:50%; opacity:0;
  background:radial-gradient(120% 120% at 32% 26%, #17112e 0%, #0f0c1d 100%);
  box-shadow:inset 0 0 24px rgba(0,0,0,.55); }
#twin-fx .tfx-portrait{ position:absolute; inset:9px; border-radius:50%; overflow:hidden;
  clip-path:circle(50%); opacity:0; }
#twin-fx .tfx-portrait img{ width:100%; height:100%; object-fit:cover; will-change:transform,filter,opacity; }

/* большой глиф Солнца: глоу на ВНУТРЕННЕМ span, blur-анимация на внешнем */
#twin-fx .tfx-glyphpos{ position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; }
#twin-fx .tfx-glyph{ opacity:0; line-height:1;
  font-size:min(38vw, calc(var(--tfx-d)*.60)); will-change:transform,opacity,filter; }
#twin-fx .tfx-glyphtx{ background:linear-gradient(165deg,var(--tfx-el-core,#fff6e8) 8%,
    var(--tfx-el,#ffd98a) 48%, var(--tfx-el-deep,#b8923e) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px var(--tfx-el-glow,rgba(255,217,138,.45))); }

/* медальон близнеца — «гость» на странице паспорта */
#twin-fx .tfx-twin{ position:absolute; left:50%; top:50%;
  width:var(--tfx-tw); height:var(--tfx-tw);
  margin:calc(var(--tfx-tw)/-2) 0 0 calc(var(--tfx-tw)/-2);
  border-radius:50%; overflow:hidden; opacity:0; will-change:transform,opacity;
  border:1.5px solid var(--tfx-el-glow,rgba(255,217,138,.45));
  box-shadow:0 0 18px var(--tfx-el-glow,rgba(255,217,138,.45)), inset 0 1px 0 rgba(255,255,255,.14); }
#twin-fx .tfx-twin img{ width:100%; height:100%; object-fit:cover; display:block; }
#twin-fx .tfx-twmono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 32% 26%, #2b2150 0%, #17112e 68%, #0f0c1d 100%); }
#twin-fx .tfx-twini{ position:relative; font-size:calc(var(--tfx-tw)*.34); font-weight:800; line-height:1;
  background:linear-gradient(160deg,#fff3d6 0%,var(--gold,#ffd98a) 55%,#c9962e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
#twin-fx .tfx-twwm{ position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-size:calc(var(--tfx-tw)*.62); line-height:1; opacity:.12; color:var(--tfx-el,#ffd98a); }

/* слот строк: два абсолютных кадра fP/fF */
#twin-fx .tfx-lineslot{ position:relative; height:52px; width:100%; margin-top:2.2vh; }
#twin-fx .tfx-fP, #twin-fx .tfx-fF{ position:absolute; inset:0; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-start; gap:5px;
  will-change:transform,opacity; }
#twin-fx.full .tfx-fF{ opacity:0; }
#twin-fx .tfx-sunline{ font-weight:700; font-size:22px; line-height:1.2; color:#fff;
  letter-spacing:.01em; text-shadow:0 0 24px var(--tfx-el-glow,rgba(255,217,138,.45));
  max-width:94vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#twin-fx.full .tfx-sunline{ opacity:0; }
#twin-fx .tfx-sunline.long{ font-size:clamp(12px,4vw,15px); letter-spacing:0; }
#twin-fx .tfx-elline{ font-weight:800; font-size:12px; line-height:1.4; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tfx-el,#ffd98a); opacity:0; }
#twin-fx .tfx-starline{ font-weight:600; font-size:15px; line-height:1.35; color:#e9defc;
  text-shadow:0 0 16px rgba(179,136,255,.35); max-width:94vw; text-align:center; }
#twin-fx .tfx-twinname{ font-weight:700; font-size:13px; line-height:1.3; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold,#ffd98a); text-shadow:0 0 12px rgba(255,217,138,.35);
  max-width:92vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#twin-fx.short .tfx-starline, #twin-fx.short .tfx-twinname{ opacity:0; }

/* чипы-«лут»: высота зарезервирована при build (N:76 / M:118) */
#twin-fx .tfx-chips{ display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:12px; }
#twin-fx .tfx-chip{ height:34px; padding:8px 14px; border-radius:17px;
  font-weight:600; font-size:16px; line-height:1; color:#fff;
  border:1px solid var(--tfx-el-glow,rgba(255,217,138,.45));
  background:var(--tfx-el-tint,rgba(255,217,138,.12));
  max-width:92vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  opacity:0; will-change:transform,opacity,filter; }
#twin-fx .tfx-chip.moon{ font-size:14px; }
@media (max-width:330px){
  #twin-fx .tfx-sunline{ font-size:20px; }
  #twin-fx .tfx-chip{ font-size:15px; height:32px; border-radius:16px; } }
#twin-fx .tfx-wordmark{ position:absolute; left:0; right:0; text-align:center;
  bottom:calc(var(--sab, env(safe-area-inset-bottom)) + 3vh); font-size:11px; letter-spacing:1.8px;
  color:var(--gold,#ffd98a); opacity:0; }
@keyframes tfxPulse{ 0%,100%{opacity:.30} 50%{opacity:.34} }
#twin-fx.settled .tfx-glowring{ animation:tfxPulse 3s ease-in-out infinite; }
#twin-fx.settled .tfx-chip, #twin-fx.settled .tfx-glyph{ will-change:auto; }

/* фолбэк без фото C (короткая версия — портрет крупно) */
#twin-fx .tfx-mono{ position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 32% 26%, #2b2150 0%, #17112e 68%, #0f0c1d 100%);
  will-change:transform,filter,opacity; }
#twin-fx .tfx-ini{ position:relative; font-size:calc(var(--tfx-d)*0.30); font-weight:800; line-height:1;
  background:linear-gradient(160deg,#fff3d6 0%,var(--gold,#ffd98a) 55%,#c9962e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
#twin-fx .tfx-wm{ position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  font-size:calc(var(--tfx-d)*0.62); line-height:1; opacity:.12; }
#twin-fx .tfx-mono[data-el="fire"]  .tfx-wm{ color:#ff8a5c; }
#twin-fx .tfx-mono[data-el="earth"] .tfx-wm{ color:#5be3a7; }
#twin-fx .tfx-mono[data-el="air"]   .tfx-wm{ color:#6fd0ff; }
#twin-fx .tfx-mono[data-el="water"] .tfx-wm{ color:#5b8cff; }
#twin-fx .tfx-rmfinal{ display:none; }

/* reduced motion C: статичный сводный кадр, fade 300мс */
#twin-fx.rm{ opacity:0; transition:opacity 300ms cubic-bezier(.33,0,.20,1); }
#twin-fx.rm.play{ opacity:1; }
#twin-fx.rm.out{ opacity:0; }
#twin-fx.rm.fastout{ opacity:0; transition-duration:150ms; }
#twin-fx.rm *{ animation:none !important; }
#twin-fx.rm .tfx-dim{ opacity:1; }
#twin-fx.rm .tfx-ringwrap, #twin-fx.rm .tfx-disc, #twin-fx.rm .tfx-portrait{ opacity:1; }
#twin-fx.rm .tfx-eyebrow{ opacity:.85; }
#twin-fx.rm .tfx-spin, #twin-fx.rm .tfx-dial, #twin-fx.rm .tfx-basering{ opacity:0; }
#twin-fx.rm.full .tfx-glyph{ opacity:1;
  transform:translateX(calc(var(--tfx-d)*-0.14)) scale(.74); }
#twin-fx.rm.full .tfx-twin{ opacity:1; transform:translateX(calc(var(--tfx-d)*0.26)); }
#twin-fx.rm.full .tfx-fP{ opacity:1; }
#twin-fx.rm.full .tfx-fF{ display:none; }
#twin-fx.rm.full .tfx-sunline{ opacity:1; }
#twin-fx.rm .tfx-elline{ opacity:.85; }
#twin-fx.rm .tfx-chip{ opacity:1; }
#twin-fx.rm .tfx-chip.moon{ opacity:.9; }
#twin-fx.rm.full .tfx-rmfinal{ display:flex; flex-direction:column; align-items:center;
  gap:5px; margin-top:14px; }
#twin-fx.rm.short .tfx-starline, #twin-fx.rm.short .tfx-twinname{ opacity:1; }
#twin-fx.rm .tfx-wordmark{ opacity:.55; }
#twin-fx.rm .tfx-glowring{ animation:none; }

/* dev-пикер [A][B][C][↻]: рендерится app.js (twinFxPillsHtml), стили .tw-fx-pill
   живут в styles.css рядом с карточкой близнеца — здесь ничего не нужно. */

/* ═══ exit CTA: финальный кадр держится, выход только кнопкой (все вариации) ═══ */
#twinfx .fx-exit, #twin-fx .fx-exit{
  position:absolute; left:50%; bottom:calc(42px + var(--sab, env(safe-area-inset-bottom, 0px)));
  z-index:9; transform:translateX(-50%) translateY(10px);
  padding:14px 36px; border:0; border-radius:999px; -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1; letter-spacing:.2px;
  color:#241703; background:linear-gradient(180deg,#ffe1a0,#eeb757);
  box-shadow:0 6px 24px rgba(255,200,100,.35), inset 0 0 0 1px rgba(255,255,255,.22);
  opacity:0; transition:opacity 300ms ease, transform 300ms ease;
  pointer-events:auto; touch-action:manipulation; cursor:pointer; user-select:none; -webkit-user-select:none;
  white-space:nowrap;
}
/* на удержании фирменная подпись уступает место кнопке */
#twinfx.held .fx-brand, #twin-fx.held .tfx-wordmark{
  opacity:0 !important; transition:opacity 200ms linear; }
/* невидимое расширение хит-зоны: первый тап не промахивается */
#twinfx .fx-exit::after, #twin-fx .fx-exit::after{
  content:""; position:absolute; inset:-16px -22px; }
#twinfx .fx-exit.on, #twin-fx .fx-exit.on{ opacity:1; transform:translateX(-50%); }
#twinfx .fx-exit:active, #twin-fx .fx-exit:active{ transform:translateX(-50%) scale(.96); }
/* выходные состояния гасят кнопку вместе со сценой */
#twinfx.fading .fx-exit, #twinfx.out .fx-exit, #twinfx.landing .fx-exit,
#twinfx.skipping .fx-exit, #twin-fx.out .fx-exit, #twin-fx.fastout .fx-exit{ opacity:0; transition-duration:150ms; }

/* ТАКТ 0 «ПРОВОДНИКА» — строка-обещание ПОД «Продолжить ✦».
   Живёт в полосе под кнопкой (та стоит на bottom:42px+SAB).
   pointer-events:none — под ней зона home-индикатора, перехватывать тап нечем и незачем.
   Никакого золота: золото на этом экране принадлежит кнопке, строка — тихий спутник.

   ПОЛОСА ЭЛАСТИЧНА, А НЕ СТРОКА ЗАЖАТА. Раньше здесь стояло жёсткое font-size:11px без
   var(--font-scale): в нативном iOS при Dynamic Type 1.30 рос весь паспорт, а
   единственная строка-обещание — нет, и человек, попросивший «сделай крупнее», получал
   11px в единственном оплаченном слоте внимания продукта (медиана удержания ~11с, 0
   скипов из 1790). Это ровно тот дефект, который команда осознанно исправила в этой же
   фиче для .tour-title (styles.css: «самый мелкий текст игнорировал системную
   настройку»). Просто дописать множитель было нельзя: две строки при 1.30 не влезали в
   34px между кнопкой и низом экрана. Поэтому арифметика полосы стала ОДНА на строку и
   кнопку: --fx-note-lift = насколько две строки при текущем масштабе выше базовых 28.6px,
   и ровно на столько же поднимается кнопка. При --font-scale 1 подъём = 0px, то есть у
   подавляющего большинства (и в контрольной ветке холдаута) экран байт в байт прежний. */
:root{
  --fx-note-fs: calc(11px * var(--font-scale, 1));
  --fx-note-band: calc(var(--fx-note-fs) * 2.6);              /* line-height 1.3 × две строки */
  --fx-note-lift: max(0px, calc(var(--fx-note-band) - 28.6px));
}
/* Подъём кнопки взводит САМА строка (.has-note ставит fxNote в тот же кадр, где кнопка
   создаётся и ещё прозрачна) — иначе поднялась бы и контрольная ветка, у которой строки
   нет вовсе, и холдаут сравнивал бы два разных экрана. */
#twinfx.has-note .fx-exit, #twin-fx.has-note .fx-exit{
  bottom:calc(42px + var(--fx-note-lift) + var(--sab, env(safe-area-inset-bottom, 0px)));
}
#twinfx .fx-note, #twin-fx .fx-note{
  position:absolute; left:50%; bottom:calc(8px + var(--sab, env(safe-area-inset-bottom, 0px)));
  z-index:9; transform:translateX(-50%);
  margin:0; width:min(300px, 86vw); text-align:center;
  font-family:inherit; font-size:var(--fx-note-fs); line-height:1.3; font-weight:500; letter-spacing:.01em;
  color:rgba(222,212,250,.72); text-shadow:0 1px 6px rgba(0,0,0,.55);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  opacity:0; transition:opacity 420ms ease; pointer-events:none;
}
#twinfx .fx-note.on, #twin-fx .fx-note.on{ opacity:1; }
/* уходит вместе со сценой — тем же жестом, что и кнопка */
#twinfx.fading .fx-note, #twinfx.out .fx-note, #twinfx.landing .fx-note,
#twinfx.skipping .fx-note, #twin-fx.out .fx-note, #twin-fx.fastout .fx-note{ opacity:0; transition-duration:150ms; }
@media (prefers-reduced-motion: reduce){
  #twinfx .fx-note, #twin-fx .fx-note{ transition:none; }
}

/* тизер Луны на куспе: центрированная мягкая строка (без плашки — founder) */
#twinfx.fx-b .tfx-row.r-tease{
  display:block; margin:12px auto 0; max-width:78vw;
  white-space:normal; line-height:1.45; font-size:11.5px; font-style:normal; font-weight:500;
  letter-spacing:.01em; color:rgba(222,212,250,.88); text-align:center;
}
#twinfx.fx-b .tfx-row.r-tease .p{ font-size:13px; margin-right:2px; opacity:.95; }

/* экстремально тесные экраны: компактные подписи под сжатыми визами */
#twinfx.fx-b .tfx-visa.v-compact .tfx-visaname{ font-size:9px !important; line-height:1.2; top:calc(100% + 4px);
  width:calc(100% + 6px); margin-left:calc(-50% - 3px); white-space:normal; overflow:visible; }

/* ── космический близнец: полное совпадение (день+месяц+год), tier==="cosmic" ──
   «личная печать консула» (дизайнер 2026-07-14): лавандовый ореол + розетка ✦ +
   гравированная строка факта; каскад задержек приходит инлайном из visaOf */
#twinfx.fx-b .tfx-visa.v-cosmic::before{
  content:""; position:absolute; inset:-3.5px; border-radius:50%;
  border:1px solid rgba(179,136,255,.55);
  box-shadow:0 0 14px rgba(179,136,255,.30), inset 0 0 10px rgba(179,136,255,.16);
  opacity:0; pointer-events:none; }
#twinfx.fx-b.play .tfx-visa.v-cosmic::before{
  animation:tfxChalo 260ms linear both; animation-delay:var(--cdl,0ms); }
@keyframes tfxChalo{ from{opacity:0} to{opacity:1} }

#twinfx.fx-b .tfx-cstar{ position:absolute; top:-7px; left:50%; width:16px; height:16px;
  margin-left:-8px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; line-height:1; color:#ffd98a;
  background:radial-gradient(circle at 35% 30%, #2b2150 0%, #17102e 78%);
  border:1px solid rgba(255,217,138,.8);
  box-shadow:0 0 8px rgba(255,217,138,.28);
  opacity:0; }
#twinfx.fx-b.play .tfx-cstar{ animation:tfxCstar 240ms var(--e-stamp) both; }
@keyframes tfxCstar{
  0%  {opacity:0; transform:scale(1.6)}
  60% {opacity:1; transform:scale(.94)}
  100%{opacity:1; transform:scale(1)} }

/* Основатель 2026-07-24: бокс ±18px + nowrap позволял ДЛИННОЙ локали («ТОТ ЖЕ ДЕНЬ И ГОД»)
   выехать в соседнюю колонку. Бокс сужен до ±8px; долгим локалям JS ужимает кегль инлайном
   (visaOf) — строка остаётся одной и живёт внутри своей колонки. */
#twinfx.fx-b .tfx-cline{ display:block; margin:5px -10px 0; --vtilt:0deg;   /* внутри .tfx-visaname: ровно под именем */
  text-align:center; white-space:normal; line-height:1.2;   /* длинные локали (de) — вторая строка, а не вылет за колонку; line-height:1 + больший зазор ниже:
  бокс cline был раздут (~15px при шрифте 8px) и оставлял ЛИШЬ 1px до имени → на iOS Safari
  (движок Telegram-вебвью, метрики строк выше Chromium) плашка налезала на имя (основатель 2026-07-19) */
  font-size:8px; letter-spacing:.09em; text-transform:uppercase;
  color:#ffd98a; text-shadow:0 0 10px rgba(255,217,138,.22);
  opacity:0; }
#twinfx.fx-b.play .tfx-cline{ animation:tfxCline 240ms var(--e-name) both; }
#twinfx.fx-b .tfx-visa.v-cosmic .tfx-visaname{ overflow:visible; white-space:normal; }
/* iPhone SE 1 (320pt): колонки виз ~58px, имя «Lana Del Rey» в одну строку упиралось в соседей —
   колонка имени почти по ширине визы, длинное имя переносится */
@media (max-width:340px){
  #twinfx.fx-b .tfx-visa.v3 .tfx-visaname{ width:calc(100% + 4px); margin-left:calc(-50% - 2px); }
}   /* плашка-строка не режется рамкой имени */
@keyframes tfxCline{ from{opacity:0; transform:translateY(4px) rotate(var(--vtilt,0deg))} to{opacity:.92; transform:rotate(var(--vtilt,0deg))} }


#twinfx.fx-b .tfx-visa.v-cosmic.v-compact .tfx-cline{
  margin-top:3px; font-size:7.5px; letter-spacing:.05em; }
#twinfx.fx-b .tfx-visa.v-compact .tfx-cstar{
  width:13px; height:13px; top:-6px; margin-left:-6.5px; font-size:6.5px; }

/* reduced motion: .rm глушит все анимации → статичные конечные состояния */
#twinfx.fx-b.rm .tfx-visa.v-cosmic::before{ opacity:1; }
#twinfx.fx-b.rm .tfx-cstar{ opacity:1; }
#twinfx.fx-b.rm .tfx-cline{ opacity:.92; }

/* ГЛИФ ЗНАКА — SVG-ШТРИХИ ВМЕСТО ЮНИКОД-СИМВОЛА (?v=455). Символ с background-clip:text
   в Safari рендерился эмодзи и заливался золотым КВАДРАТОМ (веб-поверхность). Размер
   наследуется от font-size контейнера — все существующие инлайновые размеры работают. */
#twinfx .fx-glyph-svg, #twin-fx .fx-glyph-svg{ width:1em; height:1em; display:block; margin:0 auto; }
#twinfx .fx-brand .fx-glyph-svg{ display:inline-block; vertical-align:-0.14em; }
/* градиентные клипы больше не красят (внутри svg, не текст) — гасим, чтобы фон-градиент
   не проступил прямоугольником под прозрачным цветом */
#twinfx.fx-b .tfx-sglyph, #twinfx .fx2-glyph, #twin-fx .tfx-glyphtx{
  background:none; -webkit-background-clip:initial; background-clip:initial; color:inherit; }