/**
 * « Entre terre et ciel » — motion
 *
 * CSS keeps the page transitions, the intro and the halo canvas; everything
 * else moves on springs in assets/js/motion.js.
 * Everything here is opt-in: the head script adds .cn-motion to <html> only
 * when JavaScript runs and the visitor has not asked for reduced motion.
 * Without that class every element is simply visible at rest.
 */

/* ==========================================================================
   1. Page transitions (450 ms)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Full page loads (browsers that support cross-document transitions) */
    @view-transition {
        navigation: auto;
    }
}

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 450ms;
    animation-timing-function: var(--ease);
}

/* The header and the player stay put while the page changes */
.fl-header       { view-transition-name: cn-header; }
.fl-audio-player { view-transition-name: cn-player; }

/* ==========================================================================
   2. Intro: first page of the session (2400 ms)
   Monogram drawn in light, then the veil lifts on the page.
   ========================================================================== */
.cn-intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: var(--nuit);
    color: var(--or);
    cursor: pointer;
    animation: cn-intro-lift 1000ms var(--ease) 1400ms forwards;
}

.cn-intro[hidden] {
    display: none;
}

.cn-intro .cn-monogram {
    font-size: clamp(96px, 18vmin, 160px);
}

.cn-intro .cn-monogram path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: cn-draw 1400ms var(--ease) forwards;
}

.cn-intro .cn-monogram path:nth-of-type(2) { animation-delay: 150ms; }
.cn-intro .cn-monogram path:nth-of-type(3) { animation-delay: 300ms; }

.cn-intro .cn-monogram rect {
    transform-box: fill-box;
    transform-origin: top;
    transform: scaleY(0);
    animation: cn-ray 1200ms var(--ease) 200ms forwards;
}

/* A click or a key skips the intro */
.cn-intro.is-skipped {
    animation: cn-intro-lift 600ms var(--ease) forwards;
}

/* Beneath the veil, the opening photo settles (1.08 -> 1) */
.cn-intro-on .cn-ouverture__media {
    animation: cn-settle var(--dur-3) var(--ease) 800ms backwards;   /* hands over to the scroll zoom */
}

@keyframes cn-intro-lift {
    to { opacity: 0; visibility: hidden; }
}

@keyframes cn-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes cn-ray {
    to { transform: scaleY(1); }
}

@keyframes cn-settle {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

/* ==========================================================================
   3. Springs (assets/js/motion.js, with Motion): opening, lists, arches,
   quote lines, presses and pointer follow. The script sets every hidden
   state inline and only on elements below the fold.
   ========================================================================== */
.cn-ligne {
    display: block;
}

/* Opening: held back from the first paint until motion.js plays it
   (.cn-js-open); shown anyway after 1.2 s if the script never runs */
.cn-motion:not(.cn-js-open) :is(.cn-ouverture__texte, .fl-hero__content) > :not([data-cn-lines]) {
    opacity: 0;
    animation: cn-failsafe 1ms linear 1200ms forwards;
}

@keyframes cn-failsafe {
    to { opacity: 1; }
}

/* Printed before being scrolled to: show everything */
@media print {
    [data-cn-motion],
    [data-cn-motion] .cn-ligne {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ==========================================================================
   4. Voice halo: canvas around the opening arch (drawn by halo.js)
   ========================================================================== */
.cn-halo {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.cn-ouverture__arche {
    z-index: 1;
}

/* the glow may reach past the screen edge on phones: never a sideways scroll */
.cn-ouverture {
    overflow-x: clip;
}

/* ==========================================================================
   5. Reduced motion: nothing moves, everything is visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cn-intro,
    .cn-halo {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }

    .cn-arch {
        clip-path: none !important;
    }

    .cn-ligne {
        opacity: 1 !important;
        transform: none !important;
    }
}