/* DropForecast shared FX styles — entrance reveals + polish. Palette stays per-page. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.2,.7,.2,1) var(--rd,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ============================================================
   MACHINED DISPLAY NUMERALS — Anton + brushed/anodized metal.
   Apply ONE class to any big number:
     .num-steel  brushed steel (scores, stats, dates — the default)
     .num-hot    anodized orange (hype / COP / hot numbers)
     .num-royal  deep purple (tier / premium / track-record numbers)
   Pair with .countup (df-fx.js) for the 0→value count cinematic.
   Keep suffixes in a <small> or .u child — they stay plain sans.
   ============================================================ */
.num,.num-steel,.num-hot,.num-royal{
  font-family:'Anton',Impact,'Arial Narrow Bold','Helvetica Neue',sans-serif;
  font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.num-steel,.num-hot,.num-royal{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* engraved lift — drop-shadow follows the rendered glyph, so the
     gradient stays intact and only a 1px light edge prints below */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85));
}
.num-steel{background-image:linear-gradient(180deg,#3d3e46 0%,#17181d 42%,#050608 50%,#26272e 55%,#55565e 100%)}
.num-hot{background-image:linear-gradient(180deg,#ffb27a 0%,#f5772e 38%,#F56423 48%,#b84509 54%,#8a2f05 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
.num-royal{background-image:linear-gradient(180deg,#8a5cb8 0%,#4D1979 42%,#2a0b46 52%,#3a1163 58%,#6d32a3 100%)}
/* suffix/unit children inside a machined numeral stay readable sans */
.num-steel small,.num-steel .u,.num-hot small,.num-hot .u,.num-royal small,.num-royal .u{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:0;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--sub,#6b6f76);color:var(--sub,#6b6f76);
  text-shadow:none;
}

/* ============================================================
   FILM GRAIN — fixed full-viewport feTurbulence layer. You should
   FEEL it, not see speckle: opacity .032, 8-step position flicker.
   ============================================================ */
body::after{
  content:"";position:fixed;inset:-60px;z-index:2147483000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.032;
  animation:df-grain 1s steps(8) infinite;
  will-change:transform;
}
@keyframes df-grain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-18px,10px)}
  25%{transform:translate(12px,-16px)}37.5%{transform:translate(-8px,-12px)}
  50%{transform:translate(16px,14px)}62.5%{transform:translate(-14px,4px)}
  75%{transform:translate(8px,-8px)}87.5%{transform:translate(-4px,16px)}
  100%{transform:translate(0,0)}
}

/* ============================================================
   MOTIVATED LIGHT + DEPTH (auto-tagged by df-fx.js — no markup
   needed; classes documented here for manual use too):
     .df-plate  hero/featured cards get one extra large soft
                ambient shadow layer under the machined plate.
     .df-sweep  a slow one-time light-sweep across the plate the
                first time it reveals (.in added on intersection).
   ============================================================ */
.df-plate:not(:hover){
  box-shadow:var(--raised,0 1px 2px rgba(20,21,25,.06)), 0 38px 72px -30px rgba(20,21,25,.30);
}
.df-sweep{position:relative}
.df-sweep.in::after{
  content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;z-index:5;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.66) 50%,rgba(255,255,255,.5) 54%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-12deg);
  animation:df-sweep 1.5s .12s cubic-bezier(.35,0,.15,1) forwards;
}
@keyframes df-sweep{to{transform:translateX(360%) skewX(-12deg)}}

/* hot-drops tape: edges fade into the console instead of hard-clipping */
.tape .track-wrap{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}

@media (prefers-reduced-motion: reduce){
  body::after{animation:none!important}
  .df-sweep.in::after{animation:none!important;opacity:0}
}