/* Sound Beach. Two worlds, one shoreline. Night first, everything calm. */
:root{
  --night:#06090f;
  --bone:#f3eee5;
  --mute:rgba(243,238,229,.64);
  --faint:rgba(243,238,229,.32);
  --hair:rgba(243,238,229,.22);
  --moon:#9fbfe2;
  --moon-glow:rgba(159,191,226,.30);
  --dawn:#f5b78c;
  --dawn-glow:rgba(245,183,140,.34);
  --pool:#86e2d3;
  --display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --ui:"Geist",ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.7,.18,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--bone);font-family:var(--ui);font-weight:300;-webkit-font-smoothing:antialiased;overflow:hidden}
#sb-root button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
#sb-root [hidden]{display:none!important}
#sb-root :focus-visible{outline:1px solid var(--bone);outline-offset:6px}

/* stage */
.sb{position:fixed;inset:0;display:flex;background:var(--night);--lv:0}
.panel{position:relative;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;transition:flex-grow 1.6s var(--ease)}
.panel video,.panel .poster{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;transition:filter 1.6s var(--ease),transform 8s var(--ease),opacity 1.2s ease}
.panel .poster{z-index:0}
.panel video{z-index:1;opacity:0}
.panel video.ready{opacity:1}
.panel[data-world="am"] video,.panel[data-world="am"] .poster{object-position:30% 50%}
.panel[data-world="dh"] video,.panel[data-world="dh"] .poster{object-position:45% 50%}
.panel .shade{position:absolute;inset:0;z-index:3;pointer-events:none;transition:opacity 1.6s var(--ease)}
.panel[data-world="am"] .shade{background:linear-gradient(180deg,rgba(6,9,15,.35) 0%,rgba(6,9,15,0) 30%,rgba(6,9,15,0) 55%,rgba(6,9,15,.72) 100%)}
.panel[data-world="dh"] .shade{background:linear-gradient(180deg,rgba(40,22,18,.18) 0%,rgba(40,22,18,0) 30%,rgba(40,22,18,0) 48%,rgba(30,16,12,.74) 100%)}

/* Luma, waiting at the end of the trail: same frame, layered over the dawn */
.panel .stage,.panel .tx{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transition:opacity 4.5s ease}
.panel .stage.on{opacity:1}
.panel .stage.snap{transition:none}
.panel .stage img,.panel .stage video,.panel .tx video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:45% 50%;display:block}
.panel .stage img:not([src]){visibility:hidden}
.panel .tx{transition:opacity 1.4s ease}
.panel .tx.on{opacity:1;transition:opacity .5s ease}

/* threshold state */
.sb.threshold .panel video,.sb.threshold .panel .poster{filter:saturate(.82) brightness(.82)}
.sb.threshold .panel:hover video,.sb.threshold .panel:hover .poster,.sb.threshold .panel:focus-within video,.sb.threshold .panel:focus-within .poster{filter:saturate(1) brightness(1);transform:scale(1.015)}
.sb.threshold:has(.panel:hover) .panel:not(:hover) video,.sb.threshold:has(.panel:hover) .panel:not(:hover) .poster{filter:saturate(.55) brightness(.5)}
@media (hover:hover){.sb.threshold .panel:hover{flex-grow:1.55}}

/* the dawn brightens as the tide levels up */
.sb.in-dh .panel[data-world="dh"] video,.sb.in-dh .panel[data-world="dh"] .poster{filter:none;transition:filter 4s ease,transform 8s var(--ease),opacity 1.2s ease}

#sb-root .door{position:absolute;inset:auto 0 0 0;z-index:4;padding:0 clamp(24px,4.4vw,72px) clamp(40px,8vh,88px);display:flex;flex-direction:column;gap:14px;width:100%;transition:opacity 1s var(--ease),transform 1.4s var(--ease)}
.door .name{font-family:var(--display);font-weight:400;font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:.92;letter-spacing:-.01em}
.door .name em{font-style:italic}
.door .line{font-size:clamp(.92rem,1.1vw,1.02rem);color:var(--mute);max-width:26rem;line-height:1.5}
.door .enter{display:inline-flex;align-items:center;gap:14px;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone);margin-top:8px}
.door .enter i{display:block;height:1px;width:34px;background:var(--bone);transition:width 1.1s var(--ease)}
.panel:hover .door .enter i,.panel:focus-within .door .enter i{width:84px}
.panel[data-world="am"] .door .enter i{box-shadow:0 0 12px var(--moon-glow)}
.panel[data-world="dh"] .door .enter i{box-shadow:0 0 12px var(--dawn-glow)}

.seam{position:absolute;top:0;bottom:0;left:50%;width:1px;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent 0%,var(--hair) 22%,rgba(243,238,229,.5) 50%,var(--hair) 78%,transparent 100%);transition:opacity 1s ease,left 1.6s var(--ease)}

/* chrome */
.top{position:fixed;left:0;right:0;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top,0px)) clamp(24px,4.4vw,72px) 0;pointer-events:none}
.top > *{pointer-events:auto}
.mark{font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;color:var(--bone);display:inline-flex;align-items:center;gap:12px}
.mark .dot{width:5px;height:5px;border-radius:50%;background:var(--bone);box-shadow:0 0 10px rgba(243,238,229,.8)}
.sound{display:inline-flex;align-items:center;gap:10px;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);transition:opacity .8s ease}
.sound .bars{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.sound .bars i{display:block;width:2px;height:30%;background:var(--bone);border-radius:1px;transition:height .4s ease}
.sound.on .bars i{animation:bar 1.8s ease-in-out infinite}
.sound.on .bars i:nth-child(2){animation-duration:1.3s}
.sound.on .bars i:nth-child(3){animation-duration:2.2s}
.sound.on .bars i:nth-child(4){animation-duration:1.6s}
@keyframes bar{0%,100%{height:25%}50%{height:100%}}

.foot{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;padding:0 24px calc(18px + env(safe-area-inset-bottom,0px));pointer-events:none;font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);transition:opacity 1s ease}

/* world state */
.sb.in-am .panel[data-world="am"],.sb.in-dh .panel[data-world="dh"]{flex-grow:1}
.sb.in-am .panel[data-world="dh"],.sb.in-dh .panel[data-world="am"]{flex-grow:.00001}
.sb.in-am .seam,.sb.in-dh .seam{opacity:0}
.sb.in-am .seam{left:100%}.sb.in-dh .seam{left:0}
.sb.in-am .door,.sb.in-dh .door{opacity:0;transform:translateY(18px);pointer-events:none}
.sb.in-am .shade,.sb.in-dh .shade{opacity:.7}
.sb:not(.threshold) ~ .foot{opacity:0}

.world{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease) .5s}
.world.show{opacity:1}
.world .aura{position:absolute;inset:0;pointer-events:none;transition:opacity 2s ease}
.world[data-world="am"] .aura{background:radial-gradient(70% 55% at 50% 58%,var(--moon-glow),transparent 70%);mix-blend-mode:soft-light;opacity:.35}
.world[data-world="dh"] .aura{background:radial-gradient(70% 55% at 50% 60%,var(--dawn-glow),transparent 70%);mix-blend-mode:soft-light;opacity:.45}

.guide{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.guide .cap{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);transition:opacity 1.6s ease}
.breath{position:relative;height:2px;width:min(30vw,340px);display:flex;justify-content:center}
.breath i{display:block;height:1px;width:40%;background:var(--bone);box-shadow:0 0 18px 2px var(--moon-glow),0 0 2px rgba(243,238,229,.9);border-radius:1px}
.breath-word{position:relative;height:2.6rem;width:12rem}
.breath-word span{position:absolute;inset:0;font-family:var(--display);font-style:italic;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;opacity:0;transition:opacity 1.3s ease}
.breath-word span.on{opacity:1}

.verse{position:absolute;left:50%;bottom:clamp(92px,14vh,140px);transform:translateX(-50%);width:min(40rem,calc(100% + -48px));margin:0;text-align:center;font-family:var(--display);font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.25;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45);transition:opacity 1.8s ease}
.verse.out{opacity:0}

.wfoot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4.4vw,72px) calc(26px + env(safe-area-inset-bottom,0px));pointer-events:none}
.wfoot > *{pointer-events:auto}
.wname{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);pointer-events:none!important}
.cross{display:inline-flex;align-items:center;gap:12px;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--bone)}
.cross i{display:block;width:26px;height:1px;background:currentColor;transition:width .9s var(--ease)}
.cross:hover i,.cross:focus-visible i{width:54px}

/* discovery: keep type legible on a bright dawn */
.world[data-world="dh"] .cap,.world[data-world="dh"] .verse,.world[data-world="dh"] .wname,.world[data-world="dh"] .cross,.quest{text-shadow:0 1px 16px rgba(70,34,20,.6),0 0 2px rgba(70,34,20,.25)}
.sb.in-dh .panel[data-world="dh"] .shade{opacity:1}
.cross{white-space:nowrap}

/* Discovery Heart: the seven lights */
.sun{position:absolute;width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,214,150,.55) 0%,rgba(255,190,130,.18) 22%,transparent 55%);mix-blend-mode:screen;opacity:calc(.05 + var(--lv,0) * .025);transition:opacity 4s ease}
.pools{position:absolute;inset:0;pointer-events:none}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px rgba(255,205,160,.85)) drop-shadow(0 0 12px rgba(245,183,140,.35))}
.thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#threadLine{stroke:rgba(255,242,222,.55);stroke-width:1.1}
#threadNew{stroke:rgba(255,248,236,.9);stroke-width:1.3}
#threadReach{stroke:rgba(255,242,222,.6);stroke-width:1;stroke-dasharray:1.5 7}
#pulse{fill:#fff8ec;opacity:0}
.pool{position:absolute;width:0;height:0;--p:0}
.pool:not(.found):not(.next){visibility:hidden}
.pool .note{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;background:radial-gradient(circle,rgba(255,252,244,.95) 0%,rgba(255,220,170,.5) 26%,rgba(134,226,211,.12) 48%,transparent 66%);mix-blend-mode:screen;opacity:0;transform:scale(.55);transition:opacity 1.8s ease,transform 1.8s ease}
.pool.found.sing .note{opacity:1;transform:scale(1);transition:opacity .06s ease,transform .18s ease}
.pool.next.sing .note{opacity:calc(.06 + var(--p) * .8);transform:scale(.85);transition:opacity .06s ease,transform .18s ease}
.pool .glow{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,226,.95) 0%,rgba(255,214,160,.55) 18%,rgba(134,226,211,.22) 42%,transparent 68%);mix-blend-mode:screen;opacity:calc(var(--p) * .9);transform:scale(calc(.45 + var(--p) * .75));transition:opacity .35s ease,transform .5s ease}
.pool .ring{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,250,240,.9);box-shadow:0 0 14px rgba(255,205,160,.8);opacity:0}
.pool.hint .ring{animation:hint 4.4s ease-in-out infinite}
@keyframes hint{0%,100%{transform:scale(.8);opacity:.25}50%{transform:scale(1.5);opacity:.85}}
.pool.found .glow{opacity:.62;transform:scale(.62);animation:breathe 6s ease-in-out infinite}
.pool.found .ring{animation:bloom 2.6s cubic-bezier(.2,.6,.2,1) forwards}
.pool.found.hint .ring{animation:bloom 2.6s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes bloom{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(7)}}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(.55)}50%{opacity:.75;transform:scale(.7)}}

.quest{position:absolute;left:50%;bottom:clamp(54px,8vh,74px);transform:translateX(-50%);display:flex;align-items:center;gap:16px;pointer-events:none;white-space:nowrap}
.quest .tide{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone)}
.quest .glass{display:flex;gap:7px;align-items:center}
.quest .glass i{display:block;width:11px;height:8px;border-radius:5px 6px 4px 6px;border:1px solid rgba(255,248,235,.55);transition:background 1.4s ease,border-color 1.4s ease,box-shadow 1.4s ease}
.quest .glass i.on{border-color:transparent;background:var(--c);box-shadow:0 0 10px var(--c)}
.quest .glass i.on.sing{box-shadow:0 0 18px var(--c),0 0 4px rgba(255,255,255,.9);transition:box-shadow .08s ease}
#sb-root .again{pointer-events:auto;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid rgba(243,238,229,.5);padding-bottom:2px}

/* discovery light */
.touch{position:fixed;inset:0;z-index:5;pointer-events:none}
.sb.in-dh ~ .touch{pointer-events:auto;cursor:none}
.light{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:7;opacity:0;background:radial-gradient(circle,rgba(255,226,180,.42) 0%,rgba(245,183,140,.16) 30%,rgba(134,226,211,.05) 48%,transparent 66%);mix-blend-mode:screen;transition:opacity 1.2s ease;will-change:transform}
.light.on{opacity:1}
.light::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(255,250,240,.95);box-shadow:0 0 10px 2px rgba(255,205,160,.9),0 0 30px 8px rgba(245,183,140,.35)}
.mote{position:fixed;z-index:7;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;background:rgba(255,236,206,.95);box-shadow:0 0 12px 3px rgba(245,183,140,.7),0 0 26px 8px rgba(134,226,211,.18);animation:mote 3.6s var(--ease) forwards}
@keyframes mote{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
.ripple{position:fixed;z-index:7;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;border:1px solid rgba(255,250,240,.95);box-shadow:0 0 14px rgba(255,205,160,.75),inset 0 0 10px rgba(255,236,206,.35);animation:ripple 2.8s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes ripple{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(9)}}

/* grain */
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* arrival veil */
.veil{position:fixed;inset:0;z-index:20;background:var(--night);pointer-events:none;transition:opacity 2.2s var(--ease) .2s}
.veil.gone{opacity:0}
.sb.threshold .door{animation:rise 1.8s var(--ease) both}
.sb.threshold .panel[data-world="dh"] .door{animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* phone: stacked worlds */
@media (max-aspect-ratio:4/5){
  .sb{flex-direction:column}
  .panel[data-world="am"] video,.panel[data-world="am"] .poster{object-position:50% 92%}
  .panel[data-world="dh"] video,.panel[data-world="dh"] .poster{object-position:50% 44%}
  .sb.in-am .panel[data-world="am"] video,.sb.in-am .panel[data-world="am"] .poster,
  .sb.in-dh .panel[data-world="dh"] video,.sb.in-dh .panel[data-world="dh"] .poster,
  .panel .stage img,.panel .stage video,.panel .tx video{object-position:50% 44%}
  .seam{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(243,238,229,.45),transparent)}
  .sb.in-am .seam{top:100%;left:0}.sb.in-dh .seam{top:0;left:0}
  #sb-root .door{padding:0 24px 28px;gap:8px}
  #sb-root .panel[data-world="am"] .door{inset:0 0 auto 0;padding:84px 24px 0}
  .panel[data-world="am"] .shade{background:linear-gradient(180deg,rgba(6,9,15,.7) 0%,rgba(6,9,15,.35) 38%,rgba(6,9,15,0) 60%,rgba(6,9,15,.25) 100%)}
  .wname{display:none}
  .cross{letter-spacing:.24em}
  .wfoot{justify-content:center}
  .door .name{font-size:clamp(2.3rem,11vw,3.4rem)}
  .door .line{font-size:.86rem;max-width:20rem}
  .door .enter{margin-top:4px}
  .top{padding-left:24px;padding-right:24px}
  .mark{letter-spacing:.42em}
  .foot{display:none}
  .guide{top:36%}
  .breath{width:56vw}
  .verse{bottom:134px;font-size:1.3rem}
  .quest{bottom:76px;gap:10px 14px;flex-wrap:wrap;justify-content:center;width:calc(100vw + -32px)}
  .quest .tide{flex-basis:100%;text-align:center}
  .wfoot{padding-left:24px;padding-right:24px}
  .light{width:260px;height:260px;margin:-130px 0 0 -130px}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .sound.on .bars i{animation:none;height:70%}
  .pool.hint .ring,.pool.found .glow{animation:none}
  .ripple{animation-duration:1.2s}
  .panel video{display:none}
  .sb.threshold .door{animation:none}
}