/* One sequence: left note, right note, opening letter, then warm sparkles. */
.hero-visual { --letter-rise:-100px; }
.hero-visual.sequence-ready .floating-note { animation:none; opacity:0; scale:.3; translate:var(--pop-x) 14px; }
.hero-visual .note-one { --pop-x:-26px; transform-origin:25% 90%; }
.hero-visual .note-two { --pop-x:26px; transform-origin:75% 90%; }
.hero-visual.sequence-playing .floating-note { animation:note-puff .6s cubic-bezier(.2,.8,.2,1) both; }
.hero-visual.sequence-playing .note-one { animation-delay:.1s; }
.hero-visual.sequence-playing .note-two { animation-delay:.65s; }
.hero-visual.sequence-complete .floating-note { opacity:1; scale:1; translate:0 0; }
@keyframes note-puff {
  0% { opacity:0; scale:.3; translate:var(--pop-x) 14px; }
  58% { opacity:1; scale:1.13; translate:0 -4px; }
  80% { scale:.96; translate:0 2px; }
  100% { opacity:1; scale:1; translate:0 0; }
}
.hero-visual.sequence-ready .letter {
  opacity:0!important; transform:translateY(70px)!important;
  transition:transform .9s cubic-bezier(.2,1.08,.3,1) .18s,opacity .35s .18s;
}
.hero-visual.sequence-ready .is-open .letter { opacity:1!important; transform:translateY(var(--letter-rise)) rotate(4deg)!important; }
.hero-visual.sequence-ready .mail-scene:not(.is-open) .letter { visibility:hidden!important; opacity:0!important; transition:none!important; }
.hero-visual.sequence-ready .mail-scene:not(.is-open) .envelope-flap { transform:rotateX(180deg)!important; }
.hero-visual.sequence-ready .mail-scene.is-open .envelope-flap { transform:rotateX(0)!important; }
.hero-visual .letter:after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(110deg,transparent 35%,#fff5cc99 49%,#ffffffba 51%,transparent 65%);
  background-size:260% 100%;
}
.hero-visual.is-sparkling .letter:after { animation:letter-shine 1.4s ease-out .3s both; }
@keyframes letter-shine {
  0% { background-position:100% 0; opacity:0; }
  20%,70% { opacity:1; }
  100% { background-position:0 0; opacity:0; }
}
.mail-sparkles { position:absolute; inset:-120px -24px 8px; z-index:7; pointer-events:none; }
.mail-sparkles i {
  position:absolute; left:var(--x); top:var(--y); width:var(--size,22px); height:var(--size,22px);
  background:#fffbed; opacity:0; filter:drop-shadow(0 0 5px #edb552);
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
}
.mail-sparkles i:nth-child(1) { --x:4%; --y:33%; --dx:-13px; --dy:-30px; --delay:.18s; --size:24px; }
.mail-sparkles i:nth-child(2) { --x:77%; --y:9%; --dx:16px; --dy:-22px; --delay:.32s; --size:30px; }
.mail-sparkles i:nth-child(3) { --x:38%; --y:1%; --dx:-8px; --dy:-18px; --delay:.5s; --size:17px; }
.mail-sparkles i:nth-child(4) { --x:87%; --y:47%; --dx:18px; --dy:-27px; --delay:.65s; --size:23px; }
.mail-sparkles i:nth-child(5) { --x:10%; --y:63%; --dx:-14px; --dy:-24px; --delay:.8s; --size:15px; }
.mail-sparkles i:nth-child(6) { --x:57%; --y:22%; --dx:9px; --dy:-35px; --delay:.95s; --size:19px; }
.is-sparkling .mail-sparkles i { animation:letter-sparkle 1.35s ease-out var(--delay) both; }
@keyframes letter-sparkle {
  0% { opacity:0; translate:0 12px; scale:.15; rotate:-25deg; }
  26% { opacity:1; scale:1.2; }
  55% { opacity:1; scale:.85; }
  100% { opacity:0; translate:var(--dx) var(--dy); scale:.2; rotate:55deg; }
}
.hero-visual .plus-one { width:32px; height:32px; opacity:.75; }
.hero-visual.is-sparkling .plus-one { animation:quiet-twinkle 1.8s ease-in-out .3s; }
@keyframes quiet-twinkle { 50% { scale:1.3; rotate:45deg; opacity:1; } }

/* Match the hero's handwritten face; keep this three-line heading static. */
.feelings .section-heading h2.feelings-title { font-family:OnpuriCasualHand,cursive; font-weight:400; letter-spacing:0; line-height:1.55; }
.feelings-title>span { display:block; width:fit-content; max-width:100%; margin-inline:auto; white-space:nowrap; }

/* Person images animate as whole compositions, keeping captions aligned. */
.hero-nurse img { animation:none; }
.person-motion { transform-origin:50% 50%; }
.people-motion-ready .person-motion:not(.portrait-visible) { opacity:0; translate:0 24px; scale:.97; }
.person-motion.portrait-visible { animation:portrait-arrive 1.5s cubic-bezier(.2,.7,.2,1) both; }
.hero-nurse.person-motion { transform-origin:80% 100%; }
.hero-nurse.person-motion.portrait-visible { animation-duration:2s; }
@keyframes portrait-arrive {
  from { opacity:0; translate:0 28px; scale:.96; filter:blur(4px); }
  to { opacity:1; translate:0 0; scale:1; filter:blur(0); }
}
@keyframes gentle-fade { from { opacity:0; } to { opacity:1; } }
@media(max-width:800px) { .hero-visual { --letter-rise:-75px; } .mail-sparkles { inset:-90px -18px 8px; } .hero-visual .plus-one { width:26px; height:26px; } }
@media(prefers-reduced-motion:reduce) {
  .hero-visual.sequence-playing .floating-note { animation-name:gentle-fade; scale:1; translate:0 0; }
  .hero-visual.sequence-ready .letter { transform:translateY(var(--letter-rise)) rotate(4deg)!important; transition:opacity .7s!important; }
  .hero-visual.sequence-ready .envelope-flap { transform:rotateX(0)!important; transition:none!important; }
  .person-motion.portrait-visible { animation-name:gentle-fade; translate:0 0; scale:1; filter:none; }
  .hero-visual .mail-sparkles,.hero-visual .letter:after { display:none; }
  .hero-visual.is-sparkling .plus-one { animation:none; }
}
.motion-paused .hero-visual.sequence-ready .floating-note { animation:none!important; opacity:1; scale:1; translate:0 0; }
.motion-paused .hero-visual.sequence-ready .letter { opacity:1!important; transform:translateY(var(--letter-rise)) rotate(4deg)!important; transition:none!important; }
.motion-paused .mail-sparkles,.motion-paused .hero-visual .letter:after { display:none; }
.motion-paused .hero-visual .plus-one { animation:none; }
.motion-paused .person-motion { animation:none!important; opacity:1!important; translate:0 0!important; scale:1!important; filter:none!important; }

/* A hopeful morning, immediately after the change in perspective. */
.ward-arrival { width:calc(100% - 48px); max-width:1100px; margin:28px auto 0; overflow:hidden; border-radius:14px; }
.ward-arrival img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:60% 0%; mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 85%,transparent 100%); }
.ward-arrival.person-motion.portrait-visible { animation:ward-morning-arrive 2.4s cubic-bezier(.2,.65,.25,1) both; }
@keyframes ward-morning-arrive {
  from { opacity:0; translate:0 20px; scale:.985; filter:blur(5px); }
  to { opacity:1; translate:0 0; scale:1; filter:blur(0); }
}
@media(max-width:800px) {
  .ward-arrival { width:100%; margin-top:18px; border-radius:0; }
  .ward-arrival img { aspect-ratio:4/3; object-position:60% 42%; }
}
@media(prefers-reduced-motion:reduce) {
  .ward-arrival.person-motion.portrait-visible { animation:gentle-fade .8s ease-out both; translate:0 0; scale:1; filter:none; }
}

/* Keep the handwritten reassurance and its existing two-line layout. */
.js [data-fade-reveal]:not(.hero-playing) { opacity:0; }
[data-fade-reveal].hero-playing { animation:gentle-fade 1.4s ease-out both; }
.hero-visual.sequence-ready .envelope-flap { transition-duration:.5s,.1s; }
.motion-paused [data-fade-reveal] { opacity:1!important; animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  [data-fade-reveal] { opacity:1!important; animation:none!important; }
}