/* =====================================================================
   HermitMonster - future.css   (2027+ overhaul layer)
   Layers ON TOP of styles.css/glass.css. Neon-cyber glass, holographic
   borders, fluid variable-type, gradient-mesh aurora, scanline grain,
   scroll-driven reveals. Persona-aware via existing tokens. Additive +
   revertible: remove the future.css/future.js includes to fully roll back.
   Heavy depth only on hover/fine pointers for low-power devices.
   ===================================================================== */

:root {
  --fx-neon: var(--accent);
  --fx-neon-2: var(--accent-2);
  --fx-cy: var(--glow-cyan, var(--spark));
  --fx-grid: rgba(109, 40, 217, 0.10);
  --fx-glass: rgba(255, 255, 255, 0.40);
  --fx-glass-brd: rgba(255, 255, 255, 0.55);
  --fx-scan: rgba(109, 40, 217, 0.04);
  --fx-blur: 16px;
}
[data-theme="dark"], [data-mode="monster"] {
  --fx-grid: rgba(180, 131, 255, 0.13);
  --fx-glass: rgba(20, 12, 40, 0.42);
  --fx-glass-brd: rgba(180, 131, 255, 0.30);
  --fx-scan: rgba(45, 226, 230, 0.05);
}

/* ---- Fluid display type: tighter, bigger, optical ------------------- */
.hero__grid { grid-template-columns: 1.5fr .8fr; gap: clamp(2rem, 5vw, 4rem); }
.hero__copy { max-width: 56ch; }
.hero__title { font-size: clamp(2rem, 6vw, 6rem); letter-spacing: -0.03em; line-height: 0.98; }
.section-head h2 { letter-spacing: -0.02em; }
/* mobile: let the hero copy breathe full-width so big words never clip */
@media (max-width: 640px) {
  .hero__copy { max-width: none; display: flex; flex-direction: column; gap: .6rem; padding: 1rem .25rem; background: none; }
  .hero__title { font-size: clamp(2rem, 9vw, 3.2rem); overflow-wrap: break-word; }
}

/* ---- Animated holographic gradient text ---------------------------- */
.text-grad {
  background-image: linear-gradient(100deg, var(--fx-neon), var(--fx-cy), var(--fx-neon-2), var(--fx-neon));
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-holo 8s linear infinite;
}
@keyframes fx-holo { to { background-position: 280% 0; } }

/* ---- Gradient-mesh aurora behind everything (cheap, GPU) ----------- */
.fx-mesh {
  position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; opacity: .9;
  background:
    radial-gradient(40vmax 40vmax at 18% 22%, color-mix(in srgb, var(--fx-neon) 24%, transparent), transparent 60%),
    radial-gradient(38vmax 38vmax at 82% 18%, color-mix(in srgb, var(--fx-cy) 18%, transparent), transparent 62%),
    radial-gradient(46vmax 46vmax at 70% 88%, color-mix(in srgb, var(--fx-neon-2) 20%, transparent), transparent 64%);
  filter: blur(28px) saturate(1.2);
  animation: fx-mesh-drift 26s ease-in-out infinite alternate;
}
@keyframes fx-mesh-drift { 0%{transform:translate3d(-2%,-1%,0) scale(1)} 100%{transform:translate3d(2%,1%,0) scale(1.08)} }

/* ---- Holographic glass cards: neon conic border + sheen ----------- */
.work-card, .cap, .tile, .archive-card, .quote-card, .stat {
  position: relative;
  -webkit-backdrop-filter: blur(var(--fx-blur)) saturate(1.4);
  backdrop-filter: blur(var(--fx-blur)) saturate(1.4);
}
.work-card::before, .tile::before, .cap::before, .quote-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--a,0deg), var(--fx-neon), var(--fx-cy), var(--fx-neon-2), var(--fx-neon));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--ease); pointer-events: none;
}
.work-card:hover::before, .tile:hover::before, .cap:hover::before, .quote-card:hover::before { opacity: .85; animation: fx-spin 6s linear infinite; }
@keyframes fx-spin { to { --a: 360deg; } }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Section reveals are motion.dev-driven in future.js (spring physics) */

/* ---- Neon scanline + grain veil (BEHIND content, never over text) -- */
.fx-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .25;
  background-image: repeating-linear-gradient(0deg, var(--fx-scan) 0 1px, transparent 1px 3px); }

/* ---- WebGL hero canvas: sits over synth-stage, under copy ---------- */
.hero { position: relative; }
.hero__canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen; }
.hero__grid, .hero__copy, .hero__emblem { position: relative; z-index: 2; }
/* readability scrim: keeps hero copy WCAG-legible over the live canvas */
.hero__copy { padding: clamp(1rem,3vw,2rem); border-radius: var(--radius-lg);
  background: radial-gradient(120% 120% at 20% 30%, color-mix(in srgb, var(--paper) 78%, transparent), transparent 75%); }
.synth-stage { z-index: 0; }
@media (hover: none) { .hero__canvas { display: none; } }

/* CTA primary: neon edge glow */
.btn--primary { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-neon) 50%, transparent), 0 8px 30px -8px color-mix(in srgb, var(--fx-neon) 60%, transparent); }

/* ===== ELEVATION LAYER: deeper immersion ===========================
   Glitch headline, neon scrollbar, holo dividers, scroll-skew, 3D bento.    */

/* Neon scrollbar (cyber rail) */
* { scrollbar-width: thin; scrollbar-color: var(--fx-neon) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 9px; background: linear-gradient(var(--fx-neon), var(--fx-neon-2)); border: 2px solid transparent; background-clip: content-box; }

/* Glitch hero title in Monster only: subtle RGB-split shadow (no duplicate text) */
[data-mode="monster"] .hero__title { position: relative; max-width: 100%; overflow-wrap: break-word; }
[data-mode="monster"] .hero__copy { overflow-x: clip; }
[data-mode="monster"] .hero__title:hover { text-shadow: -2px 0 var(--fx-neon-2), 2px 0 var(--fx-cy); }
/* phones: keep hero title + eyebrow inside the viewport, no clipped bleed */
@media (max-width: 480px) {
  .hero__title, .hero__title .copy-hermit, .hero__title .copy-monster { font-size: clamp(1.8rem, 8vw, 2.6rem); overflow-wrap: break-word; hyphens: auto; }
  :root[data-mode="monster"] .hero__title, :root[data-mode="monster"] .hero__title .copy-monster, :root[data-mode="monster"] .hero__title .word { font-size: clamp(1.8rem, 8vw, 2.6rem); overflow-wrap: anywhere; }
  .hero__copy { max-width: 100%; overflow-x: clip; }
  .eyebrow { overflow-wrap: anywhere; }
}

/* Holographic animated section dividers */
.glyph-divider { position: relative; }
.glyph-divider::after { content:""; position:absolute; left:50%; bottom:0; width:min(80%,640px); height:2px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--fx-neon), var(--fx-cy), var(--fx-neon-2), transparent); background-size:200% 100%; animation: fx-holo 6s linear infinite; }

/* 3D bento tilt: cards lift with neon underglow on hover (fine pointers) */
@media (hover: hover) and (pointer: fine) {
  .work-card, .tile, .cap, .quote-card { transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .work-card:hover, .tile:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 30px 70px -28px color-mix(in srgb, var(--fx-neon) 70%, transparent); }
}

/* Section reveals are driven by motion.dev (future.js) for spring physics */

/* hero never skews */
.hero, .hero--xl { transform: none !important; }

/* ===== Micro-interactions (Prismic-inspired, tasteful + cheap) ======= */
/* Nav links: neon underline glides in left to right */
.nav a { position: relative; }
.nav a::after { content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; transform:scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--fx-neon), var(--fx-cy)); transition: transform .32s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

/* Buttons: light sweep + arrow nudge on hover */
.btn { position: relative; overflow: hidden; }
.btn .arrow { display:inline-block; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn--primary::before { content:""; position:absolute; inset:0; transform:translateX(-120%);
  background: linear-gradient(110deg, transparent, color-mix(in srgb,#fff 55%, transparent), transparent); transition: transform .6s var(--ease); }
.btn--primary:hover::before { transform: translateX(120%); }

/* Eyebrow: quiet shimmer so it reads as "live" without shouting */
.eyebrow { background: linear-gradient(100deg, currentColor 40%, var(--fx-cy), currentColor 60%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; animation: fx-holo 9s linear infinite; }

/* Cards: cursor-tracked refractive spotlight (uses --mx/--my from main.js) */
.work-card, .tile { background-image: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--fx-neon) 12%, transparent), transparent 60%); }

/* Magnetic liquify headings: letters spring back to rest */
.section-head h2 span { transition: transform .45s cubic-bezier(.2,.8,.2,1); }

/* Persona slime wipe: a glassy neon curtain sweeps once on toggle */
.fx-wipe { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0;
  background: radial-gradient(140% 80% at 50% 0%, color-mix(in srgb, var(--fx-cy) 50%, transparent), color-mix(in srgb, var(--fx-neon) 30%, transparent) 40%, transparent 72%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fx-wipe.go { animation: fx-wipe .85s var(--ease) 1; }
@keyframes fx-wipe { 0%{opacity:0; clip-path: inset(0 0 100% 0);} 35%{opacity:1;} 50%{clip-path: inset(0 0 0 0);} 100%{opacity:0; clip-path: inset(100% 0 0 0);} }

/* Reduced-motion: silence the whole FX layer (vestibular safety) */
@media (prefers-reduced-motion: reduce) {
  .fx-mesh, .fx-grain, .fx-wipe, .text-grad, .eyebrow, .glyph-divider::after,
  .work-card::before, .tile::before, .cap::before, .quote-card::before { animation: none !important; }
  .hero__canvas, .fx-mesh, .fx-grain, .fx-wipe { display: none !important; }
  .section-head h2 span { transition: none !important; }
}