/* =========================================================
   MOTION LAYER — seven small animations, all removable at once:
     ./revert-motion.sh   (re-add with ./apply-motion.sh)
   Loaded after styles.css (+ theme-chrome.css). js/motion.js adds the
   .rv / .in classes for scroll reveal and the lightbox origin.
   ========================================================= */

/* 1. Scroll reveal: pre-state only, so hover transforms still work once revealed. */
.rv:not(.in) { opacity: 0; transform: translateY(26px); }
.rv { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
.rv.in { transition-delay: var(--rv-d, 0s); }

/* 2. Chrome shimmer: a light sweep across the chrome headlines, once on load
      and again whenever you hover. Only when the chrome theme is loaded. */
@keyframes bb-shimmer { from { background-position: 180% 0, 0 0; } to { background-position: -80% 0, 0 0; } }
body.theme-chrome .hero h1,
body.theme-chrome .section-head h2,
body.theme-chrome .page-head h1,
body.theme-chrome .band h2 {
  background-image: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%), var(--chrome);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  animation: bb-shimmer 2.4s cubic-bezier(.4,0,.2,1) .9s 1 both;
}
body.theme-chrome .hero h1:hover,
body.theme-chrome .section-head h2:hover,
body.theme-chrome .page-head h1:hover,
body.theme-chrome .band h2:hover { animation: bb-shimmer 1.4s cubic-bezier(.4,0,.2,1) 0s 1 both; }

/* 3. Hero entrance: copy lines step in, then the ring settles. */
@keyframes bb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; } }
/* `to` sets no transform on purpose: the browser then eases into the element's own
   stylesheet transform, i.e. the chrome theme's 3D tilt on the hero card. */
@keyframes bb-settle { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; } }
.hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero-stats { animation: bb-rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
.hero .eyebrow { animation-delay: .05s; }
.hero h1      { animation-delay: .15s; }
.hero p.lead  { animation-delay: .3s; }
.hero-cta     { animation-delay: .42s; }
.hero-stats   { animation-delay: .55s; }
.hero-art     { animation: bb-settle 1s cubic-bezier(.2,.7,.2,1) .35s backwards; }
/* the h1 runs two animations (rise + shimmer): combine so neither cancels the other */
body.theme-chrome .hero h1 { animation: bb-rise .8s cubic-bezier(.2,.7,.2,1) .15s backwards, bb-shimmer 2.4s cubic-bezier(.4,0,.2,1) 1.1s 1 both; }
body.theme-chrome .hero h1:hover { animation: bb-rise 0s backwards, bb-shimmer 1.4s cubic-bezier(.4,0,.2,1) 0s 1 both; }

/* 8. Hero card follows the mouse (js sets the transform); the floor grid drifts via --gx. */
.hero-art { transition: transform .18s ease-out; }
.hero::before { transform: translateX(var(--gx, 0px)) rotateX(72deg); transition: transform .25s ease-out; }
@media (max-width: 860px) { .hero-art { transform: none !important; } }

/* 4. Lightbox: grows out of the card you clicked (origin set by motion.js). */
@keyframes bb-lb-in { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox.open .lb-panel { transform-origin: var(--ox, 50%) var(--oy, 50%); animation: bb-lb-in .42s cubic-bezier(.2,.7,.2,1) both; }
.lightbox.open .lb-backdrop { animation: bb-fade .3s ease both; }

/* 5. Buttons: a light sweep across on hover. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: skewX(-22deg); pointer-events: none; transition: left .65s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::after { left: 130%; }

/* 6. Category tiles: photo zooms, label lifts. */
.cat-tile .cat-art { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-art { transform: scale(1.07); }
.cat-tile .cat-label { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-label { transform: translateY(-6px); }

/* 7. Marquee: pause under the cursor so it can be read. */
.marquee:hover .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rv:not(.in) { opacity: 1; transform: none; }
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero-stats, .hero-art,
  body.theme-chrome .hero h1, body.theme-chrome .section-head h2, body.theme-chrome .page-head h1, body.theme-chrome .band h2,
  .lightbox.open .lb-panel, .lightbox.open .lb-backdrop { animation: none; }
  .btn::after { display: none; }
}