/* ==========================================================================
   Motion layer — styles used by assets/js/motion.js
   Nothing here hides content unless html.has-motion is set (motion-init.js),
   which never happens with prefers-reduced-motion and is removed if GSAP fails.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pre-hide above-the-fold items so the load choreography has no flash.
   (Below-the-fold items are prepared by JS before they scroll into view.)
   -------------------------------------------------------------------------- */
.has-motion .hero__flag,
.has-motion .hero__name,
.has-motion .hero__lead,
.has-motion .hero__actions,
.has-motion .hero__slash,
.has-motion .hero__media,
.has-motion .hero__ticker,
.has-motion .page-hero__media,
.has-motion .page-hero [data-hero-item] {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Section heads: a gold-tipped rule that titles draw in (--rule: 0 → 1)
   -------------------------------------------------------------------------- */
.section-head {
    position: relative;
    padding-bottom: var(--space-5);
}

.section-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--gold) 0 72px, var(--line) 72px);
    transform: scaleX(var(--rule, 1));
    transform-origin: left center;
}

/* Split lines never show the mask edge while text slides behind it */
.split-line {
    padding-bottom: 0.04em;
}

/* --------------------------------------------------------------------------
   Ambient environment — very low contrast, content always wins.
   Generated by motion.js only when motion is allowed; paused off-screen.
   -------------------------------------------------------------------------- */
.ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

/* Gridiron: yard lines laid onto a tilted plane, drifting sideways */
.ambient__plane {
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -10%;
    height: 90%;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
    mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
}

.ambient__lines {
    position: absolute;
    inset: 0 -160px 0 0;
    background:
        repeating-linear-gradient(90deg, rgba(245, 241, 232, 0.05) 0 2px, transparent 2px 160px),
        repeating-linear-gradient(90deg, rgba(248, 185, 69, 0.035) 0 1px, transparent 1px 32px);
}

.ambient__particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold-light);
    opacity: 0;
}

/* Promotion costs memory for as long as it lasts, so it is granted only while the layer is
   on screen and running. motion.js adds the class with the same ScrollTrigger that plays
   and pauses these loops. */
.ambient.is-playing .ambient__lines {
    will-change: transform;
}

.ambient.is-playing .ambient__particle {
    will-change: transform, opacity;
}

.ambient__bolt {
    position: absolute;
    width: clamp(48px, 6vw, 96px);
    height: auto;
    color: var(--gold);
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Card depth on hover (desktop pointers only): the frame brightens, the
   pattern layer drifts, the cut-out and number come forward in 3D.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .pcard__frame {
        transition: filter var(--dur) ease;
    }

    .pcard__frame::before {
        background-position: 0 0, 0 0, 50% 50%, 0 0;
        transition: background-position 900ms var(--ease-out);
    }

    .pcard__number,
    .pcard__pos {
        transition: transform var(--dur-slow) var(--ease-out);
    }

    .pcard:hover .pcard__frame {
        filter: brightness(1.14) saturate(1.05);
    }

    .pcard:hover .pcard__frame::before {
        background-position: 0 0, 8% -4%, calc(50% + 14px) calc(50% - 10px), 0 0;
    }

    /* Cut-out pops towards the viewer; an ordinary photo zooms gently inside its frame. */
    .pcard--cutout:hover .pcard__photo {
        transform: translateZ(40px) scale(1.035);
    }

    .pcard:not(.pcard--cutout):hover .pcard__photo img {
        transform: scale(1.05);
    }

    .pcard:hover .pcard__number {
        transform: translateZ(22px) translateX(-2px);
    }

    .pcard:hover .pcard__pos {
        transform: translateZ(26px);
    }
}

/* --------------------------------------------------------------------------
   Timeline progress rail (drawn with --progress by motion.js)
   -------------------------------------------------------------------------- */
.timeline-wrap {
    position: relative;
}

.timeline__progress {
    position: absolute;
    z-index: 1;
    top: 0.5rem;
    bottom: 0;
    left: 7px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%, var(--gold-dark));
    transform: scaleY(var(--progress, 1));
    transform-origin: 50% 0;
    pointer-events: none;
}

@media (min-width: 900px) {
    .timeline__progress {
        left: calc(180px + var(--space-6) + 7px);
    }
}