/* Site-wide motion
 *
 * Paired with scripts/tgc-motion.js. Everything is opt-in through a class the
 * script adds, so a page without JavaScript never hides anything.
 */

@keyframes tgc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Text and panels arrive from the bottom, slightly staggered. */
.tgc-reveal {
    opacity: 0;
    transform: translateY(calc(26 * var(--tgc-u)));
}

.tgc-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease,
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

/*
 * The brand marks build as they appear: each shape pops in on a short stagger,
 * rather than the whole mark rotating. Rotation only reads on the flower — it
 * is the one mark with radial symmetry — and tumbles the other four, which all
 * have an obvious upright.
 */
.motif__mark--builds > g > *,
.motif__mark--builds > path,
.motif__mark--builds > circle,
.motif__mark--builds > ellipse,
.motif__mark--builds > rect {
    opacity: 0;
    /* fill-box so each shape scales about itself, not the whole viewBox. */
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.4);
}

.motif__mark--builds.is-built > g > *,
.motif__mark--builds.is-built > path,
.motif__mark--builds.is-built > circle,
.motif__mark--builds.is-built > ellipse,
.motif__mark--builds.is-built > rect {
    opacity: 1;
    transform: none;
    transition: opacity 0.42s ease, transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
}

/*
 * Buttons. The brief asks for the hover on marvelloux.design: the arrow leaves
 * through the top-right and the next one arrives from the bottom-left, while
 * the ring fills in.
 */
.arrow-button__arrow {
    overflow: hidden;
}

.arrow-button__glyph {
    transition: transform 0.36s cubic-bezier(0.65, 0, 0.35, 1);
}

.arrow-button:hover .arrow-button__glyph,
.arrow-button:focus-visible .arrow-button__glyph {
    animation: arrow-button-pass 0.52s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes arrow-button-pass {
    /* Rotation is baked in because the glyph sits at 135deg at rest. */
    0% {
        transform: rotate(135deg) translate(0, 0);
    }

    49% {
        transform: rotate(135deg) translate(0, -140%);
        opacity: 0;
    }

    50% {
        transform: rotate(135deg) translate(0, 140%);
        opacity: 0;
    }

    100% {
        transform: rotate(135deg) translate(0, 0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motif__mark--builds > g > *,
    .motif__mark--builds > path,
    .motif__mark--builds > circle,
    .motif__mark--builds > ellipse,
    .motif__mark--builds > rect {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tgc-reveal,
    .tgc-reveal.is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .arrow-button:hover .arrow-button__glyph,
    .arrow-button:focus-visible .arrow-button__glyph {
        animation: none;
    }
}