/* Animations & effects — durations/easings come from theme.css */

/* ---- Scroll reveal (toggled by js/main.js) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}
[data-reveal="left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal="right"] { transform: translateX(var(--reveal-distance)); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Image mask reveal ---- */
[data-mask] { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-in-out); }
[data-mask].is-visible { clip-path: inset(0 0 0 0); }
[data-mask] > * { transform: scale(1.25); transition: transform 1.6s var(--ease-out); }
[data-mask].is-visible > * { transform: scale(1); }

/* ---- Logo: big in hero, shrinks into header on scroll (scale set by js via --logo-scale / --logo-p) ---- */
.logo { position: absolute; left: 0; top: calc(1.2rem + 1.5rem * (1 - var(--logo-p, 0))); margin-left: 0; width: var(--logo-width); transform-origin: 0 0; transform: scale(var(--logo-scale, 1)); display: block; will-change: transform; }
.logo__art { position: relative; display: block; line-height: 0; overflow: hidden; }
.logo__art img { transition: filter var(--dur-base); }
.header.is-light .logo__art img { filter: brightness(0) invert(.15); }
.logo__sizer { width: 100%; height: auto; visibility: hidden; }
/* Heritage emblem removed: only the "Absolute Motors" wordmark is shown, shifted left into place. */
.logo__word { position: absolute; inset: 0; width: 100%; height: 100%; translate: -43.5% 0; clip-path: inset(0 100% 0 43.5%); opacity: 0; }
.is-loaded .logo__word { animation: word-in 1.3s var(--ease-in-out) .2s forwards; }
@keyframes word-in { from { opacity: 1; clip-path: inset(0 100% 0 43.5%); } to { opacity: 1; clip-path: inset(0 0 0 43.5%); } }
.logo__tick { display: none; }
.logo__tick--a { left: 41%; top: 6%; width: 1.5px; height: 88%; transform: scaleY(0); transform-origin: top; }
.logo__tick--b { right: 0; top: 0; width: 6%; height: 1.5px; transform: scaleX(0); transform-origin: right; }
.is-loaded .logo__tick--a { animation: tick-y .9s var(--ease-out) 1.1s forwards; }
.is-loaded .logo__tick--b { animation: tick-x .9s var(--ease-out) 1.5s forwards; }
@keyframes tick-y { to { opacity: 1; transform: scaleY(1); } }
@keyframes tick-x { to { opacity: 1; transform: scaleX(1); } }
.logo__art::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent); transform: skewX(-20deg); mix-blend-mode: overlay; pointer-events: none; }
.is-loaded .logo__art::after { animation: logo-shine 1.4s var(--ease-in-out) 1.9s 1; }
.logo:hover .logo__art::after { animation: logo-shine 1s var(--ease-in-out) 1; }
@keyframes logo-shine { to { left: 130%; } }
@keyframes tag-in { to { clip-path: inset(0 -2em 0 0); } }

/* ---- Header: nav items stagger in ---- */
.nav > li { opacity: 0; transform: translateY(-10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.5s + var(--i) * .08s); }
.is-loaded .nav > li { opacity: 1; transform: none; }

/* ---- Hero: slides crossfade + slow zoom ---- */
.hero__slide { opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { transform: scale(1); transition: transform 9s linear; }
.hero__slide.is-active img { transform: scale(var(--hero-zoom)); }
.hero__video { opacity: 0; transition: opacity 1.2s ease; }
.hero.is-playing .hero__video { opacity: 1; }
.hero.is-playing .hero__slides { opacity: 0; transition: opacity 1.2s ease; }

/* ---- Hero title: progressive text fill (50% white -> white), like the original ---- */
.hero__title {
  display: inline;
  background:
    linear-gradient(var(--white), var(--white)) no-repeat 0 0 / 0 100%,
    linear-gradient(var(--white-50), var(--white-50)) no-repeat 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background var(--hero-title-fill) linear;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero__title.show {
  background:
    linear-gradient(var(--white), var(--white)) no-repeat 0 0 / 100% 100%,
    linear-gradient(var(--white-50), var(--white-50)) no-repeat 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text;
}
.hero__lines { opacity: 0; transition: opacity 2s ease .6s; }
.is-loaded .hero__lines { opacity: 1; }
.hero.is-playing .hero__controls { opacity: 0; pointer-events: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 2rem; border: 1px solid currentColor; border-radius: 999px;
  font: 600 var(--fs-small)/1 var(--font-main); letter-spacing: .14em; text-transform: uppercase;
  position: relative; overflow: hidden; cursor: pointer; background: transparent; color: inherit;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base);
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-accent); transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover { color: var(--color-on-accent); border-color: var(--color-accent); }
.btn:hover::before { transform: none; }
.btn--solid { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn--solid::before { background: var(--white); }
.link-arrow { display: inline-flex; gap: .5rem; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-size: .9rem; }
.link-arrow span { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover span { transform: translateX(6px); }

/* ---- Marquee ---- */
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-speed) linear infinite; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Card hover zoom ---- */
.zoom-on-hover .media img { transition: transform 1.2s var(--ease-out); }
.zoom-on-hover:hover .media img { transform: scale(1.07); }

/* ---- Scroll hint ---- */
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.scroll-hint i { display: block; width: 1px; height: 54px; background: var(--color-accent); animation: hint 2.2s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-mask] { opacity: 1; transform: none; clip-path: none; }
  .logo__word { clip-path: inset(0 0 0 43.5%); opacity: 1; }
  .hero__title { background: none; -webkit-text-fill-color: #fff; color: #fff; }
}

/* ---- Header: hide on scroll down, reveal on scroll up ---- */
.header { transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); }
.header.is-hidden { transform: translateY(-100%); }

/* ---- statement text: colour fill on scroll ---- */
.fill .fillword { transition: color .45s var(--ease-out), opacity .45s; }
.fill .fillword[data-s='todo'] { color: #999999; opacity: .55; }
.fill .fillword[data-s='now'] { color: var(--color-accent-text); opacity: 1; }
.fill .fillword[data-s='done'] { color: #262626; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fill .fillword { transition: none; } }