/* ===== THEME ===== */
:root[data-theme="dark"]{
  --bg:#251B2D;
  --fg:#F5F5F6;
  --ink:#E2E2E4;
  --muted:#9a9aa1;
  --accent:#F66A1B;
  --accent-contrast:#327688;
  --grain:.20;
}
:root[data-theme="light"]{
  --bg:#F5F5F6;
  --fg:#251B2D;
  --ink:#1B1730;
  --muted:#575766;
  --accent:#327688;
  --accent-contrast:#F66A1B;
  --grain:.08;
}
:root{ --max:1100px; --gutter:6vw }

/* Register color custom properties so they can transition smoothly */
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #6a5acd; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #00bcd4; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: #4caf50; }
@property --g4 { syntax: '<color>'; inherits: true; initial-value: #ff9800; }

/* Animate updates to the stops (when JS changes them) */
:root {
  transition:
    --g1 1400ms linear,
    --g2 1400ms linear,
    --g3 1400ms linear,
    --g4 1400ms linear;
}


/* ===== BASE ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Montserrat",sans-serif;
  font-size:1.1rem; font-weight:300; line-height:1.6;
  background:var(--bg); color:var(--fg); position:relative;

  /* footer always at bottom across all pages */
  display:flex; flex-direction:column;
}
main{flex:1}

/* Base (no image here) */
/* Full-page grain overlay (no image in the base rule) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;

  background-image: var(--grain-img);   /* set per theme */
  background-repeat: repeat;
  background-size: 16px 16px;
  background-position: 0 0;
  image-rendering: pixelated;

  mix-blend-mode: var(--grain-blend, soft-light); /* set per theme */
  opacity: var(--grain-opacity, .12);             /* set per theme */
}

/* Dark theme: original GIF, soft-light works well on dark bg */
:root[data-theme="dark"]{
  --grain-img: url("fade_dark.png");
  --grain-blend: soft-light;
  --grain-opacity: .2; /* your existing intensity */
}

/* Light theme: PNG with stronger blend so it’s visible */
:root[data-theme="light"]{
  --grain-img: url("fade_light.png");
  --grain-blend: multiply;  /* more visible on light bg */
  --grain-opacity: .3;     /* bump if you want stronger grain */
}


/* Global link look (unified across site) */
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--accent)}

/* ===== HEADER ===== */
.header{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.9rem var(--gutter);
  border-bottom:1px solid rgba(0,0,0,.08);
  background:var(--bg);
}
.logo,
.logo:link,
.logo:visited{
  color:var(--fg);
  text-decoration:none;
}
.logo{
  font-weight:300; font-size:1.05rem; text-transform:lowercase;
  display:inline-flex; gap:.02em; letter-spacing:.01em; white-space:nowrap; line-height:1.2;
}
.logo span{opacity:0; transform:translateY(.2em); transition:opacity .24s ease, transform .24s ease}
.logo span.reveal{opacity:1; transform:none}
.header-tools{display:flex; align-items:baseline; gap:1.2rem; font-size:1.05rem}
.tool-link{background:none; border:none; padding:0; margin:0; font:inherit; color:var(--fg); cursor:pointer; text-decoration:none}
.tool-link:hover{color:var(--accent)}
.type-ch{opacity:0; transform:translateY(.2em); transition:opacity .22s ease, transform .22s ease}
.type-ch.reveal{opacity:1; transform:none}

/* Language */
.lang-switch{display:inline-flex; gap:.5ch; align-items:baseline; overflow:hidden}
.lang-switch .current{color:var(--fg)}
.lang-switch:hover .current{color:var(--accent)}
.lang-inline{
  display:inline-flex; gap:.5ch; white-space:nowrap;
  max-width:0; opacity:0; transition:max-width .32s ease, opacity .22s ease; pointer-events:none;
}
.lang-switch:hover .lang-inline, .lang-switch:focus-within .lang-inline{max-width:16ch; opacity:1; pointer-events:auto}
.lang-inline a{color:var(--muted)}
.lang-inline a:hover{color:var(--accent)}

/* ===== LAYOUT ===== */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1}
.block{margin-bottom:2rem}

/* ===== TYPE ===== */
h1,h2,h3{color:var(--ink); font-weight:300}
h1{font-size:clamp(2rem,6vw,3.2rem); line-height:1.18; margin-bottom:2rem; font-weight:700}
h2{font-size:clamp(1.25rem,3vw,1.8rem); margin:.2rem 0 .85rem}
h3{font-size:1.05rem; margin-bottom:.8rem; font-weight:500}
.lead{max-width:70ch; margin-bottom:1.15rem}
.cursor{margin-left:.25rem; animation:blink 1.2s steps(1,end) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ===== HERO (compact) ===== */
.hero{min-height:50vh; display:flex; flex-direction:column; justify-content:center; padding:2rem 0}
.intro-narrative{margin-top:2rem; max-width:70ch}
.cta-list{list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-top:.8rem}
.cta-link{display:inline-flex; align-items:baseline; gap:.5ch}
.cta-link .arrow{display:inline-block; transform:translateX(0); transition:transform .35s ease, color .25s ease}
.cta-link:hover .arrow{transform:translateX(5ch); color:var(--accent)}
/* Mobile/press feedback mirrors hover */
.cta-link.is-pressing .arrow{transform:translateX(5ch); color:var(--accent)}

/* ===== GRID ===== */
.grid-section{padding:2rem 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:2rem}
.grid ul{list-style:square; padding-left:1.2rem}
.grid ul li{margin:.6rem 0}
.list-loose li{line-height:1.8}

/* ===== AI CLONE ===== */
.ai-clone{padding:2rem 0}
.ai-clone h2{color:var(--ink)}
.ai-clone .accent{color:var(--accent); max-width:70ch; margin-bottom:1.2rem}
.tty{border:2px dashed var(--accent); padding:1.1rem; max-width:720px; font-family:"Courier New",monospace; margin-top:.8rem}
.tty .line{font-size:.9rem}

/* ===== RESONANCE ===== */
.resonance{background:var(--accent-contrast); color:#fff; padding:3rem; margin:10rem; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw}
.resonance-accent{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.resonance .manifesto{font-weight:500; font-size:clamp(1.3rem,3.2vw,1.9rem); max-width:70ch; margin-bottom:1.5rem}
.resonance .cta-link{font-weight:500; color:#fff}
.resonance .cta-link .arrow{color:#fff}

/* ===== FOOTER ===== */
.footer-solid{background:#000; color:#fff; padding:2rem 0; border-top:none; position:relative}
.footer-logo{
  position:absolute; left:var(--gutter); top:2rem;
  font-weight:300; font-size:1.05rem; line-height:1;
}
.footer-inner{display:flex; flex-direction:column; gap:.8rem}
.footer-row{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:baseline}
.footer a{color:#fff}
.footer a:hover{color:var(--accent)}
.footer-row.meta{font-size:.9rem}

/* Mobile adjustments */
@media (max-width:820px){
  .block{margin-bottom:2rem}
  .grid{gap:1.4rem}
  .resonance{padding:2rem var(--gutter)}
  .footer-logo{position:static; display:block; margin:0 var(--gutter) .6rem}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  .type-ch, .logo span, .cta-link .arrow{transition:none}
  .cursor{animation:none}
}

/* ===== COOKIE BANNER ===== */
.cookie-banner{position:fixed; bottom:0; left:0; right:0; background:rgba(0,0,0,.9); color:#fff; padding:.6rem 1rem; z-index:20}
.cookie-inner{max-width:var(--max); margin:0 auto; display:flex; justify-content:flex-end; align-items:center}
.cookie-cta{background:#fff; color:#000; border:none; padding:.4rem 1rem; border-radius:4px; font-weight:600; cursor:pointer; font-size:.9rem}
.cookie-cta:hover{opacity:.9}

/* ===== LEGAL ===== */
.page-legal main > .wrap:first-child { padding-top: 2rem; }

/* ===== MODAL ===== */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: center;
  background: rgba(0,0,0,.85); z-index: 9999;
}
.modal[hidden]{display:none!important}
.modal-dialog{
  background: var(--bg); color: var(--fg);
  max-width: 800px; width: 90%; max-height: 90vh;
  overflow-y: auto; padding: 2rem; border-radius: 8px;
  position: relative; z-index: 10000;
  box-shadow: 0 0 24px rgba(0,0,0,0.6);
}
.modal-close{
  position:absolute; top:.5rem; right:.5rem;
  background:none; border:none; font-size:2rem;
  color:var(--fg); cursor:pointer; line-height:1;
}
.modal-body{word-wrap:break-word; overflow-wrap:break-word; hyphens:auto}
.modal{opacity:0; pointer-events:none; transition:opacity .3s ease}
.modal.show{opacity:1; pointer-events:auto}
.modal-dialog{transform:translateY(-20px); transition:transform .3s ease}
.modal.show .modal-dialog{transform:translateY(0)}

body.modal-open {
  overflow: hidden;
}

/* ===== CONTENT FADE ===== */
#mainContent{opacity:1; transition:opacity .35s ease}
#mainContent.fade-out{opacity:0}

/* Footer hugs last section */
main .block:last-child{margin-bottom:0}
.footer{margin-top:0}

/* Theme toggle */
#themeToggle{
  align-self:center; display:inline-flex; align-items:center; justify-content:center;
  line-height:1; width:1.3em; height:1em; padding:0;
}
#themeToggle svg{width:100%; height:100%; display:block}
#themeToggle:hover{opacity:.9}
#themeToggle{transform:translateY(-1.5px)}

/* ===== AI Gradient ===== */
.ai-gradient {
  font-weight: 700;

  /* Static fallback (never goes black) */
  background:
    radial-gradient(circle at 50% 50%, hsl(323, 100%, 50%), hsl(187, 100%, 50%), #00ff08, #ffa011),
    radial-gradient(circle at 55% 45%, #ff9800, hsl(122, 100%, 50%), #00bcd4, hsl(248, 100%, 50%));

  /* Live layers driven by JS variables (each at 0.5 alpha) */
  background:
    radial-gradient(circle at 50% 50%, var(--a-g1), var(--a-g2), var(--a-g3), var(--a-g4)),
    radial-gradient(circle at 55% 45%, var(--b-g1), var(--b-g2), var(--b-g3), var(--b-g4));

  /* Let the two layers brighten each other instead of stacking harshly */
  background-blend-mode: screen;

  background-size: 220% 220%, 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Optional position drift (both layers move, color change is the main “async”) */
  animation: gemDrift 18s linear infinite;
  will-change: background-position;
}

@keyframes gemDrift {
  0%   { background-position: 40% 60%, 60% 40%; }
  50%  { background-position: 80% 20%, 30% 70%; }
  100% { background-position: 40% 60%, 60% 40%; }
}

/* === IMAGE TEXT FILL === */
.image-fill {
  background:
    linear-gradient(rgba(255,255,255,0.15), rgba(0,0,0,0.15)),
    url("sora_human_160kb.webp") center/cover no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}