/* =========================================================
   ABRM
   MOTION STATES
========================================================= */


/* INTRO */

.intro__brand {
  transform:
    translateY(115%);
}

.intro__rule span {
  transform:
    scaleX(0);
}

.intro__caption {
  opacity: 0;
}


/* HEADER */

.header {
  opacity: 0;

  transform:
    translateY(-12px);
}


/* HERO */

.hero__top {
  opacity: 0;
}

.hero__first > span {
  transform:
    translateY(115%);
}

.hero__photo-reveal {
  clip-path:
    inset(0 100% 0 0);
}

.hero__image {
  transform:
    scale(1.09);
}

.hero__middle {
  opacity: 0;

  transform:
    translateX(-40px);
}

.hero__last > span {
  transform:
    translateY(115%);
}

.hero__footer {
  opacity: 0;

  transform:
    translateY(18px);
}


/* ABOUT */

.reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}

.line-mask > span {
  transform:
    translateY(115%);

  transition:
    transform 1.05s var(--ease);
}

.line-mask.is-visible > span {
  transform:
    translateY(0);
}


/* TICKER */

.ticker__track {
  animation:
    abrmTicker 28s linear infinite;
}

@keyframes abrmTicker {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}


/* =========================================================
   FINAL POLISH 04 — MOTION SYSTEM
   Smooth, restrained editorial motion. GPU-friendly properties only.
========================================================= */

:root {
  --motion-fast: 180ms;
  --motion-base: 420ms;
  --motion-slow: 760ms;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
}

/* Rendering hints only while elements are expected to move. */
[data-reveal],
.reveal,
.reveal-up,
.reveal-line,
.reveal-word {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Keep interactive motion subtle; no layout-affecting animation. */
.magnetic,
.nav__links a,
.nav__cv,
.contact-link,
.site-footer__navigation a,
.capability {
  transition-timing-function: var(--ease-out-expo);
}

/* Editorial links: crisp response without distracting bounce. */
.nav__links a,
.nav__cv,
.contact-link,
.site-footer__navigation a {
  transition-duration: var(--motion-fast);
}

/* Skills feel responsive while remaining lightweight. */
.capability {
  transition:
    background-color var(--motion-base) var(--ease-out-expo),
    color var(--motion-base) var(--ease-out-expo),
    transform var(--motion-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .capability:hover {
    transform: translate3d(0, -2px, 0);
  }

  .contact-link:hover,
  .site-footer__navigation a:hover {
    transform: translate3d(2px, 0, 0);
  }
}

/*
  Mobile devices do not benefit from cursor/magnetic hover choreography.
  Removing it avoids sticky hover states and unnecessary compositing.
*/
@media (hover: none), (pointer: coarse) {
  .cursor,
  .cursor-dot {
    display: none !important;
  }

  .magnetic,
  .capability,
  .contact-link,
  .site-footer__navigation a {
    transform: none !important;
  }
}

/* Reduced motion is a first-class mode, not an afterthought. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal],
  .reveal,
  .reveal-up,
  .reveal-line,
  .reveal-word,
  .is-revealed,
  .is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  .marquee,
  .ticker,
  .marquee__track,
  .ticker__track {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
 .mobile-motion-ready {opacity:0;transform:translate3d(0,24px,0);transition:opacity .75s ease,transform .85s cubic-bezier(.16,1,.3,1);}
 .mobile-motion-ready.mobile-entered {opacity:1;transform:translate3d(0,0,0);}
}