/* ═══════════════════════════════════════════════════════════
   COREVERSE — "With Love" letter transition (hero → New Launch)
   Storyboard: floating sealed envelope → its aligned flap folds open while
   the open-state art crossfades in → the centered letter rises out → letter locks
   center-screen while the scene floats past → pearl clouds roll
   up into New Launch. Every layer moves only as one whole element.
   ═══════════════════════════════════════════════════════════ */

.letter-transition{
  --lp:0;                 /* section scroll progress 0..1 (lerp-smoothed) */
  --lt-veil:1;            /* white continuity veil from the hero cloud hold */
  --lt-env-opacity:0;
  --lt-env-y:7;           /* vh */
  --lt-env-scale:.95;
  --lt-env-sink:0;        /* vh — envelope + wings sink away while letter is locked */
  --lt-env-fade:1;
  --lt-open:0;            /* 0 closed → 1 open crossfade (37 → 46, seals aligned) */
  --lt-flap-rot:0deg;
  --lt-flap-opacity:1;
  --lt-wings-opacity:0;
  --lt-wings-y:6;         /* vh */
  --lt-wings-scale:.92;
  --lt-paper-opacity:0;
  --lt-paper-y:38;        /* % of its own height */
  --lt-clip-l:4%;         /* pocket fold line in the sheet's own box (left / seal / right) */
  --lt-clip-s:28%;
  --lt-clip-r:12%;
  --lt-orn-opacity:0;
  --lt-scene-y:0;         /* vh — background scenery floats up past the locked letter */
  --lt-bg-scale:1;
  --lt-logo-opacity:0;
  --lt-cloud-drift:0;     /* ambient clouds scroll drift, vh */
  --lt-bank-rise:0;
  --lt-fog:0;
  --ml-veil:1;
  --ml-early-opacity:0;
  --ml-ambient-opacity:0;
  --ml-closed-opacity:0;
  --ml-open-opacity:0;
  --ml-wings-opacity:0;
  --ml-flap-opacity:0;
  --ml-envelope-y:4svh;
  --ml-paper-opacity:0;
  --ml-paper-rise-opacity:0;
  --ml-paper-lock-opacity:0;
  --ml-paper-y:14svh;
  --ml-late-opacity:0;
  --ml-cloud-opacity:0;
  --ml-upper-cloud-opacity:0;
  --ml-lower-cloud-opacity:0;
  --ml-upper-cloud-y:8svh;
  --ml-lower-cloud-y:18svh;
  --ml-scene-y:0svh;
  --ml-flap-rot:0deg;
  --ml-fog:0;
  position:relative;
  display:block;
  height:640vh;
  height:640svh;
  overflow:clip;
  isolation:isolate;
  background:#efe4e0;
  z-index:3;
}

.letter__sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}

.letter-mobile{display:none}

.letter__bg{
  position:absolute;
  inset:0;
  background:url("../assets/letter/bg.webp") center/cover no-repeat;
  transform:scale(var(--lt-bg-scale));
  transform-origin:50% 40%;
  will-change:transform;
}
.letter__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.28),transparent 62%);
}

/* All scene imagery is positioned against a centered 16:9 cover frame. */
.letter__sticky>img,
.letter__envelope,
.letter__bank{
  position:absolute;
  left:50%;
  top:50%;
  --frame-w:max(100vw,177.7778vh);
  --frame-h:max(56.25vw,100vh);
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* ─── ornaments: float upward past the locked letter ─── */
.letter__ornament{will-change:opacity,transform}
.letter__ornament--wide{
  width:var(--frame-w);
  transform:translate(-50%,calc(-50% + var(--lt-scene-y)*-1vh));
  opacity:calc(var(--lt-orn-opacity)*.8);
  mix-blend-mode:multiply;
}
.letter__ornament--corner{
  width:calc(var(--frame-w)*.165);
  transform:translate(calc(var(--frame-w)*.319),calc(var(--frame-h)*-.474 + var(--lt-scene-y)*-1.5vh));
  opacity:var(--lt-orn-opacity);
  mix-blend-mode:multiply;
}

/* ─── ambient clouds: whole elements, autonomous breathing + upward float ─── */
.letter__cloud{opacity:.9;will-change:transform;filter:blur(.4px)}
.letter__cloud--top-right{
  width:calc(var(--frame-w)*.336);
  transform:translate(calc(var(--frame-w)*.164),calc(var(--frame-h)*-.054 + var(--lt-cloud-drift)*-1.1vh));
  animation:letterCloudDriftA 11s ease-in-out infinite alternate;
}
.letter__cloud--left{
  width:calc(var(--frame-w)*.457);
  transform:translate(calc(var(--frame-w)*-.5),calc(var(--frame-h)*-.02 + var(--lt-cloud-drift)*-.7vh));
  animation:letterCloudDriftB 13s ease-in-out -2s infinite alternate;
}
.letter__cloud--bottom-left{
  width:calc(var(--frame-w)*.568);
  transform:translate(calc(var(--frame-w)*-.5),calc(var(--frame-h)*.15 + var(--lt-cloud-drift)*-.5vh));
  animation:letterCloudDriftA 12s ease-in-out -4s infinite alternate;
}
.letter__cloud--bottom-right{
  width:calc(var(--frame-w)*.58);
  transform:translate(calc(var(--frame-w)*-.08),calc(var(--frame-h)*.11 + var(--lt-cloud-drift)*-.6vh));
  animation:letterCloudDriftB 12.5s ease-in-out -6s infinite alternate;
}
@keyframes letterCloudDriftA{from{translate:0 0}to{translate:1.6vw -1.2vh}}
@keyframes letterCloudDriftB{from{translate:0 0}to{translate:-1.8vw 1vh}}

/* ─── wings: one whole pair behind the envelope ─── */
.letter__wings{
  width:calc(var(--frame-w)*.851);
  transform:
    translate(-50%,calc(var(--frame-h)*-.378 + var(--lt-wings-y)*1vh + var(--lt-env-sink)*1.15vh))
    scale(var(--lt-wings-scale));
  transform-origin:50% 60%;
  opacity:calc(var(--lt-wings-opacity)*var(--lt-env-fade));
  will-change:transform,opacity;
  animation:letterWingsFloat 6.5s cubic-bezier(.37,0,.63,1) infinite alternate;
}
@keyframes letterWingsFloat{from{translate:0 0;rotate:-.3deg}to{translate:0 -1.4vh;rotate:.3deg}}

/* ─── the letter: sits IN FRONT of the open envelope but is clipped along the
   pocket's V-shaped fold line, so it visibly slides up out of the mouth;
   the clip releases as the envelope sinks away and the letter locks center ─── */
.letter__paper{
  z-index:6;
  width:calc(var(--frame-w)*.33);
  /* The envelope artwork's visual centre is 50.3% of the 16:9 frame.
     Match that centre instead of compensating left for the old 62.4% clip apex. */
  transform:
    translate(calc(-50% + var(--frame-w)*.003),calc(var(--frame-h)*-.302 + var(--lt-paper-y)*1%));
  opacity:var(--lt-paper-opacity);
  clip-path:polygon(0 0,100% 0,100% var(--lt-clip-r,110%),50% var(--lt-clip-s,110%),0 var(--lt-clip-l,110%));
  will-change:transform,opacity,clip-path;
  filter:drop-shadow(0 26px 34px rgba(64,52,50,.18));
}

/* ─── envelope group (37 closed ⇄ 46 open — complete artworks, bottom-aligned) ─── */
.letter__envelope{
  z-index:5;
  width:var(--frame-w);
  height:var(--frame-h);
  transform:translate(-50%,calc(-50% + var(--lt-env-y)*1vh + var(--lt-env-sink)*1vh)) scale(var(--lt-env-scale));
  transform-origin:50% 55%;
  opacity:calc(var(--lt-env-opacity)*var(--lt-env-fade));
  will-change:transform,opacity;
  animation:letterEnvFloat 7.5s cubic-bezier(.37,0,.63,1) infinite alternate;
}
@keyframes letterEnvFloat{from{translate:0 0}to{translate:0 -1.2vh}}
.letter__envelope img{
  position:absolute;
  user-select:none;
  -webkit-user-drag:none;
}
.letter__env-closed{
  left:29.5%;top:24.3%;width:41.6%;
  opacity:calc(1 - var(--lt-open));
  filter:drop-shadow(0 30px 38px rgba(70,56,52,.2));
}
.letter__env-open{
  /* scaled so its body is exactly the closed body's width, bottoms aligned —
     the front (With Love + seal) then stays pixel-still through the crossfade */
  left:29.5%;top:.7%;width:41.6%;
  opacity:var(--lt-open);
  filter:drop-shadow(0 30px 38px rgba(70,56,52,.2));
}
.letter__flap{
  /* 34.png and the baked flap in 37.png share the same source scale.
     These values align their opaque pixels exactly, so the moving layer is
     invisible as a separate copy until it actually begins to fold. */
  left:29.552%;top:24.3%;width:41.5%;
  transform:perspective(1400px) rotateX(var(--lt-flap-rot));
  transform-origin:50% 4%;
  opacity:var(--lt-flap-opacity);
  will-change:transform,opacity;
}
.letter__seal{
  left:46.5%;top:50.4%;width:9.2%;
  opacity:calc(1 - var(--lt-open));
  filter:drop-shadow(0 8px 12px rgba(70,56,52,.24));
}
/* Decorations used only while the complete closed artwork is visible. */
.letter__flap-logo{
  left:44%;top:30.5%;width:12%;
  mix-blend-mode:multiply;
  opacity:calc(var(--lt-flap-opacity)*.9);
}

/* ─── brand mark floats above the opened envelope ─── */
.letter__sticky>.letter__logo{
  z-index:7;
  top:6vh;
  width:min(200px,26vw);
  transform:translateX(-50%);
  opacity:var(--lt-logo-opacity);
  mix-blend-mode:multiply;
  will-change:opacity;
}

/* ─── rising pearl cloud bank ─── */
.letter__bank{
  z-index:8;
  width:var(--frame-w);
  height:var(--frame-h);
  transform:translate(-50%,-50%);
  will-change:transform;
}
.letter__bank-cloud{
  position:absolute;
  will-change:transform,opacity;
  opacity:calc(min(1,var(--lt-bank-rise)*3));
}
.letter__bank-cloud--a{
  left:-6%;bottom:-8%;width:62%;
  transform:translateY(calc((1 - var(--lt-bank-rise))*88vh - var(--lt-bank-rise)*4vh)) scale(calc(1 + var(--lt-bank-rise)*.34));
  animation:letterCloudDriftB 9s ease-in-out infinite alternate;
}
.letter__bank-cloud--b{
  left:34%;bottom:-10%;width:62%;
  transform:translateY(calc((1 - var(--lt-bank-rise))*102vh - var(--lt-bank-rise)*2vh)) scale(calc(1 + var(--lt-bank-rise)*.42));
  animation:letterCloudDriftA 10s ease-in-out -3s infinite alternate;
}
.letter__bank-cloud--c{
  left:-2%;bottom:-16%;width:104%;
  transform:translateY(calc((1 - var(--lt-bank-rise))*118vh)) scale(calc(1 + var(--lt-bank-rise)*.3));
  animation:letterCloudDriftB 11s ease-in-out -5s infinite alternate;
}
.letter__bank-cloud--d{
  left:-10%;bottom:-30%;width:86%;
  transform:translateY(calc((1 - var(--lt-bank-rise))*130vh)) scale(calc(1 + var(--lt-bank-rise)*.5));
  animation:letterCloudDriftA 9.5s ease-in-out -2s infinite alternate;
}
.letter__bank-cloud--e{
  right:-8%;bottom:-24%;width:44%;left:auto;
  transform:translateY(calc((1 - var(--lt-bank-rise))*124vh)) scale(calc(1 + var(--lt-bank-rise)*.55));
  animation:letterCloudDriftB 8.5s ease-in-out -6s infinite alternate;
}

/* ─── white fog finish + entry veil ─── */
.letter__fog{
  position:absolute;
  inset:-6%;
  z-index:9;
  pointer-events:none;
  opacity:var(--lt-fog);
  background:
    radial-gradient(circle at 50% 88%,#fff 0 22%,rgba(252,252,253,.97) 48%,rgba(247,247,249,.94) 76%,#f5f5f7 100%);
  filter:blur(14px);
  will-change:opacity;
}
.letter__veil{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:var(--lt-veil);
  background:#f5f5f7;
  will-change:opacity;
}

/* Keep New Drop above the transition without extending a white cloud layer
   over the preceding content. */
.letter-transition + .drop{position:relative;z-index:4}

@media (max-width:900px){
  .letter-transition{height:560vh;height:560svh}
  .letter__sticky>.letter__logo{width:min(150px,30vw)}
}

@media (max-width:700px){
  .letter-transition{
    height:520vh;
    height:520svh;
    background:#eee8e5;
  }
  .letter__sticky>.letter__bg,
  .letter__sticky>.letter__ornament,
  .letter__sticky>.letter__cloud,
  .letter__sticky>.letter__wings,
  .letter__sticky>.letter__paper,
  .letter__sticky>.letter__envelope,
  .letter__sticky>.letter__logo,
  .letter__sticky>.letter__bank,
  .letter__sticky>.letter__fog,
  .letter__sticky>.letter__veil{display:none}

  .letter-mobile{
    position:absolute;
    display:block;
    inset:0;
    overflow:hidden;
    isolation:isolate;
    background:#eee8e5;
  }
  .letter-mobile__layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
    will-change:opacity,transform;
  }

  .letter-mobile__layer--29{z-index:0}
  .letter-mobile__layer--36{z-index:1;opacity:var(--ml-upper-cloud-opacity);transform:translate3d(0,var(--ml-upper-cloud-y),0)}

  .letter-mobile__layer--25,
  .letter-mobile__layer--28{z-index:2;opacity:var(--ml-ambient-opacity)}
  .letter-mobile__layer--25{animation:mobileLetterCloudA 10s ease-in-out infinite alternate}
  .letter-mobile__layer--28{animation:mobileLetterCloudB 11s ease-in-out -.8s infinite alternate}

  .letter-mobile__layer--37,
  .letter-mobile__layer--44,
  .letter-mobile__layer--46{
    opacity:var(--ml-upper-cloud-opacity);
    transform:translate3d(0,var(--ml-upper-cloud-y),0);
  }
  .letter-mobile__layer--37{z-index:3;animation:mobileLetterCloudA 9s ease-in-out infinite alternate}
  .letter-mobile__layer--44{z-index:4;animation:mobileLetterCloudB 9.5s ease-in-out -.5s infinite alternate}
  .letter-mobile__layer--46{z-index:5;animation:mobileLetterCloudA 12s ease-in-out -2.8s infinite alternate}

  .letter-mobile__layer--38,
  .letter-mobile__layer--40,
  .letter-mobile__layer--43,
  .letter-mobile__layer--45,
  .letter-mobile__layer--48{
    opacity:var(--ml-lower-cloud-opacity);
    transform:translate3d(0,var(--ml-lower-cloud-y),0);
  }
  .letter-mobile__layer--38{z-index:14;animation:mobileLetterCloudB 10.5s ease-in-out -1.2s infinite alternate}
  .letter-mobile__layer--40{z-index:15;animation:mobileLetterCloudA 11s ease-in-out -2s infinite alternate}
  .letter-mobile__layer--43{z-index:16;animation:mobileLetterFloatA 10s ease-in-out infinite alternate}
  .letter-mobile__layer--45{z-index:17;animation:mobileLetterFloatB 11s ease-in-out -.7s infinite alternate}
  .letter-mobile__layer--48{z-index:18;animation:mobileLetterCloudB 10s ease-in-out -1.7s infinite alternate}

  .letter-mobile__layer--23{
    z-index:6;
    opacity:var(--ml-wings-opacity);
    transform:translate3d(0,var(--ml-envelope-y),0);
    animation:mobileLetterWings 7s ease-in-out infinite alternate;
  }
  .letter-mobile__layer--26{
    z-index:7;
    opacity:var(--ml-closed-opacity);
    transform:translate3d(0,var(--ml-envelope-y),0);
    animation:mobileLetterEnvelope 7.5s ease-in-out infinite alternate;
  }
  .letter-mobile__layer--24{
    z-index:8;
    opacity:var(--ml-flap-opacity);
    transform-origin:50% 39.25%;
    transform:translate3d(0,var(--ml-envelope-y),0) perspective(1200px) rotateX(var(--ml-flap-rot));
  }
  .letter-mobile__layer--27{
    z-index:9;
    opacity:var(--ml-closed-opacity);
    transform:translate3d(0,var(--ml-envelope-y),0);
    animation:mobileLetterEnvelope 7.5s ease-in-out infinite alternate;
  }
  .letter-mobile__layer--39{
    z-index:10;
    opacity:var(--ml-open-opacity);
    transform:translate3d(0,var(--ml-envelope-y),0);
    animation:mobileLetterEnvelope 7.5s ease-in-out infinite alternate;
  }
  .letter-mobile__layer--49{
    z-index:12;
    opacity:var(--ml-paper-opacity);
    transform:translate3d(0,var(--ml-paper-y),0);
    filter:drop-shadow(0 20px 28px rgba(62,50,48,.12));
  }
  .letter-mobile__layer--42{
    display:none;
  }
  .letter-mobile__fog{
    position:absolute;
    z-index:30;
    inset:-12%;
    opacity:var(--ml-fog);
    pointer-events:none;
    background:
      radial-gradient(ellipse at 22% 74%,rgba(255,255,255,.98) 0 20%,transparent 47%),
      radial-gradient(ellipse at 78% 68%,#fff 0 25%,transparent 54%),
      linear-gradient(to bottom,transparent 4%,rgba(255,255,255,.9) 52%,#fff 88%);
    filter:blur(15px);
    will-change:opacity;
  }
  .letter-mobile::after{
    content:"";
    position:absolute;
    z-index:40;
    inset:0;
    opacity:var(--ml-veil);
    pointer-events:none;
    background:#f5f5f7;
  }

  @keyframes mobileLetterCloudA{
    from{translate:-5px 5px;rotate:-.12deg}
    to{translate:6px -7px;rotate:.16deg}
  }
  @keyframes mobileLetterCloudB{
    from{translate:6px -4px;rotate:.14deg}
    to{translate:-5px 7px;rotate:-.16deg}
  }
  @keyframes mobileLetterFloatA{
    from{translate:-3px 4px}
    to{translate:4px -5px}
  }
  @keyframes mobileLetterFloatB{
    from{translate:4px -3px}
    to{translate:-4px 5px}
  }
  @keyframes mobileLetterWings{
    from{translate:0 4px;scale:.99}
    to{translate:0 -7px;scale:1.01}
  }
  @keyframes mobileLetterEnvelope{
    from{translate:0 3px;rotate:-.08deg}
    to{translate:0 -5px;rotate:.08deg}
  }
  @keyframes mobileLetterPaper{
    from{translate:0 2px}
    to{translate:0 -4px}
  }
}

@media (prefers-reduced-motion:reduce){
  .letter-transition{height:100vh;height:100svh}
  .letter__wings,.letter__envelope,.letter__cloud,.letter__bank-cloud,.letter-mobile__layer{animation:none!important}
}