/* ============================================================================
 * alyxrbytes.pro  THEME LAYER  (the one place to change how the site looks and moves)
 *
 *  1. PRESETS         [data-theme="..."]  palette, corner shapes, shadows, fonts, background effect
 *  2. MODIFIERS       data-contrast / data-text  (set by the visitor)
 *  3. MOTION          data-motion = off | calm | full  (set by the visitor; "off" is the default for reduced-motion devices)
 *  4. BACKGROUND FX   the moving atmosphere behind every page
 *  5. COMPONENT POLISH reveal on scroll, hover lift, spotlight, button shimmer, page transitions
 *  6. APPEARANCE PANEL the "Look" button and its panel
 *
 * To change a colour/shape: edit the preset tokens below. To add a theme: copy a preset block, rename it, add the
 * name to THEMES in assets/theme.js and to netlify/functions/lib/members.mjs. Guide: docs/THEMING.md
 * Other stylesheets only use these --t-* tokens (section.css maps them to the older names).
 * ========================================================================== */

/* ---- 1. PRESETS ------------------------------------------------------------------------------------------------ */
/* terminal: the original neon-on-black look (default) */
:root, :root[data-theme="terminal"]{
  --t-bg:#05060b; --t-bg2:#0d0d14; --t-bg3:#12121c; --t-panel:#0a0d17;
  --t-line:#1a2236; --t-line2:#2a3659;
  --t-ink:#dbe4ff; --t-dim:#8a93b3; --t-mute:#7580a8;
  --t-violet:#b44fff; --t-violet2:#7b00d4; --t-violet3:#e0aaff;
  --t-green:#00ff8c; --t-green2:#00c96d; --t-green3:#aaffd8;
  --t-cyan:#7df9ff; --t-amber:#ffc46b; --t-ok:#7dffb2; --t-hot:#ff5c8a;
  --t-r1:4px; --t-r2:6px; --t-r3:8px;
  --t-shadow:none; --t-shadow-hover:0 6px 24px rgba(180,79,255,.18); --t-blur:0px;
  --t-font:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-scan:.15; --t-tex-o:0; --t-spot:rgba(180,79,255,.16);
  --t-fx:radial-gradient(55% 45% at 12% 8%,color-mix(in srgb,var(--t-violet) 16%,transparent),transparent 70%),radial-gradient(50% 45% at 92% 88%,color-mix(in srgb,var(--t-green) 9%,transparent),transparent 70%);
  --t-fx-anim:fx-drift 38s ease-in-out infinite;
  color-scheme:dark;
}
/* nebula: soft glass panels over a slow aurora */
:root[data-theme="nebula"]{
  --t-bg:#070616; --t-bg2:#0e0c26; --t-bg3:#15123a; --t-panel:rgba(30,24,72,.55);
  --t-line:rgba(255,255,255,.11); --t-line2:rgba(255,255,255,.2);
  --t-ink:#efecff; --t-dim:#b3aedb; --t-mute:#8d88bb;
  --t-violet:#a184ff; --t-violet2:#6a4bd8; --t-violet3:#d3c7ff;
  --t-green:#62f3c8; --t-green2:#33c9a0; --t-green3:#b8fbe6;
  --t-cyan:#86dcff; --t-amber:#ffd08e; --t-ok:#8ff7cf; --t-hot:#ff82b9;
  --t-r1:10px; --t-r2:14px; --t-r3:22px;
  --t-shadow:0 10px 40px rgba(70,40,190,.22); --t-shadow-hover:0 16px 56px rgba(110,80,255,.35); --t-blur:14px;
  --t-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-scan:0; --t-tex-o:0; --t-spot:rgba(161,132,255,.22);
  --t-fx:radial-gradient(45% 40% at 18% 20%,rgba(120,80,255,.45),transparent 70%),radial-gradient(40% 40% at 82% 24%,rgba(40,200,220,.30),transparent 70%),radial-gradient(48% 46% at 60% 88%,rgba(255,90,170,.26),transparent 70%);
  --t-fx-anim:fx-drift 26s ease-in-out infinite;
  color-scheme:dark;
}
/* chrome: black, silver and film grain; sharp corners */
:root[data-theme="chrome"]{
  --t-bg:#0a0a0a; --t-bg2:#111; --t-bg3:#181818; --t-panel:#121212;
  --t-line:#262626; --t-line2:#444;
  --t-ink:#f2f2f2; --t-dim:#a6a6a6; --t-mute:#808080;
  --t-violet:#c9c9c9; --t-violet2:#8a8a8a; --t-violet3:#ffffff;
  --t-green:#f4f4f4; --t-green2:#bdbdbd; --t-green3:#ffffff;
  --t-cyan:#cfd8e3; --t-amber:#e8e0cf; --t-ok:#d6ffe9; --t-hot:#ff4d4d;
  --t-r1:0px; --t-r2:2px; --t-r3:2px;
  --t-shadow:none; --t-shadow-hover:0 8px 30px rgba(255,255,255,.07); --t-blur:0px;
  --t-font:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-scan:0; --t-tex-o:.07; --t-spot:rgba(255,255,255,.10);
  --t-fx:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.055) 50%,transparent 62%);
  --t-fx-anim:fx-sweep 14s linear infinite;
  --t-tex:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
/* daylight: a light, cool-paper theme for bright rooms */
:root[data-theme="daylight"]{
  --t-bg:#eef1f6; --t-bg2:#e4e8f0; --t-bg3:#dbe0ea; --t-panel:#ffffff;
  --t-line:#d3d9e5; --t-line2:#b4bdd0;
  --t-ink:#151a26; --t-dim:#4a566d; --t-mute:#5d6a84;
  --t-violet:#6a2fd8; --t-violet2:#4f1fb0; --t-violet3:#4b1fa6;
  --t-green:#0a7a4a; --t-green2:#07623b; --t-green3:#06522f;
  --t-cyan:#0b6a8a; --t-amber:#8a5400; --t-ok:#0a7a4a; --t-hot:#c4254f;
  --t-r1:6px; --t-r2:10px; --t-r3:14px;
  --t-shadow:0 2px 14px rgba(30,40,80,.08); --t-shadow-hover:0 10px 30px rgba(30,40,80,.16); --t-blur:0px;
  --t-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-scan:0; --t-tex-o:0; --t-spot:rgba(106,47,216,.12);
  --t-fx:radial-gradient(45% 40% at 15% 12%,rgba(150,110,255,.22),transparent 70%),radial-gradient(40% 40% at 88% 20%,rgba(60,190,220,.18),transparent 70%),radial-gradient(45% 45% at 55% 92%,rgba(255,150,190,.16),transparent 70%);
  --t-fx-anim:fx-drift 34s ease-in-out infinite;
  color-scheme:light;
}

/* ---- 2. MODIFIERS (visitor settings) --------------------------------------------------------------------------- */
:root[data-contrast="high"]{--t-ink:#ffffff;--t-dim:#dfe3f2;--t-mute:#c2c8de;--t-line:#5a6488;--t-line2:#9aa6d0}
:root[data-theme="daylight"][data-contrast="high"]{--t-ink:#000;--t-dim:#1d2433;--t-mute:#2c364b;--t-line:#6b7690;--t-line2:#3b455c}
:root[data-text="1"] body{font-size:15px}
:root[data-text="2"] body{font-size:17px}

/* ---- 3. MOTION -------------------------------------------------------------------------------------------------- */
:root{--t-dur:.28s;--t-ease:cubic-bezier(.2,.7,.2,1)}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after,:root[data-motion="off"]::before,:root[data-motion="off"]::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion="calm"]::before{animation:none}

/* ---- 4. BACKGROUND FX ------------------------------------------------------------------------------------------- */
html{background:var(--t-bg)}
body{background:transparent}
html::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:var(--t-fx);will-change:transform;animation:var(--t-fx-anim,none)}
html::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--t-tex,none);opacity:var(--t-tex-o,0);mix-blend-mode:overlay}
@keyframes fx-drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,3%,0) rotate(5deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes fx-sweep{0%{transform:translate3d(-30%,0,0)}100%{transform:translate3d(30%,0,0)}}

/* ---- 5. COMPONENT POLISH ---------------------------------------------------------------------------------------- */
/* glass panels where a theme asks for blur */
.card,.tile,.item,.agegate-box,.log{-webkit-backdrop-filter:blur(var(--t-blur));backdrop-filter:blur(var(--t-blur));box-shadow:var(--t-shadow)}
.card,.tile,.item,.btn,.tabs a{transition:transform var(--t-dur) var(--t-ease),border-color var(--t-dur),box-shadow var(--t-dur),background var(--t-dur),color var(--t-dur)}
/* reveal on scroll (the .rv class is added by theme.js only when motion is on, so nothing is ever hidden without JS) */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .65s var(--t-ease),transform .65s var(--t-ease);transition-delay:calc(var(--i,0) * 70ms)}
:root[data-motion="calm"] .rv.in{transition-delay:0s}
/* full: lift, spotlight, shimmer */
:root[data-motion="full"] .card:hover,:root[data-motion="full"] .tile:hover,:root[data-motion="full"] .item:hover{transform:translateY(-3px);box-shadow:var(--t-shadow-hover);border-color:var(--accent,var(--t-violet))}
:root[data-motion="full"] .card,:root[data-motion="full"] .tile{position:relative;overflow:hidden}
:root[data-motion="full"] .card::after,:root[data-motion="full"] .tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--t-spot),transparent 60%)}
:root[data-motion="full"] .card:hover::after,:root[data-motion="full"] .tile:hover::after{opacity:1}
.btn,button.btn{position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
:root[data-motion="full"] .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);transition:left .6s var(--t-ease);pointer-events:none}
:root[data-motion="full"] .btn:hover::after{left:130%}
/* page transitions (browsers that support them; instant when motion is off) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
:root[data-motion="off"]::view-transition-old(root),:root[data-motion="off"]::view-transition-new(root){animation-duration:0s}

/* ---- 6. APPEARANCE PANEL ---------------------------------------------------------------------------------------- */
#ab-look-btn{position:fixed;z-index:9500;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:1px solid var(--t-line2);background:var(--t-panel);color:var(--t-ink);font:600 18px/1 var(--t-font);cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#ab-look-btn:hover{border-color:var(--t-violet);color:var(--t-violet3)}
#ab-look{position:fixed;z-index:9600;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(max(14px,env(safe-area-inset-bottom,0px)) + 54px);width:min(340px,calc(100vw - 28px));max-height:min(78vh,620px);overflow:auto;background:var(--t-bg2);border:1px solid var(--t-line2);border-radius:var(--t-r3);padding:16px;color:var(--t-ink);font:13px/1.5 var(--t-font);box-shadow:0 18px 60px rgba(0,0,0,.5)}
#ab-look[hidden]{display:none}
#ab-look h2{margin:0 0 4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--t-violet3)}
#ab-look h3{margin:14px 0 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--t-dim)}
#ab-look .row{display:flex;flex-wrap:wrap;gap:6px}
#ab-look button.opt{flex:1;min-width:0;font:inherit;font-size:12px;border:1px solid var(--t-line2);background:transparent;color:var(--t-ink);border-radius:var(--t-r1);padding:7px 8px;cursor:pointer}
#ab-look button.opt[aria-pressed="true"]{border-color:var(--t-violet);color:var(--t-violet3);background:color-mix(in srgb,var(--t-violet) 14%,transparent)}
#ab-look .themes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#ab-look .th{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:8px;text-align:left}
#ab-look .sw{display:flex;height:16px;border-radius:var(--t-r1);overflow:hidden;border:1px solid var(--t-line2)}
#ab-look .sw i{flex:1}
#ab-look .note{margin:12px 0 0;color:var(--t-mute);font-size:12px}
#ab-look .x{float:right;border:0;background:none;color:var(--t-dim);font-size:18px;cursor:pointer;line-height:1}
#ab-look-btn:focus-visible,#ab-look button:focus-visible{outline:2px solid var(--t-violet);outline-offset:2px}
@media (max-width:480px){#ab-look{right:10px;left:10px;width:auto}}