/* hero-riff.css — Flashfeed hero fused into TrendTrack's DS.
   Typography SIZING/SPACING/rhythm come from TrendTrack (the hero uses plain
   <h1>, .text-l, .hero_tag, .button-group — all DS-native). This file only adds
   Flashfeed's *look*: full-screen rays + stars, the Garamond accent word, the
   glow CTA, and a frozen-safe entrance. Circular Std + antialiasing are global
   (site.css). No GSAP (avoids a ticker conflict with TrendTrack's pxp-libs). */

/* EB Garamond — used ONLY for the one hero accent word */
@font-face{font-family:'Ebgaramond Variablefont Wght';src:url('/assets/EBGaramond-VariableFont_wght.ttf') format('truetype');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Ebgaramond Variablefont Wght';src:url('/assets/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');font-weight:400 800;font-style:italic;font-display:swap}

/* button metrics in rem, not px: TrendTrack's root font-size is the fluid DS
   token (16px desktop, ~19px at 991, ~22px at 767), and every DS component
   scales off it. Hardcoded px left this CTA stuck at 36px while the copy beside
   it grew ~40% on tablet. 2.25rem == the OG Flashfeed 36px at a 16px root. */
:root{ --button-height:2.25rem; --2023-dark-button-bg:#14151b; --2023-dark-button-bg-on-dark:#0f112b; --above-blue:#788fd626; }

/* ---- hero shell ---- */
.ff-hero{position:relative;overflow:visible}
.ff-hero .main_hero__label{display:none}          /* drop TrendTrack trusted-by row */
.ff-hero .flex-col.gap-16{position:relative;z-index:20}
/* let H1 + paragraph break like the OG Flashfeed hero (via <br>), not auto-wrap */
.ff-hero .heading_wrap{max-width:none!important}
.ff-hero .p_wrap{max-width:none!important}
/* measure in rem, not em: em here resolved against the paragraph's OWN size, so
   it scaled twice with the fluid root (44em == 1104px at the 767 breakpoint) and
   stopped capping anything. rem keeps characters-per-line constant. */
.ff-hero .p_wrap p{max-width:50rem;margin-left:auto;margin-right:auto}
/* the hard <br> is an art-directed desktop break; below tablet it fights the
   natural wrap and leaves orphans. Let the copy reflow. */
@media screen and (max-width:767px){.ff-hero .p_wrap p br{display:none}}
.ff-hero__note{margin-top:.75rem;opacity:.65}

/* ---- full-screen rays + stars ---- */
.ff-hero .main_hero__bg{display:none!important}     /* kill grey pulse + accent-line img + dot mask */
.ff-hero .main-container.u-bg-black,.ff-hero .main_hero__layout{background-color:transparent!important;background-image:none!important}
.ff-hero .main-container.u-bg-black,.ff-hero .main_hero__layout,.ff-hero.section{overflow:visible!important}
/* blue field at z:1 (above the section's dark bg); hero content containers are
   lifted to z:2 below, so the video/header paint OVER the blue while the blue
   still shows through their transparent gaps */
.ff-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;background-color:#040507}
.ff-hero .main-container{position:relative;z-index:2}
/* the blurred blue field (Flashfeed's home_header_background-image) — the base color layer */
.home_header_background-image-wrapper{z-index:0;background-color:#040507;position:absolute;inset:0;pointer-events:none}
/* natural-aspect band, exactly as the OG (no height:100% — stretching it over
   the whole section is what washed the blue out) */
.home_header_background-image{filter:hue-rotate(318deg) grayscale(22%);object-fit:cover;object-position:50% 0;width:100%;height:auto;min-height:75vh;-webkit-mask-image:linear-gradient(to top,#0000 0%,#000 40%);mask-image:linear-gradient(to top,#0000 0%,#000 40%)}
.cc_rays-pulser{position:absolute;inset:0;pointer-events:none}
.div-block-745{z-index:12;opacity:.2;pointer-events:none;background-image:linear-gradient(#4e16e538,#0000 63%);min-height:50vh;position:absolute;inset:0 0 auto}
/* the double rays. Flashfeed's own CSS carries hue-rotate/brightness filters,
   but its Webflow IX2 intro animates both layers to filter:blur(0) — i.e. NO
   filter — so on the live site both rays burn at full blue. Measured on the
   1:1 clone: opacity 1, filter blur(0), transform none, background-size contain,
   max-width 112rem. Dimming either layer is what made this hero read muted. */
.cc_rays{z-index:9;filter:none;background-image:url('/assets/rays-blue.png');background-position:50% 0;background-repeat:no-repeat;background-size:contain;width:100%;max-width:112rem;min-height:130vh;margin-left:auto;margin-right:auto;position:absolute;inset:0 0 auto;left:0;right:0}
.cc_rays.is--lighter{z-index:11;filter:none;left:13%}
.tsparticles{pointer-events:none;height:70%;transform-style:preserve-3d;position:absolute;inset:0 0 auto;transform:translate(5%,-18%) rotateX(-34deg) rotateY(34deg) rotateZ(26deg);z-index:10}

/* ---- Garamond accent word (the one Flashfeed flourish on an otherwise-DS h1) ---- */
.ff-accent{
  font-family:'Ebgaramond Variablefont Wght','Times New Roman',serif;
  font-style:italic;font-weight:400;letter-spacing:-.03em;
  /* Garamond sets optically small beside Circular, so scale it off the DS h1
     size rather than hardcoding px — 1em here IS var(--_responsive---font-size--h1) */
  font-size:calc(1em * var(--_typography---serif--optical-scale));
  line-height:.8;
  -webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(#fff 56%,#ffffffe8 66%,#fff9 75%),linear-gradient(52deg,#85c3ffc9,#8c99fe 20% 56%,#af87ff);
}

/* ---- CTA (Flashfeed glow button) ----
   TWELVE shadow slots, aligned across rest / on-dark / hover: 1-7 inset, 8-12
   an identical outset elevation ramp. Slots 1, 5 and 6 are TRANSPARENT at rest
   and fade up on hover — box-shadow only interpolates between lists of equal
   length with matching inset flags at every index, so they cannot be omitted or
   the whole glow snaps instantly instead of transitioning.
   The two hard outer rings the old list ended on (`0 0 0 1px #2a436178`,
   `0 0 0 1px #3a374e6b`) are gone: they painted a crisp 1px halo outside the
   border box, which with the ::before overhang below made the button read ~2px
   taller than a .button-outline of the same height. Their lift moved inside —
   see the hover list. Canonical copy is ff-buttons.css (itself a port of the
   app's webflow-overrides.css:953); duplicated here because the root
   index.html does not load that file. Byte-identical apart from whitespace. */
.button-dark{max-height:var(--button-height);min-height:var(--button-height);grid-column-gap:.5rem;background-color:var(--2023-dark-button-bg);background-image:linear-gradient(180deg,var(--above-blue),#23246700);color:#fff;text-align:center;cursor:pointer;border-radius:var(--_button---radius);justify-content:center;align-items:center;padding:.375rem 1.125rem;font-family:'Circularstd',sans-serif;font-weight:500;font-size:.875rem;line-height:100%;text-decoration:none;transition:all .25s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative;box-shadow:inset 0 0 1px .5px #23253a00,inset 0 0 0 1px #21233fa1,inset 0 -4px 5px 0 #8547ff1f,inset 0 -7px 7px -6px #27edff29,inset 0 1px 1px 1px #33374d00,inset 0 0 8px 1px #8b93e000,inset 0 0 6px 2px #a880ff29,0 3px 3px -1.5px rgba(15,17,24,.03),0 6px 6px -3px rgba(15,17,24,.04),0 12px 12px -6px rgba(15,17,24,.05),0 24px 24px -12px rgba(15,17,24,.06),0 48px 48px -24px rgba(15,17,24,.06)}
/* app's violet gradient ring (webflow-overrides.css:654) — a masked 1px pseudo-border,
   not a shadow layer, because it fades along the edge at 135deg. Duplicated from
   ff-buttons.css: the root index.html does not load that file.
   `inset:0` now, was `-.5px 0` — the half-pixel overhang top and bottom was the
   other half of the height mismatch. Colour is FLAT .2 at all three stops, was
   .2/.4/.2: the bright mid-stop lit one corner of the ring like a highlight
   that nothing in the shadow stack answers. */
.button-dark::before{content:"";position:absolute;inset:0;z-index:1;box-sizing:border-box;padding:1px;border-radius:inherit;background:linear-gradient(135deg,#a880ff33 10.99%,#a880ff33 26%,#a880ff33 52%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* Hover puts the dropped outer rings' lift back INSIDE: periwinkle ring to
   1.5px at 80% (#7c8be0cc) under a .5px dark hairline, backed by an inset
   periwinkle glow. Slots 8-12 never move, so nothing paints outside the box. */
.button-dark:hover{background-color:#151735;box-shadow:inset 0 0 1px .5px #23253ac2,inset 0 0 0 1.5px #7c8be0cc,inset 0 -7px 9px -2px #8547ff54,inset 0 -7px 7px -3px #27edff33,inset 0 0 1px 2px #33374d,inset 0 0 8px 1px #8b93e05c,inset 0 0 6px 2px #a880ff29,0 3px 3px -1.5px rgba(15,17,24,.03),0 6px 6px -3px rgba(15,17,24,.04),0 12px 12px -6px rgba(15,17,24,.05),0 24px 24px -12px rgba(15,17,24,.06),0 48px 48px -24px rgba(15,17,24,.06)}
/* on-dark rest ≈ the hover above at 50%. The button's silhouette on white is
   its dark ring, and on #040507 that ring has nothing to separate from; the
   half-lit state gives it an edge without inventing a second paint, and hover
   then finishes the same travel. Nearly every SHADOW number is the midpoint of
   the two lists either side of this comment (colours premultiplied, as the
   browser interpolates them) — the layers are edge and bloom, and lighting them
   early is what buys the silhouette. TWO exceptions. Layer 2, the periwinkle
   ring, is held BELOW its midpoint: 1px (the rest width, so only its colour
   travels) at #545d998c rather than 1.25px at #545d99b6, because a ring that
   thick and opaque at rest reads as an already-lit chip and spends the hover's
   headroom before the cursor arrives. And the ground does not halve to #121430,
   it takes its own token --2023-dark-button-bg-on-dark (#0f112b).
   The neutral #14151b is a LIGHT-surface value — the darkest ink on a white
   page, where the ring does the separating; on #040507 it is level with the
   section and the button reads as a hole. Navy lifts it off the black in the
   hue family already lit over it, and still sits below the #151735 hover.
   Canonical copy lives in ff-buttons.css alongside the other on-dark
   modifiers — duplicated here because the root index.html does not load that
   file, same reason ::before is duplicated above. Both are byte-identical. */
.button-dark.is--on-dark,[data-theme-nav='base'] .header .button-dark{background-color:var(--2023-dark-button-bg-on-dark);box-shadow:inset 0 0 1px .5px #23253a61,inset 0 0 0 1px #545d998c,inset 0 -5.5px 7px -1px #8547ff3a,inset 0 -7px 7px -4.5px #27edff2e,inset 0 .5px 1px 1.5px #33374d80,inset 0 0 8px 1px #8b93e02e,inset 0 0 6px 2px #a880ff29,0 3px 3px -1.5px rgba(15,17,24,.03),0 6px 6px -3px rgba(15,17,24,.04),0 12px 12px -6px rgba(15,17,24,.05),0 24px 24px -12px rgba(15,17,24,.06),0 48px 48px -24px rgba(15,17,24,.06)}
.button-dark.is--on-dark:hover,[data-theme-nav='base'] .header .button-dark:hover{background-color:#151735;box-shadow:inset 0 0 1px .5px #23253ac2,inset 0 0 0 1.5px #7c8be0cc,inset 0 -7px 9px -2px #8547ff54,inset 0 -7px 7px -3px #27edff33,inset 0 0 1px 2px #33374d,inset 0 0 8px 1px #8b93e05c,inset 0 0 6px 2px #a880ff29,0 3px 3px -1.5px rgba(15,17,24,.03),0 6px 6px -3px rgba(15,17,24,.04),0 12px 12px -6px rgba(15,17,24,.05),0 24px 24px -12px rgba(15,17,24,.06),0 48px 48px -24px rgba(15,17,24,.06)}
/* OG behaviour: is--long only widens the padding — height/size stay the DS
   button (var(--button-height), .875rem text). No upsizing. */
.button-dark.is--long{padding-left:3.5rem;padding-right:3.5rem}
/* The hero arrow is the one that runs AGAINST the ladder. Everywhere else the
   lottie is set at --button-icon-lottie (.7em, css/ff-buttons.css) so it reads
   as punctuation on a CTA; here the button is the only thing under a 4em
   headline with nothing else competing for the eye, and at the ladder size it
   read as a stray mark rather than as part of the control. 1.25em is 17.5px
   against the 14px label — a shade above the label's cap height, which is what
   makes the pair read as one object.

   Scoped to .ff-hero, and it has to be: ff-buttons.css loads AFTER this file
   and its `.button-dark > .lottie-arrow` would otherwise win on source order.
   .ff-hero is on the hero section in both index.html and /v2, so one selector
   covers both — and index.html does not load ff-buttons.css at all, which is
   why the box is fully specified here rather than deferred to a token. */
.ff-hero .button-dark .lottie-arrow{width:1.25em;height:1.25em;margin-left:.15rem;margin-right:-.35rem;display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.25,.46,.45,.94)}
.ff-hero .button-dark:hover .lottie-arrow{transform:translateX(3px)}
.ff-hero .button-dark .lottie-arrow svg{width:100%;height:100%}

/* ---- reveal (frozen-safe; base state visible, animation gated by .ff-anim) ----
   The hero's own entrance USED to live here (ffRise / ffRiseSoft on
   .heading_wrap, .p_wrap, .hero_tag__list, .button-group.center). It has moved
   to css/motion.css, which carries rezi.ai's load timeline and drives the same
   elements through [data-load] attributes instead of hard-coded selectors —
   so the rest of the page can reuse it. The rays' entrance is there too; what
   stays here is their ambient pulse, which runs forever and so must NOT be
   gated on .ff-anim (hero-riff.js strips that class on a timer). */
@keyframes ffRaysPulse{0%{opacity:.88}100%{opacity:1}}

.ff-hero .cc_rays:not(.is--lighter){opacity:1;animation:ffRaysPulse 5s infinite alternate ease-in-out}
.ff-hero .cc_rays.is--lighter{opacity:1}
.ff-hero .div-block-745{opacity:.2}

@media (prefers-reduced-motion: reduce){
  .ff-hero .cc_rays:not(.is--lighter){animation:none!important;opacity:1!important}
}