/* ==================================================================
   Hero — whole homepage hero (kwizzbit/hero)
   Faithful slice of /HTML/hero.html: hero + floating-cards + trust-logos.
   Shared layers live elsewhere: tokens in theme.json, reset/.container in
   base.css, buttons in components/button.css. Fonts via theme.json @font-face.
   ================================================================== */

    /* ============================================================
       HERO (kwizzbit/hero-centred) — new pattern
       Centered: counter pill → H1 → lead → CTA
       ============================================================ */
    .hero {
      padding-top: 48px;
      padding-bottom: var(--wp--preset--spacing--80);
      text-align: center;
    }
    .hero__inner {
      max-width: 920px;
      margin-inline: auto;
      padding-inline: var(--wp--custom--layout--gutter);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Counter pill — matches More story.html stat pill */
    .hero__counter {
      display: inline-flex;
      align-items: center;
      gap: 0.3em;
      padding: 0.375rem 0.75rem;
      border: 1px solid rgba(26, 26, 26, 0.18);
      border-radius: 0;
      background: transparent;
      font-family: var(--wp--preset--font-family--body);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--wp--preset--color--ink-soft);
      margin-bottom: var(--wp--preset--spacing--40);
    }
    .hero__counter-number {
      display: inline-block;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      color: var(--wp--preset--color--coral);
    }
    .hero__counter-label {
      color: var(--wp--preset--color--ink-soft);
    }
    @keyframes counter-tick {
      from { transform: translateY(4px); opacity: 0.5; }
      to   { transform: translateY(0);   opacity: 1;   }
    }
    .hero__counter-number--tick {
      animation: counter-tick 0.14s var(--wp--custom--motion--ease-out) both;
    }

    /* H1 — display, locked spec from theme.json + STYLEGUIDE.
       max-width tuned to force the reference 3-line wrap:
       "Unforgettable / quizzes, created & / shared in seconds." */
    .tablet-br { display: none; } /* shown only at tablet via @media below */
    .hero__title {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400;
      font-size: var(--wp--preset--font-size--display);
      line-height: 0.95;
      letter-spacing: -0.10764em;
      color: var(--wp--preset--color--ink);
      margin: 0;
      max-width: 680px;
    }
    /* Desktop only — bump the hero headline a tad above the global display
       token (5rem) without changing the token itself (other patterns share it). */
    @media (min-width: 1024px) {
      .hero__title {
        font-size: 5.5rem;
        max-width: 740px;
      }
    }
    .hero__title-accent {
      color: var(--wp--preset--color--coral);
      animation: cursor-blink 1.1s step-end infinite;
    }
    @keyframes cursor-blink {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0; }
    }

    /* Lead — locked: Roobert Medium 17px 1.412 */
    .hero__lead {
      margin: var(--wp--preset--spacing--50) 0 0;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: var(--wp--preset--font-size--md);
      line-height: 1.412;
      color: #473531;
      max-width: 450px;
    }

    /* CTA */
    .hero__cta {
      margin-top: var(--wp--preset--spacing--60);
    }
    .hero__cta .btn--primary {
      padding-inline: 3.5rem;
    }

    /* Scroll-reveal entry */
    .hero.has-scroll-reveal .hero__counter,
    .hero.has-scroll-reveal .hero__title,
    .hero.has-scroll-reveal .hero__lead,
    .hero.has-scroll-reveal .hero__cta {
      opacity: 0;
      transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
      transition:
        opacity var(--wp--custom--motion--scroll-reveal-duration)
          var(--wp--custom--motion--scroll-reveal-easing),
        transform var(--wp--custom--motion--scroll-reveal-duration)
          var(--wp--custom--motion--scroll-reveal-easing);
    }
    .hero.has-scroll-reveal.is-visible .hero__counter { opacity: 1; transform: none; transition-delay: 0s;   }
    .hero.has-scroll-reveal.is-visible .hero__title   { opacity: 1; transform: none; transition-delay: 0.08s; }
    .hero.has-scroll-reveal.is-visible .hero__lead    { opacity: 1; transform: none; transition-delay: 0.16s; }
    .hero.has-scroll-reveal.is-visible .hero__cta     { opacity: 1; transform: none; transition-delay: 0.24s; }

    /* ============================================================
       FLOATING CARDS (kwizzbit/floating-cards)
       Adapted from Gateway.html — drifting rows with avatars.
       ============================================================ */
    .float-cards {
      position: relative;
      padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
      /* Section-level horizontal clip — does NOT create iOS scroll container */
      overflow-x: clip;
    }
    .float-cards__viewport {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: calc(100% + 160px);
      margin-left: -80px;
    }
    .float-cards__row {
      display: flex;
      flex-direction: row;
      gap: 24px;
      flex-shrink: 0;
      width: max-content;
      align-items: center;
      will-change: transform;
    }
    .float-cards__row--ltr { animation: drift-ltr 500s linear infinite; }
    .float-cards__row--rtl {
      animation: drift-rtl 500s linear infinite;
      margin-left: -180px;
    }
    @keyframes drift-ltr {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    @keyframes drift-rtl {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Card wrapper carries the rotation; the card carries the float bob */
    .float-card-wrap {
      position: relative;
      flex-shrink: 0;
      transform: rotate(var(--rot, -1deg));
      padding: 14px 0 18px;
    }
    .float-card {
      width: 340px;
      height: 110px;
      position: relative;
      overflow: hidden;
      border-radius: 0;
      box-shadow: var(--wp--custom--shadow--quiz-card);
      animation: card-bob var(--bob-dur, 12s) ease-in-out infinite;
      animation-delay: var(--bob-delay, 0s);
    }
    @keyframes card-bob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-9px); }
    }
    .float-card__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-color: #2A1614;
    }
    .float-card__overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.82) 0%,
        rgba(0,0,0,0.55) 30%,
        rgba(0,0,0,0) 52%
      );
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0.75rem 0.875rem;
    }
    .float-card__title {
      font-family: var(--wp--preset--font-family--body);
      font-weight: 700;
      font-size: var(--wp--preset--font-size--sm);
      color: var(--wp--preset--color--white);
      line-height: 1.25;
      margin: 0 0 0.375rem;
    }
    .float-card__meta {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      flex-wrap: wrap;
    }
    .float-card__meta-item {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      font-family: var(--wp--preset--font-family--body);
      font-weight: 500;
      font-size: 0.6875rem;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
    }
    .float-card__meta-icon {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
    }

    /* Avatar — floating circle, size + position set per-card via JS */
    @keyframes avatar-pop {
      0%   { transform: scale(0); }
      80%  { transform: scale(1.02); }
      100% { transform: scale(1); }
    }
    @keyframes avatar-pop {
      0%   { transform: scale(0); }
      100% { transform: scale(1); }
    }
    @keyframes avatar-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(6px); }
    }
    /* Outer: invisible positioner — handles float only */
    .float-card__avatar-wrap {
      position: absolute;
      border-radius: 50%;
      z-index: 2;
      pointer-events: none;
      animation: avatar-float var(--bob-dur, 12s) ease-in-out infinite;
      animation-delay: var(--bob-delay, 0s);
    }
    /* Inner: styled avatar — handles pop-in (border scales in with it) */
    .float-card__avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #EFEBE7;
      overflow: hidden;
      background-size: 104%;
      background-position: center calc(50% - 1px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.22);
      animation: avatar-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      animation-delay: var(--av-delay, 0s);
    }
    @media (prefers-reduced-motion: reduce) {
      .float-card__avatar-wrap,
      .float-card__avatar { animation: none; }
    }

    .float-cards::before,
    .float-cards::after {
      content: none;
    }

        /* ============================================================
       TRUST LOGOS (kwizzbit/trust-logos) — COMPONENTS §4
       CSS copied verbatim from audience-split.html.
       Only three values differ from the original:
         - trust__inner uses page-max + gutter (SVGs are wider
           than the audience-split WebP images, so we need the
           full content width for space-between to have room).
         - trust__grid width:100% (not 897px fixed)
         - trust__logo-img height:auto (SVG natural px heights)
       ============================================================ */
    .trust {
      padding-top: 0;
      margin-top: -10px;
      padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
    }

    .trust__inner {
      text-align: center;
      max-width: 1100px;
      margin-inline: auto;
      padding-inline: var(--wp--custom--layout--gutter);
    }

    .trust__label {
      display: block;
      font-family: 'Pixelar', monospace;
      font-weight: 400;
      font-size: 19px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      color: #FF3623;
      margin-bottom: var(--wp--preset--spacing--60);
    }

    .trust__grid {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      gap: 45px;
      width: 100%;
      margin-inline: auto;
    }

    /* trust__row is a structural wrapper for the tablet 4+3 layout.
       display:contents makes it invisible at desktop — logos behave as
       direct children of the flex grid, preserving the single-row layout. */
    .trust__row {
      display: contents;
    }

    /* trust__ticker is the mobile marquee belt.
       At desktop/tablet: the ticker wrapper is contents (invisible),
       but the duplicate row is hidden so only one set of logos shows. */
    .trust__ticker {
      display: contents;
    }
    /* Hide the duplicate logo set at all sizes except mobile —
       it only exists to make the marquee loop seamless. */
    .trust__ticker [aria-hidden="true"] {
      display: none;
    }

    /* audience-hero locks every logo at height: 40px; we keep that exact
       behaviour. width:auto preserves each SVG's natural aspect ratio. */
    .trust__logo-img {
      display: block;
      height: clamp(16px, 2.75vw, 30px);
      width: auto;
      flex-shrink: 0;
      opacity: 0.9;
    }
    .trust__logo-img[aria-label="The FA"] {
      height: clamp(12.8px, 2.2vw, 24px); /* 80% of base */
    }

    /* ============================================================
       TABLET (≤1023px)
       ============================================================ */
    @media (max-width: 1023px) {
      .hero {
        padding-top: 60px;
        padding-bottom: var(--wp--preset--spacing--70);
      }
      .hero__title {
        font-size: 4rem;
        line-height: 0.92;
      }
      .tablet-br { display: inline; }
      /* Cards: full desktop size on tablet */
      .trust {
        padding-top: 0;
        margin-top: 0;
      }
    }

    /* Trust strip: 2-row grid (4+4) on tablet, no animation */
    @media (min-width: 641px) and (max-width: 1023px) {
      .trust__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
        gap: 24px 40px;
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
      }
      .trust__logo-img { height: 27px; }
      .trust__logo-img[aria-label="The FA"] { height: 22px; }
    }

    /* Row 3 — exists in DOM for mobile only; hidden everywhere else */
    #float-row-3 { display: none; }

    /* ============================================================
       MOBILE (≤640px)
       ============================================================ */

    /* Marquee keyframe — translates one full set of logos leftward.
       Duration 40s for a slow, soft drift. */
    @keyframes logo-ticker {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    /* Three-copy variant: translate by 1/3 of total width for extra
       seamless coverage — used when a JS-injected 3rd logo set exists. */
    @keyframes logo-ticker-3 {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-33.333%); }
    }

    @media (max-width: 640px) {
      .hero {
        padding-top: 28px;
        padding-bottom: var(--wp--preset--spacing--60);
      }
      .hero__inner { padding-inline: 1.25rem; }
      /* Badge: slightly smaller on mobile */
      .hero__counter {
        font-size: 0.75rem;
        padding: 0.25rem 0.5625rem;
      }
      .hero__title {
        font-size: clamp(2.125rem, 9.25vw, 2.625rem);
        line-height: 0.95;
        letter-spacing: -0.10764em;
        max-width: 100%;
      }
      .hero__lead {
        margin-top: var(--wp--preset--spacing--40);
        font-size: 1rem;
        max-width: 18rem;
      }
      .hero__cta {
        margin-top: var(--wp--preset--spacing--50);
      }
      /* Fixed coral CTA width on mobile */
      .hero__cta .btn--primary {
        width: 220px;
        max-width: 100%;
        padding-inline: 0;
        justify-content: center;
      }

      .float-cards {
        padding-block: var(--wp--preset--spacing--50)
                       var(--wp--preset--spacing--60);
      }
      .float-cards__viewport {
        gap: 1px;
        width: calc(100% + 80px);
        margin-left: -40px;
      }
      /* Row 3 visible on mobile */
      #float-row-3 { display: flex; }
      /* Cards: slightly larger, tighter inter-card gap */
      .float-cards__row { gap: 14px; }
      .float-card  { width: 220px; height: 70px; }
      .float-card__title {
        font-size: 0.6875rem;
        margin-bottom: 0.1rem;
      }
      .float-card__overlay { padding: 0.5rem 0.75rem 0.375rem; }
      .float-card__meta-item { font-size: 0.5rem; gap: 0.2rem; }
      .float-card__meta { gap: 0.4rem; }
      /* Avatar: let JS AV_SIZES variation through, scaled 85% via JS.
         Only override the position here. */
      .float-card__avatar-wrap {
        bottom: 5px !important;
        right: -8px !important;
      }

      /* Trust strip: flush to window edges */
      .trust {
        margin-top: 14px;
        overflow: hidden;
        margin-inline: calc(-1 * clamp(1rem, 4vw, 3rem));
        padding-bottom: calc(clamp(2.5rem, 5vw, 4.5rem) + 14px);
      }
      .trust__inner {
        padding-inline: 0;
      }
      .trust__label {
        font-size: 18px;
        margin-top: -3px;
        margin-bottom: calc(var(--wp--preset--spacing--40) + 5px);
        padding-inline: clamp(1rem, 4vw, 3rem);
      }
      .trust__grid {
        display: block;
        width: 100%;
        overflow: hidden;
        /* Fade the looping logos into the cream backdrop at both edges so they
           dissolve as they near the window edges (mobile only). The mask fades
           the strip to transparent, revealing the cream behind — so it always
           matches the backdrop exactly. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
      }
      .trust__ticker {
        display: flex;
        align-items: center;
        gap: 36px;
        width: max-content;
        padding-left: clamp(1rem, 4vw, 3rem);
        /* logo-ticker-3 used when JS injects a 3rd set; fallback to logo-ticker */
        animation: logo-ticker-3 40s linear infinite;
      }
      .trust__row {
        display: contents;
      }
      .trust__ticker [aria-hidden="true"] {
        display: contents;
      }
      /* Trust logos: +10% over the prior 24px → 26px */
      .trust__logo-img {
        flex-shrink: 0;
        height: 26px;
      }
      .trust__logo-img[aria-label="The FA"] {
        height: 21px;
      }
    }

    /* ============================================================
       REDUCED MOTION
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      .hero__title-accent { animation: none; }
      .float-card,
      .float-cards__row--ltr,
      .float-cards__row--rtl { animation: none; }
      .hero__counter,
      .hero__title,
      .hero__lead,
      .hero__cta {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .trust__ticker { animation: none !important; }
    }

/* ==================================================================
   WP full-bleed adaptation (not in source — required because WordPress
   places the pattern inside a width-constrained content container).
   ================================================================== */
.float-cards{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* The source card titles used Roobert SemiBold 600 (now licensed Bold 700, which tracks
   wider). Nudge the tracking back in to match the original SemiBold setting. */
.float-card__title{
	letter-spacing: -0.015em;
}
/* Avatar sizing — base size comes from the JS-set --av-size custom property; the mobile
   0.85 scale lives here in CSS so it tracks the viewport (resize/rotate) without a JS
   rebuild. (Previously the size was JS-computed once at load and went stale on resize.) */
.float-card__avatar-wrap{
	width: var(--av-size);
	height: var(--av-size);
}
@media (max-width: 640px){
	.float-card__avatar-wrap{
		width: calc(var(--av-size) * 0.85);
		height: calc(var(--av-size) * 0.85);
	}
	/* Calm the card-row drift on mobile — slower than the desktop 500s so the rows don't
	   compete with the faster logo ticker. Direction/keyframes/loop unchanged. */
	.float-cards__row--ltr,
	.float-cards__row--rtl{
		animation-duration: 1000s;
	}
}