/* ==========================================================================
   ELITE TRIP MOTION
   The eight signature motions (docs/ELITE_MOTION_AND_ICONS.md, section 3).
   Rules: every keyframe is named et-*; nothing scales a photograph, tile or
   card; only Beads and Dawn loop; no spring overshoot. Motion is never load
   bearing: every element's resting style is its finished state, the
   animations only play into it, and nothing is hidden unless et-motion.js
   has run and marked the page (html.et-motion).
   ========================================================================== */

:root {
    --et-ease-rise: cubic-bezier(.16, .84, .30, 1);
    --et-ease-glide: cubic-bezier(.45, 0, .25, 1);
    --et-ease-settle: cubic-bezier(.33, 0, .2, 1);
    --et-d1: 180ms;
    --et-d2: 320ms;
    --et-d3: 560ms;
    --et-d4: 760ms;
    --et-d5: 1200ms;
    /* Arch Light phases */
    --et-dusk: 200ms;
    --et-travel: 360ms;
    --et-dawn-in: 480ms;
}

/* --------------------------------------------------------------------------
   M1 SUNRISE: content clears the horizon, top edge first.
   <h2 data-et-rise>  text (clip variant)
   <div data-et-rise="soft" style="--i:2">  cards (no clip, shadows intact)
   -------------------------------------------------------------------------- */
@keyframes et-sunrise {
    from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); }
    60% { opacity: 1; }
    to { opacity: 1; transform: none; clip-path: inset(0); }
}
/* The light arrives before the rise ends, as in et-sunrise. (The plain
   two-step version of this is Hangout's hb-rise, body for body.) */
@keyframes et-sunrise-soft {
    from { opacity: 0; transform: translateY(12px); }
    60% { opacity: 1; }
    to { opacity: 1; transform: none; }
}
.et-motion [data-et-rise]:not(.is-in) { opacity: 0; }
[data-et-rise].is-in {
    animation: et-sunrise 760ms var(--et-ease-rise) backwards;
    animation-delay: calc(min(var(--i, 0), 3) * 90ms);
}
[data-et-rise="soft"].is-in { animation-name: et-sunrise-soft; animation-duration: 560ms; }

/* --------------------------------------------------------------------------
   M2 HORIZON: a gold hairline draws itself out from the centre.
   -------------------------------------------------------------------------- */
@keyframes et-horizon {
    from { clip-path: inset(0 50% 0 50%); }
    to { clip-path: inset(0); }
}
.et-horizon::after {
    content: ""; display: block; width: 56px; height: 1px; margin-top: 14px;
    background: linear-gradient(90deg, transparent, var(--c-gold, #2563eb) 20% 80%, transparent);
    animation: et-horizon 900ms var(--et-ease-glide) 240ms backwards;
}
.et-horizon--center::after { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   M3 FLIGHT PATH (determinate progress), BEADS (loader), DAWNLINE (top bar)
   <div class="et-flight" data-et-flight="40"></div>   et-motion.js draws it;
   ETMotion.flight(el, 65) moves it.
   -------------------------------------------------------------------------- */
.et-flight { position: relative; width: 240px; height: 40px; max-width: 100%; }
.et-flight__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.et-flight__track, .et-flight__done {
    fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 9;
}
.et-flight__track { stroke: var(--c-bronze, #1d4ed8); stroke-opacity: .35; }
.et-flight__done { stroke: var(--c-gold, #2563eb); }
.et-flight__reveal {
    fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--p, 0));
    transition: stroke-dashoffset 640ms var(--et-ease-glide);
}
.et-flight__plane {
    position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
    color: var(--c-gold, #2563eb);
    offset-path: path('M8 34 Q120 -6 232 34');
    offset-anchor: center; offset-rotate: auto;
    offset-distance: calc(var(--p, 0) * 1%);
    transition: offset-distance 640ms var(--et-ease-glide);
}
/* The glyph points up and to the right like the logo; turn it to face along
   the path. */
.et-flight__plane .et-i { width: 18px; height: 18px; transform: rotate(38deg); }
@media (max-width: 480px) {
    .et-flight { width: 200px; height: 36px; }
    .et-flight__plane { offset-path: path('M7 31 Q100 -5 193 31'); }
}

@keyframes et-bead { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }
.et-beads { position: relative; display: inline-block; width: 20px; height: 14px; vertical-align: middle; color: var(--c-gold, #2563eb); }
.et-beads i {
    position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
    animation: et-bead 1200ms var(--et-ease-glide) infinite;
    animation-delay: calc(var(--n, 0) * 120ms);
}
/* Five beads on a 20 x 14 arch, left foot to right foot. */
.et-beads i:nth-child(1) { left: 0; top: 11px; --n: 0; }
.et-beads i:nth-child(2) { left: 2.5px; top: 5px; --n: 1; }
.et-beads i:nth-child(3) { left: 8.5px; top: 2.5px; --n: 2; }
.et-beads i:nth-child(4) { left: 14.5px; top: 5px; --n: 3; }
.et-beads i:nth-child(5) { left: 17px; top: 11px; --n: 4; }
.et-beads--lg { width: 40px; height: 28px; }
.et-beads--lg i { width: 6px; height: 6px; }
.et-beads--lg i:nth-child(1) { left: 0; top: 22px; }
.et-beads--lg i:nth-child(2) { left: 5px; top: 10px; }
.et-beads--lg i:nth-child(3) { left: 17px; top: 5px; }
.et-beads--lg i:nth-child(4) { left: 29px; top: 10px; }
.et-beads--lg i:nth-child(5) { left: 34px; top: 22px; }

@keyframes et-dawnline {
    0% { transform: scaleX(0); }
    40% { transform: scaleX(.45); }
    70% { transform: scaleX(.72); }
    to { transform: scaleX(.9); }
}
.et-dawnline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 3000; height: 2px;
    background: var(--c-gold, #2563eb); transform-origin: center; transform: scaleX(0);
    pointer-events: none;
}
.et-dawnline.is-loading { animation: et-dawnline 1.8s var(--et-ease-glide) forwards; }
.et-dawnline.is-done {
    transform: scaleX(1); opacity: 0;
    transition: transform 200ms var(--et-ease-settle), opacity 260ms linear 200ms;
}

/* --------------------------------------------------------------------------
   M4 ROAD: a vertical journey of six perspective dashes.
   <div class="et-road" data-et-play><i class="is-done"></i>...x6</div>
   -------------------------------------------------------------------------- */
@keyframes et-road {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}
.et-road { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.et-road i { display: block; border-radius: 1px; background: var(--c-bronze, #1d4ed8); opacity: .3; }
.et-road i.is-done { background: var(--c-gold, #2563eb); opacity: 1; }
.et-road i:nth-child(1) { width: 2px; height: 4px; --n: 0; }
.et-road i:nth-child(2) { width: 2.5px; height: 6px; --n: 1; }
.et-road i:nth-child(3) { width: 3px; height: 9px; --n: 2; }
.et-road i:nth-child(4) { width: 4px; height: 14px; --n: 3; }
.et-road i:nth-child(5) { width: 5px; height: 20px; --n: 4; }
.et-road i:nth-child(6) { width: 6px; height: 28px; --n: 5; }
.et-motion .et-road[data-et-play]:not(.is-in) i { opacity: 0; }
.et-road.is-in i {
    animation: et-road 260ms var(--et-ease-settle) backwards;
    animation-delay: calc(var(--n, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   M5 ARCH LIGHT (spotlight) and GLINT (attention)
   ETMotion.archPath(x, y, w, h) gives the arch hole; ETMotion.archLight()
   moves it Dusk > Travel > Dawn. The ring is two outlines like the logo's
   double arch.
   -------------------------------------------------------------------------- */
.et-archlight__ring { fill: none; stroke: var(--c-gold, #2563eb); stroke-width: 2; }
.et-archlight__ring--inner { stroke: var(--c-gold-light, #93c5fd); stroke-width: .75; stroke-opacity: .6; }

@keyframes et-glint {
    from { stroke-dashoffset: 12; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    to { stroke-dashoffset: -1000; opacity: 0; }
}
/* <path class="et-glint" pathLength="1000" d="..."/>; ETMotion.glint(el) */
.et-glint {
    fill: none; stroke: var(--c-gold-light, #93c5fd); stroke-width: 2; stroke-linecap: round;
    stroke-dasharray: 12 988; stroke-dashoffset: 12; opacity: 0; pointer-events: none;
}
.et-glint.is-glinting { animation: et-glint 1400ms var(--et-ease-glide) 1; }

/* --------------------------------------------------------------------------
   M6 DAWN: skeletons. The light settles down the rows; no sweeping band.
   -------------------------------------------------------------------------- */
@keyframes et-dawn { 0%, 100% { background-color: #f4f4f5; } 50% { background-color: #ffffff; } }
@keyframes et-dawn-dark { 0%, 100% { background-color: #1e1712; } 50% { background-color: #2a2119; } }
.et-skel {
    background: #f4f4f5;
    animation: et-dawn 2000ms var(--et-ease-glide) infinite;
    animation-delay: calc(var(--row, 0) * 140ms);
}
.et-skel--dark, .et-section--dark .et-skel, .ap-chapter--dark .et-skel {
    background: #1e1712; animation-name: et-dawn-dark;
}

/* --------------------------------------------------------------------------
   M7 SEAL: success. The arch draws, the horizon draws, the sun rises.
   ETMotion.seal({celebrate: true}) or ETMotion.seal({pending: true}) builds
   the 64 x 72 mark.
   -------------------------------------------------------------------------- */
@keyframes et-seal-arch { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes et-seal-sun { from { transform: translateY(100%); } to { transform: none; } }
@keyframes et-seal-rays { 0%, 100% { opacity: 0; } 45% { opacity: .9; } }
.et-seal { display: block; width: 64px; height: 72px; overflow: visible; color: var(--c-gold, #2563eb); }
.et-seal__arch, .et-seal__horizon { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: butt; }
.et-seal__arch {
    stroke-dasharray: 100; stroke-dashoffset: 0;
    animation: et-seal-arch 760ms var(--et-ease-glide) both;
}
.et-seal__horizon { animation: et-horizon 320ms var(--et-ease-glide) 560ms backwards; }
.et-seal__sun {
    fill: var(--c-gold-light, #93c5fd); transform-box: fill-box;
    animation: et-seal-sun 640ms var(--et-ease-rise) 760ms backwards;
}
.et-seal__rays { fill: none; stroke: var(--c-gold-light, #93c5fd); stroke-width: .75; opacity: 0; }
.et-seal--celebrate .et-seal__rays { animation: et-seal-rays 900ms linear 1300ms 1; }
.et-seal__track { fill: none; stroke: var(--c-gold-light, #93c5fd); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; opacity: .7; }
.et-seal__plane { fill: currentColor; }

/* --------------------------------------------------------------------------
   M8 UNFOLD and PASS: surfaces and toasts. Exit is opacity only.
   -------------------------------------------------------------------------- */
@keyframes et-unfold {
    from { opacity: 0; clip-path: inset(46% 0 46% 0 round 18px); }
    to { opacity: 1; clip-path: inset(0 round 18px); }
}
@keyframes et-unfold-up {
    from { clip-path: inset(100% 0 0 0 round 22px 22px 0 0); }
    to { clip-path: inset(0 round 22px 22px 0 0); }
}
@keyframes et-unfold-down {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0); }
}
@keyframes et-pass-in {
    from { opacity: 0; clip-path: inset(0 100% 0 0 round 14px); transform: translateY(6px); }
    to { opacity: 1; clip-path: inset(0 round 14px); transform: none; }
}
/* One-sided on purpose: the element's own opacity is the other end. */
@keyframes et-fade-in { from { opacity: 0; } }
@keyframes et-fade-out { to { opacity: 0; } }
.et-unfold { animation: et-unfold 380ms var(--et-ease-rise) backwards; }
.et-unfold-up { animation: et-unfold-up 420ms var(--et-ease-rise) backwards; }
.et-unfold-down { animation: et-unfold-down 220ms var(--et-ease-settle) backwards; }
.et-pass { animation: et-pass-in 420ms var(--et-ease-rise) backwards; }
.et-leave { animation: et-fade-out 180ms linear forwards; pointer-events: none; }
.et-backdrop { background: rgba(17, 12, 9, .48); animation: et-fade-in 280ms linear backwards; }

/* Hover: no lift. A gold border and a soft shadow. */
.et-hover-gold { transition: border-color 260ms var(--et-ease-glide), box-shadow 260ms var(--et-ease-glide); }
.et-hover-gold:hover, .et-hover-gold:focus-visible {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 10px 30px -18px rgba(17, 12, 9, .35);
}

/* Errors: no shake. A 2px bronze rule draws down the left edge. */
.et-error-rule { position: relative; }
.et-error-rule::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--c-bronze, #1d4ed8);
    animation: et-unfold-down 280ms var(--et-ease-settle) backwards;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION: every motion shows its finished frame. (elite.css also
   cuts every duration to 0.01ms; this makes the end states explicit.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [data-et-rise], .et-motion [data-et-rise]:not(.is-in) {
        opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important;
    }
    .et-horizon::after { animation: none; clip-path: none; }
    .et-beads i { animation: none !important; opacity: .6; }
    .et-flight__reveal, .et-flight__plane { transition: none !important; }
    .et-dawnline { animation: none !important; transition: none !important; }
    .et-road i, .et-motion .et-road[data-et-play]:not(.is-in) i { animation: none !important; }
    .et-motion .et-road[data-et-play]:not(.is-in) i:not(.is-done) { opacity: .3; }
    .et-motion .et-road[data-et-play]:not(.is-in) i.is-done { opacity: 1; }
    .et-glint, .et-glint.is-glinting { animation: none !important; opacity: 0 !important; }
    .et-skel { animation: none !important; }
    .et-seal__arch, .et-seal__horizon, .et-seal__sun, .et-seal__rays { animation: none !important; }
    .et-seal__arch { stroke-dashoffset: 0; }
    .et-seal__sun { transform: none; }
    .et-seal__rays { opacity: 0; }
    .et-unfold, .et-unfold-up, .et-unfold-down, .et-pass, .et-backdrop, .et-error-rule::before { animation: none !important; }
    .et-leave { animation: none !important; opacity: 0; }
    .et-hover-gold { transition: none; }
}