/* Motion. The reveal states live inside a no-preference guard, so a visitor
   who asked for reduced motion simply sees everything in place — nothing is
   ever left hidden waiting for an animation that won't run. JS adds .in when an
   element scrolls into view (see fx.js). */

@media (prefers-reduced-motion: no-preference) {
  [data-fx] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    will-change: opacity, transform;
  }
  [data-fx="fade"]  { transform: none; }
  [data-fx="left"]  { transform: translateX(-34px); }
  [data-fx="right"] { transform: translateX(34px); }
  [data-fx="scale"] { transform: scale(.955); }
  [data-fx="rise"]  { transform: translateY(46px); }
  [data-fx].in { opacity: 1; transform: none; }

  /* Image reveal: a soft wipe as the picture arrives. */
  [data-fx-img] .fabric-media img,
  [data-fx-img] .hero-media img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
  [data-fx-img].in .fabric-media img,
  [data-fx-img].in .hero-media img { clip-path: inset(0 0 0 0); }

  /* Hero picture drifts almost imperceptibly — a lookbook cover, breathing. */
  .kenburns { animation: kenburns 18s ease-in-out infinite alternate; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
}

/* A gold sheen that crosses a surface once when it appears. */
.shimmer { position: relative; overflow: hidden; }
.shimmer.in::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: sheen 1.5s var(--ease) .3s 1;
}
@keyframes sheen { to { left: 130%; } }

/* Count-up numbers hold their width so the layout doesn't jump as digits roll. */
.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  /* Per-word heading reveal — [data-fx="words"] rises its words in sequence. */
  [data-fx="words"] { opacity: 1; transform: none; }
  [data-fx="words"] .fx-word { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .6s var(--ease), transform .78s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); will-change: opacity, transform; }
  [data-fx="words"].in .fx-word { opacity: 1; transform: none; }

  /* The AB mark — a quiet entrance on load, then a gold glint that sweeps across
     the mark on hover (masked to the logo's own shape). Reuses the sheen idea
     from the shared motion kit. */
  .logo img { animation: logoIn 1s var(--ease) both; }
  @keyframes logoIn { from { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
  .logo { position: relative; }
  .logo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.92) 50%, transparent 56%);
    background-size: 250% 100%; background-position: 150% 0;
    -webkit-mask: url(/assets/ab-logo.png) left center / auto 100% no-repeat;
    mask: url(/assets/ab-logo.png) left center / auto 100% no-repeat;
    transition: background-position .9s var(--ease), opacity .35s var(--ease);
    animation: logoSheen 1.6s var(--ease) 1s 1;
  }
  .logo:hover::after { opacity: 1; background-position: -60% 0; }
  @keyframes logoSheen { 0% { opacity: 0; background-position: 150% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }
}