/* ═══════════════════════════════════════════════════════
   hallucination/ — style.css
   Full custom dark experience. This site has unique
   cursor, canvas, and animation CSS not found elsewhere.
   Loads AFTER ../_partials/shared.css but overrides freely.
═══════════════════════════════════════════════════════ */

:root{
    --void:#000005; --cyan:#00FFFF; --violet:#BF00FF; --magenta:#FF00AA;
    --deep:#020815; --mid:#041430;
    --ease:cubic-bezier(.4,0,.2,1);
  }
  
  
  body{font-family:'Raleway',sans-serif;background:var(--void);color:rgba(255,255,255,.75);line-height:1.6;min-height:100vh;overflow-x:hidden;cursor:none}
  a{color:inherit;text-decoration:none} button{cursor:none;font-family:inherit;border:none;background:none}

  /* ── CUSTOM CURSOR ── */
  #cursor{position:fixed;width:12px;height:12px;border-radius:50%;background:var(--cyan);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s,opacity .2s;mix-blend-mode:screen;box-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan)}
  #cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,255,255,.3);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s var(--ease);mix-blend-mode:screen}
  body:hover #cursor{opacity:1}

  /* ── BACK LINK ── */
  .back{position:fixed;top:1.5rem;left:1.5rem;z-index:500;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,255,255,.4);border:1px solid rgba(0,255,255,.15);padding:.35rem .9rem;border-radius:2px;transition:all .25s}
  .back:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(0,255,255,.2)}
  .lang-toggle{position:fixed;top:1.5rem;right:1.5rem;z-index:500;display:flex;gap:.4rem}
  .btn-lang{font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:.3rem .6rem;border-radius:2px;border:1px solid transparent;color:rgba(0,255,255,.3);transition:all .25s}
  .btn-lang.active{border-color:var(--cyan);color:var(--cyan)}

  /* ── CANVAS ── */
  #canvas{position:fixed;inset:0;z-index:0}

  /* ── CONTENT ── */
  .content{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 2rem;pointer-events:none}
  .content > *{pointer-events:auto}

  .hero-tag{font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:2rem;opacity:.6}
  .hero-h1{font-size:clamp(3rem,12vw,10rem);font-weight:100;letter-spacing:.08em;line-height:.95;margin-bottom:2rem;color:#fff}
  .hero-h1 .cyan{color:var(--cyan);text-shadow:0 0 30px var(--cyan),0 0 60px rgba(0,255,255,.4)}
  .hero-h1 .violet{color:var(--violet);text-shadow:0 0 30px var(--violet),0 0 60px rgba(191,0,255,.4)}
  .hero-sub{font-size:clamp(.85rem,2vw,1.05rem);font-weight:200;letter-spacing:.08em;color:rgba(255,255,255,.45);max-width:560px;line-height:2;margin-bottom:4rem}
  .hero-sub em{color:rgba(0,255,255,.7);font-style:normal}

  /* Floating glyphs */
  .glyphs{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
  .glyph{position:absolute;font-size:clamp(.6rem,1.2vw,1rem);font-weight:100;letter-spacing:.2em;color:rgba(0,255,255,.06);white-space:nowrap;animation:drift linear infinite}
  @keyframes drift{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(var(--drift-x,0px)) rotate(var(--drift-r,0deg));opacity:0}}

  /* Cards */
  .cards{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:3rem}
  .dream-card{background:rgba(0,255,255,.03);border:1px solid rgba(0,255,255,.08);padding:1.75rem 2rem;border-radius:4px;max-width:280px;text-align:left;transition:all .3s;backdrop-filter:blur(8px)}
  .dream-card:hover{border-color:rgba(0,255,255,.25);background:rgba(0,255,255,.06);box-shadow:0 0 30px rgba(0,255,255,.06)}
  .dream-card__icon{font-size:1.6rem;margin-bottom:.75rem;line-height:1}
  .dream-card__title{font-size:1rem;font-weight:300;letter-spacing:.1em;color:rgba(0,255,255,.8);margin-bottom:.5rem}
  .dream-card__desc{font-size:.8rem;font-weight:200;color:rgba(255,255,255,.4);line-height:1.75;letter-spacing:.04em}

  /* Scroll sections */
  .section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;position:relative;z-index:2;text-align:center}
  .section h2{font-size:clamp(2rem,7vw,5.5rem);font-weight:100;letter-spacing:.12em;color:#fff;line-height:1.1;margin-bottom:2rem}
  .section h2 .glow-c{color:var(--cyan);text-shadow:0 0 20px var(--cyan)}
  .section h2 .glow-v{color:var(--violet);text-shadow:0 0 20px var(--violet)}
  .section p{font-size:clamp(.85rem,1.8vw,1rem);font-weight:200;letter-spacing:.06em;color:rgba(255,255,255,.4);max-width:600px;line-height:1.95;margin-bottom:2rem}
  .divider{width:1px;height:80px;background:linear-gradient(to bottom,transparent,rgba(0,255,255,.25),transparent);margin:3rem auto}

  /* Organism visualiser */
  #orgCanvas{display:block;margin:0 auto;border-radius:50%;border:1px solid rgba(0,255,255,.1);box-shadow:0 0 60px rgba(0,255,255,.07)}

  /* NAV footer */
  .nav-footer{position:relative;z-index:2;padding:3rem 2rem;text-align:center;border-top:1px solid rgba(0,255,255,.06)}
  .nav-footer a{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,255,255,.3);transition:color .25s;margin:0 1.25rem}
  .nav-footer a:hover{color:var(--cyan)}

  /* Reveal */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
  .reveal.is-visible{opacity:1;transform:none}

  /* Scrollbar */
  ::-webkit-scrollbar{width:3px}
  ::-webkit-scrollbar-track{background:var(--void)}
  ::-webkit-scrollbar-thumb{background:rgba(0,255,255,.2);border-radius:2px}

/* ── FOOTER colours ── */
.site-footer { background: rgba(0,0,5,.8); border-top: 1px solid rgba(0,255,255,.1); color: rgba(255,255,255,.6); }
.site-footer .ft-brand .ft-logo { color: var(--cyan); }
.site-footer .ft-col h4 { color: var(--cyan); opacity: .7; }
.site-footer a { color: rgba(255,255,255,.35); }
.site-footer a:hover { color: var(--cyan); }
.site-footer .ft-bot { border-top: 1px solid rgba(0,255,255,.08); }

/* ── THEME — hallucination stays dark, toggle dimly acknowledged ── */
[data-theme="light"] {
  /* Hallucination is a dark experience by design.
     Light mode softens slightly but keeps the void. */
  --void: #000810;
  --deep: #030F1E;
  --mid:  #061828;
}
[data-theme="dark"] {
  --void: #000005;
  --deep: #020815;
  --mid:  #041430;
}

/* ── HAL NAV ── */
.hal-nav {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 400;
  width: min(60%, 720px);
  background: rgba(0,0,10,.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0,255,255,.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: .75rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hal-nav__logo {
  font-family: 'Raleway', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
}
.hal-nav__links {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.hal-nav__links a {
  font-size: .6rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(0,255,255,.45);
  transition: color .25s;
  white-space: nowrap;
}
.hal-nav__links a:hover { color: var(--cyan); }
.hal-nav__controls {
  display: flex; align-items: center; gap: .4rem; margin-left: auto;
}
.hal-nav__ham {
  display: none; flex-direction: column; gap: 4px;
  background: transparent; border: none; cursor: pointer; padding: 4px;
}
.hal-nav__ham span {
  display: block; width: 20px; height: 1.5px;
  background: rgba(0,255,255,.6);
  transition: all .26s ease;
}

/* Mobile nav */
@media (max-width: 768px) {
  .hal-nav {
    width: 100%; left: 0; transform: none;
    border-radius: 0; border-left: none; border-right: none;
    padding: .75rem 1.25rem;
  }
  .hal-nav__links {
    display: none;
    flex-direction: column; align-items: flex-start;
    position: fixed; inset: 52px 0 0 0;
    background: rgba(0,0,10,.96);
    padding: 2rem 1.5rem;
    gap: 1.25rem; z-index: 399;
  }
  .hal-nav__links.open { display: flex; }
  .hal-nav__links a { font-size: .78rem; }
  .hal-nav__ham { display: flex; }
  .hal-nav__controls { margin-left: 0; }
}

/* Manifesto grid */
.manifesto-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1.5rem; margin-top: 3rem;
}
.mitem {
  background: rgba(0,255,255,.02);
  border: 1px solid rgba(0,255,255,.06);
  padding: 2rem; transition: border-color .3s;
}
.mitem:hover { border-color: rgba(0,255,255,.18); }
.mitem__glyph { font-size: 2rem; color: rgba(191,0,255,.5); display: block; margin-bottom: .75rem; }
.mitem__title {
  font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(0,255,255,.7); margin-bottom: .6rem;
}
.mitem__body { font-size: .88rem; color: rgba(255,255,255,.35); line-height: 1.8; }

/* Footer always dark on hallucination */
#site-footer footer {
  background: rgba(0,0,5,.95) !important;
  border-top: 1px solid rgba(0,255,255,.08) !important;
}
#site-footer .ft-logo { color: var(--cyan) !important; }
#site-footer .ft-motto, #site-footer .ft-desc { color: rgba(0,255,255,.4) !important; }
#site-footer .ft-col h4 { color: rgba(0,255,255,.4) !important; border-color: rgba(0,255,255,.06) !important; }
#site-footer a { color: rgba(255,255,255,.3) !important; }
#site-footer a:hover { color: var(--cyan) !important; }
#site-footer p { color: rgba(255,255,255,.2) !important; }
#site-footer .ft-bot { border-top: 1px solid rgba(0,255,255,.06) !important; }
#site-footer .ft-grid { border-bottom: 1px solid rgba(0,255,255,.06) !important; }

/* Light mode for hallucination (if toggled) */
[data-theme="light"] body {
  background: #F0FFFF;
}
[data-theme="light"] .hal-nav {
  background: rgba(240,255,255,.9);
  border-color: rgba(0,180,180,.2);
}
[data-theme="light"] .hal-nav__logo { color: #008888; }
[data-theme="light"] .hal-nav__links a { color: rgba(0,100,100,.6); }
[data-theme="light"] .content p, [data-theme="light"] .section p, [data-theme="light"] .dream-card { color: #004444; }
[data-theme="light"] .hero-h1 { color: #001414; }
[data-theme="light"] .section h2 { color: #001414; }

@media (max-width: 640px) { .manifesto-grid { grid-template-columns: 1fr; } }