/* ==========================================================================
   fx.css — effects + components pulled from the Synesthesia build (Sept 2026).
   Loads AFTER styles.css. Reads the template's :root tokens (--accent, --ink,
   --line, --radius, --display, --body) so a retheme carries through.
   The --fx-* values below are the only extra knobs.
   ========================================================================== */
:root{
  --fx-dark:#07060b;                  /* ground for dark effect sections */
  --fx-dark-ink:#f2eff8;              /* text on that ground */
  --fx-dark-muted:rgba(242,239,248,.62);
  --fx-rain-dim:rgba(242,239,248,.16);/* resting glyph colour */
  --fx-rain-lit:var(--accent);        /* flickering glyph colour */
  --fx-glow:rgba(160,255,185,.85);    /* logo bloom colour (their logo was green) */
  --fx-ring:var(--accent);            /* active coverflow card ring */
}

/* --------------------------------------------------------------------------
   DARK SECTION — any .fx-dark block flips to the dark ground
   -------------------------------------------------------------------------- */
.fx-dark{background:var(--fx-dark);color:var(--fx-dark-muted)}
.fx-dark h1,.fx-dark h2,.fx-dark h3{color:var(--fx-dark-ink)}

/* --------------------------------------------------------------------------
   HERO STACK — canvas + rain + veil + content. Paints in DOM order.
   !! Do NOT put z-index on these layers. A z-index creates a stacking
   !! context, which isolates mix-blend-mode and turns a screen-blended
   !! video into a black rectangle. DOM order already stacks them right.
   -------------------------------------------------------------------------- */
.fx-hero{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:128px 24px 64px;background:var(--fx-dark)}
.fx-hero > canvas,.fx-hero > .fx-rain,.fx-hero > .fx-veil{position:absolute;inset:0}
.fx-hero > canvas{width:100%;height:100%;display:block;opacity:.8}
.fx-veil{pointer-events:none;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.86) 100%)}
.fx-hero-in{position:relative;width:100%;max-width:840px}

/* --------------------------------------------------------------------------
   RAIN — falling glyphs.  <div class="fx-rain" data-rain></div>
   -------------------------------------------------------------------------- */
.fx-rain{overflow:hidden;pointer-events:none;contain:strict}
.fx-rain b{position:absolute;display:block;transform:translate(-50%,-50%);font-family:var(--body);font-weight:300;font-size:1.5rem;line-height:1;color:var(--fx-rain-dim);will-change:top;transition:color .12s,text-shadow .12s}
.fx-rain b.lit{color:var(--fx-rain-lit);font-weight:500;text-shadow:0 0 10px var(--fx-rain-lit)}

/* --------------------------------------------------------------------------
   SCRAMBLE — cycling line.  <p class="fx-scramble" data-scramble data-lines="A|B|C">A</p>
   -------------------------------------------------------------------------- */
.fx-scramble{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;min-height:1.4em;margin:0 0 28px}
.fx-scramble .dud{color:var(--accent);opacity:.7}

/* --------------------------------------------------------------------------
   LOGOS
   .fx-glow  — breathing glow on a transparent PNG. JS adds a twin layer and
               fades ONLY its opacity. (Animating drop-shadow repaints every
               frame and flickers once anything else is animating.)
   .fx-vlogo — animated logo as a black-backed video over a still fallback.
   -------------------------------------------------------------------------- */
.fx-glow,.fx-vlogo{position:relative;display:block;width:100%;max-width:700px;margin:0 auto}
.fx-glow img,.fx-vlogo img{display:block;width:100%;height:auto}
.fx-glow > img:first-child{filter:contrast(1.24) drop-shadow(0 0 1px rgba(255,255,255,.3)) drop-shadow(0 0 6px var(--fx-glow))}
.fx-glow .fx-glow-twin{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  filter:drop-shadow(0 0 8px var(--fx-glow)) drop-shadow(0 0 26px var(--fx-glow)) drop-shadow(0 0 60px var(--fx-glow));
  opacity:.16;animation:fx-bloom 6s ease-in-out infinite;will-change:opacity}
@keyframes fx-bloom{0%,100%{opacity:.16}50%{opacity:.7}}
.fx-vlogo video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:0;transition:opacity .6s;pointer-events:none}
.fx-vlogo img{transition:opacity .5s}
.fx-vlogo.playing video{opacity:1}
.fx-vlogo.playing img{opacity:0}

/* --------------------------------------------------------------------------
   DOOR CARDS — image-backed link tiles.  a.fx-door > img + span.fx-door-txt
   -------------------------------------------------------------------------- */
.fx-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.fx-door{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius,14px);border:1px solid var(--line);background:#111;isolation:isolate}
.fx-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.fx-door::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.9) 100%)}
.fx-door-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 18px;text-align:left}
.fx-door-txt b{display:block;font-family:var(--display);font-size:1.2rem;line-height:1.14;margin-bottom:5px;color:#fff}
.fx-door-txt i{display:block;font-style:normal;font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.fx-door:hover img,.fx-door:focus-visible img{transform:scale(1.06);filter:saturate(1.3)}
.fx-door:hover,.fx-door:focus-visible{border-color:var(--accent)}

/* --------------------------------------------------------------------------
   COVERFLOW — 3D carousel.  See fx-snippets.html for the markup.
   -------------------------------------------------------------------------- */
.fx-cf{--cf-card:clamp(150px,22vw,258px);overflow:hidden}
.fx-cf-frame{perspective:calc(var(--cf-card) * 3);overflow:hidden;padding:40px 0 30px;outline:none;cursor:grab;touch-action:pan-y}
.fx-cf-frame:active{cursor:grabbing}
.fx-cf-frame:focus-visible{box-shadow:inset 0 0 0 2px var(--fx-ring)}
/* The stage is a flat plane at z=0. Side cards are pushed BEHIND it (translateZ < 0), so the
   stage wins every hit test over them and they can't be clicked. Let clicks pass through it. */
.fx-cf-stage{position:relative;height:var(--cf-card);transform-style:preserve-3d;user-select:none;pointer-events:none}
.fx-cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:1/1;overflow:hidden;border-radius:16px;background:#111;border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.55);will-change:transform,opacity;cursor:pointer;transition:box-shadow .28s;pointer-events:auto}
.fx-cf-card img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:transform .5s,filter .35s}
.fx-cf-tag{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.86))}
/* the ↗ badge + ring say "this one is live" without a "click here" label */
.fx-cf-go{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.34);color:#fff;font-size:13px;line-height:1;opacity:0;transform:translateY(-4px);transition:opacity .28s,transform .28s,background .2s;pointer-events:none}
.fx-cf-card.is-active{box-shadow:0 0 0 1px var(--fx-ring),0 0 26px color-mix(in srgb,var(--fx-ring) 35%,transparent),0 18px 44px rgba(0,0,0,.6)}
.fx-cf-card.is-active .fx-cf-go{opacity:1;transform:none}
.fx-cf-card.is-active:hover img{transform:scale(1.05)}
.fx-cf-card.is-active:hover .fx-cf-go{background:var(--fx-ring);border-color:var(--fx-ring)}
.fx-cf-cap{text-align:center;margin-top:14px;padding:0 24px}
.fx-cf-title{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.55rem);color:inherit;border-bottom:1.5px solid var(--line-2);padding-bottom:3px;transition:color .2s,border-color .2s}
.fx-cf-title::after{content:'\2197';font-size:.72em;color:var(--fx-ring)}
.fx-cf-title:hover{color:var(--fx-ring);border-color:var(--fx-ring)}
.fx-cf-desc{display:block;margin-top:5px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.fx-cf-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.fx-cf-nav button{width:36px;height:36px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:inherit;font-size:14px;cursor:pointer}
.fx-cf-nav button:hover,.fx-cf-nav button:focus-visible{border-color:var(--fx-ring);color:var(--fx-ring)}
.fx-cf-dots{display:flex;gap:7px}
.fx-cf-dots i{display:block;width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.28;cursor:pointer}
.fx-cf-dots i.on{opacity:1;background:var(--fx-ring)}

/* --------------------------------------------------------------------------
   ROUTED PAGES — one HTML file, several "pages".  <div data-page="about">
   -------------------------------------------------------------------------- */
[data-page]{display:none}
[data-page].fx-on{display:block;animation:fx-fade .35s ease}
@keyframes fx-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   INVIEW VIDEO — looping clips that only play while visible
   -------------------------------------------------------------------------- */
.fx-clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.fx-clips figure{margin:0}
.fx-clips video{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#0a0810}
.fx-clips figcaption{padding-top:10px;text-align:center;font-size:.95rem;opacity:.75}

@media (prefers-reduced-motion:reduce){
  .fx-rain,.fx-hero > canvas{display:none}
  .fx-glow .fx-glow-twin{animation:none;opacity:.34}
  .fx-vlogo video{display:none}
  .fx-vlogo.playing img{opacity:1}
  [data-page].fx-on{animation:none}
}