/* =====================================================================================================
   Section: hero — styles for the block between "BEGIN SECTION: hero" and "END SECTION: hero" in index.html.

   Background (resource 08) with rounded bottom corners, intro animation (white logo → 3D flip → title,
   resource 19) and news-style ticker. Every animation has a static fallback under prefers-reduced-motion
   (end of file).
   ===================================================================================================== */

.section--hero {
    /* Design at 1440px: hero ~620px tall, title ~608px wide, ticker 22px, bottom corners ~40px. */
    --hero-radius: clamp(1.5rem, 2.8vw, 3.5rem);
    --hero-title-width: clamp(16rem, 42vw, 40rem);
    --hero-logo-height: clamp(4.5rem, 9vw, 8rem);
    --hero-ticker-size: clamp(1.0625rem, 0.95rem + 0.475vw, 1.5rem);   /* 17 → 22px (1440) → 24px */
    --hero-ticker-duration: 62s;                                       /* one group (4 phrases) per cycle */
    --hero-ticker-gap: 0.45em;        /* extra room each side of a " · " (on top of the space): ~0.7em in all */
    --hero-ticker-fade: clamp(1rem, 3vw, 2.5rem);   /* soft edge of the ticker band */
    --hero-logo-scale: 1.8;           /* the logo starts this much bigger and shrinks without pause until it flips */
    --hero-flip-delay: 0.6s;
    --hero-flip-duration: 0.8s;

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Tall: about the design's 1440 × 620 proportion, never taller than the screen below the sticky header. */
    min-height: clamp(30rem, 43vw, calc(100vh - var(--header-height)));
    min-height: clamp(30rem, 43vw, calc(100svh - var(--header-height)));
    padding-block: clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
    isolation: isolate;
    border-radius: 0 0 var(--hero-radius) var(--hero-radius);
    background: var(--brand-gradient);   /* shown only until the background image loads */
    color: var(--white);
}

/* On the light-violet background the default violet focus ring would be invisible. */
.section--hero :focus-visible { outline-color: var(--white); }

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ----- Title: logo that flips over to reveal the title ------------------------------------------------ */

.hero__title {
    display: flex;
    justify-content: center;
    padding-inline: var(--gutter);
    perspective: 1200px;
}

/* The card that flips. Its size is the title's (back face); the logo (front face) is centred over it. */
.hero__flip {
    position: relative;
    display: block;
    width: var(--hero-title-width);
    max-width: 100%;
    transform-style: preserve-3d;
    animation: hero-flip var(--hero-flip-duration) var(--ease-in-out) var(--hero-flip-delay) both;
}

.hero__face {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hero__face--front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__face--back { transform: rotateY(180deg); }

/* Belt and braces for backface-visibility (Safari ignores it on some composited children): also swap the faces'
   opacity exactly when the card is edge-on (the easing is symmetric, so at half the flip). Opacity, not
   visibility, so the title stays in the accessibility tree the whole time. */
.hero__face--front {
    animation: hero-face-off 0s linear calc(var(--hero-flip-delay) + var(--hero-flip-duration) / 2) forwards;
}
.hero__face--back {
    animation: hero-face-off calc(var(--hero-flip-delay) + var(--hero-flip-duration) / 2) linear;
}

.hero__logo {
    width: auto;
    height: var(--hero-logo-height);
    max-width: none;
    filter: brightness(0) invert(1);   /* the gradient symbol, rendered completely white */
    /* One continuous move: it fades in big and starts shrinking straight away, with no pause, reaching its own
       size when the card is edge-on in the middle of the flip (where the logo face disappears). */
    animation: hero-logo-intro calc(var(--hero-flip-delay) + var(--hero-flip-duration) / 2)
        cubic-bezier(0.3, 0.2, 0.45, 1) both;
}

.hero__title-img {
    width: 100%;
    height: auto;
}

/* Once the flip has ended (class added by js/sections/hero.js), drop the 3D transforms: while they are applied the
   browser draws the title as a 3D-transformed layer and resamples it, which makes it look slightly blurry. The two
   180deg turns cancel out, so nothing moves. */
.hero__flip.is-flipped,
.hero__flip.is-flipped .hero__face--back {
    animation: none;
    transform: none;
}
.hero__flip.is-flipped { transform-style: flat; }
.hero__flip.is-flipped .hero__face--front { display: none; }

@keyframes hero-logo-intro {
    0%   { opacity: 0; transform: scale(var(--hero-logo-scale)); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes hero-face-off {
    from, to { opacity: 0; }
}

@keyframes hero-flip {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(180deg); }
}

/* ----- Ticker ------------------------------------------------------------------------------------------ */

.hero__ticker {
    position: relative;
    width: 100%;
    margin-top: clamp(2.25rem, 5.5vw, 5rem);
    animation: hero-fade-in 0.8s var(--ease-out) 0.5s both;
}

/* The text is only visible in a band centred on the title: the title's width plus half of each side margin, so it
   fades out / in halfway between the screen edge and the title's edge, at any width. With T = the title's width
   (same formula as .hero__flip: its clamp, capped by the gutters), the band is T + (100% - T) / 2 = (100% + T) / 2.
   The viewport is one fade wider so the middle of each soft edge sits exactly on that halfway line. */
.hero__ticker-viewport {
    --hero-ticker-title: min(var(--hero-title-width), 100% - 2 * var(--gutter));
    width: calc((100% + var(--hero-ticker-title)) / 2 + var(--hero-ticker-fade));
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--hero-ticker-fade),
                                        #000 calc(100% - var(--hero-ticker-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--hero-ticker-fade),
                                #000 calc(100% - var(--hero-ticker-fade)), transparent);
}

.hero__ticker-track {
    display: flex;
    width: max-content;
    font-size: var(--hero-ticker-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--white);
    text-shadow: 0 1px 12px rgba(40, 20, 80, 0.25);
    animation: hero-ticker var(--hero-ticker-duration) linear infinite;
}

/* Hover pauses it; so does the (focus-only) toggle button or a tap, through .is-paused (js/sections/hero.js). */
.hero__ticker:hover .hero__ticker-track,
.hero__ticker.is-paused .hero__ticker-track { animation-play-state: paused; }

.hero__ticker-group {
    display: flex;
    flex-shrink: 0;
}

.hero__ticker-item { white-space: nowrap; }

/* Wider gap around every " · ": the ones inside a phrase and the one joining two phrases (whose spaces are kept
   with white-space: pre, as it sits between flex items where plain spaces would collapse). */
.hero__ticker-dot,
.hero__ticker-sep { margin-inline: var(--hero-ticker-gap); }
.hero__ticker-sep { white-space: pre; }

/* Two identical groups: moving the track by -50% shifts it exactly one group, so the loop has no seam. */
@keyframes hero-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Pause/play control for keyboard users (WCAG 2.2.2). Visually hidden until it gets focus. */
.hero__ticker-toggle {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    z-index: 1;
    transform: translateY(-50%);
    padding: 0.35rem 0.9rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--text);
    font-size: var(--text-sm);
    line-height: 1.2;
}
.hero__ticker-toggle:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----- Responsive ------------------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
    .section--hero {
        min-height: max(30rem, 75vh);
        min-height: max(30rem, 75svh);
        --hero-logo-scale: 1.45;   /* less room between title and ticker on phones */
    }
}

/* ----- Reduced motion: title shown directly, static centred ticker ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .hero__flip,
    .hero__face,
    .hero__logo,
    .hero__ticker,
    .hero__ticker-track { animation: none; }

    .hero__flip { transform: none; }
    .hero__face--front { display: none; }
    .hero__face--back { transform: none; }

    .hero__ticker-viewport {
        width: auto;
        padding-inline: var(--gutter);
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hero__ticker-track {
        display: block;
        width: auto;
        text-align: center;
    }
    .hero__ticker-group { display: block; }
    .hero__ticker-group[aria-hidden="true"],
    .hero__ticker-item--dup,
    .hero__ticker-sep,
    .hero__ticker-toggle { display: none; }
    .hero__ticker-item { white-space: normal; }
}