/**
 * Motion layer — Bold Modernist.
 *
 * Loads last, so it refines rather than replaces. The motion here is cut to
 * suit a hard-edged design: things snap and slide, nothing floats or fades
 * lazily. Easing is one curve across the whole site so the site feels like one
 * hand made it.
 *
 * Everything is off under prefers-reduced-motion.
 */

/* ---- Overflow guard -------------------------------------------------------
   One element wider than the viewport scrolls the whole page sideways and
   clips the masthead. Grid and flex children default to min-width:auto, which
   stops them shrinking below their content, so they get an explicit 0. */

html {
    overflow-x: clip;
}

.fmr-hero>*,
.fmr-cols>*,
.fmr-rcols>*,
.fmr-head--row>*,
.fmr-cta>* {
    min-width: 0;
}

/* ---- Scroll reveal --------------------------------------------------------
   14px and a short duration. On a design this firm, a long slow fade reads as
   sluggish rather than elegant. */

.fmr-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s cubic-bezier(.22, .68, .3, 1), transform .45s cubic-bezier(.22, .68, .3, 1);
    will-change: opacity, transform;
}

.fmr-rise.is-in {
    opacity: 1;
    transform: none;
}

.fmr-grid>.fmr-rise:nth-child(2),
.fmr-rail>.fmr-rise:nth-child(2) {
    transition-delay: .05s;
}

.fmr-grid>.fmr-rise:nth-child(3),
.fmr-rail>.fmr-rise:nth-child(3) {
    transition-delay: .1s;
}

.fmr-grid>.fmr-rise:nth-child(4),
.fmr-rail>.fmr-rise:nth-child(4) {
    transition-delay: .15s;
}

.fmr-grid>.fmr-rise:nth-child(n+5) {
    transition-delay: .2s;
}

/* ---- Editorial numbering ---------------------------------------------------
   The section number rides inside the orange badge, ahead of its label. */

.fmr-home {
    counter-reset: fmr-sec;
}

.fmr-section {
    counter-increment: fmr-sec;
}

.fmr-head .fmr-eyebrow::before {
    content: counter(fmr-sec, decimal-leading-zero) " / ";
    opacity: .62;
    font-variant-numeric: tabular-nums;
}

/* ---- Hero ------------------------------------------------------------------
   The headline arrives line by line, wiped up from below. */

.fmr-hero__title {
    overflow: hidden;
}

.fmr-hero__media img {
    animation: fmr-settle .8s cubic-bezier(.22, .68, .3, 1) both;
}

@keyframes fmr-settle {
    from {
        transform: scale(1.05);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fmr-hero .fmr-eyebrow {
    animation: fmr-slide-in .55s cubic-bezier(.22, .68, .3, 1) both;
}

@keyframes fmr-slide-in {
    from {
        transform: translateX(-14px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

/* ---- Section headings ------------------------------------------------------
   A 2px black rule sweeps across as the block enters. */

.fmr-head {
    position: relative;
    padding-bottom: 20px;
}

.fmr-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--fmr-border-strong);
    transition: width .8s cubic-bezier(.22, .68, .3, 1);
}

.fmr-rise.is-in .fmr-head::after,
.fmr-head.is-in::after {
    width: 100%;
}

/* ---- Buttons ---------------------------------------------------------------- */

.fmr-btn:active {
    transform: translate(1px, 1px);
}

.fmr-btn--ghost::after {
    content: " \2192";
    display: inline-block;
    margin-left: 8px;
    transition: transform .25s cubic-bezier(.22, .68, .3, 1);
}

.fmr-btn--ghost:hover::after {
    transform: translateX(5px);
}

/* ---- Nav ----------------------------------------------------------------------
   Orange rule under the item, drawn from the left. */

.fmr-nav a {
    position: relative;
}

.fmr-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--fmr-brand-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.22, .68, .3, 1);
}

.fmr-nav a:hover::after,
.fmr-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* ---- Recipe page ---------------------------------------------------------------
   Step numbers fill solid on hover, matching the card's hard treatment. */

.fmr-steps li::before {
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.fmr-steps li:hover::before {
    background: var(--fmr-surface-dark);
    border-color: var(--fmr-surface-dark);
    color: var(--fmr-on-dark);
}

.fmr-ing li {
    transition: color .18s ease, padding-left .22s cubic-bezier(.22, .68, .3, 1);
}

.fmr-ing li:hover {
    color: var(--fmr-ink-900);
    padding-left: 6px;
}

.fmr-tag {
    transition: background .2s ease, color .2s ease;
}

.fmr-tag:hover {
    background: var(--fmr-surface-dark);
    color: var(--fmr-on-dark);
}

/* ---- Reduced motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .fmr-rise,
    .fmr-rise.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fmr-head::after {
        width: 100%;
        transition: none;
    }

    .fmr-hero__media img,
    .fmr-hero .fmr-eyebrow {
        animation: none;
    }

    .fmr-btn--ghost::after,
    .fmr-nav a::after,
    .fmr-ing li,
    .fmr-steps li::before,
    .fmr-tag {
        transition: none;
    }
}