@font-face{font-family:Cormorant;src:url('assets/cormorant-garamond-400.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/instrument-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{
  --ink:#050505;
  --paper:#f4efe6;
  --gold:#ffd28a;
  --amber:#ffa658;
  --dim:rgba(244,239,230,.42);
  --serif:Cormorant,"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",serif;
  --accent:Instrument,"Instrument Serif",Cormorant,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --vh:100vh;
  --warm:0;
}
@supports(height:100dvh){:root{--vh:100dvh}}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);background:var(--ink);overflow-x:hidden;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased}
.scroll-space{height:calc(var(--vh) * 6.3);width:1px;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage{position:fixed;inset:0;height:var(--vh);overflow:hidden;touch-action:pan-y}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#bg{z-index:0}
#lotus{z-index:1}

.mark{position:absolute;z-index:5;left:20px;top:calc(18px + env(safe-area-inset-top,0px));width:150px;height:16px;pointer-events:none}

.copy{position:absolute;z-index:4;left:0;right:0;top:0;bottom:0;pointer-events:none}
.line{position:absolute;left:24px;right:24px;top:58%;margin:0;font-weight:400;font-size:clamp(27px,7.3vw,36px);line-height:1.2;letter-spacing:-.004em;color:var(--paper);text-wrap:balance;opacity:0;will-change:transform,opacity;max-width:22ch}
.line .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.32em);will-change:transform,opacity,filter;white-space:pre}
.line em{font-style:normal}
.line .w.acc{font-family:var(--accent);font-style:italic;font-size:1.1em;line-height:1;color:var(--gold);text-shadow:0 0 18px rgba(255,190,110,.28)}
.line .in{display:inline-block;position:relative}

/* "break": once the line has landed, the word fractures — letters slip a hair apart */
.line .brk .ch{display:inline-block;transition:transform .9s cubic-bezier(.2,.9,.2,1)}
.line .brk.go .ch:nth-child(1){transform:translate(-.06em,.05em) rotate(-4deg)}
.line .brk.go .ch:nth-child(2){transform:translate(-.02em,-.05em) rotate(2deg)}
.line .brk.go .ch:nth-child(3){transform:translate(.0em,.07em) rotate(-2deg)}
.line .brk.go .ch:nth-child(4){transform:translate(.03em,-.04em) rotate(5deg)}
.line .brk.go .ch:nth-child(5){transform:translate(.08em,.05em) rotate(-3deg)}

/* "no strings attached": the three words hang on threads; the threads are cut, the words settle */
.line .str{transform:translateY(-.24em);transition:transform 1.1s cubic-bezier(.34,1.56,.42,1);transform-origin:50% -60px;animation:sway 3.2s ease-in-out infinite}
.line .str::before{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:64px;background:linear-gradient(to top,rgba(255,210,138,.85),rgba(255,210,138,0));transform-origin:bottom;transition:transform .35s cubic-bezier(.6,0,.9,.4),opacity .35s}
.line .str.cut{transform:translateY(0);animation:none}
.line .str.cut::before{transform:scaleY(0);opacity:0}
.line .str:nth-of-type(2){animation-delay:-.9s}
@keyframes sway{0%,100%{rotate:-1.6deg}50%{rotate:1.6deg}}

/* "open": the letters part and light comes through */
.line .opn{letter-spacing:0;transition:letter-spacing 1.4s cubic-bezier(.2,.8,.2,1),text-shadow 1.4s ease}
.line .opn.go{letter-spacing:.16em;text-shadow:0 0 22px rgba(255,200,120,.75),0 0 60px rgba(255,170,90,.35)}

/* the one door: a floating pill of light with a trailing line */
.cta{position:absolute;left:24px;right:24px;top:calc(58% + 5.1em);display:flex;align-items:center;gap:0;opacity:0;transform:translateY(18px);pointer-events:none}
.cta.on{pointer-events:auto}
.door{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:210px;height:66px;padding:0 34px;border-radius:999px;color:#1a0d06;text-decoration:none;font-family:var(--serif);
  background:linear-gradient(115deg,#fff1cf 0%,#ffd28a 45%,#ffb46a 100%);
  box-shadow:0 0 0 1px rgba(255,236,200,.35) inset,0 0 28px rgba(255,190,110,.42),0 0 90px rgba(255,150,70,.22),0 10px 30px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;-webkit-tap-highlight-color:transparent}
.door-ring{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,214,150,.75);animation:ring 3.4s cubic-bezier(.2,.7,.2,1) infinite;pointer-events:none}
@keyframes ring{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.3);opacity:0}}
.door-label{font-size:24px;letter-spacing:.02em;line-height:1}
.door-note{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;line-height:1}
.door:hover,.door:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,236,200,.5) inset,0 0 40px rgba(255,200,120,.6),0 0 120px rgba(255,150,70,.3),0 14px 34px rgba(0,0,0,.35);outline:none}
.door:active{transform:scale(.97)}
.cta-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(255,214,150,.0),rgba(255,214,150,.55) 30%,rgba(255,214,150,.0));pointer-events:none;animation:shimmer 5s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:.55}50%{opacity:1}}

.dots{position:absolute;z-index:5;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.dots i{display:block;width:3px;height:3px;border-radius:50%;background:rgba(244,239,230,.28);transition:background .6s,box-shadow .6s,transform .6s}
.dots i.on{background:var(--gold);box-shadow:0 0 8px rgba(255,210,138,.9);transform:scale(1.5)}

.hint{position:absolute;z-index:5;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim);transition:opacity .8s;user-select:none}
.hint-line{width:1px;height:34px;background:linear-gradient(to bottom,transparent,rgba(244,239,230,.7));animation:drip 2.6s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.hint.off{opacity:0}

/* Desktop / landscape: lotus lives on the left, words on the right. */
@media (min-width:900px) and (orientation:landscape){
  .scroll-space{height:calc(var(--vh) * 7.2)}
  .mark{left:40px;top:34px}
  .line{left:56%;right:6vw;top:50%;transform:translateY(-50%);font-size:clamp(36px,3.2vw,52px);line-height:1.16;max-width:19ch}
  .cta{left:56%;right:6vw}
  .door{height:74px;padding:0 44px;min-width:240px}
  .door-label{font-size:27px}
  .door-note{font-size:10px}
  .dots{right:34px}
  .hint{left:34%;bottom:36px}
  .line .str::before{height:84px}
}
@media (prefers-reduced-motion:reduce){
  .door-ring,.hint-line,.cta-line,.line .str{animation:none}
  .line .str{transform:none}
  .line .str::before{display:none}
  .line .brk .ch,.line .opn{transition:none}
}