:root{
    --crimson:#b3243a;
    --crimson-deep:#7a1020;
    --ecg:#ff4d5e;
    --gold:#e8c27a;
    --gold-soft:#f4dfb2;
    --pulse:0;
    --font-ui:"Jost", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-poem:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  }
  
  html.locked,html.locked body{overflow:hidden;height:100%}

  /* ───────────── INTRO ───────────── */
  #intro{position:fixed;inset:0;z-index:10;background:#000;overflow:hidden;-webkit-tap-highlight-color:transparent}

  /* grey image that sinks into black, one step per heartbeat */
  #grey{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.3,0,.2,1)}
  #grey .base{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#a4a4a4 0%,#6a6a6a 42%,#2a2a2a 100%)}
  #grey .img{position:absolute;inset:0;background-position:center;background-size:cover;
    filter:grayscale(1) contrast(.92) brightness(.9);opacity:0;transition:opacity 1s ease}
  #grey .img.ok{opacity:1}
  #grey .grain{position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
    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'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

  #ecg{position:absolute;left:0;top:50%;width:100%;height:36vh;transform:translateY(-50%);transition:opacity 2.4s ease;
    filter:drop-shadow(0 0 4px rgba(255,77,94,.95)) drop-shadow(0 0 12px rgba(255,77,94,.55))}

  #gate{
    position:absolute;inset:0;display:grid;place-items:center;background:#000;
    border:0;color:var(--gold-soft);cursor:pointer;font-family:var(--font-ui);transition:opacity .9s ease;
  }
  #gate .g1{display:block;font:300 clamp(1rem,2.2vw,1.25rem) var(--font-ui);letter-spacing:.32em;text-transform:uppercase}
  #gate .g2{display:block;margin-top:14px;font:200 .85rem var(--font-ui);letter-spacing:.12em;color:rgba(244,223,178,.5)}
  #gate .ring{display:block;width:54px;height:54px;margin:0 auto 26px;border-radius:50%;
    border:1px solid rgba(232,194,122,.55);
    box-shadow:0 0 calc(6px + var(--pulse) * 30px) rgba(232,194,122,calc(.15 + var(--pulse) * .4));
    transform:scale(calc(1 + var(--pulse) * .08))}
  #gate:focus-visible{outline:2px solid var(--gold);outline-offset:-12px}
  #gate.gone{opacity:0;pointer-events:none}

  #msg{position:absolute;inset:0;display:grid;place-items:center;padding:0 7vw 30vh;text-align:center;pointer-events:none}
  .msg-text{
    font-family:var(--font-poem);font-style:italic;font-weight:300;color:var(--gold-soft);
    font-size:clamp(1.7rem,4.8vw,3.4rem);line-height:1.55;text-wrap:balance;max-width:24ch;
    text-shadow:0 0 22px rgba(232,194,122,.3);
  }
  .msg-text .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(12px);
    transition:opacity 1.5s ease,filter 1.5s ease,transform 1.5s ease;transition-delay:var(--d,0ms)}
  .msg-text.show .w{opacity:1;filter:blur(0);transform:none}

  #herz{
    pointer-events:none;font:inherit;font-weight:500;color:#ff6b7a;background:none;border:0;padding:0 .08em;
    cursor:pointer;display:inline-block;
    transform:scale(calc(1 + var(--pulse) * .16));
    text-shadow:0 0 calc(10px + var(--pulse) * 42px) rgba(255,77,94,calc(.35 + var(--pulse) * .55));
    transition:color .3s;
  }
  #intro.ready #herz{pointer-events:auto}
  #herz:hover{color:#ff8f9b}
  #herz:focus-visible{outline:1px solid rgba(255,107,122,.7);outline-offset:6px;border-radius:6px}

  #soundHint{position:absolute;top:5vh;left:50%;transform:translateX(-50%);white-space:nowrap;
    font:200 .85rem var(--font-ui);color:rgba(244,223,178,.55);opacity:0;transition:opacity 1.2s;pointer-events:none}
  #soundHint.on{opacity:1}

  /* ───────────── TIME TUNNEL ───────────── */
  #tunnel{position:fixed;inset:0;z-index:30;background:#000;opacity:0;pointer-events:none;transition:opacity .25s ease}
  #tunnel.on{opacity:1}
  #tunnel video,#tunnel canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #gl{position:absolute;inset:0;width:100%;height:100%;display:block}
  #warp{opacity:0}
  #warp.on{opacity:1}

  /* ───────────── FX ───────────── */
  #fx{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
  #flash,#white{position:absolute;inset:0;opacity:0}
  #white{background:radial-gradient(circle at 50% 45%,#fff 0%,#fff6e4 40%,#f2d6a0 100%)}
  .ring{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity;
    background:radial-gradient(circle closest-side,transparent 55%,rgba(255,240,205,.95) 62%,rgba(232,194,122,.4) 68%,transparent 76%)}

  #soundBtn{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:60;
    background:rgba(0,0,0,.45);color:var(--gold-soft);border:1px solid rgba(232,194,122,.35);border-radius:999px;
    padding:.5rem 1.1rem;font:300 .85rem var(--font-ui);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  #soundBtn[hidden]{display:none}

  @media (max-width:560px){
    .nav nav{gap:14px}
    .nav nav a{font-size:.85rem}
  }