/* ============================================================================
   GARAGE GALS . MOTION LIBRARY
   ----------------------------------------------------------------------------
   Scroll-reveal states, the garage-door opener, text wipes, marquees, glow
   pulses, the light-flicker power-on, parallax hooks, scroll progress, and the
   custom reveal cursor. JS adds .in / .is-* classes when elements enter view.
   base.css already neutralizes all of this under prefers-reduced-motion.
   ============================================================================ */

/* ---- Scroll reveal . base + variants ------------------------------------- */
/* Progressive enhancement: if JS never runs, never hide content. */
html:not(.js) .reveal,
html:not(.js) .text-reveal .line > span,
html:not(.js) .split-words .word,
html:not(.js) .garage-reveal__panel {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}
html:not(.js) .garage-reveal__panel { display: none !important; }

.reveal {
  opacity: 0;
  transform: translateY(2.2rem);
  transition:
    opacity var(--dur-5) var(--ease-out-expo),
    transform var(--dur-5) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

.reveal--fade { transform: none; }
.reveal--left  { transform: translateX(-2.5rem); }
.reveal--right { transform: translateX(2.5rem); }
.reveal--scale { transform: scale(0.92); }
.reveal--blur  { filter: blur(14px); }
.reveal--blur.in { filter: blur(0); }
.reveal--rise-lg { transform: translateY(4rem); }

/* Clip reveal: content wipes up from behind a mask */
.reveal--clip {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-6) var(--ease-garage-door);
}
.reveal--clip.in { clip-path: inset(0 0 0 0); }

/* ---- Garage-door reveal . the signature opener --------------------------- */
/* Wrap a block in .garage-reveal; a panel rolls up to expose the content. */
.garage-reveal { position: relative; overflow: hidden; }
.garage-reveal__panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    repeating-linear-gradient(180deg, var(--ink-700) 0 14px, var(--ink-800) 14px 15px),
    var(--ink-800);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform var(--dur-7) var(--ease-garage-door);
}
.garage-reveal__panel::after {
  /* the door's bottom lip / handle bar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--grad-red-flare);
  box-shadow: var(--glow-red-md);
}
.garage-reveal.in .garage-reveal__panel { transform: scaleY(0); }

/* ---- Text line reveal (wipe each line up) -------------------------------- */
.text-reveal { display: inline-block; }
.text-reveal .line { display: block; overflow: hidden; }
.text-reveal .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-6) var(--ease-garage-door);
  transition-delay: calc(var(--li, 0) * 90ms);
}
.text-reveal.in .line > span { transform: translateY(0); }

/* Word-by-word fade (set by JS splitting into .word spans) */
.split-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity var(--dur-4) var(--ease-out-expo), transform var(--dur-4) var(--ease-out-expo);
  transition-delay: calc(var(--wi, 0) * 32ms);
}
.split-words.in .word { opacity: 1; transform: none; }

/* ---- Marquee ------------------------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-lg);
  padding-right: var(--space-lg);
  min-width: 100%;
  animation: marquee-scroll var(--marquee-dur, 38s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  font-weight: var(--weight-medium);
  color: var(--fg-strong);
  white-space: nowrap;
}
.marquee__item em { color: var(--accent); font-style: italic; }
.marquee__dot { color: var(--accent); font-size: 0.7em; }

/* ---- Scroll progress bar ------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--grad-red-flare);
  box-shadow: var(--glow-red-sm);
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}

/* ---- Parallax + tilt hooks (JS writes the custom props) ------------------ */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0), 0); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform var(--dur-3) var(--ease-out-expo); }

/* ---- Custom cursor . the "reveal lens" ----------------------------------- */
.gg-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width var(--dur-3) var(--ease-out-expo),
              height var(--dur-3) var(--ease-out-expo),
              background-color var(--dur-2),
              border-color var(--dur-2),
              opacity var(--dur-2);
  mix-blend-mode: difference;
  opacity: 0;
}
.gg-cursor__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-50);
  opacity: 0;
  transition: opacity var(--dur-2);
}
.gg-cursor.is-active { opacity: 1; }
.gg-cursor.is-hover { width: 56px; height: 56px; background: rgba(230,58,45,0.12); }
.gg-cursor.is-drag  { width: 74px; height: 74px; background: var(--accent); border-color: var(--accent); }
.gg-cursor.is-drag .gg-cursor__label { opacity: 1; }
/* Only enable on fine pointers (desktop) */
@media (hover: none), (pointer: coarse) { .gg-cursor { display: none; } }
.using-custom-cursor, .using-custom-cursor a, .using-custom-cursor button { cursor: none; }

/* ---- Preloader . the garage door rolls up -------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: var(--ink-950);
  transition: transform var(--dur-7) var(--ease-garage-door), visibility 0s linear var(--dur-7);
}
.preloader.is-done { transform: translateY(-100%); visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader__mark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 1.2rem + 4vw, 4rem);
  color: var(--cream-50);
  letter-spacing: var(--tracking-tight);
  animation: flicker-on 1.4s var(--ease-standard) both;
}
.preloader__mark em { color: var(--red-400); font-style: italic; }
.preloader__bar {
  margin: 1.4rem auto 0;
  width: min(260px, 60vw);
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--ink-600);
  overflow: hidden;
}
.preloader__bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-red-flare);
  box-shadow: var(--glow-red-sm);
  animation: load-bar 1.5s var(--ease-out-expo) forwards;
}

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes rail-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(10px, -14px) rotate(2deg); }
  66%      { transform: translate(-8px, 8px) rotate(-2deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow-red-sm); }
  50%      { box-shadow: var(--glow-red-lg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes flicker-on {
  0%   { opacity: 0; }
  8%   { opacity: 0.6; }
  12%  { opacity: 0.1; }
  20%  { opacity: 0.9; }
  26%  { opacity: 0.2; }
  40%  { opacity: 1; }
  44%  { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes load-bar { from { width: 0%; } to { width: 100%; } }
@keyframes bob-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* Utility animation hooks */
.anim-float { animation: float-y 6s var(--ease-in-out-cubic) infinite; }
.anim-drift { animation: drift 14s ease-in-out infinite; }
.anim-pulse { animation: pulse-glow 3.2s ease-in-out infinite; }
.anim-spin-slow { animation: spin-slow 22s linear infinite; }