/* METRA Black Friday — ALT «Steel & Scarlet»: motion layer.
   Only opacity / translate / scale / rotate / clip-path. No libraries.
   Individual transform properties (translate, scale, rotate) are used so they
   compose with the inline `transform: rotate(...)` written by the export. */

:root {
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-ease-in-out: cubic-bezier(.6, 0, .2, 1);
  --m-scarlet: #DE2A30;
}

/* ---------- export fixes (layout, not motion) ----------
   The html-css export writes frames with a stroke as `box-sizing: content-box`
   but gives them the outer size, so padding is counted twice
   (header wider than 1440, list rows taller than in the design). */
[style*="box-sizing: content-box"] { box-sizing: border-box !important; }
/* keep the "y" of the giant «Friday» off the line below */
[data-pencil-id="GcEuC"] { margin-top: 34px; }

/* ---------- pre-hide the first screen so nothing flashes before motion.js ---------- */
.m-js:not(.m-fallback):not(.m-reduce):not(.m-ready) :is(
  [data-pencil-id="hsbvu"], [data-pencil-id="fqv8s"], [data-pencil-id="dzNfp"],
  [data-pencil-id="sPM4e"], [data-pencil-id="c3SPrP"], [data-pencil-id="GcEuC"],
  [data-pencil-id="nxpT7"], [data-pencil-id="ckTQx"], [data-pencil-id="m4Jv0P"],
  [data-pencil-id="MYLsB"], [data-pencil-id="oqHwG"]
) { opacity: 0; }

/* ---------- reveal system ---------- */
.m-hide {
  opacity: 0;
  transition:
    opacity .7s var(--m-ease),
    translate .85s var(--m-ease),
    scale .85s var(--m-ease),
    clip-path 1s var(--m-ease-in-out);
}
.m-hide.m-rise  { translate: 0 36px; }
.m-hide.m-rise-sm { translate: 0 18px; }
.m-hide.m-left  { translate: -70px 0; }
.m-hide.m-right { translate: 90px 0; }
.m-hide.m-down  { translate: 0 -22px; }
.m-hide.m-drop  { translate: 0 -90px; transition-timing-function: ease, cubic-bezier(.3, 1.4, .5, 1), ease, ease; transition-duration: .5s, .9s, .9s, .9s; }
.m-hide.m-pop   { scale: .82; transition-timing-function: ease, ease, cubic-bezier(.3, 1.5, .5, 1), ease; }
.m-hide.m-clip-up    { opacity: 1; clip-path: inset(100% 0 0 0); }
.m-hide.m-clip-down  { opacity: 1; clip-path: inset(0 0 100% 0); transition-duration: .3s, .3s, .3s, 1.5s; transition-timing-function: ease, ease, ease, steps(18, end); }
.m-hide.m-clip-right { opacity: 1; clip-path: inset(0 100% 0 0); }
.m-hide.m-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0 0 0 0);
}

/* keyframe reveals (with overshoot) */
.m-hide.m-slam, .m-hide.m-burst, .m-hide.m-stamp { transition: none; }
.m-hide.m-slam.m-in  { animation: m-slam .75s cubic-bezier(.2, .9, .25, 1.15) both; transform-origin: 0 70%; }
.m-hide.m-burst.m-in { animation: m-burst .9s cubic-bezier(.25, 1.4, .4, 1) both; transform-origin: 50% 50%; }
.m-hide.m-stamp.m-in { animation: m-stamp .55s cubic-bezier(.5, 0, .3, 1.3) both; transform-origin: 50% 50%; }

@keyframes m-slam {
  0%   { opacity: 0; scale: 1.45; translate: -30px 0; }
  55%  { opacity: 1; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
@keyframes m-burst {
  0%   { opacity: 0; scale: 0; rotate: -140deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes m-stamp {
  0%   { opacity: 0; scale: 2.6; }
  70%  { opacity: 1; scale: .92; }
  100% { opacity: 1; scale: 1; }
}

/* ---------- marquee (ticker + tapes + footer wordmark) ---------- */
.m-track { display: flex; flex-shrink: 0; align-items: center; width: max-content; will-change: translate; }
.m-half  { display: flex; flex-shrink: 0; align-items: center; }
@keyframes m-marquee { from { translate: 0 0; } to { translate: -50% 0; } }

/* ---------- countdown ---------- */
.m-flip { animation: m-flip .5s cubic-bezier(.3, .8, .35, 1); transform-origin: 50% 50%; }
@keyframes m-flip {
  0%   { transform: perspective(320px) rotateX(-88deg); filter: brightness(1.6); }
  100% { transform: perspective(320px) rotateX(0deg);   filter: brightness(1); }
}
.m-colon { animation: m-blink 1s steps(1, end) infinite; }
@keyframes m-blink { 50% { opacity: .25; } }
.m-live { animation: m-live 1.4s ease-out infinite; }
@keyframes m-live {
  0%   { box-shadow: 0 0 0 0 rgba(222, 42, 48, .7); }
  100% { box-shadow: 0 0 0 12px rgba(222, 42, 48, 0); }
}

/* ---------- loops ---------- */
.m-spin  { animation: m-spin 36s linear infinite; transform-origin: 50% 50%; }
@keyframes m-spin { to { rotate: 360deg; } }

.m-swing { animation: m-swing 4.8s ease-in-out infinite alternate; transform-origin: 50% 0 !important; }
@keyframes m-swing { from { rotate: -1.8deg; } to { rotate: 1.8deg; } }

.m-led { animation: m-led 2.4s steps(1, end) infinite; }
@keyframes m-led { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .2; } }

.m-ring { position: absolute; }
.m-ring::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid var(--m-scarlet);
  animation: m-ring 2.2s ease-out infinite; pointer-events: none;
}
@keyframes m-ring { 0% { scale: 1; opacity: .8; } 100% { scale: 1.7; opacity: 0; } }

.m-dash { animation: m-dash 1.1s linear infinite; }
@keyframes m-dash { to { translate: -46px 0; } }

.m-nudge { animation: m-nudge 1.3s ease-in-out infinite alternate; }
@keyframes m-nudge { from { translate: 0 0; } to { translate: 7px 7px; } }

.m-cut { animation: m-cut 7s var(--m-ease-in-out) infinite, m-snip .28s ease-in-out infinite alternate; }
@keyframes m-cut {
  0%   { translate: 0 0; opacity: 0; }
  6%   { opacity: 1; }
  58%  { translate: var(--m-cut, 1200px) 0; opacity: 1; }
  66%  { translate: var(--m-cut, 1200px) 0; opacity: 0; }
  100% { translate: 0 0; opacity: 0; }
}
@keyframes m-snip { from { rotate: -14deg; } to { rotate: 8deg; } }

/* pause every loop while its section is off screen */
.m-paused, .m-paused * { animation-play-state: paused !important; }

/* ---------- hover (rules sheet «Ховеры — Black Friday ALT» in Metra.pen) ---------- */
/* --m-sh-c / --m-sh-x / --m-sh-y are read from each element's own hard shadow by motion.js */
@media (hover: hover) {
  [data-m-btn] { cursor: pointer; transition: translate .18s ease-out, filter .18s ease-out, box-shadow .18s ease-out; }
  [data-m-btn]:hover { translate: -2px -3px; filter: brightness(1.12); box-shadow: 7px 8px 0 var(--m-sh-c, #222426) !important; }
  [data-m-btn]:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--m-sh-c, #222426) !important; transition-duration: .06s; }
  [data-m-btn] svg { transition: translate .18s ease-out; }
  [data-m-btn]:hover svg { translate: 4px 0; }

  [data-m-nav] { cursor: pointer; transition: color .18s ease-out, background-size .18s ease-out;
    background: linear-gradient(#DE2A30, #DE2A30) 0 100% / 0 2px no-repeat; padding-bottom: 4px; }
  [data-m-nav]:hover { color: #DE2A30 !important; background-size: 100% 2px; }

  [data-m-phone] { cursor: pointer; }
  [data-m-phone] > div { transition: color .18s ease-out; }
  [data-m-phone]:hover > div { color: #DE2A30 !important; }
  [data-m-phone]:hover svg { animation: m-ring-phone .5s ease-in-out 1; }

  [data-m-foot] { cursor: pointer; transition: color .18s ease-out; }
  [data-m-foot]:hover { color: #FFFFFF !important; }

  [data-m-card] { cursor: pointer; transition: translate .25s ease-out, box-shadow .25s ease-out; }
  [data-m-card]:hover { translate: 0 -6px; box-shadow: var(--m-sh-x, 8px) calc(var(--m-sh-y, 8px) + 6px) 0 var(--m-sh-c, #222426) !important; }
  [data-m-card] [data-pencil-name="Play"] { transition: scale .25s ease-out; }
  [data-m-card]:hover [data-pencil-name="Play"] { scale: 1.1; }

  [data-m-tag] { cursor: pointer; }
  [data-m-tag]:hover { animation-play-state: paused; }
  [data-m-tag] [data-pencil-name="Tag body"] { transition: translate .25s ease-out, box-shadow .25s ease-out; }
  [data-m-tag]:hover [data-pencil-name="Tag body"] { translate: 0 -8px; box-shadow: 0 28px 44px rgba(0, 0, 0, .65) !important; }

  [data-m-faq] { cursor: default; }
  [data-m-faq] [data-pencil-name="Q badge"] { transition: rotate .3s ease-out, scale .3s ease-out; }
  [data-m-faq]:hover [data-pencil-name="Q badge"] { rotate: -8deg; scale: 1.08; }

  [data-m-row] { transition: background-color .2s ease-out; }
  [data-m-row]:hover { background-color: rgba(249, 166, 31, .08); }

  [data-m-input] { cursor: text; transition: border-color .2s ease-out, box-shadow .2s ease-out; }
  [data-m-input]:hover { border-color: #222426 !important; }

  /* marquees stop under the cursor so they can be read */
  [data-m-marquee]:hover .m-track { animation-play-state: paused; }
}
@keyframes m-ring-phone { 0%, 100% { rotate: 0deg; } 25% { rotate: -12deg; } 75% { rotate: 10deg; } }

[data-m-input]:focus-within { border-color: #DE2A30 !important; border-width: 2px !important; box-shadow: 0 0 0 4px rgba(222, 42, 48, .2); }
:focus-visible { outline: 3px solid #F9A61F !important; outline-offset: 3px; }

/* ---------- safety ---------- */
.m-fallback .m-hide { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  .m-hide { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* hover keeps colour changes only */
  [data-m-btn]:hover, [data-m-btn]:active, [data-m-card]:hover, [data-m-tag]:hover [data-pencil-name="Tag body"],
  [data-m-btn]:hover svg, [data-m-card]:hover [data-pencil-name="Play"], [data-m-faq]:hover [data-pencil-name="Q badge"] {
    translate: none !important; scale: none !important; rotate: none !important;
  }
}

/* ======================= Field hero (SVbzc) only ======================= */
/* dawn over the field on load, then a slow camera push */
[data-pencil-id="yeMQT"] {
  transform-origin: 72% 38%;
  animation: m-dawn 2.4s cubic-bezier(.3, .6, .3, 1) both, m-kenburns 26s ease-in-out 2.4s infinite alternate;
}
@keyframes m-dawn {
  from { filter: brightness(.3) saturate(.5); scale: 1.08; }
  to   { filter: brightness(1) saturate(1); scale: 1; }
}
@keyframes m-kenburns { from { scale: 1; } to { scale: 1.07; } }

/* warm low sun behind the machine */
.m-sun {
  position: absolute; left: 820px; top: 40px; width: 760px; height: 760px; z-index: 0;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 196, 102, .55), rgba(249, 166, 31, .22) 45%, rgba(249, 166, 31, 0) 100%);
  animation: m-sun-in 2.8s ease-out .4s both, m-sun-breathe 7s ease-in-out 3.2s infinite alternate;
}
@keyframes m-sun-in { from { opacity: 0; translate: 0 120px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-sun-breathe { from { opacity: 1; scale: 1; } to { opacity: .7; scale: 1.06; } }

/* grain dust drifting in the sunlight */
.m-dust {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  background: rgba(255, 220, 150, .85); box-shadow: 0 0 6px rgba(255, 200, 110, .9);
  animation: m-dust var(--d, 9s) linear var(--delay, 0s) infinite;
}
@keyframes m-dust {
  0%   { opacity: 0; translate: 0 0; }
  15%  { opacity: var(--o, .8); }
  85%  { opacity: var(--o, .8); }
  100% { opacity: 0; translate: var(--dx, 60px) var(--dy, -140px); }
}

/* video inside the «Why Buy» silos (darkened, poster = background of the silo body) */
.m-silo-video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; pointer-events: none;
  opacity: 0; transition: opacity .8s ease-out;
}
.m-silo-video.m-on { opacity: 1; }
.m-silo-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* «METRA in Numbers»: farmer photo — field behind him slowly breathes */
.m-field-drift { animation: m-field-drift 22s ease-in-out infinite alternate; transform-origin: 84% 40%; }
@keyframes m-field-drift { from { scale: 1; } to { scale: 1.04; } }

/* ======================= smooth pass (30.10) — overrides the shared motion layer =======================
   Everything settles softly: long expo-out, short travel, no overshoot / bounce anywhere.
   build-field.py stretches motion.js hold to 1550 / 2100 ms so these transitions are never cut. */
:root {
  --m-soft: cubic-bezier(.16, 1, .3, 1);          /* expo-out: quick start, long gentle settle */
  --m-soft-io: cubic-bezier(.65, 0, .35, 1);      /* soft in-out for clips */
  --m-fade: cubic-bezier(.33, 1, .68, 1);         /* fades */
  --m-hover: cubic-bezier(.22, 1, .36, 1);        /* hover curve from the rules sheet (ease-out quint) */
}
html { scroll-behavior: smooth; }

/* reveals: 1.4 s, about half the travel of the shared layer */
.m-hide {
  transition:
    opacity 1.1s var(--m-fade),
    translate 1.4s var(--m-soft),
    scale 1.4s var(--m-soft),
    clip-path 1.4s var(--m-soft-io);
}
.m-hide.m-rise    { translate: 0 22px; }
.m-hide.m-rise-sm { translate: 0 10px; }
.m-hide.m-left    { translate: -36px 0; }
.m-hide.m-right   { translate: 44px 0; }
.m-hide.m-down    { translate: 0 -10px; }
.m-hide.m-drop    { translate: 0 -36px; transition-duration: .9s, 1.4s, 1.4s, 1.4s; transition-timing-function: var(--m-fade), var(--m-soft), var(--m-soft), var(--m-soft); }
.m-hide.m-pop     { scale: .94; transition-timing-function: var(--m-fade), var(--m-soft), var(--m-soft), var(--m-soft); }
.m-hide.m-clip-down { transition-duration: .4s, .4s, .4s, 1.9s; transition-timing-function: ease, ease, ease, var(--m-soft-io); }

/* keyframe reveals: no overshoot, no hard scale */
.m-hide.m-slam.m-in  { animation: m-slam 1.3s var(--m-soft) both; }
.m-hide.m-burst.m-in { animation: m-burst 1.4s var(--m-soft) both; }
.m-hide.m-stamp.m-in { animation: m-stamp 1s var(--m-soft) both; }
@keyframes m-slam  { 0% { opacity: 0; scale: 1.08; translate: -10px 0; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes m-burst { 0% { opacity: 0; scale: .6; rotate: -30deg; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes m-stamp { 0% { opacity: 0; scale: 1.22; } 45% { opacity: 1; } 100% { opacity: 1; scale: 1; } }

/* loops: calm, nothing blinks hard */
.m-flip  { animation: m-flip .7s var(--m-soft); }
@keyframes m-flip { 0% { transform: perspective(320px) rotateX(-45deg); filter: brightness(1.15); opacity: .45; } 100% { transform: perspective(320px) rotateX(0deg); filter: brightness(1); opacity: 1; } }
.m-colon { animation: m-blink-soft 2s ease-in-out infinite; }
@keyframes m-blink-soft { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.m-led   { animation: m-led-soft 2.8s ease-in-out infinite; }
@keyframes m-led-soft { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.m-live  { animation-duration: 2s; }
.m-swing { animation: m-swing 7s ease-in-out infinite alternate; }
@keyframes m-swing { from { rotate: -1deg; } to { rotate: 1deg; } }
.m-nudge { animation-duration: 2.2s; }
.m-dash  { animation-duration: 1.6s; }
.m-ring::after { animation-duration: 3s; animation-timing-function: var(--m-hover); }
.m-spin  { animation-duration: 48s; }
.m-cut   { animation: m-cut 8s var(--m-soft-io) infinite, m-snip .45s ease-in-out infinite alternate; }

/* compositor hints for the big moving layers */
[data-pencil-id="yeMQT"], [data-pencil-id="dkl01"], .m-sun { will-change: scale; }
.m-dust { will-change: translate, opacity; }

/* hovers — rules sheet 30.10: in 300 ms (buttons, links, rows) / 450 ms (cards, tags, FAQ),
   out a third slower (400 / 600 ms), press 100 ms, curve (.22, 1, .36, 1).
   Base state = leaving the cursor, :hover = entering. */
@media (hover: hover) {
  [data-m-btn] { transition: translate .4s var(--m-hover), filter .4s var(--m-hover), box-shadow .4s var(--m-hover); }
  [data-m-btn] svg { transition: translate .4s var(--m-hover); }
  [data-m-btn]:hover, [data-m-btn]:hover svg { transition-duration: .3s; }
  [data-m-btn]:active { transition-duration: .1s; }

  [data-m-nav] { transition: color .4s var(--m-hover), background-size .4s var(--m-hover); }
  [data-m-phone] > div, [data-m-foot] { transition: color .4s var(--m-hover); }
  [data-m-nav]:hover, [data-m-phone]:hover > div, [data-m-foot]:hover { transition-duration: .3s; }
  [data-m-phone]:hover svg { animation: m-ring-phone .8s ease-in-out 1; }

  [data-m-card] { transition: translate .6s var(--m-hover), box-shadow .6s var(--m-hover); }
  [data-m-card] [data-pencil-name="Play"] { transition: scale .6s var(--m-hover); }
  [data-m-card]:hover, [data-m-card]:hover [data-pencil-name="Play"] { transition-duration: .45s; }

  /* the tag swing eases to a stop in JS (motion-field.js) instead of freezing */
  [data-m-tag]:hover { animation-play-state: running; }
  [data-m-tag] [data-pencil-name="Tag body"] { transition: translate .6s var(--m-hover), box-shadow .6s var(--m-hover); }
  [data-m-tag]:hover [data-pencil-name="Tag body"] { transition-duration: .45s; }

  [data-m-faq] [data-pencil-name="Q badge"] { transition: rotate .6s var(--m-hover), scale .6s var(--m-hover); }
  [data-m-faq]:hover [data-pencil-name="Q badge"] { transition-duration: .45s; }

  [data-m-row] { transition: background-color .4s var(--m-hover); }
  [data-m-input] { transition: border-color .4s var(--m-hover), box-shadow .4s var(--m-hover); }
  [data-m-row]:hover, [data-m-input]:hover { transition-duration: .3s; }

  /* marquees slow down to a stop in JS too */
  [data-m-marquee]:hover .m-track { animation-play-state: running; }

  /* silo with video: the grain shows through under the cursor (not a link — no lift, normal cursor) */
  [data-m-silo] .m-silo-dim { transition: opacity .9s var(--m-hover); }
  [data-m-silo]:hover .m-silo-dim { opacity: 0; transition-duration: .7s; }
}

/* ======================= mobile 390 (PsQSD) only ======================= */


* { -webkit-tap-highlight-color: transparent; }

/* warm low sun behind the machine stage (desktop values are for the 1440 hero) */
.m-sun { left: 40px; top: 230px; width: 440px; height: 440px; }

/* touch screens have no hover: a soft press instead (same curve, 100 ms in / 300 ms out) */
@media (hover: none) {
  [data-m-btn] { transition: translate .3s var(--m-hover), box-shadow .3s var(--m-hover), filter .3s var(--m-hover); }
  [data-m-btn]:active { translate: 2px 2px; filter: brightness(1.08); box-shadow: 2px 2px 0 var(--m-sh-c, #222426) !important; transition-duration: .1s; }
  [data-m-card], [data-m-tag] [data-pencil-name="Tag body"] { transition: scale .3s var(--m-hover); }
  [data-m-card]:active, [data-m-tag]:active [data-pencil-name="Tag body"] { scale: .985; transition-duration: .12s; }
}

/* header buttons */
[data-m-menu-btn], [data-m-call] { cursor: pointer; }
[data-m-menu-btn] svg { transition: rotate .45s var(--m-hover), opacity .2s ease; }
[data-m-menu-btn][aria-expanded="true"] svg { rotate: 90deg; }

/* dropdown menu under the top bar */
.m-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 100;
  background: #222426; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  padding: 8px 20px 22px; font-family: Montserrat, system-ui, sans-serif;
  opacity: 0; translate: 0 -10px; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--m-fade, ease), translate .45s var(--m-soft, ease), visibility 0s linear .45s;
}
.m-menu.m-open { opacity: 1; translate: 0 0; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.m-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; color: #FFFFFF; text-decoration: none;
  font-size: 17px; font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.m-menu a::after { content: "→"; color: #DE2A30; font-weight: 900; transition: translate .3s var(--m-hover); }
.m-menu a:active::after { translate: 4px 0; }
.m-menu .m-menu-phone { color: #F9A61F; border-bottom: 0; padding-top: 18px; }
.m-menu .m-menu-phone::after { content: none; }
.m-menu .m-menu-cta {
  justify-content: center; gap: 12px; margin-top: 8px; padding: 0 20px; height: 52px; border: 0;
  background: #DE2A30; border-radius: 4px; box-shadow: 5px 5px 0 #000;
  font-size: 14px; font-weight: 900; letter-spacing: 1px;
}
.m-menu .m-menu-cta::after { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .m-menu, .m-menu.m-open { transition: none; translate: none; } }