/* the subtle door: a pulsing aqua dot and the word, lit on hover */
  .more{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-30);border:0;background:none;cursor:pointer;padding:0;margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;transition:color .4s}
  .more:hover{color:var(--aqua)}
  .more .dot{width:6px;height:6px;border-radius:50%;background:var(--aqua);opacity:.55;box-shadow:0 0 8px var(--aqua);animation:pulse 2.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
  @media (prefers-reduced-motion:reduce){ .more .dot{animation:none} }
  :root{ --aqua:#46C3B2; --soli-blue:#2C8885; --deep:#041A22; --gold:#E2B15C; }
  /* ---------- the dive ---------- */
  .dive{position:fixed;inset:0;z-index:5;display:none;overflow:hidden;background:var(--ink);opacity:0;transition:opacity .5s}
  .dive.on{display:block} .dive.show{opacity:1}
  .chart{position:absolute;inset:0;width:100%;height:100%;display:block}
  .chart path{fill:none;stroke:#EFE6D3;stroke-width:1;vector-effect:non-scaling-stroke}
  .chart path.major{stroke-width:1.6}
  .chart text{font-family:"IBM Plex Mono",monospace;fill:#EFE6D3;opacity:.8}
  .deepen{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(4,26,34,0) 0%,rgba(4,26,34,.35) 55%,rgba(4,26,34,.9) 100%);opacity:0;transition:opacity 2.5s;pointer-events:none}
  .dive.deep .deepen{opacity:1}
  .floor{position:absolute;inset:0;background:var(--deep);opacity:0;transition:opacity 1.4s;pointer-events:none}
  .dive.landed .floor{opacity:1}
  .depth{position:absolute;left:8vw;top:16vh;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-60)}
  .depth b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,64px);letter-spacing:0;color:var(--paper);margin-top:.2em;text-transform:none}
  .surface-link{position:absolute;top:18px;right:8vw;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-60);border:0;z-index:2}
  /* the bottom */
  .bottom{--bx:50%;--by:50%;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 6vw;pointer-events:none}
  .bottom.rising{opacity:1}
  .bottom.on{opacity:1;pointer-events:auto}
  .bottom .glowwrap{transform-origin:50% 50%;will-change:transform,opacity}
  .bottom .here,.bottom .open{opacity:0;transition:opacity 1.2s}
  .bottom.on .here,.bottom.on .open{opacity:1}
  .glowwrap{position:relative;width:min(66vw,400px);aspect-ratio:1/0.72}
  .halo{position:absolute;inset:-28%;border-radius:50%;background:radial-gradient(circle,rgba(226,177,92,.5) 0%,rgba(226,177,92,.16) 35%,rgba(70,195,178,.06) 60%,rgba(0,0,0,0) 72%);filter:blur(18px);animation:breathe 3.4s ease-in-out infinite}
  .halo.aqua{background:radial-gradient(circle,rgba(70,195,178,.42) 0%,rgba(70,195,178,.12) 40%,rgba(0,0,0,0) 72%)}
  @keyframes breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
  .glowwrap svg{position:relative;width:100%;height:100%;overflow:visible}
  .ink{fill:none;stroke:#EFE6D3;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
  .thin{fill:none;stroke:#EFE6D3;stroke-width:.8;opacity:.7}
  .hatch{fill:none;stroke:#EFE6D3;stroke-width:.6;opacity:.5}
  .rivet{fill:#EFE6D3;opacity:.85}
  .goldfill{fill:var(--gold)}
  .seam{fill:none;stroke:var(--gold);stroke-width:2;filter:drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 14px rgba(226,177,92,.8));animation:flick 2.2s ease-in-out infinite}
  @keyframes flick{0%,100%{opacity:.7}50%{opacity:1}}
  .here{font-family:var(--display);font-style:italic;font-size:clamp(26px,4.4vw,44px);color:var(--aqua);margin:1.6rem 0 .4rem;animation:gem 3.2s ease-in-out infinite}
  @keyframes gem{0%,100%{text-shadow:0 0 8px rgba(70,195,178,.8),0 0 22px rgba(70,195,178,.45),0 0 48px rgba(70,195,178,.2)}50%{text-shadow:0 0 14px rgba(70,195,178,1),0 0 40px rgba(70,195,178,.7),0 0 90px rgba(70,195,178,.4)}}
  .open{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-60);background:none;border:1px solid rgba(239,230,211,.25);padding:12px 18px;border-radius:2px;cursor:pointer;margin-top:1rem}
  .open:hover{color:var(--aqua);border-color:var(--aqua)}
  /* ---------- the story: inside the chest ---------- */
  .story{position:relative;z-index:6;display:none;min-height:100vh;background:linear-gradient(160deg,var(--deep) 0%,var(--ink) 45%,#1a1408 100%)}
  .story.on{display:block}
  .story .glow{position:fixed;right:10vw;bottom:-8vh;width:min(56vw,720px);aspect-ratio:1/0.8;z-index:0;pointer-events:none;opacity:.85}
  @media (max-width:760px){ .story .glow{width:120vw;right:-30vw;bottom:-20vh;opacity:.55} }
  .story .glow .gold{position:absolute;inset:-16%;background:radial-gradient(ellipse at 55% 60%,rgba(226,177,92,.62) 0%,rgba(226,177,92,.3) 28%,rgba(226,177,92,.1) 50%,rgba(226,177,92,0) 66%);filter:blur(26px);animation:breathe 5s ease-in-out infinite}
  .story .glow svg{position:relative;width:100%;height:100%;opacity:.62}
  .story .chapter{position:relative;z-index:1;min-height:0;padding:9vh 8vw 5vh;max-width:1100px}
  .story .chapter h2{font-size:clamp(26px,3.4vw,40px)}
  .story .surfaceline{position:relative;z-index:1;padding:4vh 8vw 12vh;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .story .surfaceline a{border:0;color:var(--aqua)}
  @media (prefers-reduced-motion:reduce){ .surface .bg,.halo,.seam,.here,.more .dot,.story .glow .gold{animation:none !important} }



  /* the open chest: a calm loop. The chest and its lines hold still; only the light moves. */
  .story .glow svg{position:relative;width:100%;height:100%;opacity:.95}
  .story .glow .gold{display:block;inset:-18%;background:radial-gradient(ellipse at 45% 62%,rgba(226,177,92,.66) 0%,rgba(226,177,92,.32) 28%,rgba(226,177,92,.1) 52%,rgba(226,177,92,0) 68%);filter:blur(28px)}
  .hoardglow{animation:breathe2 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
  @keyframes breathe2{0%,100%{opacity:.78}50%{opacity:1}}
  .ray{animation:rayb 9s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
  .ray.r1{animation-delay:-2s}.ray.r2{animation-delay:-4s}.ray.r3{animation-delay:-6s}.ray.r4{animation-delay:-8s}
  @keyframes rayb{0%,100%{opacity:.55}50%{opacity:1}}
  .glint{opacity:0;animation:glint 7s ease-in-out infinite}
  .hoard g:nth-child(3n) .glint{animation-delay:-1.3s}.hoard g:nth-child(5n) .glint{animation-delay:-3.1s}.hoard g:nth-child(7n) .glint{animation-delay:-4.7s}.hoard g:nth-child(11n) .glint{animation-delay:-6.2s}
  @keyframes glint{0%,86%,100%{opacity:0}90%{opacity:1}94%{opacity:.2}}
  .mote{opacity:0;animation:rise 12s linear infinite}
  .mote.m1{animation-delay:-1.5s}.mote.m2{animation-delay:-3s}.mote.m3{animation-delay:-4.5s}.mote.m4{animation-delay:-6s}.mote.m5{animation-delay:-7.5s}.mote.m6{animation-delay:-9s}.mote.m7{animation-delay:-10.5s}.mote.m8{animation-delay:-12s}
  @keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.8}60%{opacity:.5}100%{transform:translateY(-150px);opacity:0}}
  @media (prefers-reduced-motion:reduce){ .hoardglow,.ray,.glint,.mote{animation:none !important} .glint{opacity:.6} .mote{opacity:.3} }