/* ============================================================
   Dilara & Harun — sinematik açılış sekansı
   Katmanlar, hareket ve tipografi
   ============================================================ */

:root{
  /* gece */
  --night-1:#0A1024; --night-2:#101A38; --night-3:#18234A;
  --aubergine:#2A1738; --mulberry:#1E0E2A; --plum-deep:#3A1F45;
  /* ışık ve kâğıt */
  --lilac-pale:#CDB8DF; --lilac:#A98FC4; --powder:#E9C6D1; --dust-pink:#D6A5B6;
  --pearl:#F5F0F7; --pearl-soft:rgba(245,240,247,.62);
  --amber:#F1C68C; --gold:#E7D0A6;
  /* metin */
  --ink:#3B2244; --ink-strong:#2E1638; --ink-soft:#553A5E;

  /* ölçüler (JS ayrıca --card-y0/--card-y1/--card-hide yazar) */
  --env-w: clamp(360px, 40vw, 600px);
  --env-h: calc(var(--env-w) / 1.8046);
  --card-w: clamp(280px, 27vw, 404px);
  --card-s0: .9;    /* JS ölçüp yeniden yazar */
  --card-y0: 14px;
  --card-y1: 0px;
  --card-hide: 0px;
  --px:0px; --py:0px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  height:100%; margin:0; padding:0;
  background:var(--night-1);
  overflow:hidden; overscroll-behavior:none;
  font-family:"Caudex",Georgia,serif; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.defs{position:absolute; width:0; height:0; overflow:hidden}

.invite{
  position:fixed; inset:0; overflow:hidden;
  transition:opacity 1.05s cubic-bezier(.4,0,.35,1);
}
.invite.is-gone{opacity:0; pointer-events:none}

/* ════════════ ORMAN ════════════
   Zemin: gerçek görsel (assets/img/forest.jpg)
   Hareket: yavaş kamera, sis akışı, ateş böcekleri, parallax — hepsi kodla.
   ════════════════════════════════ */
.scene{position:absolute; inset:0; overflow:hidden; pointer-events:none;
  transform:scale(1); transition:transform 1.25s cubic-bezier(.3,.1,.3,1), opacity 1.25s ease}
.invite.is-out .scene{transform:scale(1.03)}

.plane{position:absolute; inset:0;
  transform:translate3d(calc(var(--px) * var(--k)), calc(var(--py) * var(--k)), 0)}

/* görsel yüklenene kadar altta duran zemin */
.sky{position:absolute; inset:0; background:
  linear-gradient(180deg,#0B1424 0%,#132340 34%,#1D3352 58%,#131F33 88%,#0C1526 100%)}

/* ── arka plan görseli + neredeyse fark edilmeyen kamera yaklaşması ── */
.photo{position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  transform-origin:50% 58%; will-change:transform; backface-visibility:hidden;
  animation:kenBurns 34s cubic-bezier(.28,.42,.3,1) forwards}
@keyframes kenBurns{from{transform:scale(1.004)} to{transform:scale(1.075)}}
@media (orientation:landscape){ .photo{object-position:50% 64%} }

/* ── renk düzeltme: üstü ve altı hafif koyultarak yazıya zemin açar ── */
.grade{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,12,24,.72) 0%, rgba(7,12,24,.46) 9%, rgba(7,12,24,.18) 22%, rgba(0,0,0,0) 42%),
    linear-gradient(0deg,   rgba(6,10,20,.34) 0%, rgba(6,10,20,.08) 22%, rgba(0,0,0,0) 40%),
    radial-gradient(120% 70% at 50% 52%, rgba(0,0,0,0) 40%, rgba(8,13,25,.2) 82%, rgba(6,10,20,.34) 100%)}

/* ── sis akışı: görselin üstünde çok yavaş süzülen ince katmanlar ── */
.haze{position:absolute; left:-36%; width:172%; pointer-events:none; mix-blend-mode:screen}
.haze--a{top:8%; height:58%;
  background:radial-gradient(56% 52% at 32% 52%, rgba(150,176,218,.1), rgba(0,0,0,0) 66%),
             radial-gradient(46% 44% at 74% 42%, rgba(170,190,226,.075), rgba(0,0,0,0) 68%);
  animation:driftA 104s ease-in-out infinite}
.haze--b{top:38%; height:58%;
  background:radial-gradient(60% 48% at 54% 46%, rgba(162,186,224,.11), rgba(0,0,0,0) 66%),
             radial-gradient(44% 42% at 20% 58%, rgba(146,170,212,.08), rgba(0,0,0,0) 68%);
  animation:driftB 82s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:translate3d(-2.6%,0,0)} 50%{transform:translate3d(2.6%,-.9%,0)}}
@keyframes driftB{0%,100%{transform:translate3d(3.2%,.5%,0)} 50%{transform:translate3d(-3.2%,-.7%,0)}}

/* ── zarf/kartın duracağı merkez: çok hafif sakinleştirme ──
   Sekans açıldığında kart metninin kontrastını güvenceye alır. */
.stageCalm{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 30% at 50% 44%, rgba(10,16,30,.26) 0%, rgba(10,16,30,.12) 52%, rgba(0,0,0,0) 82%)}

.vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(128% 90% at 50% 52%, rgba(0,0,0,0) 46%, rgba(6,10,20,.22) 80%, rgba(4,7,16,.42) 100%)}

.grain{position:absolute; inset:-6%; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}

.bg{position:absolute; inset:0; width:100%; height:100%; display:block}
.motes{display:none}

/* ════════════ ARKA PLAN İNCELEME MODU ════════════
   Sekans öğeleri kodda duruyor, yalnızca geçici olarak gizli. */
body.bg-only .trail,
body.bg-only .rig,
body.bg-only .skip,
body.bg-only .veil,
body.bg-only .mainstage{display:none !important}

/* ════════════ IŞIK AKIŞI ════════════ */
.trail{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  transition:opacity .9s ease}
.invite.is-out .trail{opacity:0}

/* ════════════ ZARF ════════════
   Dört katman, hepsi 1256×696 birimlik aynı koordinat sisteminde:
     env__back   iç astar                       z 0
     card-slot   mektup (astar ile ön kat arası) z 2
     env__front  yan kanatlar + alt kanat        z 3
     env__flap   üst kapak, menteşeli            z 4  → açılınca z 1
   Kenar dokusu (#deckle) kullanıcı uzayında tanımlı; bu sayede
   katmanların ortak kenarları aynı biçimde dalgalanır.
   ═══════════════════════════════ */
.rig{
  position:absolute; left:0; top:0;
  width:var(--env-w); height:var(--env-h);
  margin-left:calc(var(--env-w) / -2);
  transform-origin:50% 40%;
  opacity:0; pointer-events:none; will-change:transform;
}
.rig.is-on{opacity:1}

.env__svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}

.env__back{z-index:0;
  filter:drop-shadow(0 16px 26px rgba(8,6,14,.5)) drop-shadow(0 3px 7px rgba(8,6,14,.3))}

.card-slot{position:absolute; left:-10%; right:-10%; top:-240vh; bottom:1.5%; z-index:2; overflow:hidden}

.env__front{z-index:3}

.env__flap{position:absolute; inset:0; z-index:4; perspective:1400px; perspective-origin:50% 30%}
.env__hinge{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 0; will-change:transform}
.env__face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.env__face--front{filter:drop-shadow(0 3px 5px rgba(40,22,30,.32))}
.env__face--back{transform-origin:50% 0; transform:rotateX(180deg)}

/* kapak: üst kenarından arkaya doğru açılır */
.rig.is-open .env__hinge{animation:flapOpen .8s cubic-bezier(.55,.02,.22,1) forwards}
@keyframes flapOpen{from{transform:rotateX(0deg)} to{transform:rotateX(176deg)}}
.rig.is-flapback .env__flap{z-index:1}

/* mühür: kırılmaz; ışık geçer, sonra yumuşakça kaybolur */
.seal{transition:opacity .37s ease}
.rig.is-unsealed .seal{opacity:0}
.env__glint{
  position:absolute; left:42%; top:53.2%; width:16%; aspect-ratio:1/1;
  border-radius:50%; pointer-events:none; opacity:0; z-index:5;
  background:radial-gradient(circle at 34% 30%,
    rgba(255,238,226,.55) 0%, rgba(255,222,204,.22) 38%, rgba(255,210,190,0) 70%);
  mix-blend-mode:screen;
}
.rig.is-sheen .env__glint{animation:sealGlint .59s cubic-bezier(.3,.1,.3,1)}
@keyframes sealGlint{
  0%  {opacity:0; transform:translate(-16%,-12%) scale(.85)}
  42% {opacity:1}
  72% {opacity:.7}
  100%{opacity:0; transform:translate(16%,12%) scale(1.05)}}

/* ── SVG doku sınıfları ── */
.pt-fibre  {fill:none; stroke:#DCCDB4; stroke-width:1.1; stroke-linecap:round; opacity:.55}
.pt-creaseL{fill:none; stroke:#FBF7F0; stroke-width:1.4; stroke-linecap:round; opacity:.55}
.pt-creaseD{fill:none; stroke:#CDBBA6; stroke-width:1.1; stroke-linecap:round; opacity:.26}
.pt-speck  {fill:none; stroke:#B9A28C; stroke-width:1.4; stroke-linecap:round; opacity:.4}
.pt-grain  {opacity:.16; mix-blend-mode:multiply}
.pt-crumple{opacity:.42; mix-blend-mode:multiply}
.leaves{fill:#C4A6B2; stroke:#AA8797; stroke-width:.9; opacity:.34}
.mouthShadow path{fill:none; stroke:#5B3A48; stroke-width:9; opacity:.26}
.foldShadow{fill:#4E3040; opacity:.28}
.edgeLight, .edgeLight *{fill:none; stroke:#FBF7F1; stroke-width:2.2; opacity:.7}

/* ════════════ MEKTUP ════════════
   Tek yaprak pamuklu sanat kâğıdı. Çerçeve yok, panel yok; zarafet
   kâğıt dokusu, oran, tipografi ve ışıktan gelir.
   Katmanlar: shadow (temas gölgesi) → paper (doğal kenarlı kâğıt)
   → gilt (ışığa göre görünen ince yaldız) → sheen (yükselirken dolaşan
   inci ışık) → emboss (iki köşede kör kabartma) → inner (metin)
   ═══════════════════════════════ */
.card{
  position:absolute; left:50%; bottom:0; width:var(--card-w);
  transform-origin:50% 100%;
  transform:translateX(-50%) translateY(var(--card-y0)) scale(var(--card-s0));
  will-change:transform;
}
/* yumuşak, gerçekçi temas gölgesi — kâğıdın altında, filtreden bağımsız */
.card__shadow{position:absolute; inset:0; border-radius:3px; pointer-events:none;
  box-shadow:
    0 1px 2px rgba(22,12,18,.22),
    0 8px 18px rgba(22,12,18,.28),
    0 28px 54px rgba(22,12,18,.26)}
/* kâğıt: sıcak inci → kırık beyaz → çok hafif pudra; kenarlar doğal */
.card__paper{position:absolute; inset:0; border-radius:2px; pointer-events:none;
  background:
    /* pamuklu kâğıt greni */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),
    /* çok ince, seyrek lif */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .18' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 30% 18%, rgba(255,252,247,.55) 0%, rgba(255,252,247,0) 55%),
    linear-gradient(160deg,#F8F2EA 0%,#F3EBE1 45%,#EEE4D8 78%,#E9DDD1 100%);
  background-size:200px 200px, 260px 260px, 100% 100%, 100% 100%;
  filter:url(#cardEdge)}
/* kenarda yalnızca ışığa göre fark edilen mürdüm-gül kurusu yaldız */
.card__gilt{position:absolute; inset:0; border-radius:2px; pointer-events:none;
  border:1px solid rgba(178,118,136,.62);
  -webkit-mask:linear-gradient(118deg, #000 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 58%, rgba(0,0,0,.4) 78%, #000 100%);
          mask:linear-gradient(118deg, #000 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 58%, rgba(0,0,0,.4) 78%, #000 100%)}
/* yükselirken kenarlarda dolaşan sıcak inci ışık — yalnızca kenar, kısa süreli */
.card__sheen{position:absolute; inset:0; border-radius:2px; pointer-events:none; opacity:0;
  border:1.5px solid rgba(255,242,228,.95);
  box-shadow:0 0 6px rgba(255,236,218,.35);
  -webkit-mask:linear-gradient(118deg, transparent 0 34%, #000 47% 53%, transparent 66% 100%);
          mask:linear-gradient(118deg, transparent 0 34%, #000 47% 53%, transparent 66% 100%);
  -webkit-mask-size:320% 320%; mask-size:320% 320%;
  -webkit-mask-position:100% 100%; mask-position:100% 100%}
.rig.is-carding .card__sheen{animation:cardSheen 1.22s cubic-bezier(.35,.1,.3,1) .09s 1}
@keyframes cardSheen{
  0%  {opacity:0;  -webkit-mask-position:100% 100%; mask-position:100% 100%}
  18% {opacity:.9}
  82% {opacity:.7}
  100%{opacity:0;  -webkit-mask-position:0% 0%;     mask-position:0% 0%}}

/* kör kabartma: yalnızca ışık ve gölge çizgileri */
.card__emboss{position:absolute; pointer-events:none; opacity:.72; overflow:visible}
.card__emboss--tl{left:clamp(10px,1.1vw,16px); top:clamp(9px,1vw,14px); width:clamp(64px,23%,88px); height:auto}
/* sağ alt kabartma: yazının hemen altında, zarfın sağ kanadının üstünde (kartın alt payına bağlı) */
.card__emboss--br{right:16%; top:calc(100% - var(--card-hide, 0px) - clamp(22px,2.2vw,30px) + 4px); width:clamp(64px,23%,88px); height:auto}
.em-hi{stroke:rgba(255,253,248,.9)}
.em-lo{stroke:rgba(94,58,70,.34)}
/* yükselirken ışık açısı: kabartma ve gren kısa süreliğine belirginleşir */
.rig.is-carding .card__emboss{animation:embossLight 1.22s ease .07s 1}
@keyframes embossLight{0%{opacity:.35} 45%{opacity:1} 100%{opacity:.62}}
.rig.is-carding .card__paper{animation:paperLight 1.22s ease .07s 1}
@keyframes paperLight{0%{filter:url(#cardEdge) brightness(1)} 40%{filter:url(#cardEdge) brightness(1.035) contrast(1.04)} 100%{filter:url(#cardEdge) brightness(1)}}

/* metin: üstte ve altta geniş nefes */
.card__inner{position:relative; text-align:center;
  padding:clamp(42px,3.8vw,60px) clamp(22px,2.2vw,32px)
          calc(clamp(22px,2.2vw,30px) + var(--card-hide, 0px))}
/* İsimler: Cormorant Upright 600 · metin: Caudex 400 (yedek Georgia).
   Açık renkli kartta derin mürdüm-kahve tonlar. */
.card__names{margin:0; font-family:"Cormorant Upright",Georgia,serif; font-weight:600;
  font-size:clamp(30px,2.9vw,44px); line-height:1.2; letter-spacing:.02em; color:#4A2730;
  white-space:nowrap}
/* ayraç (&): isimlerle aynı aile, daha açık mürdüm tonunda */
.card__names span{font-family:inherit; font-size:.9em; color:#9A6A7C; padding:0 .1em}
.card__sep{display:block; width:26px; height:1px; margin:clamp(14px,1.4vw,20px) auto clamp(16px,1.6vw,22px);
  background:linear-gradient(90deg, rgba(158,104,124,0), rgba(158,104,124,.55) 30% 70%, rgba(158,104,124,0))}
/* kart yalnızca isimler, tarih ve saati taşır (metin yok): daha kısa, sade bir kart */
.card__date{margin:0; font-family:"Cormorant Upright",Georgia,serif; font-weight:700;
  font-size:clamp(24px,2.2vw,30px); line-height:1.2; letter-spacing:.01em; color:#4A2730}
.card__time{margin:.5em 0 0; font-family:"Caudex",Georgia,serif; font-weight:400;
  font-size:16px; line-height:1.65; letter-spacing:.06em; color:#6A4453}
@media (min-width:900px){ .card__time{font-size:18px} }

/* mektup: kontrollü, tek yönlü yükseliş; sonunda çok hafif "settle" */
.rig.is-carding .card{animation:cardRise 1.33s cubic-bezier(.3,.08,.2,1) forwards}
@keyframes cardRise{
  0%  {transform:translateX(-50%) translateY(var(--card-y0)) scale(var(--card-s0))}
  84% {transform:translateX(-50%) translateY(calc(var(--card-y1) - 7px)) scale(1.006)}
  100%{transform:translateX(-50%) translateY(var(--card-y1)) scale(1)}}

/* ── odak ── */
.stageGlow{position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5;
  transition:opacity .79s ease;
  background:radial-gradient(40% 28% at 50% 44%, rgba(255,212,138,.2) 0%, rgba(255,186,108,.09) 44%, rgba(0,0,0,0) 76%)}
.focusVeil{position:absolute; inset:0; pointer-events:none; opacity:0; z-index:4;
  transition:opacity .86s ease;
  background:radial-gradient(58% 42% at 50% 46%, rgba(0,0,0,0) 38%, rgba(8,12,24,.3) 74%, rgba(6,9,20,.5) 100%)}
.invite.is-focus .stageGlow{opacity:1}
.invite.is-focus .focusVeil{opacity:1}

/* geçiş */
.invite.is-out .card{animation:cardDissolve 1.25s cubic-bezier(.36,0,.5,1) forwards}
@keyframes cardDissolve{
  0%  {transform:translateX(-50%) translateY(var(--card-y1)) scale(1); filter:blur(0px) brightness(1); opacity:1}
  38% {                                                                filter:blur(1.4px) brightness(1.2); opacity:.94}
  100%{transform:translateX(-50%) translateY(calc(var(--card-y1) - 16px)) scale(1.08);
       filter:blur(12px) brightness(1.32); opacity:0}}
.invite.is-out .env__back,
.invite.is-out .env__front,
.invite.is-out .env__flap{opacity:0; transition:opacity .9s ease}

/* ════════════ TARİH / GEÇ ════════════ */
.dateMark{position:absolute; left:50%; top:clamp(24px,5.2vh,58px); margin:0; transform:translateX(-50%);
  font-weight:400; font-size:clamp(11px,.86vw,13.5px); letter-spacing:.24em; text-indent:.24em;
  color:rgba(244,238,232,.88); white-space:nowrap; pointer-events:none;
  text-shadow:0 1px 10px rgba(6,10,20,.85), 0 0 26px rgba(6,10,20,.6);
  opacity:0; animation:dateIn 1.1s ease .38s forwards; transition:opacity .7s ease}
@keyframes dateIn{to{opacity:1}}
.invite.is-out .dateMark{opacity:0; animation:none}

/* zarfı açma daveti: zarf oturunca hemen altında belirir, nefes alır gibi hafifçe söner-parlar */
.tapHint{position:absolute; left:50%; top:var(--tap-y, 70%); z-index:25; margin:0; padding:12px 18px;
  transform:translate(-50%, 6px); width:max-content; max-width:calc(100vw - 24px); text-align:center; text-wrap:balance;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  font-family:inherit; font-weight:400; font-size:clamp(12.5px,1.02vw,15px); letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase; color:#F6F0EA; background:none; border:0;
  text-shadow:0 1px 3px rgba(6,10,20,.9), 0 1px 12px rgba(6,10,20,.85), 0 0 28px rgba(6,10,20,.6), 0 0 16px rgba(200,160,184,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s}
.invite.is-tapwait{cursor:pointer}
.invite.is-tapwait .tapHint{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%, 0);
  transition:opacity 1s ease, transform 1s ease, visibility 0s; animation:tapBreath 3.2s ease-in-out 1.2s infinite}
@keyframes tapBreath{0%,100%{opacity:1} 50%{opacity:.62}}
.tapHint:focus-visible{outline:1px solid rgba(205,184,223,.5); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .invite.is-tapwait .tapHint{animation:none} }

.skip{position:absolute; top:clamp(14px,2.2vh,24px); right:clamp(14px,2.2vw,28px);
  display:inline-flex; align-items:center; gap:.45em; padding:6px 2px 5px;
  font-family:inherit; font-weight:400; font-size:11px; letter-spacing:.14em; text-indent:.14em;
  color:rgba(244,238,232,.86); background:none; border:0;
  text-shadow:0 1px 8px rgba(6,10,20,.8);
  border-bottom:1px solid rgba(245,240,247,.16); cursor:pointer;
  transition:color .35s ease,border-color .35s ease; z-index:30}
.skip span{font-size:13px; letter-spacing:0; text-indent:0; transform:translateY(-.5px)}
.skip:hover,.skip:focus-visible{color:rgba(244,238,232,.96); border-color:rgba(245,240,247,.4)}
.skip:focus-visible{outline:1px solid rgba(205,184,223,.5); outline-offset:4px}
.invite.is-out .skip{opacity:0; pointer-events:none; transition:opacity .5s ease}

.veil{position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity 1.2s cubic-bezier(.4,0,.4,1);
  background:radial-gradient(96% 72% at 50% 48%, rgba(26,18,48,.5) 0%, rgba(16,10,32,.78) 62%, rgba(10,6,22,.9) 100%)}
.invite.is-out .veil{opacity:.72}

/* ════════════ GEÇİCİ ANA EKRAN ════════════ */
.mainstage{position:fixed; inset:0; display:grid; place-items:center; z-index:40;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 1.1s cubic-bezier(.32,0,.3,1), visibility 0s linear 1.1s}
.mainstage.is-in{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s,0s}
.mainstage__inner{text-align:center; padding:0 24px; transform:translateY(12px);
  transition:transform 1.3s cubic-bezier(.24,.6,.26,1)}
.mainstage.is-in .mainstage__inner{transform:translateY(0)}
.ms-date{margin:0 0 clamp(18px,2.4vh,30px); font-weight:400; font-size:clamp(11px,.86vw,13.5px);
  letter-spacing:.24em; text-indent:.24em; color:rgba(244,238,232,.88)}
.ms-names{margin:0 0 clamp(20px,2.8vh,34px); font-family:"Cormorant Upright",Georgia,serif;
  font-weight:600; font-size:clamp(34px,5.6vw,72px); line-height:1.1; letter-spacing:.03em;
  color:#F2EAF3}
.ms-note{margin:0 auto; max-width:30ch; font-weight:400; font-size:clamp(12.5px,1vw,14.5px);
  line-height:1.8; letter-spacing:.05em; color:rgba(240,232,244,.46)}

/* ════════════ MOBİL ════════════ */
@media (max-width:760px){
  :root{
    --env-w: min(94vw, 420px);
    --card-w: min(74vw, 304px);
  }
  .dateMark{letter-spacing:.2em; text-indent:.2em}
}
@media (max-width:420px){
  .card__inner{padding-left:18px; padding-right:18px}
  .card__names{font-size:29px}
  .card__date{font-size:23px}
}
@media (max-height:620px) and (orientation:landscape){
  :root{--env-w:min(46vh * 1.8, 520px); --card-w:min(40vw,340px)}
  .card__names{font-size:28px}
  .card__date{font-size:22px}
  .card__inner{padding-top:26px}
  .dateMark{top:14px}
}

/* ════════════ AZALTILMIŞ HAREKET ════════════ */
@media (prefers-reduced-motion:reduce){
  .photo,.haze--a,.haze--b,
  .rig.is-carding .card,
  .rig.is-carding .card__sheen,
  .rig.is-carding .card__emboss,
  .rig.is-carding .card__paper,
  .rig.is-open .env__hinge,
  .rig.is-sheen .env__glint{animation:none !important}
  .scene{transition:none}

  .dateMark{animation:none; opacity:1; transition:opacity .6s ease}
  .invite.is-out .card{animation:none; opacity:0; transition:opacity .7s ease}
  .rm .card{transform:translateX(-50%) translateY(var(--card-y1)) scale(1)}
  .rm .env__hinge{transform:rotateX(176deg)}
  .rm .env__flap{z-index:1}
  .rm .seal{opacity:0; transition:none}
  .rm .trail{display:none}
}