/* Soul — two homes, one thread.
   Layout: a slim bar; a short centred head; then full-view scenes, each one
   edge to edge: her room | his room with a crisp thin light partition in
   the middle and only the OUTER edges fading into the page. Each room has
   its own parallax (hover on desktop, scroll on phones). Single dark look. */
:root {
  --ground: #0B0810;
  --edge: rgba(255, 255, 255, .09);
  --text: #F6F1F7;
  --soft: #ABA1B4;
  --pink: #FF6F9A;
  --blue: #6FA4FF;
  --display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Figtree", "Helvetica Neue", "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }

/* ---------------------------------------------------------------- bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 14px; border-radius: 999px; background: rgba(20, 14, 26, .55); border: 1px solid var(--edge);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.brand { display: inline-flex; align-items: center; gap: 8px; font: 700 19px var(--display); letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.bar-dl { font: 600 14px var(--body); text-decoration: none; padding: 8px 16px; border-radius: 999px; background: #fff; color: #120B16; }
.bar-dl:hover { background: #FFE3EC; }

/* ---------------------------------------------------------------- heads */
.head { max-width: 820px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center;
  padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.hero .head { padding-block: clamp(30px, 6vw, 70px) clamp(26px, 4vw, 44px); }
.hero h1 { font: 700 clamp(40px, 7vw, 86px)/1 var(--display); letter-spacing: -.045em; margin: 0 0 16px; text-wrap: balance; }
.chapter .head { padding-block: clamp(80px, 12vw, 150px) clamp(24px, 3vw, 36px); }
.chapter h2 { font: 700 clamp(30px, 4.6vw, 54px)/1.04 var(--display); letter-spacing: -.035em; margin: 0 0 12px; text-wrap: balance; }
.lede { margin: 0; color: var(--soft); font-size: clamp(16px, 1.9vw, 19px); max-width: 44ch; }
.hero .lede { margin-bottom: 24px; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-note { font-size: 13px; color: var(--soft); }

.dl { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 600 17px var(--body); padding: 15px 28px; border-radius: 999px; color: #fff;
  background: linear-gradient(100deg, #FF5C8E, #EF3B4C 55%, #FF7A59); box-shadow: 0 12px 40px -12px rgba(255,80,120,.8), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .2s ease; }
.dl:hover { transform: translateY(-2px); }
.dl:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.dl svg { width: 20px; height: 20px; flex: none; }
.dl[aria-disabled="true"] { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid var(--edge); cursor: default; transform: none; }
.dl[aria-disabled="true"] svg { display: none; }

/* ---------------------------------------------------------------- scenes */
.scene { position: relative; width: 100%; aspect-ratio: 2.2 / 1; overflow: hidden; isolation: isolate; }
.room { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; --mx: 0; --my: 0; --d: 1; }
.room.her { left: 0; background: #2A1533; }
.room.him { right: 0; background: #9DB9EA; --d: .8; }
/* the outer edges fade into the page: a plain gradient on top (the page is
   one solid colour, so this matches a mask without its per-frame cost) */
.edge { position: absolute; top: 0; bottom: 0; width: 26%; z-index: 10; pointer-events: none; }
.room.her .edge { left: 0; background: linear-gradient(90deg, var(--ground) 0%, rgba(11,8,16,.65) 9%, rgba(11,8,16,0) 100%); }
.room.him .edge { right: 0; background: linear-gradient(270deg, var(--ground) 0%, rgba(11,8,16,.65) 9%, rgba(11,8,16,0) 100%); }
.partition { position: absolute; z-index: 12; top: 0; bottom: 0; left: 50%; width: 3px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.95) 20%, rgba(255,255,255,.95) 80%, rgba(255,255,255,.25));
  box-shadow: 0 0 14px 2px rgba(255,200,225,.55); }
.scene::after { content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,8,16,.4), rgba(11,8,16,0) 16%, rgba(11,8,16,0) 84%, rgba(11,8,16,.6)); }


.layer { position: absolute; inset: -4%; will-change: transform; }
.layer svg { width: 100%; height: 100%; display: block; }
.l-sky svg { filter: blur(3px); }


.l-front { z-index: 5; }
.l-fore { z-index: 8; }


.actor { position: absolute; bottom: 5%; aspect-ratio: 208 / 254; z-index: 6; transform: translateX(-50%); will-change: transform; }
.actor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.actor::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,5,20,.5), rgba(10,5,20,0)); z-index: -1; }
.actor.seated { z-index: 7; }
.actor.seated::after { display: none; }
/* the room's light on the characters */
.room.her .actor svg { filter: drop-shadow(1.2px -.6px 0 rgba(255,206,150,.38)); }
.room.him .actor svg { filter: drop-shadow(1.2px -.8px 0 rgba(255,244,214,.45)); }

.tag { position: absolute; z-index: 13; top: 18px; font: 600 12.5px var(--body); color: #fff; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(16,10,24,.62); border: 1px solid rgba(255,255,255,.14); }
.tag b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tag-her { right: calc(50% + 16px); }
.tag-him { left: calc(50% + 16px); }
.chip { position: absolute; z-index: 13; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 600 12px var(--body); color: #fff; padding: 6px 12px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: rgba(16,10,24,.62); border: 1px solid rgba(255,255,255,.14); }
.chip-her { right: calc(50% + 16px); } .chip-him { left: calc(50% + 16px); }
.chip .bar-t { width: 60px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.chip .bar-t i { display: block; height: 100%; width: 0; background: #fff; }

/* the thread + what travels on it */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 14; pointer-events: none; overflow: visible; }
.thread path { fill: none; stroke-linecap: round; }
.thread-glow { stroke: rgba(255,111,154,.45); stroke-width: 8; filter: blur(5px); }
.thread-line { stroke: rgba(255,255,255,.9); stroke-width: 1.6; stroke-dasharray: 2 8; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.traveler { position: absolute; left: 0; top: 0; z-index: 15; pointer-events: none; will-change: transform, opacity; opacity: 0; }
.bubble { font: 600 13.5px var(--body); color: #1A0F18; background: #fff; padding: 8px 13px; border-radius: 18px 18px 18px 5px; white-space: nowrap; box-shadow: 0 10px 30px rgba(255,92,142,.55); translate: -50% -50%; }
.spark { width: 28px; height: 28px; translate: -50% -50%; filter: drop-shadow(0 0 12px rgba(255,60,110,.9)); }
.trail { width: 7px; height: 7px; border-radius: 50%; background: #fff; translate: -50% -50%; box-shadow: 0 0 12px var(--pink); }
.wave { display: flex; gap: 3px; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px; translate: -50% -50%; background: #fff; box-shadow: 0 10px 30px rgba(255,92,142,.55); }
.wave i { width: 3px; border-radius: 2px; background: #EF3B4C; height: 30%; animation: bars .7s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { animation-delay: -.25s; } .wave i:nth-child(3n) { animation-delay: -.5s; }
@keyframes bars { to { height: 90%; } }
.note-fly { position: absolute; z-index: 9; font: 700 22px var(--body); color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.9); translate: -50% -50%; opacity: 0; pointer-events: none; }

/* scenery motion */
@keyframes tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lamp { 50% { opacity: .8; } }
@keyframes bokeh { to { transform: translate(16px, -12px); } }
@keyframes dust { 0% { transform: translate(0,0); opacity: 0; } 20% { opacity: .9; } 80% { opacity: .9; } 100% { transform: translate(30px,-40px); opacity: 0; } }
@keyframes beam { 50% { opacity: .7; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px) scaleY(.7); } 40% { opacity: .75; } 100% { opacity: 0; transform: translateY(-14px) scaleY(1.1); } }

/* ---------------------------------------------------------------- download */
.get { text-align: center; padding-block: clamp(80px, 12vw, 140px) 100px; display: flex; flex-direction: column; align-items: center;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.get-face { width: 110px; height: 110px; animation: bob 4s ease-in-out infinite; filter: drop-shadow(0 18px 40px rgba(255,80,120,.45)); }
@keyframes bob { 50% { transform: translateY(-8px); } }
.get h2 { font: 700 clamp(38px, 6vw, 64px)/1 var(--display); letter-spacing: -.04em; margin: 18px 0 12px; }
.get-sub { color: var(--soft); margin: 0 0 28px; max-width: 40ch; }
.dl-big { font-size: 18px; padding: 17px 34px; }
.get-status { color: var(--soft); font-size: 13.5px; min-height: 1.4em; margin: 16px 0 0; }
.foot { border-top: 1px solid var(--edge); display: flex; justify-content: space-between; font-size: 13px; color: var(--soft);
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-block: 22px; }
.foot a { text-decoration: none; }

/* ---------------------------------------------------------------- phone: her room above his */
@media (max-width: 760px) {
  .scene { aspect-ratio: 3 / 4.4; }
  .room { width: auto; left: 0 !important; right: 0 !important; height: 50%; }
  .room.her { top: 0; bottom: auto; }
  .room.him { top: auto; bottom: 0; }
  .edge { width: auto; height: 16%; left: 0 !important; right: 0 !important; }
  .room.her .edge { top: 0; bottom: auto; background: linear-gradient(180deg, var(--ground) 0%, rgba(11,8,16,.6) 38%, rgba(11,8,16,0) 100%); }
  .room.him .edge { top: auto; bottom: 0; background: linear-gradient(0deg, var(--ground) 0%, rgba(11,8,16,.6) 38%, rgba(11,8,16,0) 100%); }
  .partition { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px; translate: 0 -50%;
    background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.95) 20%, rgba(255,255,255,.95) 80%, rgba(255,255,255,.25)); }
  .scene::after { background: none; }
  .tag-her { right: auto; left: 14px; top: 20px; }
  .tag-him { left: 14px; top: calc(50% + 14px); }
  .chip-her { right: 14px; bottom: auto; top: 20px; } .chip-him { left: auto; right: 14px; top: calc(50% + 14px); bottom: auto; }
  .tag, .chip { font-size: 11px; padding: 5px 10px; } .chip .bar-t { width: 34px; }
  .bubble { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}