/* ============================================================
   GOOSEBORO DRIVE-IN — MOTION
   Keyframe loops + scroll-driven animations (CSS only).
   Every scroll effect is progressive enhancement: content is
   fully visible without animation support.
   Requires gooseboro-tokens.css.
   ============================================================ */

/* ---------- Keyframe library ---------- */

@keyframes gb-marquee {
  to { transform: translateX(-50%); }
}

@keyframes gb-neon-flicker {
  0%, 100% { opacity: 1; }
  3%  { opacity: 0.55; }
  5%  { opacity: 1; }
  42% { opacity: 1; }
  44% { opacity: 0.4; }
  46% { opacity: 1; }
  47% { opacity: 0.7; }
  49% { opacity: 1; }
}

@keyframes gb-spin {
  to { transform: rotate(1turn); }
}

/* Goose mascot idle wiggle — apply to the transparent goose PNG */
@keyframes gb-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(-2.5deg) translateY(-4px); }
  60%      { transform: rotate(2deg) translateY(0); }
}
.gb-wiggle { animation: gb-wiggle 3.4s var(--gb-ease-out) infinite; transform-origin: 50% 90%; }

/* Gentle float for badges / cutouts */
@keyframes gb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.gb-float { animation: gb-float 5.5s ease-in-out infinite; }

/* Steam wisps rising (use 2-3 .gb-steam spans in a food card) */
@keyframes gb-steam {
  0%   { transform: translateY(8px) scaleX(1); opacity: 0; }
  30%  { opacity: 0.7; }
  100% { transform: translateY(-46px) scaleX(1.6); opacity: 0; }
}
.gb-steam {
  position: absolute;
  bottom: 55%;
  width: 8px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.75), transparent);
  filter: blur(3px);
  animation: gb-steam 2.8s ease-out infinite;
  pointer-events: none;
}
.gb-steam:nth-child(2) { left: 44%; animation-delay: 0.9s; }
.gb-steam:nth-child(3) { left: 56%; animation-delay: 1.7s; }

/* ---------- Scroll-driven animations ---------- */
/* Native CSS scroll timelines. Unsupported browsers simply
   skip the animation (elements render in final state).     */

/* Fade-and-rise reveal — default for cards, heads, tickets */
.gb-reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .gb-reveal {
    animation: gb-reveal-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
  }
}
@keyframes gb-reveal-rise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slower, bigger drift for poster images */
@supports (animation-timeline: view()) {
  .gb-reveal-poster {
    animation: gb-reveal-poster linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
@keyframes gb-reveal-poster {
  from { opacity: 0; transform: translateY(90px) rotate(2deg) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

/* Hero background parallax: image drifts up + settles as you scroll away */
@supports (animation-timeline: scroll()) {
  .gb-hero__media img, .gb-hero__media video {
    animation: gb-hero-drift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }
  .gb-hero__content {
    animation: gb-hero-content linear both;
    animation-timeline: scroll(root);
    animation-range: 0 70svh;
  }
}
@keyframes gb-hero-drift {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.12) translateY(-6%); }
}
@keyframes gb-hero-content {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-64px); }
}

/* Horizontal menu strip: translate a wide row while its tall
   wrapper scrolls (sticky-scroll technique).
   Markup: .gb-hscroll > .gb-hscroll__sticky > .gb-hscroll__track > cards */
.gb-hscroll { height: 300svh; position: relative; }
.gb-hscroll__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  overflow: clip;
}
.gb-hscroll__track {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2rem);
  width: max-content;
  padding-inline: var(--gb-gutter);
}
@supports (animation-timeline: scroll()) {
  .gb-hscroll__track {
    animation: gb-hscroll-track linear both;
    animation-timeline: scroll(root);
    animation-range-start: contain 0%;
    animation-range-end: contain 100%;
  }
}
@keyframes gb-hscroll-track {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + 100vw - 2 * var(--gb-gutter))); }
}
/* Fallback for no scroll-timeline: plain overflow scroller */
@supports not (animation-timeline: scroll()) {
  .gb-hscroll { height: auto; }
  .gb-hscroll__sticky { position: static; height: auto; }
  .gb-hscroll__track { overflow-x: auto; padding-block: 1rem; scroll-snap-type: x mandatory; }
  .gb-hscroll__track > * { scroll-snap-align: start; }
}

/* Counter pop for stats */
@supports (animation-timeline: view()) {
  .gb-stat { animation: gb-stat-pop linear both; animation-timeline: view(); animation-range: entry 10% entry 50%; }
}
@keyframes gb-stat-pop {
  from { opacity: 0; transform: scale(0.7); }
  60%  { transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Global reduced motion ---------- */
@supports (animation-timeline: scroll()) {
  .gb-progress { animation: gb-progress linear; animation-timeline: scroll(root); }
}
@keyframes gb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Native timelines remain a progressive enhancement; all content is visible without them. */
@supports (animation-timeline: view()) {
  .gb-reveal-poster { animation-range: entry 0% entry 40%; }
}
.gb-motion-paused *, .gb-motion-paused *::before, .gb-motion-paused *::after { animation: none !important; transition: none !important; }
html.gb-motion-paused { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gb-reveal, .gb-reveal-poster, .gb-stat,
  .gb-hero__media img, .gb-hero__media video, .gb-hero__content,
  .gb-hscroll__track { animation: none !important; }
  .gb-wiggle, .gb-float, .gb-steam { animation: none !important; }
  .gb-hscroll { height: auto; }
  .gb-hscroll__sticky { position: static; height: auto; }
  .gb-hscroll__track { overflow-x: auto; padding-block: 1rem; }
}