/* ------------------------------------------------------------------
 * Invincible VS — Creator Coalition theme
 *
 * Palette + typography from the official Marketing Toolkit 1.5.2 PDF
 * (see docs/design_reference/invincible-vs.md for provenance).
 *
 * Primary accent: BM Mustard (#D79B00) per brand guide.
 * Ground: Dark Slate (#191E23) per brand guide ("dark, but not pure black").
 * ----------------------------------------------------------------- */

@font-face {
  font-family: 'Home Planet';
  src: url('/fonts/invincible-vs/HomePlanetBB-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Home Planet';
  src: url('/fonts/invincible-vs/HomePlanetBB-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Home Planet';
  src: url('/fonts/invincible-vs/HomePlanetBB-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Alyrak';
  src: url('/fonts/invincible-vs/Alyrak-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Keyframes kept at top-level — at-rules cannot live inside a regular
   style rule, so nesting them under `html.invincible-vs` would silently
   fail in all browsers. */
@keyframes ivs-button-shine {
  0%   { left: -100px; }
  20%  { left: 100%; }
  100% { left: 100%; }
}

html.invincible-vs {
  * { box-sizing: border-box; }

  &.frozen { overflow: hidden; }

  &:root {
    /* ── Official brand palette (Marketing Toolkit p.18) ── */
    --ivs-omni-red:      #C80000;
    --ivs-blood-red:     #8C0000;
    --ivs-white:         #FFFFFF;
    --ivs-black:         #000000;
    --ivs-dark-gray:     #1A1A1A;
    --ivs-mustard:       #D79B00;  /* PRIMARY ACCENT */
    --ivs-mustard-hover: #B88400;
    --ivs-yellow:        #FFC800;  /* Secondary accent — "Invincible Yellow" */
    --ivs-blue:          #00C3E6;

    /* Ground — dark but not pure black */
    --ivs-dark-slate:    #191E23;  /* PAGE BACKGROUND */
    --ivs-medium-slate:  #2D3C4B;
    --ivs-light-slate:   #46647D;

    /* RGB triplets (space-separated) so components can compose with
       alpha via `rgb(var(--ivs-rgb-*) / <alpha>)`. Mirrored on
       `html.invincible-vs-dashboard:root` so the dashboard inherits
       the same values; defining them here makes them available on
       the public marketing pages too (header user-menu, etc.). */
    --ivs-rgb-dark-slate:    25 30 35;
    --ivs-rgb-medium-slate:  45 60 75;
    --ivs-rgb-light-slate:   70 100 125;
    --ivs-rgb-mustard:       215 155 0;
    --ivs-rgb-yellow:        255 200 0;
    --ivs-rgb-omni-red:      200 0 0;
    --ivs-rgb-text:          255 255 255;
    --ivs-rgb-text-muted:    185 195 205;
    --ivs-rgb-text-faint:    120 135 150;

    /* Shared motion token used by chrome shared between marketing
       site + dashboard (header pill, user menu). */
    --ivs-dash-ease:         cubic-bezier(0, 0, 0.18, 1);
    --ivs-dash-transition:   0.25s var(--ivs-dash-ease);

    /* ── App / theme semantic mappings ── */
    --theme-page-color-background:   var(--ivs-dark-slate);
    --theme-primary-accent:          var(--ivs-mustard);
    --theme-secondary-accent:        var(--ivs-yellow);
    --theme-error-color:             var(--ivs-omni-red);

    --ui-text-highlighted:           var(--ivs-white);
    --ui-text:                       var(--ivs-white);
    --ui-text-muted:                 rgba(255, 255, 255, 0.65);

    --theme-font-family:             'Home Planet', Helvetica, Arial, sans-serif;
    --theme-font-family-headline:    'Alyrak', Impact, 'Arial Black', sans-serif;
    --theme-text-transformation:     uppercase;

    --theme-page-max-width:          1920px;
    --theme-container-max-width:     1200px;

    /* Signature button motif — 10° horizontal shear (Marketing Toolkit p.40) */
    --ivs-button-skew:               matrix(1, 0, -0.176327, 1, 0, 0);
    --ivs-display-shadow:            0 6px 0 rgba(0, 0, 0, 0.55);

    /* Card / surface tokens */
    --card--background:              var(--ivs-medium-slate);
    --card--color:                   var(--ivs-white);
    --card--title-color:             var(--ivs-mustard);
    --card--subtitle-color:          var(--ivs-white);
    --header--background:            rgba(25, 30, 35, 0.92);

    /* Form input theming */
    --theme-form-input-background:   var(--ivs-medium-slate);
    --theme-form-input-foreground:   var(--ivs-white);
    --theme-form-input-border:       1px solid var(--ivs-light-slate);

    /* CTA button theming */
    --input-buttons-primary-bg-default:   var(--ivs-mustard);
    --input-buttons-primary-text-default: var(--ivs-black);
    --input-buttons-primary-bg-hover:     var(--ivs-yellow);
    --input-buttons-primary-text-hover:   var(--ivs-black);

    --input-buttons-secondary-bg-default:   transparent;
    --input-buttons-secondary-text-default: var(--ivs-white);
    --input-buttons-secondary-bg-hover:     rgba(255, 255, 255, 0.08);
    --input-buttons-secondary-text-hover:   var(--ivs-mustard);
  }

  & body {
    background: var(--ivs-dark-slate);
    color: var(--ivs-white);
    font-family: var(--theme-font-family);

    & .container {
      width: 100%;
      max-width: var(--theme-container-max-width);
      margin: 0 auto;
    }

    /* ── Native form fields (input / textarea / select) ──────────
       Dark-slate surface, gold-accent border on focus, white text.
       Pattern mirrors wb-lego-batman / marathon with the brand colours
       swapped in. */
    & :where(input, textarea, select) {
      background-color: var(--theme-form-input-background) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;
      padding: 12px 18px !important;
      width: 100%;
      min-height: 54px;
      font-family: var(--theme-font-family);
      font-size: 1rem;
      color: var(--theme-form-input-foreground) !important;
      transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;

      &::placeholder {
        color: rgba(255, 255, 255, 0.45);
      }

      &:hover {
        border-color: rgba(215, 155, 0, 0.55) !important;
      }

      &:focus,
      &:focus-visible {
        outline: none !important;
        border-color: var(--ivs-mustard) !important;
        box-shadow: 0 0 0 3px rgba(215, 155, 0, 0.18);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Date picker calendar icon — invert so it reads on the dark surface */
      &::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(0.9);
        opacity: 0.65;
        cursor: pointer;
      }
      &::-webkit-calendar-picker-indicator:hover { opacity: 1; }

      /* Native checkbox — custom mustard fill on check */
      &[type="checkbox"] {
        margin: 0;
        padding: 0 !important;
        appearance: none;
        display: grid;
        place-items: center;
        width: 1.375rem;
        height: 1.375rem;
        min-height: unset;
        flex: 0 0 1.375rem;
        cursor: pointer;

        &::before {
          content: "";
          width: 0.7rem;
          height: 0.7rem;
          background-color: var(--ivs-mustard);
          opacity: 0;
          transition: opacity 0.15s ease-out, transform 0.15s ease-out;
          transform: scale(0.6);
        }
        &:checked::before {
          opacity: 1;
          transform: scale(1);
        }
      }

      /* Native radio — yellow dot when selected */
      &[type="radio"] {
        margin: 0;
        padding: 0 !important;
        appearance: none;
        display: grid;
        place-items: center;
        width: 1.375rem;
        height: 1.375rem;
        min-height: unset;
        flex: 0 0 1.375rem;
        border-radius: 50% !important;
        cursor: pointer;

        &::before {
          content: "";
          width: 0.65rem;
          height: 0.65rem;
          border-radius: 50%;
          background-color: var(--ivs-yellow);
          opacity: 0;
          transition: opacity 0.15s ease-out, transform 0.15s ease-out;
          transform: scale(0.5);
        }
        &:checked::before {
          opacity: 1;
          transform: scale(1);
        }
      }
    }

    /* Labels — Home Planet Bold, small uppercase, mustard accent */
    & label,
    & .form-field__label,
    & .UFormField label {
      font-family: var(--theme-font-family);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 0.45rem;
    }

    /* ── Nuxt UI component theme overrides ─────────────────────── */
    & .UInput,
    & .UTextarea,
    & .USelectMenu,
    & .UInputMenu {
      --ui-bg: var(--ivs-medium-slate);
      --ui-bg-elevated: var(--ivs-dark-slate);
      --ui-text: var(--ivs-white);
      --ui-text-highlighted: var(--ivs-white);
      --ui-text-dimmed: rgba(255, 255, 255, 0.55);
      --ui-text-muted: rgba(255, 255, 255, 0.65);
      --ui-border: rgba(215, 155, 0, 0.3);
      --ui-border-accented: var(--ivs-mustard);
      --ui-border-inverted: var(--ivs-mustard);
      --ui-primary: var(--ivs-mustard);
    }

    /* Visible mustard outline on USelectMenu triggers in every
       resting/hover/focus state. Nuxt UI v3 implements its input
       outlines via an inset box-shadow (Tailwind `ring-*`) rather
       than a `border`, so we have to set the box-shadow explicitly
       and not null it out. Matches the native input border weight
       visually so all fields read consistently. */
    & .USelectMenu button,
    & .USelectMenu [role="combobox"] {
      border: 0 !important;
      border-radius: 0 !important;
      background-color: var(--ivs-medium-slate) !important;
      color: var(--ivs-white) !important;
      box-shadow: inset 0 0 0 1px var(--ivs-mustard) !important;
      outline: none !important;
    }
    & .USelectMenu button:hover,
    & .USelectMenu [role="combobox"]:hover {
      box-shadow: inset 0 0 0 2px var(--ivs-mustard) !important;
    }
    & .USelectMenu button:focus,
    & .USelectMenu button:focus-visible,
    & .USelectMenu button[data-state="open"],
    & .USelectMenu [role="combobox"]:focus,
    & .USelectMenu [role="combobox"]:focus-visible,
    & .USelectMenu [role="combobox"][aria-expanded="true"] {
      box-shadow:
        inset 0 0 0 2px var(--ivs-mustard),
        0 0 0 3px rgba(215, 155, 0, 0.2) !important;
    }

    & .UFormField {
      --ui-text: var(--ivs-white);
      --ui-text-muted: rgba(255, 255, 255, 0.55);
      --ui-error: var(--ivs-omni-red);
    }

    & .UCheckbox,
    & .URadioGroup {
      --ui-bg: rgba(215, 155, 0, 0.1);
      --ui-bg-elevated: rgba(215, 155, 0, 0.18);
      --ui-border: rgba(215, 155, 0, 0.35);
      --ui-border-accented: var(--ivs-mustard);
      --ui-text: var(--ivs-white);
      --ui-primary: var(--ivs-mustard);
      gap: 0.5rem;

      & [data-state="checked"] {
        color: var(--ivs-black) !important;
      }
    }

    & .BaseFormSocialSelector {
      --ui-bg: var(--ivs-medium-slate);
      --ui-bg-elevated: var(--ivs-dark-slate);
      --ui-text: var(--ivs-white);
      --ui-text-highlighted: var(--ivs-white);
      --ui-text-dimmed: rgba(255, 255, 255, 0.55);
      --ui-border: rgba(215, 155, 0, 0.3);
      --ui-border-accented: var(--ivs-mustard);
      --ui-border-inverted: var(--ivs-mustard);
      --ui-primary: var(--ivs-mustard);
    }

    /* ── Custom UISelect dropdown trigger ────────────────────── */
    & .ui-select-trigger {
      background: var(--ivs-medium-slate) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;
      color: var(--ivs-white) !important;
      min-height: 54px !important;
      padding: 8px 18px !important;
      font-family: var(--theme-font-family);
    }
    & .ui-select-trigger:hover:not(.ui-select-trigger--disabled) {
      border-color: rgba(215, 155, 0, 0.55) !important;
    }
    & .ui-select-trigger:focus,
    & .ui-select-trigger--open {
      border-color: var(--ivs-mustard) !important;
      box-shadow: 0 0 0 3px rgba(215, 155, 0, 0.18) !important;
    }
    & .ui-select-display { color: var(--ivs-white) !important; }
    & .ui-select-placeholder { color: rgba(255, 255, 255, 0.45) !important; }
    & .ui-select-chevron,
    & .ui-select-clear { color: rgba(255, 255, 255, 0.6) !important; }

    & .ui-select-dropdown {
      background: var(--ivs-dark-slate) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;
    }
    & .ui-select-search-wrapper {
      border-color: rgba(215, 155, 0, 0.2) !important;
    }
    & .ui-select-search-input {
      background: var(--ivs-medium-slate) !important;
      color: var(--ivs-white) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;

      &::placeholder { color: rgba(255, 255, 255, 0.45) !important; }
      &:focus {
        border-color: var(--ivs-mustard) !important;
        box-shadow: none !important;
      }
    }
    & .ui-select-search-icon { color: rgba(255, 255, 255, 0.45) !important; }

    & .ui-select-option { color: var(--ivs-white) !important; padding: 10px 18px !important; }
    & .ui-select-option:hover { background: rgba(215, 155, 0, 0.12) !important; }
    & .ui-select-option--selected {
      background: rgba(215, 155, 0, 0.2) !important;
      color: var(--ivs-mustard) !important;
    }
    & .ui-select-option--focused {
      background: rgba(215, 155, 0, 0.12) !important;
      color: var(--ivs-white) !important;
    }
    & .ui-select-option-check { color: var(--ivs-mustard) !important; }
    & .ui-select-no-results { color: rgba(255, 255, 255, 0.55) !important; }

    & .ui-select-tag {
      background: rgba(215, 155, 0, 0.18) !important;
      color: var(--ivs-white) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;
    }
    & .ui-select-tag-remove { color: var(--ivs-white) !important; }
    & .ui-select-tag-remove:hover { background: rgba(215, 155, 0, 0.3) !important; }
    & .ui-select-tag-overflow {
      background: rgba(215, 155, 0, 0.12) !important;
      color: var(--ivs-white) !important;
    }

    /* ── vue-multiselect fallback (used by some form field types) ── */
    & .multiselect {
      background-color: var(--ivs-medium-slate) !important;
      border: 1px solid rgba(215, 155, 0, 0.3) !important;
      border-radius: 0 !important;
      min-height: 54px;

      & .multiselect__select {
        height: 54px;
        width: 54px;
        &::before { border-color: var(--ivs-mustard) transparent transparent !important; }
      }

      & .multiselect__tags {
        background: none !important;
        border: none !important;
        min-height: 54px;
        padding: 6px 54px 6px 14px !important;

        & .chip,
        & .multiselect__tag {
          background-color: rgba(215, 155, 0, 0.18) !important;
          border: 1px solid rgba(215, 155, 0, 0.3) !important;
          border-radius: 0 !important;
          color: var(--ivs-white);
        }

        & .multiselect__input {
          background: none !important;
          border: none !important;
          color: var(--ivs-white) !important;
        }
      }

      & .multiselect__content-wrapper {
        background-color: var(--ivs-dark-slate) !important;
        border: 1px solid rgba(215, 155, 0, 0.3) !important;

        & li {
          color: var(--ivs-white);
          padding: 10px 18px;
          &:hover,
          &:has(.multiselect__option--highlight) {
            background-color: rgba(215, 155, 0, 0.12) !important;
          }
        }
      }
    }

    /* Form-level validation error bubble */
    & [role="alert"] {
      color: var(--ivs-omni-red);
      font-family: var(--theme-font-family);
      font-size: 0.9rem;
    }

    /* ── Social selector: Add button only ─────────────────────────
       Chip colours are now fed through the `badgeUi` prop on
       BaseFormSocialSelector from the field schema, so we don't need
       global CSS overrides for them here (avoids cascade-layer
       battles with Tailwind's `!bg-neutral-300` default). */

    /* "Add" button next to the URL input — primary yellow gradient */
    & .BaseFormSocialSelector button:not([type="submit"]) {
      background: linear-gradient(0deg, #EBB500 0%, #FFD400 90%, #FFD400 100%) !important;
      color: var(--ivs-black) !important;
      border: 0;
      border-radius: 0 !important;
      padding: 0 1.75rem !important;
      min-height: 54px;
      font-family: 'Home Planet', Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 0.2s ease-out;
    }
    & .BaseFormSocialSelector button:not([type="submit"]):hover {
      filter: brightness(1.08);
    }
  }

  /* ── Nuxt UI select-menu dropdown panel ──────────────────────
     The panel is teleported to document.body so we must target it at
     document scope (outside `& body`). Uses ARIA roles to reliably
     catch Nuxt UI v3's Reka-UI output. */
  & [role="listbox"],
  & [data-slot="content"] {
    background: var(--ivs-dark-slate) !important;
    border: 1px solid rgba(215, 155, 0, 0.35) !important;
    border-radius: 0 !important;
    color: var(--ivs-white);
    font-family: var(--theme-font-family);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(0, 0, 0, 0.3);
  }

  & [role="option"] {
    color: var(--ivs-white) !important;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    outline: none !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
  }
  /* Reka UI sets `data-highlighted` on keyboard-focused options and
     keeps it sticky after hover — we have to override the browser /
     Nuxt UI default blue focus ring with our mustard tint for every
     variant of the active-option state. */
  & [role="option"]:hover,
  & [role="option"]:focus,
  & [role="option"]:focus-visible,
  & [role="option"][data-highlighted],
  & [role="option"][data-highlighted="true"],
  & [role="option"][data-state="active"] {
    background-color: rgba(215, 155, 0, 0.15) !important;
    color: var(--ivs-white) !important;
    outline: none !important;
  }
  & [role="option"][aria-selected="true"],
  & [role="option"][data-state="checked"] {
    background-color: rgba(215, 155, 0, 0.22) !important;
    color: var(--ivs-mustard) !important;
  }

  /* Blue-checkmark override — Nuxt UI's USelectMenu renders a check
     icon inside selected options using the component's default
     primary colour (blue). Force it to mustard, matching the rest of
     the program's accent palette. */
  & [role="option"] [class*="i-lucide-check"],
  & [role="option"] [class*="i-heroicons-check"],
  & [role="option"] svg {
    color: var(--ivs-mustard) !important;
  }

  /* USelectMenu internal search input — needs extra left padding so its
     leading search icon doesn't collide with the placeholder text. */
  & [role="listbox"] input,
  & [data-slot="content"] input[type="text"],
  & [cmdk-input],
  & input[role="combobox"] {
    background: var(--ivs-medium-slate) !important;
    color: var(--ivs-white) !important;
    border: 1px solid rgba(215, 155, 0, 0.3) !important;
    border-radius: 0 !important;
    padding: 0.6rem 0.9rem 0.6rem 2.25rem !important;
    min-height: 42px;
    font-family: var(--theme-font-family);

    &::placeholder { color: rgba(255, 255, 255, 0.45); }
    &:focus {
      outline: none !important;
      border-color: var(--ivs-mustard) !important;
      box-shadow: 0 0 0 2px rgba(215, 155, 0, 0.25);
    }
  }

  /* ── Headlines ──
     Alyrak ships only as a Regular (400) weight in this program, so
     every use of it must stay at 400 — the browser's default heading
     weight of 700 would otherwise render as a faux-bold. */
  & h1, & h2, & h3, & h4 {
    font-family: var(--theme-font-family-headline);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ivs-white);
    letter-spacing: 0.02em;
    line-height: 1;
  }

  /* Display-class Alyrak text: the "Add 10° shear and block shadow" treatment (brand guide p.17) */
  & .ivs-display {
    font-family: var(--theme-font-family-headline);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--ivs-yellow);
    transform: skewX(-10deg);
    text-shadow: var(--ivs-display-shadow);
    letter-spacing: 0.02em;
    display: inline-block;
  }

  /* Title-class Home Planet text with the brand-guide wide tracking (≈ 50pt kerning) */
  & .ivs-title {
    font-family: var(--theme-font-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ──────────────────────────────────────────────────────────────────
   * Primary button (matches `.main-btn a.button-style` from the source
   * site). Rectangular, yellow gradient fill, black uppercase text,
   * halftone reflection pseudo that intensifies on hover, and a
   * diagonal shine sweep on hover.
   * ─────────────────────────────────────────────────────────────── */
  & .ivs-button,
  & .ivs-button:hover,
  & .ivs-button:focus,
  & .ivs-button > span {
    text-decoration: none;
  }

  & .ivs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0.813rem 3.625rem;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(
        0deg,
        #EBB500 0%,
        #FFD400 90%,
        #FFD400 100%
      );
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
  }

  /* Detached yellow frame — mirrors `.main-btn` wrapper on the source
     site (padding: 4px; border: 1.5px solid #ffd700). Must be a real
     element (not an `outline`) because `outline-offset` + `overflow:
     hidden` on the inner button renders unreliably in Firefox. */
  & .ivs-button-wrap {
    display: inline-block;
    padding: 4px;
    border: 1.5px solid #FFD700;
    background: transparent;
    line-height: 0;      /* prevent inline whitespace from stretching the frame */
  }

  & .ivs-button > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #000;
    font-family: 'Home Planet', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.813rem;
    line-height: 2.188rem;
    letter-spacing: 0.091rem;
    text-transform: uppercase;
  }

  /* Halftone decorative background (brand-guide "halftone reflection") */
  & .ivs-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/images/invincible-vs/opti/shapes/button-decorative-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.5;
    transition: all 0.3s;
  }

  /* Diagonal light sweep that animates across on hover */
  & .ivs-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100px;
    width: 100px;
    height: 100%;
    z-index: 0;
    background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%
    );
    pointer-events: none;
  }

  & .ivs-button:hover::before { opacity: 1; }
  & .ivs-button:hover::after { animation: ivs-button-shine 3s infinite linear; }

  & .ivs-button:focus-visible {
    outline: 3px solid var(--ivs-mustard);
    outline-offset: 2px;
  }

  & .ivs-button[disabled],
  & .ivs-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hero variant — matches source-site `.hero-section.v2 .main-btn a`
     (wide horizontal padding; span uses default font sizing). */
  & .ivs-button--hero {
    padding: 0.563rem 10.625rem;
  }

  /* Compact variant — matches source-site `header .header-container
     .main-btn a` padding + span typography exactly. */
  & .ivs-button--sm {
    padding: 0.375rem 2.625rem;
  }
  & .ivs-button--sm > span {
    font-size: 1.25rem;
    line-height: 1.25rem;
    letter-spacing: 0.025rem;
  }

  /* ──────────────────────────────────────────────────────────────────
   * Secondary button — dark halftone plate (default) or light (alt).
   * Use for paired prev/next actions (application-form modal stepper)
   * and supporting CTAs where the primary yellow button would be
   * visually dominant.
   *
   * Gradients are translated from the source's Asset 7 (default/hover)
   * and Asset 5 (inverted). Halftone overlays come from
   * button-secondary-bg*.svg in /images/invincible-vs/opti/shapes/.
   * ─────────────────────────────────────────────────────────────── */
  & .ivs-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    padding: 0.85rem 2.5rem;
    min-width: 9rem;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Home Planet', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ivs-white);
    background: linear-gradient(0deg, #1A1A1A 14%, #333333 100%);
    transition: all 0.3s;
  }

  /* Halftone plate overlay. Separate pseudo so we can cross-fade
     between default / hover / active variants. */
  & .ivs-button-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/images/invincible-vs/opti/shapes/button-secondary-bg.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.3s;
  }

  & .ivs-button-secondary > * {
    position: relative;
    z-index: 1;
  }

  /* Hover: swap to the more intense halftone plate. */
  & .ivs-button-secondary:hover::before {
    background-image: url('/images/invincible-vs/opti/shapes/button-secondary-bg-hover.svg');
  }

  /* Explicit-only inverted state — triggered via `.is-active` modifier,
     NOT via `:active` pseudo-class, so click-and-hold doesn't flash the
     light variant. Use when a toggle or persistent-active state is
     intentionally needed. */
  & .ivs-button-secondary.is-active {
    background: linear-gradient(0deg, #C7C7C7 14%, #808080 100%);
    color: var(--ivs-black);
  }
  & .ivs-button-secondary.is-active::before {
    background-image: url('/images/invincible-vs/opti/shapes/button-secondary-bg-light.svg');
  }

  /* Alt variant — permanent light treatment (Asset 5 + button-secondary-bg-light.svg) */
  & .ivs-button-secondary--alt {
    background: linear-gradient(0deg, #C7C7C7 14%, #808080 100%);
    color: var(--ivs-black);
  }
  & .ivs-button-secondary--alt::before {
    background-image: url('/images/invincible-vs/opti/shapes/button-secondary-bg-light.svg');
  }
  & .ivs-button-secondary--alt:hover::before {
    /* Alt keeps its light halftone on hover — no swap image supplied. */
    background-image: url('/images/invincible-vs/opti/shapes/button-secondary-bg-light.svg');
  }

  /* States */
  & .ivs-button-secondary[disabled],
  & .ivs-button-secondary.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  & .ivs-button-secondary,
  & .ivs-button-secondary:hover,
  & .ivs-button-secondary:focus {
    text-decoration: none;
  }
  & .ivs-button-secondary:focus-visible {
    outline: 2px solid var(--ivs-mustard);
    outline-offset: 3px;
  }

  /* Narrower viewports — collapse the hero's generous horizontal padding
     so it doesn't overflow the container. */
  @media (max-width: 768px) {
    & .ivs-button--hero {
      padding: 0.563rem 3.5rem;
    }
  }

  /* ──────────────────────────────────────────────────────────────────
   * Sticky header with scroll transition (matches source-site `header`
   * + `.header-scroll`). At top of page the header is transparent; on
   * scroll it picks up a translucent dark pill background and a thin
   * gradient border, and the logo shrinks from 290 → 210px.
   * ─────────────────────────────────────────────────────────────── */
  & .ivs-header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 1.125rem 2.75rem;
    /* Let clicks pass through the transparent strip to content below
       (e.g. the hero video play/pause button). The inner pill restores
       pointer-events so the logo, nav, and CTAs remain clickable. */
    pointer-events: none;
  }

  & .ivs-header__container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    background-color: transparent;
    transition: all 0.3s;
    pointer-events: auto;
  }

  /* Dark translucent pill background (fades in on scroll) */
  & .ivs-header__container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 5px;
    background: linear-gradient(
      90deg,
      rgba(35, 41, 55, 0.7) 0%,
      rgba(43, 49, 65, 0.7) 30%,
      rgba(40, 46, 64, 0.7) 57%,
      rgba(31, 37, 52, 0.7) 79%,
      rgba(21, 26, 37, 0.7) 100%
    );
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    opacity: 0;
    transition: all 0.3s;
  }

  /* Thin gradient border (mask-composite trick, fades in on scroll) */
  & .ivs-header__container::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      130deg,
      rgb(43, 56, 70) 0%,
      rgb(255, 255, 255) 33%,
      rgb(40, 51, 62) 68%,
      rgb(255, 255, 255) 88%,
      rgb(30, 39, 48) 100%
    );
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    box-sizing: border-box;
    opacity: 0;
    transition: all 0.3s;
  }

  & .ivs-header__logo {
    display: block;
    width: 290px;
    transition: all 0.3s;
  }
  & .ivs-header__logo img { max-width: 100%; display: block; }

  /* Section links (Home / Perks / FAQ) sit directly to the right of
     the logo. 2.5rem gap matches the source site's `margin-right`
     between nav items. */
  & .ivs-header__nav-primary {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-left: 2.5rem;
  }

  /* Account block (Login + Apply) is pushed to the far right. */
  & .ivs-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2.5rem;
  }

  @media (max-width: 768px) {
    & .ivs-header__nav-primary { display: none; }
  }

  /* Nav link — matches the source site's `main-nav-menu > li` typography
     exactly (HomePlanetBB-Bold @ 1.25rem / 1.875rem line-height /
     0.063rem tracking) and its hover treatment (yellow text-shadow glow
     instead of a colour change). Active/current-page links take the
     source site's yellow text colour (`.current-menu-item`). */
  & .ivs-header__link,
  & .ivs-header__link:hover,
  & .ivs-header__link:focus,
  & .ivs-header__link:active {
    text-decoration: none;
  }
  & .ivs-header__link {
    font-family: 'Home Planet', Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.875rem;
    letter-spacing: 0.063rem;
    color: var(--ivs-white);
    transition: all 0.3s;
  }
  & .ivs-header__link:hover {
    color: var(--ivs-white);
    text-shadow: 0 0 7px rgb(255, 215, 0);
  }
  & .ivs-header__link[aria-current="page"],
  & .ivs-header__link.is-active {
    color: #FFD500;
  }
  & .ivs-header__link[aria-current="page"]:hover,
  & .ivs-header__link.is-active:hover {
    color: #FFD500;
    text-shadow: 0 0 7px rgb(255, 215, 0);
  }

  /* Scrolled state */
  & .ivs-header.is-scrolled .ivs-header__container::before { opacity: 1; }
  & .ivs-header.is-scrolled .ivs-header__container::after  { opacity: 1; }
  & .ivs-header.is-scrolled .ivs-header__logo              { width: 210px; }

  @media (max-width: 768px) {
    & .ivs-header { padding: 0.75rem 1rem; }
    & .ivs-header__logo { width: 145px; }
    & .ivs-header.is-scrolled .ivs-header__logo { width: 120px; }
  }

  /* Override BaseStreamedHero's default black→black gradient overlay
     so the hero video fades seamlessly into the About section's dark-
     slate ground colour at the bottom edge. */
  & .banner-bg::before {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.4) 0%,
      var(--ivs-dark-slate) 100%
    ) !important;
  }

  /* In-page anchor targets (#perks, #faq, #apply) — reserve clearance
     below the fixed header so smooth-scroll doesn't hide the heading
     behind the pill. Scrolled-header height is ~100px + a small gap. */
  & #perks,
  & #faq,
  & #apply {
    scroll-margin-top: 120px;
  }

  /* BaseStreamedHero's sticky play/pause control. Parked below the
     header and horizontally aligned with the Apply button's right
     edge (which sits at viewport_right − 44px header pad − 16px
     container pad = 60px from the right). */
  & .banner-bg .controls {
    --_header--height: 0px;          /* span sticks to viewport top */
    z-index: 10000;                  /* sit above the fixed header (9999) */
  }
  & .banner-bg .controls svg {
    inset-block-start: 115px;        /* just below the pill (~107px bottom) */
    inset-inline-end: 60px;          /* match Apply button's right edge */
  }
  @media (max-width: 768px) {
    & .banner-bg .controls svg {
      inset-block-start: 80px;
      inset-inline-end: 16px;
    }
  }

  /* ── Decorative divider (Toolkit p.40, "Divider 01") ── */
  & .ivs-divider {
    height: 2px;
    border: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--ivs-mustard) 20%,
      var(--ivs-yellow) 50%,
      var(--ivs-mustard) 80%,
      transparent 100%
    );
    box-shadow: 0 0 24px 0 rgba(215, 155, 0, 0.4);
  }
}