:root{
    --paper:#f4f2ee;
    --purple:#3B3059;
    --purple-lt:#9B6BF2;
    --magenta:#B31166;
    --pink:#E33D6F;
    --orange:#E45F3C;
    --amber:#E9943A;
    --accent:#9B6BF2;
    --accent2:#E33D6F;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:#050507;color:var(--paper);
    font-family:'Jost',system-ui,sans-serif;
    overflow:hidden;
  }

  /* ---------- deck framing ---------- */
  #deck{position:fixed;inset:0}
  .stage{
    position:absolute;inset:0;
    display:grid;place-items:center;
    background:radial-gradient(120% 100% at 50% 42%, #26262c 0%, #161619 46%, #0a0a0d 100%);
  }
  .slide{
    position:absolute;inset:0;
    opacity:0;visibility:hidden;
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    transform:translateY(14px) scale(.995);
    display:grid;place-items:center;
    overflow:hidden;
  }
  .slide.active{opacity:1;visibility:visible;transform:none;z-index:2}
  .slide.prev{transform:translateY(-14px) scale(.995)}

  /* colour aura + spotlight (shared) */
  .aura::before{
    content:"";position:absolute;inset:-20%;z-index:0;
    background:
      radial-gradient(38% 42% at 28% 30%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%),
      radial-gradient(34% 40% at 74% 32%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 70%),
      radial-gradient(42% 46% at 60% 80%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 72%);
    filter:blur(24px) saturate(115%);
    animation:drift 24s ease-in-out infinite alternate;
  }
  @keyframes drift{0%{transform:translate3d(-1.5%,-1%,0) scale(1.03)}100%{transform:translate3d(2%,1.5%,0) scale(1.08)}}
  .spot::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(58% 62% at 50% 46%, rgba(255,255,255,.08), transparent 60%),
      radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
  }
  .grain{
    position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .wrap{position:relative;z-index:3;width:100%;height:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:6vh 8vw;gap:.2rem}

  /* ---------- typography atoms ---------- */
  .eyebrow{
    font-weight:400;font-size:clamp(.62rem,1.35vw,1.05rem);
    letter-spacing:.6em;text-indent:.6em;text-transform:uppercase;
    color:rgba(244,242,238,.7);
  }
  .eyebrow em{font-style:italic;font-family:'Cormorant Garamond',serif;letter-spacing:.2em}
  .kicker{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:clamp(.8rem,1.7vw,1.3rem);letter-spacing:.24em;text-transform:uppercase;
    color:var(--accent);
  }
  .hairline{height:1px;width:min(42%,460px);margin:clamp(.9rem,2.2vh,1.6rem) auto;
    background:linear-gradient(90deg,transparent,rgba(244,242,238,.5),transparent)}
  .th-hero{
    font-family:'Noto Serif Thai',serif;font-weight:300;line-height:1.02;
    font-size:clamp(2.6rem,9vw,8rem);letter-spacing:.03em;color:#fff;
    text-shadow:0 4px 60px color-mix(in srgb,var(--accent) 40%,transparent),0 2px 16px rgba(0,0,0,.5);
  }
  .th-hero b{font-weight:500}
  .en-display{
    font-family:'Cormorant Garamond',serif;font-weight:400;line-height:1.08;
    font-size:clamp(1.8rem,5.2vw,4.6rem);letter-spacing:.02em;color:#fff;
  }
  .en-caps{
    font-family:'Jost',sans-serif;font-weight:300;
    font-size:clamp(1.6rem,5vw,4.4rem);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  }
  .th-sub{font-family:'Noto Serif Thai',serif;font-weight:300;
    font-size:clamp(1rem,2.6vw,2rem);letter-spacing:.06em;color:rgba(244,242,238,.82)}
  .caption{font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:clamp(.85rem,1.9vw,1.45rem);letter-spacing:.12em;color:rgba(244,242,238,.72);margin-top:.4em}

  /* staged reveal for active slide children */
  .slide.active .reveal{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .slide.active .reveal:nth-child(1){animation-delay:.15s}
  .slide.active .reveal:nth-child(2){animation-delay:.30s}
  .slide.active .reveal:nth-child(3){animation-delay:.45s}
  .slide.active .reveal:nth-child(4){animation-delay:.60s}
  .slide.active .reveal:nth-child(5){animation-delay:.72s}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

  /* breathing metronome (trapezoid: short side = inhale 4, long side = exhale 6) */
  .breath-wrap{gap:clamp(.4rem,1.2vh,1rem);padding:2vh 2vw}
  .breath-stage{position:relative;width:min(96vw,101vh)}
  .breath-svg{width:100%;height:auto;overflow:visible;display:block}
  .bt-track{fill:rgba(255,255,255,.03);stroke:rgba(244,242,238,.16);stroke-width:2}
  .bt-in,.bt-out,.bt-hold,.bt-hold2{stroke:rgba(244,242,238,.13);stroke-width:6;stroke-linecap:round;fill:none;
    transition:stroke .3s ease,filter .3s ease}
  .slide[data-phase="in"]    .bt-in{stroke:var(--accent); filter:drop-shadow(0 0 9px var(--accent))}
  .slide[data-phase="out"]   .bt-out{stroke:var(--accent2);filter:drop-shadow(0 0 9px var(--accent2))}
  .slide[data-phase="hold"]  .bt-hold{stroke:#E9943A;filter:drop-shadow(0 0 9px #E9943A)}
  .slide[data-phase="hold2"] .bt-hold2{stroke:#E9943A;filter:drop-shadow(0 0 9px #E9943A)}
  .pip{fill:rgba(244,242,238,.28);transition:fill .15s ease}
  .bt-pips-in .pip.on{fill:var(--accent)}
  .bt-pips-out .pip.on{fill:var(--accent2)}
  .bt-pips-hold .pip.on,.bt-pips-hold2 .pip.on{fill:#E9943A}
  .bt-dot{fill:#fff;filter:drop-shadow(0 0 11px rgba(255,255,255,.85))}
  .breath-center{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;pointer-events:none;text-align:center}
  .bc-label{font-family:'Noto Serif Thai',serif;font-weight:300;color:#fff;
    font-size:clamp(1.8rem,4.6vw,3.4rem);line-height:1.1}
  .bc-en{font-family:'Cormorant Garamond',serif;font-style:italic;
    color:rgba(244,242,238,.68);font-size:clamp(.9rem,1.8vw,1.2rem)}
  .bc-count{font-family:'Jost',sans-serif;letter-spacing:.28em;color:var(--accent);
    margin-top:.6rem;font-variant-numeric:tabular-nums;min-height:1.1em;font-size:clamp(.85rem,1.5vw,1.15rem)}
  .breath-controls{display:flex;gap:.9rem;margin-top:.2rem}
  .bp-start,.bp-mute{font-family:'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;
    font-size:.74rem;color:#fff;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22);padding:.6rem 1.5rem;border-radius:999px;
    cursor:pointer;transition:background .2s ease}
  .bp-start:hover,.bp-mute:hover{background:rgba(255,255,255,.15)}


  .fullscreen{position:fixed;right:1rem;bottom:1rem;z-index:10;color:var(--paper);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1.2rem}
  @media (prefers-reduced-motion:reduce){
    .slide,.reveal{transition:none!important;animation:none!important}
    .aura::before{animation:none}
  }