/* ============================================================================
   FF VIBE KIT — canonical style sheet for Future Forest 2026 Softr vibe blocks
   v1 · 2026-06-20 · reconciled from music / performance / visual-art /
   workshop-yoga / art-installation listing + detail blocks.

   HOW TO USE (shadow-DOM vibe blocks)
   -----------------------------------
   These blocks render in a shadow root, so a globally hosted CSS file CANNOT
   reach inside them — the styles must live in each block's own injected <style>.
   So: paste this whole file into the template literal returned by an `FFStyles`
   component (see ff-vibe-style-kit.md §2), render <FFStyles/> once, and put
   `data-ff` on the block's root element.

       <div data-ff className="relative overflow-hidden"
            style={{ background: "var(--ff-bg)" }}>

   THEMING PER PAGE
   ----------------
   Retint the kinetic heading + aurora by overriding the three gradient stops on
   the root (no CSS edits needed):
       <div data-ff style={{ "--ff-g1":"#56efe0","--ff-g2":"#b46cff","--ff-g3":"#fb923c" }}>
   Per-card/tile accent: set `--acc` inline on each .ff-tile/.ff-frame/.ff-card/
   .ff-feature (e.g. style={{ "--acc": stageColor(stage) }}).

   All ambient motion is gated behind @media (prefers-reduced-motion: no-preference).
   ============================================================================ */

/* ── tokens + scope ───────────────────────────────────────────────────────── */
[data-ff] {
  /* brand */
  --ff-teal:#56efe0; --ff-purple:#b46cff; --ff-green:#4ae08b;
  --ff-rose:#fb7185; --ff-gold:#fbbf24; --ff-orange:#fb923c;
  --ff-sage:#7ba07f; --ff-sky:#7fa6c4;
  /* surfaces / ink */
  --ff-bg:#0b0b0d; --ff-ink:#f4f6fb;
  /* heading + aurora gradient stops — OVERRIDE THESE PER PAGE to retheme */
  --ff-g1:var(--ff-teal); --ff-g2:var(--ff-purple); --ff-g3:var(--ff-green);
  /* default per-element accent (override inline as --acc) */
  --acc:var(--ff-teal);
  color:var(--ff-ink);
  font-family:'Archivo','Lato',system-ui,sans-serif;
}

/* Collapse Softr's ancestor wrappers so the block self-sizes (no clipped/empty space) */
div:has(> [data-ff]), div:has(> div > [data-ff]),
div:has(> div > div > [data-ff]), div:has(> div > div > div > [data-ff]) {
  height:fit-content !important; min-height:unset !important; overflow:visible !important;
}

/* ── ambient background: aurora + film grain ──────────────────────────────── */
.ff-aurora {
  position:absolute; inset:-20%; z-index:0; pointer-events:none; filter:blur(72px); opacity:.5;
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--ff-g1) 46%, transparent), transparent 60%),
    radial-gradient(40% 44% at 82% 28%, color-mix(in srgb, var(--ff-g2) 44%, transparent), transparent 62%),
    radial-gradient(46% 50% at 50% 90%, color-mix(in srgb, var(--ff-g3) 34%, transparent), transparent 60%);
}
.ff-grain {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.045; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── kinetic gradient heading (Archivo variable weight) ───────────────────── */
.ff-gradient-flow {
  font-family:'Archivo','Lato',sans-serif; font-weight:840; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--ff-g1),var(--ff-g2) 45%,var(--ff-g3) 82%,var(--ff-g1));
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* NEVER place .ff-gradient-flow over a photo (text-transparent has no fallback fill
   and vanishes over busy imagery). Keep it on the solid --ff-bg. Over images use
   solid white + text-shadow (see .ff-on-image). */

/* ── glass surfaces + filter pills ────────────────────────────────────────── */
.ff-glass {
  background:linear-gradient(180deg,rgba(22,26,40,.72),rgba(12,14,22,.72));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.ff-pill {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:rgba(244,246,251,.82); transition:all .25s ease;
}
.ff-pill:hover { border-color:rgba(86,239,224,.6); color:#eafffb; }
.ff-pill[data-active="true"] {
  background:rgba(86,239,224,.14); border-color:rgba(86,239,224,.7); color:#eafffb;
  box-shadow:0 0 0 1px rgba(86,239,224,.25),0 6px 24px -10px rgba(86,239,224,.5);
}
/* outline-based focus ring so it coexists with the active box-shadow glow */
.ff-pill:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ── POSTER TILE (music / performance) — uniform aspect, hover lift + spotlight ─ */
.ff-tile {
  position:relative; isolation:isolate; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:#101218;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.ff-tile::before { /* gradient hairline border on hover */
  content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,var(--acc),transparent 40%,transparent 60%,var(--ff-purple));
  -webkit-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 ease;
}
.ff-tile::after { /* pointer-follow spotlight (set --mx/--my on pointermove) */
  content:""; position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%);
  transition:opacity .3s ease;
}
.ff-tile:hover { transform:translateY(-6px); border-color:transparent;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 0 40px -16px var(--acc); }
.ff-tile:hover::before, .ff-tile:hover::after { opacity:1; }
.ff-tile:focus-visible { outline:none; border-color:transparent;
  box-shadow:0 0 0 2px var(--acc),0 24px 60px -24px rgba(0,0,0,.85); }

/* ── GALLERY FRAME (visual-art lego mosaic) — artwork-forward, image zoom ───── */
.ff-frame {
  position:relative; display:block; width:100%; height:100%; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10); background:#101218;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.ff-frame::before {
  content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,var(--acc),transparent 42%,transparent 58%,var(--ff-purple));
  -webkit-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 ease;
}
.ff-frame:hover { transform:translateY(-5px); border-color:transparent;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 0 40px -16px var(--acc); }
.ff-frame:hover::before { opacity:1; }
.ff-frame:hover img { transform:scale(1.05); }
.ff-frame:focus-visible { outline:none; border-color:transparent;
  box-shadow:0 0 0 2px var(--acc),0 24px 60px -24px rgba(0,0,0,.85); }
.ff-frame img { transition:transform .7s cubic-bezier(.2,.7,.2,1); }
/* hover/focus-revealed meta row (e.g. style tags) */
.ff-meta-extra { max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease,opacity .3s ease; }
.ff-frame:hover .ff-meta-extra, .ff-frame:focus-visible .ff-meta-extra { max-height:60px; opacity:1; }

/* ── EDITORIAL CARD (workshop-yoga class cards) — banner + body, glass panel ── */
.ff-card {
  position:relative; display:flex; flex-direction:column; height:100%; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(22,26,40,.66),rgba(12,14,22,.72));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease;
}
.ff-card::before {
  content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,var(--acc),transparent 45%,transparent 55%,var(--acc));
  -webkit-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 ease;
}
.ff-card:hover { transform:translateY(-5px); border-color:transparent;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),0 0 40px -18px var(--acc); }
.ff-card:hover::before { opacity:.9; }
.ff-card:hover .ff-banner img { transform:scale(1.05); }
.ff-card:focus-visible { outline:none; border-color:transparent;
  box-shadow:0 0 0 2px var(--acc),0 24px 60px -24px rgba(0,0,0,.85); }
.ff-banner img { transition:transform .7s cubic-bezier(.2,.7,.2,1); }

/* ── FEATURE ROW (art-installation zigzag) + stretched-link pattern ────────── */
.ff-feature { position:relative; border-radius:22px; transition:background-color .4s ease; }
.ff-feature:hover { background:rgba(255,255,255,.02); }
.ff-feature:focus-within { outline:2px solid var(--acc); outline-offset:6px; border-radius:22px; }
/* the row is a <div>; the TITLE is the real <a class="ff-stretch"> whose ::after
   covers the whole row (so the row is clickable WITHOUT nesting interactives).
   Put real links (socials) in a `position:relative; z-index:10` group to stay clickable. */
.ff-stretch { outline:none; }
.ff-stretch::after { content:""; position:absolute; inset:0; z-index:1; border-radius:22px; }
.ff-shot { /* the feature's image well */
  position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#101218;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .5s ease;
}
.ff-shot::before {
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,var(--acc),transparent 45%,transparent 55%,var(--acc));
  -webkit-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 ease;
}
.ff-feature:hover .ff-shot { transform:translateY(-4px); border-color:transparent;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85),0 0 50px -18px var(--acc); }
.ff-feature:hover .ff-shot::before { opacity:1; }
.ff-feature:hover .ff-shot img { transform:scale(1.05); }
.ff-shot img { transition:transform .8s cubic-bezier(.2,.7,.2,1); }

/* ── pointer-spotlight tile for galleries/lightbox triggers (detail pages) ─── */
.ff-spotlight { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%),rgba(86,239,224,.22),transparent 60%); }

/* ── live "on now" badge + equalizer bars ─────────────────────────────────── */
.ff-eq { display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.ff-eq i { width:2.5px; background:currentColor; border-radius:2px; height:35%; }
/* .ff-live-ring is the pill that pulses; give it style={{ "--acc": accent }} */

/* ── legibility helper for text over arbitrary images ─────────────────────── */
.ff-on-image { color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.9); }

/* ── entrance reveal + all ambient motion (gated for reduced-motion) ───────── */
@media (prefers-reduced-motion: no-preference) {
  .ff-aurora { animation:ff-drift 26s ease-in-out infinite alternate; }
  .ff-gradient-flow { animation:ff-flow 9s ease-in-out infinite, ff-wght 7s ease-in-out infinite; }
  .ff-reveal { opacity:1; transform:none;
    transition:opacity .6s ease var(--d,0ms),transform .6s ease var(--d,0ms); }
  @starting-style { .ff-reveal { opacity:0; transform:translateY(16px); } }
  .ff-live-ring { animation:ff-pulse 2.1s ease-in-out infinite; }
  .ff-eq i { animation:ff-eq .9s ease-in-out infinite; }
  .ff-eq i:nth-child(2){ animation-delay:.15s } .ff-eq i:nth-child(3){ animation-delay:.3s }
  .ff-eq i:nth-child(4){ animation-delay:.45s } .ff-eq i:nth-child(5){ animation-delay:.6s }
}
@keyframes ff-drift { 0%{transform:translate3d(-3%,-2%,0) scale(1.05)} 100%{transform:translate3d(4%,3%,0) scale(1.12)} }
@keyframes ff-flow  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes ff-wght  { 0%,100%{font-variation-settings:"wght" 780} 50%{font-variation-settings:"wght" 880} }
@keyframes ff-pulse { 0%,100%{box-shadow:0 0 0 0 var(--acc)} 50%{box-shadow:0 0 0 5px transparent} }
@keyframes ff-eq    { 0%,100%{height:30%} 50%{height:100%} }

/* View Transitions (filter changes) — duration only; trigger is gated in JS */
::view-transition-old(root),::view-transition-new(root) { animation-duration:.35s; }