/* =========================================================================
   MOTION — кинематографичная индустриальная динамика поверх Concrete Cobra.
   Загружается ПОСЛЕ pages.css. Всё уважает prefers-reduced-motion.
   ========================================================================= */

/* ---------- Scroll-reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translate3d(-26px,0,0)}
[data-reveal="right"]{transform:translate3d(26px,0,0)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="clip"]{opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
[data-reveal="stamp"]{opacity:0;transform:scale(.55) rotate(-6deg)}
[data-reveal].is-visible{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
}

/* ---------- Animated counters ---------- */
.count{font-variant-numeric:tabular-nums}

/* ---------- Hover depth (cards / chips / kpi) ---------- */
.market,.promo,.kpi,.card,.race,.slider__slide .review,.evt-card{
  transition:transform var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
@media (hover:hover){
  .market:hover,.evt-card:hover{transform:translateY(-3px);
    border-color:var(--accent-2);box-shadow:var(--sh-2)}
  .promo:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--accent) 55%,var(--bg-300));box-shadow:var(--sh-2)}
  .kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
}
.odds{transition:background var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.odds:active{transform:scale(.96)}

/* ---------- HERO FX layer ---------- */
.hero{isolation:isolate}
.hero__fx{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
/* slow "work-lamp" light sweep across the concrete */
.hero__lamp{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 60% at var(--lx,30%) var(--ly,18%),
    color-mix(in srgb,var(--accent) 16%,transparent) 0%,
    color-mix(in srgb,var(--accent) 5%,transparent) 32%, transparent 62%);
  mix-blend-mode:screen;
  animation:lamp-drift 16s ease-in-out infinite alternate;}
@keyframes lamp-drift{
  0%{--lx:24%;--ly:14%;opacity:.85}
  50%{--lx:46%;--ly:26%;opacity:1}
  100%{--lx:30%;--ly:18%;opacity:.85}
}
/* register custom props so they can animate */
@property --lx{syntax:"<percentage>";inherits:false;initial-value:30%}
@property --ly{syntax:"<percentage>";inherits:false;initial-value:18%}

.hero__inner{position:relative;z-index:2}
.hero__hazard{z-index:3}
/* parallax layers (hazard chevrons + faded ascending line) */
.hero__layer{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.hero__layer--chev{top:12%;right:4%;width:min(40vw,460px);opacity:.10}
.hero__layer--line{bottom:0;left:0;width:min(70vw,820px);opacity:.14}
.hero__layer--grid{inset:0;opacity:.5;
  background:
    linear-gradient(90deg,transparent 0 calc(100% - 1px),color-mix(in srgb,var(--accent-2) 30%,transparent) 100%) 0 0/64px 100%,
    linear-gradient(0deg,transparent 0 calc(100% - 1px),color-mix(in srgb,var(--accent-2) 18%,transparent) 100%) 0 0/100% 64px;
  mask-image:radial-gradient(70% 70% at 50% 40%,#000 0%,transparent 75%)}

/* hero headline stencil: per-line wipe */
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(110%);
  transition:transform .7s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.hero.is-in h1 .ln > span{transform:translateY(0)}

/* live ticker pulse on hero stat */
.fx-tick{animation:fx-tick 2.4s var(--ease) infinite}
@keyframes fx-tick{0%,92%,100%{opacity:1}96%{opacity:.45}}

/* ---------- Section divider: animated hazard rule ---------- */
.hazard-rule{height:6px;border:none;margin:0;
  background:var(--hazard-stripe);background-size:28px 28px;
  animation:hazard-roll 1.6s linear infinite;opacity:.8}
@keyframes hazard-roll{to{background-position:28px 0}}

/* ---------- Trust stamps (inspection clauses pressed into concrete) ---------- */
.stamps{position:relative;background:var(--bg-050);border-block:1px solid var(--bg-300);overflow:hidden}
.stamps::before{content:"";position:absolute;inset:0;background-image:var(--concrete-grain);opacity:.55;pointer-events:none}
.stamps__row{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;
  padding:var(--sp-5) var(--sp-4)}
.stamp{position:relative;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:var(--bg-100);
  border:1.5px solid var(--bg-300);border-radius:var(--r-2);
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.stamp::after{content:"";position:absolute;top:0;right:0;width:14px;height:14px;
  background:var(--hazard-stripe);background-size:8px 8px;clip-path:polygon(100% 0,0 0,100% 100%)}
.stamp:hover{transform:translateY(-3px);border-color:var(--accent-2);box-shadow:var(--sh-2)}
.stamp__ico{flex:none;width:40px;height:40px;display:grid;place-items:center;color:var(--accent);
  background:var(--bg-050);border:1.5px solid var(--bg-300);border-radius:var(--r-1)}
.stamp__ico svg{width:21px;height:21px;display:block}
.stamp__ico--age{font-family:var(--font-display);font-size:.82rem;letter-spacing:-.02em}
.stamp__txt{display:flex;flex-direction:column;line-height:1.15}
.stamp__val{font-family:var(--font-mono);font-weight:700;color:var(--fg-000);font-size:var(--fs-400)}
.stamp__lbl{font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-300)}

/* ---------- Slider / carousel ---------- */
.slider{position:relative}
.slider__viewport{overflow:hidden}
.slider__track{display:flex;gap:var(--sp-4);
  transition:transform .5s var(--ease);will-change:transform;touch-action:pan-y}
.slider__track.no-anim{transition:none}
.slider__slide{flex:0 0 auto;width:var(--slide-w,320px);max-width:88vw}
.slider__nav{display:flex;gap:var(--sp-2)}
.slider__btn{width:42px;height:42px;display:grid;place-items:center;
  background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  color:var(--fg-000);font-size:var(--fs-500);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.slider__btn:hover{background:var(--bg-150);border-color:var(--accent)}
.slider__btn[disabled]{opacity:.35;cursor:not-allowed}
.slider__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-5)}
.slider__dots{display:flex;gap:6px;margin-top:var(--sp-4);justify-content:center}
.slider__dot{width:22px;height:5px;border-radius:2px;background:var(--bg-300);
  transition:background var(--t-fast) var(--ease)}
.slider__dot[aria-current="true"]{background:var(--accent)}

/* Review card */
.review{background:var(--bg-100);border:1px solid var(--bg-300);
  border-top:3px solid var(--accent-2);border-radius:var(--r-2);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);height:100%}
.review__stars{color:var(--accent);letter-spacing:2px;font-size:var(--fs-500)}
.review__text{color:var(--fg-100);font-size:var(--fs-400)}
.review__who{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto}
.review__ava{width:38px;height:38px;border-radius:var(--r-2);background:var(--bg-300);
  display:grid;place-items:center;font-family:var(--font-display);color:var(--accent)}
.review__name{font-weight:600;color:var(--fg-000)}
.review__meta{font-size:var(--fs-300);color:var(--fg-300)}

/* Event card (popular events slider) */
.evt-card{background:var(--bg-100);border:1px solid var(--bg-300);border-radius:var(--r-2);
  overflow:hidden;height:100%;display:flex;flex-direction:column}
.evt-card__top{padding:var(--sp-3) var(--sp-4);background:var(--bg-050);
  border-bottom:1px solid var(--bg-300);display:flex;justify-content:space-between;align-items:center}
.evt-card__league{font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-300)}
.evt-card__body{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.evt-card__teams{font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-500);color:var(--fg-000);line-height:1.1}
.evt-card__odds{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-top:auto}

/* ---------- Magnetic / press feedback on primary CTAs ---------- */
.btn--bet{will-change:transform}

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero h1 .ln > span{transform:none!important}
  .hero__lamp,.fx-tick,.hazard-rule{animation:none!important}
  .slider__track{transition:none!important}
  .hero__fx{display:none}
  .market:hover,.promo:hover,.kpi:hover,.evt-card:hover{transform:none!important}
}