/* ═══════════════════════════════════════════════════════════════
   The foyl Grove - interactive nav experience
   UI / chrome layer (the 3D lives in grove.js)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --blue:#00AEEF; --cyan:#00D4FF; --teal:#00897B; --ocean:#005F87;
  --bg:#020403; --bg2:#060a08;
  --tx:#EDE9E3; --tx2:#A8A29A; --tx3:#8A857D; --tx4:#6f6a63;
  --font:'Outfit',sans-serif; --mono:'DM Mono',monospace; --jakarta:'Plus Jakarta Sans',sans-serif;
  --border:rgba(120,180,255,.12); --border2:rgba(120,180,255,.20);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:var(--font);
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{position:fixed;inset:0;touch-action:none}
a{color:inherit}
canvas#scene{position:fixed;inset:0;display:block;z-index:1}

/* visually hidden but present for screen readers + crawlers */
.sr-nav{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* film grain + vignette are done in-shader; this is a CSS scanline/soft grade fallback flourish */
#grade{position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.2;
  background:radial-gradient(120% 120% at 50% 42%, transparent 60%, rgba(0,0,0,.5) 100%)}

/* trailing cursor glow (fine pointers only; native cursor stays) */
#cursor{--cc:#00D4FF;position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:none}
#cursor .cr-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--cc);opacity:.5;transition:width .25s var(--ease),height .25s var(--ease),left .25s var(--ease),top .25s var(--ease),opacity .25s,border-color .25s;
  box-shadow:0 0 18px -4px var(--cc)}
#cursor .cr-dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--cc);box-shadow:0 0 10px var(--cc);
  transform:translate(var(--dx,0),var(--dy,0))}
#cursor.hot .cr-ring{left:-25px;top:-25px;width:50px;height:50px;opacity:.9}

/* ───────── top chrome ───────── */
#chrome{position:fixed;inset:0;z-index:10;pointer-events:none}
#chrome > *{pointer-events:auto}
.brand{position:absolute;top:24px;left:28px;display:flex;align-items:center;gap:12px;user-select:none}
.brand .mark{width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 210deg,#00D4FF,#00AEEF,#00897B,#005F87,#00D4FF);
  -webkit-mask:radial-gradient(circle,transparent 40%,#000 42%);mask:radial-gradient(circle,transparent 40%,#000 42%);
  box-shadow:0 0 18px rgba(0,212,255,.5)}
.brand .txt .name{font-family:var(--jakarta);font-weight:600;font-size:19px;letter-spacing:.01em;line-height:1}
.brand .txt .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--tx3);margin-top:4px}

.top-right{position:absolute;top:26px;right:28px;display:flex;align-items:center;gap:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.top-right .live{display:flex;align-items:center;gap:7px}
.top-right .live b{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
.top-right a.mini{color:var(--tx2);text-decoration:none;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.top-right a.mini:hover{color:var(--tx);border-color:var(--border2)}
.top-right .snd{background:none;border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:var(--tx3);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:color .25s,border-color .25s}
.top-right .snd::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;transition:box-shadow .25s}
.top-right .snd:hover{color:var(--tx2);border-color:var(--border2)}
.top-right .snd.on{color:var(--cyan);border-color:rgba(0,212,255,.4)}
.top-right .snd.on::before{opacity:1;box-shadow:0 0 8px var(--cyan)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* left dock: the seven areas as a bold legend / quick-jump */
#dock{position:absolute;left:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;width:236px}
.dock-h{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--tx3);
  padding:0 0 12px 15px;opacity:0;transition:opacity .6s var(--ease)}
.dock-item{position:relative;display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:13px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,rgba(10,15,13,.55),rgba(6,10,9,.5));border:1px solid var(--border);
  backdrop-filter:blur(10px);transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease),box-shadow .3s;
  transform:translateX(-12px);opacity:0}
.dock-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;opacity:0;transition:opacity .3s}
.dock-item .dd{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 0 currentColor;transition:box-shadow .3s,transform .3s}
.dock-item .dtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.dock-item .dn{font-family:var(--jakarta);font-weight:500;font-size:14px;color:var(--tx);letter-spacing:.005em;line-height:1;white-space:nowrap}
.dock-item .dtag{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);transition:color .25s}
.dock-item .dk{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tx4);border:1px solid var(--border);border-radius:6px;padding:2px 7px;transition:color .25s,border-color .25s}
.dock-item:hover,.dock-item.active{background:linear-gradient(180deg,rgba(14,21,18,.8),rgba(9,14,12,.7));border-color:var(--border2);transform:translateX(0);box-shadow:0 8px 30px -12px rgba(0,0,0,.7)}
.dock-item:hover::before,.dock-item.active::before{opacity:1}
.dock-item:hover .dd,.dock-item.active .dd{box-shadow:0 0 16px 1px currentColor;transform:scale(1.15)}
.dock-item:hover .dtag,.dock-item.active .dtag{color:var(--tx2)}
.dock-item:hover .dk,.dock-item.active .dk{color:var(--tx2);border-color:var(--border2)}
.dock-item.active .dn{color:#fff}

/* ───────── projected plant labels ───────── */
#labels{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
.plabel{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;will-change:left,top,opacity;transition:opacity .4s}
.plabel .lstem{width:1px;height:26px;background:linear-gradient(to bottom,currentColor,transparent);opacity:.5}
.plabel .lchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx2);background:rgba(4,8,7,.5);border:1px solid var(--border);border-radius:999px;
  padding:5px 11px;white-space:nowrap;backdrop-filter:blur(8px);transition:color .25s,border-color .25s,transform .2s var(--ease)}
.plabel:hover .lchip,.plabel.near .lchip{color:var(--tx);border-color:currentColor;transform:translateY(-2px)}
.plabel.active .lchip{color:#fff;border-color:currentColor}

/* ───────── area card ───────── */
#card{--ac:var(--cyan);position:fixed;left:50%;bottom:30px;transform:translate(-50%,150%);z-index:12;
  width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow-y:auto;
  background:linear-gradient(180deg,rgba(10,14,13,.86),rgba(5,8,7,.92));
  border:1px solid var(--border2);border-radius:20px;padding:24px 26px 22px;backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .6s var(--ease),opacity .5s;opacity:0}
#card.show{transform:translate(-50%,0);opacity:1}
#card::before{content:'';position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--ac),transparent);box-shadow:0 0 16px var(--ac)}
#card .ctop{display:flex;align-items:center;gap:11px;margin-bottom:13px}
#card .cbadge{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#04100c;
  padding:4px 10px;border-radius:6px;font-weight:500}
#card .ck{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx3)}
#card h2{font-family:var(--jakarta);font-weight:600;font-size:28px;letter-spacing:-.015em;line-height:1.05}
#card .csub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin-top:7px;margin-bottom:13px}
#card p{color:var(--tx2);font-size:14.5px;line-height:1.58;font-weight:300}
#card .features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:17px}
#card .features li{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--tx);line-height:1.42;font-weight:300}
#card .features li .fdot{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:none;box-shadow:0 0 9px currentColor}
#card .features li span:last-child{color:var(--tx2)}
#card .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#card .meta span{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--tx3);text-transform:uppercase;
  background:rgba(120,180,255,.05);border:1px solid var(--border);border-radius:8px;padding:6px 10px}
#card .meta span b{color:var(--tx);font-weight:500}
#card .crow{display:flex;gap:11px;margin-top:20px}
#card a.enter{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  font-weight:500;font-size:14.5px;color:#04100c;padding:13px 18px;border-radius:11px;
  transition:filter .2s,transform .08s,box-shadow .3s;box-shadow:0 6px 24px -6px currentColor}
#card a.enter:hover{filter:brightness(1.14)}
#card a.enter:active{transform:translateY(1px)}
#card a.enter .arw{transition:transform .3s var(--ease)}
#card a.enter:hover .arw{transform:translateX(4px)}
#card button.ghost{background:transparent;border:1px solid var(--border2);color:var(--tx2);
  font-family:var(--font);font-size:13.5px;padding:13px 16px;border-radius:11px;cursor:pointer;transition:color .2s,border-color .2s}
#card button.ghost:hover{color:var(--tx);border-color:var(--tx3)}

/* ───────── bottom hint / help ───────── */
#hint{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:9;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);
  transition:opacity .5s;pointer-events:none}
#hint kbd{color:var(--tx2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:9px}
#hint.hide{opacity:0}

/* ───────── intro overlay ───────── */
#intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(90% 90% at 50% 55%,rgba(2,10,10,.4),rgba(2,4,3,.86) 75%);
  transition:opacity .9s var(--ease);gap:26px;text-align:center;padding:24px}
#intro.gone{opacity:0;pointer-events:none}
#intro:not(.gone) > *{animation:introUp .95s var(--ease) both}
#intro:not(.gone) .eyebrow{animation-delay:.05s}
#intro:not(.gone) h1{animation-delay:.14s}
#intro:not(.gone) p{animation-delay:.26s}
#intro:not(.gone) .enter-btn{animation-delay:.4s}
@keyframes introUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ #intro:not(.gone) > *{animation:none} }
#intro .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);opacity:.85}
#intro h1{font-family:var(--jakarta);font-weight:300;font-size:clamp(38px,7vw,74px);letter-spacing:-.02em;line-height:1.02;max-width:16ch}
#intro h1 b{font-weight:600;background:linear-gradient(120deg,#00D4FF,#00AEEF 40%,#00897B 75%,#005F87);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#intro p{color:var(--tx2);font-size:15px;font-weight:300;max-width:44ch;line-height:1.6}
#intro .enter-btn{margin-top:6px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font);font-size:15px;font-weight:500;color:var(--tx);
  padding:14px 30px;border-radius:999px;border:1px solid var(--border2);
  background:linear-gradient(180deg,rgba(10,20,20,.6),rgba(6,10,10,.4));backdrop-filter:blur(10px);
  transition:border-color .3s,color .3s,transform .1s,box-shadow .4s}
#intro .enter-btn:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 40px -8px var(--cyan)}
#intro .enter-btn:active{transform:translateY(1px)}
#intro .enter-btn .o{width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 0deg,#00D4FF,#00897B,#00D4FF);
  -webkit-mask:radial-gradient(circle,transparent 38%,#000 40%);mask:radial-gradient(circle,transparent 38%,#000 40%);
  animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── loading ───────── */
#load{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);gap:20px;transition:opacity .7s var(--ease)}
#load.gone{opacity:0;pointer-events:none}
#load .lso{position:relative;width:52px;height:52px}
#load .lso i{position:absolute;width:5px;height:5px;border-radius:50%;left:50%;top:50%;margin:-2.5px;
  animation:lso 1.3s ease-in-out infinite}
@keyframes lso{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
#load .lbar{width:180px;height:2px;background:rgba(120,180,255,.12);border-radius:2px;overflow:hidden}
#load .lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--teal));transition:width .3s}
#load .lmsg{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tx3)}

/* ───────── no-webgl / reduced fallback ───────── */
#fallback{position:fixed;inset:0;z-index:35;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:40px;background:radial-gradient(90% 90% at 50% 30%,#08120f,#020403 80%);text-align:center}
#fallback.on{display:flex}
#fallback h1{font-family:var(--jakarta);font-weight:300;font-size:clamp(30px,6vw,56px)}
#fallback h1 b{font-weight:600;background:linear-gradient(120deg,#00D4FF,#00897B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#fallback p{color:var(--tx2);max-width:46ch;line-height:1.6;font-weight:300}
#fallback .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:720px;width:100%}
#fallback .fcard{text-decoration:none;text-align:left;padding:18px;border:1px solid var(--border);border-radius:14px;
  background:rgba(9,13,12,.5);transition:border-color .3s,transform .3s var(--ease),background .3s}
#fallback .fcard:hover{border-color:var(--border2);transform:translateY(-3px);background:rgba(12,18,16,.7)}
#fallback .fcard .fn{font-family:var(--jakarta);font-weight:600;font-size:16px;display:flex;align-items:center;gap:9px}
#fallback .fcard .fn i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 10px currentColor}
#fallback .fcard .fp{color:var(--tx3);font-size:12.5px;margin-top:7px;font-weight:300;line-height:1.45}

/* ───────── perf / mobile / a11y ───────── */
.perf-pill{position:fixed;bottom:12px;right:14px;z-index:9;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx4);pointer-events:auto;cursor:pointer;opacity:.5;transition:opacity .3s}
.perf-pill:hover{opacity:1;color:var(--tx3)}
@media (max-width:820px){
  #dock{display:none}
  .brand .txt .sub{display:none}
  #card{bottom:18px}
  .top-right a.mini{display:none}
}
@media (prefers-reduced-motion:reduce){
  .brand .mark,#intro .enter-btn .o{animation:none}
}