/* ============================================================
   BEEST ENERGY — SHARED SCROLL ANIMATIONS (enhanced)
   Cinematic, creative reveals applied across all design variants.
   Elements animate in as they scroll into view; groups cascade.
   Linked AFTER each design's own CSS so these rules win.
   Driven by main.js (adds `.in`; sets per-item delay via --rd,
   assigns data-anim, adds 3D pointer tilt).
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity .85s cubic-bezier(.16, .84, .44, 1),
    transform 1s cubic-bezier(.16, .84, .44, 1),
    clip-path 1s cubic-bezier(.16, .84, .44, 1),
    filter .9s ease;
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}

/* ---- directional / depth variants (set via data-anim) ---- */
.reveal[data-anim="up"]      { transform: translateY(52px); }
.reveal[data-anim="down"]    { transform: translateY(-52px); }
.reveal[data-anim="left"]    { transform: translateX(-70px); }
.reveal[data-anim="right"]   { transform: translateX(70px); }
.reveal[data-anim="zoom"]    { transform: scale(.8); }
.reveal[data-anim="zoom-up"] { transform: translateY(56px) scale(.9); }
.reveal[data-anim="blur"]    { transform: translateY(30px); filter: blur(18px); }
.reveal[data-anim="rotate"]  { transform: translateY(60px) rotate(-5deg); transform-origin: bottom left; }
.reveal[data-anim="rise-rotate"] { transform: translateY(80px) rotate(6deg) scale(.9); }
.reveal[data-anim="swing"]   { transform: rotate(-9deg) translateY(50px); transform-origin: top center; }

/* 3D flips */
.reveal[data-anim="flip-up"] { transform: perspective(1200px) rotateX(38deg) translateY(40px); transform-origin: bottom center; }
.reveal[data-anim="flip-in"] { transform: perspective(1200px) rotateY(-34deg) translateX(50px); transform-origin: left center; }

/* clip-path "wipe" reveals (very cinematic — great for images & titles) */
.reveal[data-anim="clip-up"]    { clip-path: inset(100% 0 0 0); transform: translateY(24px); }
.reveal[data-anim="clip-right"] { clip-path: inset(0 100% 0 0); }
.reveal[data-anim="clip-left"]  { clip-path: inset(0 0 0 100%); }
.reveal[data-anim^="clip"].in   { clip-path: inset(0 0 0 0); }

/* pop — playful overshoot */
.reveal[data-anim="pop"] {
  transform: scale(.45);
  transition:
    opacity .5s ease,
    transform .75s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: var(--rd, 0ms);
}

/* ---- settled state — every variant resolves here ---- */
.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ============================================================
   AMBIENT / CONTINUOUS micro-animations
   ============================================================ */

/* gold sheen that periodically sweeps across primary buttons */
.btn--primary, .btn--solid { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--solid::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -120%;
  width: 70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  pointer-events: none; z-index: 1;
  animation: beest-sheen 5s ease-in-out infinite;
}
@keyframes beest-sheen {
  0%   { left: -120%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

/* 3D pointer tilt helper (transform + transition set inline by main.js) */
.tilt-on { transform-style: preserve-3d; will-change: transform; }

/* ============================================================
   REDUCED MOTION
   Drop all movement (transforms, parallax, float, sheen, tilt),
   but keep a gentle opacity fade so the page still feels alive.
   Loaded after each design's own reduced-motion block → wins.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 0 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity .6s ease !important;
    transition-delay: var(--rd, 0ms) !important;
  }
  .reveal.in { opacity: 1 !important; }
  .btn--primary::after, .btn--solid::after { animation: none !important; display: none; }
  .tilt-on { transition: none !important; }
}