/* ============================================================
   XIXI Funds — Hero
   Standalone stylesheet. Reproduces the xixifunds.com hero
   (Brizy build) faithfully. Tweak the tokens to vibe.
   ============================================================ */

/* ---- Brand font: Gilroy (same as xixifunds.com) ---- */
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/gilroy-400.ttf") format("truetype");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/gilroy-500.ttf") format("truetype");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/gilroy-600.ttf") format("truetype");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/gilroy-700.ttf") format("truetype");
}

/* ============================================================
   DESIGN TOKENS — change these to retheme the whole hero
   ============================================================ */
:root {
  /* Brand palette (matches XIXI Funds globals) */
  --c-color1: #4d55cc;          /* brand purple   (77,85,204)  */
  --c-color2: #272727;          /* ink            (39,39,39)   */
  --c-color4: #211c84;          /* HERO BASE blue (33,28,132)  */
  --c-purple-soft: #7a73d1;
  --c-purple-haze: #b5a8d5;
  --c-white: #e9e9e9;           /* color8 — hero text          */

  /* ╔══════════════════════════════════════════════════════════╗
     ║  CONTROL PANEL — every hero-background detail is a knob.    ║
     ║  Change a value, save, refresh the browser. Each knob says  ║
     ║  what it does and the live-site match value.                ║
     ╚══════════════════════════════════════════════════════════╝ */

  /* ───────────────── 1. THE SVG PATTERN ─────────────────────── */

  /* [A] Which pattern image to tile. Swap the file to change it. */
  --pattern-img: url("assets/svg/hero-bg.svg");

  /* [B] Tile SIZE. How big each repeat of the pattern is.
         contain   = one tile scaled to the hero height (live match)
         <number>  = fixed px, e.g. 700px (smaller = denser/busier)
         auto 100% = fit height exactly (used on phones)            */
  --pattern-size: contain;

  /* [C] Horizontal/vertical ANCHOR of the pattern.
         "50% 0%" = centred left-right, locked to the top edge.
         1st value moves it L↔R, 2nd value moves it up↕down.        */
  --pattern-position: 50% 0%;

  /* [D] REPEAT mode: repeat | repeat-x | repeat-y | no-repeat.     */
  --pattern-repeat: repeat;

  /* [E] Pattern VISIBILITY (0 = invisible, 1 = full strength).
         This is the overall faintness of the line-grid.
         Higher = pattern shows MORE. (live match ≈ 0.64)
         (Implemented as a blue veil: veil alpha = 1 − this value.) */
  --pattern-opacity: 1;

  /* [F] The BASE colour the pattern sits on (the royal blue).      */
  --pattern-base: 33, 28, 132; /* = #211c84, as "r, g, b"          */

  /* [G] BLEND MODE — how the SVG pattern mixes with the base blue.
         normal   = pattern sits flat on top (default look)
         multiply = darkens; light shapes tint toward the blue
         screen   = lightens; shapes glow brighter
         overlay  = boosts contrast (multiply darks + screen lights)
         soft-light / hard-light / color-dodge / lighten / darken …
         Any CSS mix-blend-mode value works here.                   */
  --pattern-blend: screen; /* live-site match, but try others to vibe! */

  /* ───────────────── 2. THE CENTER BLUR ─────────────────────────
     A soft radial scrim that hides the pattern behind the text and
     lets it re-emerge toward the edges. Knobs [H]–[K] below.       */

  /* [H] Blur STRENGTH — how strongly the centre hides the pattern.
         0 = no blur (pattern fully visible in the middle)
         1 = pattern completely hidden in the middle
         (live-site match ≈ 0.99)                                    */
  --blur-strength: 1.02;

  /* [I] Blur SPREAD — how WIDE the calm reaches outward.
         smaller % = tight blur right behind the text
         larger %  = broad, gentle wash toward the edges
         (live-site match ≈ 150%)                                    */
  --blur-spread: 350%;

  /* [J] Blur SHAPE — horizontal × vertical reach of the ellipse.
         1st value = how far left/right, 2nd uses --blur-spread.
         Raise the 1st value for a wider (more oval) blur.           */
  --blur-shape-x: 350%;

  /* [K] Blur CENTER position (where the calm is deepest).
         "50% 50%" = dead centre. Move it to sit behind your text.   */
  --blur-center: 50% 50%;

  /* ── derived: the veil + the radial blur. Normally leave these.
        Veil alpha is (1 − pattern-opacity); the blur stops scale
        with --blur-strength so [H] dials the whole curve at once. */
  --hero-veil: rgba(var(--pattern-base), calc(1 - var(--pattern-opacity)));
  --hero-center-dim: radial-gradient(
    var(--blur-shape-x) var(--blur-spread) at var(--blur-center),
    rgba(var(--pattern-base), var(--blur-strength)) 0%,
    rgba(var(--pattern-base), calc(var(--blur-strength) * 0.91)) 12%,
    rgba(var(--pattern-base), calc(var(--blur-strength) * 0.61)) 26%,
    rgba(var(--pattern-base), calc(var(--blur-strength) * 0.36)) 46%,
    rgba(var(--pattern-base), calc(var(--blur-strength) * 0.18)) 68%,
    rgba(var(--pattern-base), calc(var(--blur-strength) * 0.06)) 86%,
    rgba(var(--pattern-base), 0) 100%
  );

  /* Gradient overlay — on the live site the field stays essentially
     flat top-to-bottom, with only a gentle deepening at the very
     bottom edge. */
  --hero-overlay: linear-gradient(
    180deg,
    rgba(33, 28, 132, 0) 82%,
    rgba(24, 20, 104, 0.22) 100%
  );

  /* [N] LOGO SIZE — max width of the XIXI Funds logo.
         clamp(min, fluid, max): min=phone floor, fluid=scales with viewport,
         max=desktop cap. Change all three or just the last number to cap it. */
  --logo-size: clamp(150px, 26vw, 300px);

  /* [O] TITLE SIZE on mobile (≤767px). Desktop is fluid 42px→120px via vw.
         Raise this to make "Together, We Grow" bigger on phones.           */
  --title-size-mobile: clamp(3rem, 14vw, 5rem);

  /* [P] BOTTOM BAR HEIGHT — controls the white bar's vertical padding.
         Bigger value = taller bar. e.g. 4rem, 6rem, 80px              */
  --bottom-bar-padding: clamp(2rem, 2.5vh, 2rem);

  /* [Q] BOTTOM BAR SHADOW — dark-blue shadow cast upward from the bar.
         --bar-shadow-color  : colour of the shadow (deep dark blue)
         --bar-shadow-y      : vertical offset — negative = upward
         --bar-shadow-blur   : how soft/spread the shadow is
         --bar-shadow-spread : how far it expands before blurring      */
  --bar-shadow-color:  rgba(10, 8, 60, 0.3);
  --bar-shadow-y:      -18px;
  --bar-shadow-blur:   100px;
  --bar-shadow-spread: 100px;

  /* Type */
  --font-brand: "Gilroy", "Lato", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-brand);
  background-color: var(--c-color4);
  color: var(--c-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   HERO — fills the viewport (100vh), exactly like the original
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh; /* steadier on mobile address-bar resize */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  /* SOLID royal-blue base (color4) — the dominant tone in the
     real hero. The pattern + gradient sit on top of this. */
  background-color: var(--c-color4);
}

/* Background stack (bottom → top):
     .hero__bg      = the royal-blue base colour
       .hero__pattern = the tiled SVG, blended onto the base (knob G)
       .hero__veil    = faintness veil (knob E) + center blur (H–K)  */
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--pattern-base));
  z-index: 0;
}

/* The SVG pattern — its own layer so the blend mode (knob [G])
   mixes it cleanly against the blue base beneath it. */
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--pattern-img);
  background-repeat: var(--pattern-repeat);
  background-size: var(--pattern-size);
  background-position: var(--pattern-position);
  mix-blend-mode: var(--pattern-blend);
}

/* The faintness veil + the radial center blur, stacked over the
   pattern. (Veil = knob E, blur = knobs H–K.) */
.hero__veil {
  position: absolute;
  inset: 0;
  background-image: var(--hero-center-dim),
    linear-gradient(var(--hero-veil), var(--hero-veil));
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}

/* Layer 2 — gradient color overlay (.brz-bg-color).
   Gentle bottom deepening only, matching the live site. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-image: var(--hero-overlay);
  z-index: 1;
}

/* Full-height flex column: center group + bottom white band */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

/* CENTER — logo stacked above title, vertically centred in remaining space */
.hero__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vh, 2.5rem);
  width: 100%;
  padding: clamp(2rem, 5vh, 3.5rem) clamp(1.25rem, 4vw, 3rem);
}

.hero__logo {
  width: var(--logo-size);
}

/* Title — Gilroy 600, very large */
.hero__title {
  font-weight: 600;
  font-size: clamp(2.625rem, 10vw, 7.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--c-white);
  width: 100%;
  overflow-wrap: break-word;
}

/* BOTTOM — full-width white bar pinned to bottom edge, top corners rounded */
.hero__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  background: #ffffff;
  padding: var(--bottom-bar-padding) clamp(1.25rem, 4vw, 3rem);
  border-radius: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0 0;
  box-shadow: 0 var(--bar-shadow-y) var(--bar-shadow-blur) var(--bar-shadow-spread) var(--bar-shadow-color);
}

.hero__subtitle {
  margin: 0;
}

/* Eyebrow pill — brand blue border on white background */
@keyframes pill-pulse {
  0%, 100% { border-color: #211c84; box-shadow: 0 0 0 0 rgba(180, 180, 220, 0); }
  50%       { border-color: #211c84; box-shadow: 0 0 10px 6px rgba(180, 180, 220, 0.22); }
}

.hero__eyebrow {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #211c84;
  border: 1px solid #211c84;
  border-radius: 999px;
  padding: 0.5em 1.4em;
  background: none;
  animation: pill-pulse 2.4s ease-in-out infinite;
  /* delay matches the entrance — pulse starts after the pill fades in */
  animation-delay: 1s;
}

/* ============================================================
   RESPONSIVE — mirrors the original breakpoints (991 / 767)
   ============================================================ */
@media (max-width: 991px) {
  .hero__center {
    padding: clamp(1.5rem, 4vh, 2.5rem) 1rem;
  }
}

/* Mobile-only line breaks — hidden on desktop, shown on phones */
.mobile-br { display: none; }

@media (max-width: 767px) {
  .mobile-br { display: block; }

  .hero__center {
    padding: clamp(1.25rem, 3vh, 2rem) 1.25rem;
  }

  .hero__title {
    font-size: var(--title-size-mobile);
  }
  /* On phones the live site uses a SMALLER tile than the big desktop
     one, with a gentler centre blur so the pattern stays visible
     full-width. These override the main knobs on phones only. */
  .hero {
    /* [M] MOBILE TILE SIZE — adjust this to taste.
           bigger px = larger pattern, fewer tiles across
           smaller px = smaller, denser pattern               */
    --pattern-size: 400px;     /* ← mobile tile size (knob [B] on phones) */

    --pattern-opacity: 0.5;    /* a touch fainter   (knob [E]) */
    --blur-strength: 0.85;     /* softer dim        (knob [H]) */
    --blur-spread: 150%;       /* tighter calm      (knob [I]) */
    --blur-shape-x: 130%;      /* less oval         (knob [J]) */
  }
}

/* ============================================================
   BACKGROUND SLOW DRIFT — pattern scrolls upward continuously.
   Animates background-position-y by 100vh (one tile with contain).
   The repeat means the end frame = start frame — seamless loop.
   Change 60s to taste: larger = slower, smaller = faster.
   ============================================================ */
@keyframes bg-drift-up {
  from { background-position: 50% 0; }
  to   { background-position: 50% -100vh; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__pattern {
    animation: bg-drift-up 60s linear infinite;
  }
}

/* ============================================================
   PAGE-LOAD ENTRANCE (driven by script.js, like the original
   "brz-animated" fade-up reveal)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Only hide for the entrance if JS is present (html.js is set by
     script.js). Without JS the content stays fully visible. */
  .js .hero__logo,
  .js .hero__title,
  .js .hero__eyebrow {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .js .hero__bottom {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero.is-ready .hero__logo {
    transition-delay: 0.1s;
  }
  .hero.is-ready .hero__title {
    transition-delay: 0.3s;
  }
  .hero.is-ready .hero__eyebrow {
    transition-delay: 0.5s;
  }
  .hero.is-ready .hero__bottom {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateY(0);
  }

  .hero.is-ready .hero__logo,
  .hero.is-ready .hero__title,
  .hero.is-ready .hero__eyebrow {
    opacity: 1;
    transform: translateY(0);
  }
}