/* =============================================================================
   FORGE612 HOUSE — motion.css  (the 2026 motion + dimension layer)
   Imported by every product alongside tokens.css. Pairs with motion.js.
   Rules: animate ONLY transform/opacity/filter. Everything degrades to static
   under prefers-reduced-motion (handled in motion.js + the query below).
   ============================================================================= */

/* ---- scroll reveal (fade-up + de-blur, staggered) ---- */
.reveal{opacity:0;transform:translateY(22px);filter:blur(7px);
  transition:opacity .8s var(--f-ease),transform .8s var(--f-ease),filter .8s var(--f-ease);
  transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1;transform:none;filter:none}

/* ---- top scroll-progress bar (motion.js injects .f-progress) ---- */
.f-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--f-ember-deep),var(--f-ember-hot));box-shadow:0 0 12px var(--f-ember)}

/* ---- glassmorphism (real depth, not a flat tint) ---- */
.f-glass{background:rgba(241,236,230,.045);backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);border:1px solid rgba(241,236,230,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px -30px #000}

/* ---- 3D tilt card (motion.js drives --rx/--ry/--mx/--my) ---- */
.f-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .25s var(--f-ease);will-change:transform}
.f-tilt [data-depth]{transform:translateZ(calc(var(--depth,0)*1px));transition:transform .25s var(--f-ease)}

/* ---- cursor light-sweep (motion.js sets --mx/--my) ---- */
.f-sweep{position:relative;isolation:isolate}
.f-sweep::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  transition:opacity .3s var(--f-ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,106,43,.20),transparent 60%)}
.f-sweep:hover::after{opacity:1}

/* ---- magnetic button (motion.js translates toward cursor) ---- */
.f-magnetic{transition:transform .25s var(--f-ease)}

/* ---- ambient 3D: auto-rotating ember core (pure CSS 3D) ---- */
.f-core{width:96px;height:96px;position:relative;transform-style:preserve-3d;animation:f-spin 11s linear infinite}
.f-core span{position:absolute;inset:0;border:1.5px solid var(--f-ember);border-radius:14px;
  background:rgba(255,106,43,.05);box-shadow:0 0 30px -6px rgba(255,106,43,.5)}
.f-core span:nth-child(1){transform:rotateY(0deg) translateZ(48px)}
.f-core span:nth-child(2){transform:rotateY(90deg) translateZ(48px)}
.f-core span:nth-child(3){transform:rotateY(180deg) translateZ(48px)}
.f-core span:nth-child(4){transform:rotateY(270deg) translateZ(48px)}
.f-core span:nth-child(5){transform:rotateX(90deg) translateZ(48px)}
.f-core span:nth-child(6){transform:rotateX(-90deg) translateZ(48px)}
@keyframes f-spin{to{transform:rotateY(360deg) rotateX(360deg)}}

/* ---- ticker / marquee divider ---- */
.f-ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--f-line);padding:13px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.f-ticker__t{display:inline-flex;gap:34px;animation:f-marquee 22s linear infinite;font-family:var(--f-display);
  font-size:18px;text-transform:uppercase;color:var(--f-ash);letter-spacing:.04em}
.f-ticker__t b{color:var(--f-ember)}
@keyframes f-marquee{to{transform:translateX(-50%)}}

/* ---- float (idle drift for hero objects) ---- */
.f-float{animation:f-float 5s var(--f-ease) infinite}
@keyframes f-float{50%{transform:translateY(-9px)}}

/* ---- skeleton shimmer (loading state) ---- */
.f-skeleton{background:linear-gradient(90deg,var(--f-surface),var(--f-surface-2),var(--f-surface));
  background-size:200% 100%;animation:f-shimmer 1.5s var(--f-ease) infinite;border-radius:var(--f-r)}
@keyframes f-shimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .f-core,.f-float,.f-ticker__t,.f-skeleton{animation:none!important}
  .f-tilt{transform:none!important}
}