/* ============================================================
   FX-HOME — HOMEPAGE PLAYGROUND. Heavy / experimental effects, loaded ONLY by
   index.html. Everything gated by lite-mode / reduced-motion / coarse-pointer.
   Prune freely — each effect is independent.
   ============================================================ */

/* — Three.js 3D hero object canvas — */
#fxh-3d {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#fxh-3d.fxh-ready { opacity: 0.62; }

/* — Aurora blobs behind the hero — */
.fxh-aurora {
  position: absolute; inset: -12% -6%; z-index: 0;
  pointer-events: none; overflow: hidden; filter: blur(64px); opacity: 0.5;
}
.fxh-blob { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: multiply; will-change: transform; }
.fxh-blob.b1 { background: radial-gradient(circle, rgba(217,119,87,0.50), transparent 60%); left: -10%; top: -22%; animation: fxh-blob1 24s ease-in-out infinite alternate; }
.fxh-blob.b2 { background: radial-gradient(circle, rgba(139,123,255,0.45), transparent 60%); right: -16%; top: -12%; animation: fxh-blob2 30s ease-in-out infinite alternate; }
.fxh-blob.b3 { background: radial-gradient(circle, rgba(212,184,134,0.50), transparent 60%); left: 28%;  bottom: -32%; animation: fxh-blob3 27s ease-in-out infinite alternate; }
@keyframes fxh-blob1 { to { transform: translate(20%, 14%) scale(1.2); } }
@keyframes fxh-blob2 { to { transform: translate(-14%, 20%) scale(1.15); } }
@keyframes fxh-blob3 { to { transform: translate(10%, -16%) scale(1.25); } }

/* — Cursor-follow spotlight over the hero — */
.fxh-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12), transparent 60%);
  mix-blend-mode: soft-light;
}

/* — Click ripple — */
.fxh-ripple {
  position: fixed; z-index: 9996; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(217,119,87,0.32), transparent 70%);
  transform: translate(-50%, -50%) scale(0); animation: fxh-ripple 720ms ease-out forwards;
}
@keyframes fxh-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* — Cursor trail — */
.fxh-trail { position: fixed; width: 6px; height: 6px; border-radius: 50%; background: rgba(139,123,255,0.5); z-index: 9997; pointer-events: none; will-change: transform; }

/* — Gating — */
body.lite-mode  #fxh-3d, body.motion-off  #fxh-3d,
body.lite-mode  .fxh-aurora, body.motion-off .fxh-aurora,
body.lite-mode  .fxh-spotlight, body.motion-off .fxh-spotlight,
body.lite-mode  .fxh-trail, body.motion-off .fxh-trail { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #fxh-3d, .fxh-aurora, .fxh-spotlight, .fxh-trail { display: none !important; }
  .fxh-blob { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  #fxh-3d, .fxh-spotlight, .fxh-trail { display: none !important; }
}
/* ============================================================
   HOMEPAGE PREMIUM REWORK  (typography + composition, index.html only)
   "Overcooked premium" — oversized editorial Fraunces display, tight optical
   leading, composed FX so the maximalism reads luxe, not noisy.
   ============================================================ */

/* words never break across a line (belt-and-suspenders with JS) */
.fx-word { display: inline-block; white-space: nowrap; }

/* — HERO DISPLAY: oversized light Fraunces, tight, optical (3 lines) — */
.hero h1, .hero .display-xl, .hero .hero-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.6rem, 6.2vw, 5.6rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.025em !important;
  font-optical-sizing: auto;
}
/* the editorial <em> already uses Fraunces italic — keep it cohesive */
.hero h1 em, .hero .hero-title em, .hero .editorial-em { font-style: italic; font-weight: 300; }

/* keep the gradient-text sweep readable + premium on the eyebrow */
.hero .eyebrow {
  font-family: 'Source Code Pro', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.34em !important;
  font-size: 0.72rem !important;
  font-weight: 500;
}

/* lede / hero subcopy — airy, generous */
.hero .lede, .hero p.sub, .hero .hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  line-height: 1.6 !important;
  max-width: 46ch;
}

/* — SECTION HEADERS: large Fraunces, tight (targets the real .display-* ) — */
.display-lg, [data-focus-section] h2, main > section h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.1rem, 4.6vw, 3.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}
.display-sm, [data-focus-section] h3, main > section h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* — COMPOSITION: hero content always above the FX, with a soft legibility
   halo so the type stays crisp over the mesh + aurora + 3D + particles — */
.hero > .container, .hero .hero-content, .hero .hero-inner {
  position: relative; z-index: 3;
}
.hero h1, .hero .display-xl { position: relative; z-index: 3; }
.hero::after {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, rgba(250,247,240,0.55), transparent 70%);
}

/* tune the FX so the maximalism stays luxe (prune any of these freely) */
#fxh-3d.fxh-ready { opacity: 0.5; }
.fxh-aurora { opacity: 0.4; }
html.theme-light .hero-mesh-canvas { opacity: 0.42; }

/* — PREMIUM RHYTHM: more air up top, generous section spacing — */
.hero { padding-top: clamp(150px, 18vh, 230px); padding-bottom: clamp(80px, 12vh, 160px); }

/* — buttons: premium pill (sheen sweep / movement removed per request) — */
.hero .btn, .hero .button, .hero .cta { letter-spacing: 0.01em; font-weight: 600; }
/* === /HOMEPAGE PREMIUM REWORK === */

/* ============================================================
   MAX-CLUTTER ADD-ONS (physics, marquee, conic borders)
   ============================================================ */

/* — Matter.js physics canvas — fixed, behind content, subtle floating shapes — */
#fxh-physics { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* — infinite marquee strip under the hero — */
.fxh-marquee {
  overflow: hidden; white-space: nowrap; position: relative; z-index: 2;
  padding: 16px 0; margin: 8px 0;
  border-top: 1px solid rgba(60,40,20,0.08); border-bottom: 1px solid rgba(60,40,20,0.08);
}
.fxh-marquee-track { display: inline-flex; will-change: transform; animation: fxh-marq 26s linear infinite; }
.fxh-marquee-track span {
  font-family: 'Fraunces', Georgia, serif; font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.6rem); letter-spacing: -0.01em;
  padding-right: 0.35em; color: rgba(74,68,88,0.85);
}
@keyframes fxh-marq { to { transform: translateX(-50%); } }

/* — animated conic-gradient border ring on cards (on hover) — */
.fxh-conic { position: relative; }
.fxh-conic::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--fx-angle),
    rgba(217,119,87,0.65), rgba(139,123,255,0.65), rgba(212,184,134,0.65), rgba(217,119,87,0.65));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  animation: fx-angle 6s linear infinite;
}
.fxh-conic:hover::after { opacity: 1; }

/* gating */
body.lite-mode #fxh-physics, body.motion-off #fxh-physics,
body.lite-mode .fxh-marquee, body.motion-off .fxh-marquee { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #fxh-physics { display: none !important; }
  .fxh-marquee-track, .fxh-conic::after { animation: none; }
}
@media (hover: none), (pointer: coarse) { #fxh-physics { display: none !important; } }
/* === /MAX-CLUTTER ADD-ONS === */

/* ============================================================
   OVERDRIVE — white-contrast tuning + per-feature OFF switches + FX DECK
   (overdrive.html only; gated by html[data-overdrive])
   ============================================================ */

/* the page is WHITE — drop the global pale bedrock so OFF = truly white;
   the single toggleable gradient is #fxh-gradient (defined in overdrive.html). */
html[data-overdrive].fx-on.theme-light::before,
html[data-overdrive].fx-on::before { display: none !important; }

/* 3D globe reads strong on white */
html[data-overdrive] #fxh-3d.fxh-ready { opacity: 0.96; }
/* aurora: a touch stronger so the colour shows over white */
html[data-overdrive] .fxh-aurora { opacity: 0.5; }
/* spotlight: a soft COLOURED glow (white soft-light is invisible on white) */
html[data-overdrive] .fxh-spotlight {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(107,91,255,0.16), transparent 62%);
  mix-blend-mode: normal;
}

/* ---- per-feature OFF switches (driven by html.fxoff-<id>) ---- */
html.fxoff-globe     #fxh-3d            { display: none !important; }
html.fxoff-aurora    .fxh-aurora        { display: none !important; }
html.fxoff-spotlight .fxh-spotlight     { display: none !important; }
html.fxoff-trail     .fxh-trail         { display: none !important; }
html.fxoff-marquee   .fxh-marquee       { display: none !important; }
html.fxoff-physics   #fxh-physics       { display: none !important; }
html.fxoff-conic     .fxh-conic::after  { display: none !important; }
html.fxoff-gravity   #fxh-grav          { display: none !important; }
html.fxoff-constellation #fxh-constel   { display: none !important; }
html.fxoff-blackhole #fxh-hole          { display: none !important; }
html.fxoff-liquidmetal #fxh-metal       { display: none !important; }
html.fxoff-flowfield #fxh-flow          { display: none !important; }
html.fxoff-boids     #fxh-boids         { display: none !important; }
html.fxoff-lightning #fxh-bolt          { display: none !important; }
html.fxoff-matrix    #fxh-matrix        { display: none !important; }
html.fxoff-timedial  .fxh-dial          { display: none !important; }
/* split OFF → keep letters, drop the immersion animation (chars stay legible) */
html.fxoff-split .fx-char { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- effect canvas layers (fixed, behind content, never eat clicks) ---- */
#fxh-grav, #fxh-constel, #fxh-hole, #fxh-flow, #fxh-metal,
#fxh-shaders, #fxh-boids, #fxh-bolt, #fxh-matrix { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* the shared shader stack — fades in once three compiles the programs */
#fxh-shaders { opacity: 0.7; }
#fxh-matrix { opacity: 0.85; }
/* black-hole shader fades in once it's compiled */
#fxh-hole { opacity: 0; transition: opacity 1s ease; }
#fxh-hole.fxh-ready { opacity: 0.9; }
/* liquid-metal: blur + hard contrast threshold = the gooey "metaball" merge */
#fxh-metal { filter: blur(7px) contrast(15); opacity: 0.6; }

/* time dial — drag to scrub / rewind the looping animations */
.fxh-dial { position: fixed; left: 18px; bottom: 90px; z-index: 9994; text-align: center; user-select: none; }
.fxh-dial-face {
  width: 58px; height: 58px; border-radius: 50%; cursor: grab; position: relative; margin: 0 auto;
  background: radial-gradient(circle at 50% 38%, #2A2150, #0B0917);
  border: 1px solid rgba(139,123,255,0.5); box-shadow: 0 10px 26px -10px rgba(46,31,159,0.7);
}
.fxh-dial-face:active { cursor: grabbing; }
.fxh-dial-hand { position: absolute; left: 50%; top: 50%; width: 2px; height: 22px; background: #C85A38; transform-origin: bottom center; transform: translate(-50%,-100%); border-radius: 2px; }
.fxh-dial-cap { display: block; margin-top: 5px; font-family: 'Source Code Pro', ui-monospace, monospace; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2, #5a5470); }
/* when the dial is held, scrub = pause the looping anims + offset by the dial */
body.fxh-scrub .fxh-marquee-track,
body.fxh-scrub #fxh-gradient {
  animation-play-state: paused !important;
  animation-delay: var(--fx-scrub, 0s) !important;
}
@media (max-width: 640px) { .fxh-dial { bottom: 78px; } }

/* ---- deck: batch separators ---- */
.fx-batch-sep {
  margin: 12px 4px 4px; padding-top: 10px; border-top: 1px dashed rgba(139,123,255,0.32);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,241,255,0.5);
}
.fx-batch-sep:first-of-type { border-top: 0; margin-top: 2px; padding-top: 0; }

/* ---- FX DECK control panel ---- */
.fx-deck {
  position: fixed; top: 84px; right: 16px; z-index: 9995;
  width: 232px; font-family: 'Source Code Pro', ui-monospace, monospace;
  color: #F4F1FF; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,16,38,0.94), rgba(11,9,23,0.94));
  border: 1px solid rgba(139,123,255,0.4);
  box-shadow: 0 20px 50px -18px rgba(46,31,159,0.6); backdrop-filter: blur(8px);
}
.fx-deck-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 14px; background: transparent; border: 0; color: #F4F1FF;
  font: inherit; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.fx-deck-dot { width: 8px; height: 8px; border-radius: 50%; background: #C85A38; box-shadow: 0 0 8px #C85A38; }
.fx-deck-body { max-height: 64vh; overflow-y: auto; padding: 4px 10px 12px; border-top: 1px solid rgba(139,123,255,0.22); }
.fx-deck-collapsed .fx-deck-body { display: none; }
.fx-deck-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 10px; font-size: 0.62rem; letter-spacing: 0.16em; color: rgba(244,241,255,0.55); text-transform: uppercase; }
.fx-deck-bulk { display: flex; gap: 6px; }
.fx-bulk-btn {
  cursor: pointer; font: inherit; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; color: #F4F1FF;
  background: rgba(139,123,255,0.16); border: 1px solid rgba(139,123,255,0.4);
}
.fx-bulk-btn:hover { background: rgba(139,123,255,0.32); }
.fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 4px; cursor: pointer; border-radius: 8px; }
.fx-row:hover { background: rgba(139,123,255,0.1); }
.fx-row-label { font-size: 0.74rem; letter-spacing: 0.01em; color: rgba(244,241,255,0.92); }
.fx-switch { position: relative; flex: 0 0 auto; width: 34px; height: 19px; border-radius: 999px; background: rgba(255,255,255,0.16); transition: background 0.2s ease; }
.fx-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fx-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform 0.2s ease; pointer-events: none; }
.fx-switch input:checked + .fx-knob { transform: translateX(15px); }
.fx-switch:has(input:checked) { background: linear-gradient(120deg, #C85A38, #6B5BFF); }
@media (max-width: 640px) { .fx-deck { top: auto; bottom: 14px; right: 10px; width: 200px; } }
/* === /OVERDRIVE === */