/* ============================================================
   RAIZE landing — motion & depth layer
   Loaded from the static <head> as /assets/motion/raize-motion.css?v=N.
   Non-HTML files deploy with a one-year immutable cache: BUMP ?v= ON EVERY CHANGE.
   Paired with raize-motion.js. Every rule that hides content is gated on
   html.rm-on, which the script adds only after the React tree has mounted —
   with no JS (or a failed script) the page renders fully visible and static.
   Colours: existing palette only (#000 #050505 #1c1c1c #353535 #674739 #ac7761 #d8b3a2 #fff + alphas).
   ============================================================ */

:root{
  --rm-ease: cubic-bezier(.22,1,.36,1);        /* out-quint: reveals, lifts, release */
  --rm-ease-io: cubic-bezier(.65,0,.35,1);     /* light sweep, header shadow */
  --rm-ease-hero: cubic-bezier(.2,.7,.2,1);    /* 2.4s hero push-in */
  --rm-reveal: 700ms;
  --rm-reveal-long: 850ms;
  --rm-step: 80ms;                              /* default stagger between siblings */
  --rm-dy: 26px;
  --rm-dx: 32px;
  --rm-blur: 8px;
  --rm-blur-line: 6px;
  --rm-copper: 172,119,97;                      /* #ac7761 */
}
@media (max-width:767px){
  :root{ --rm-dy:16px; --rm-dx:20px; --rm-blur:0px; --rm-blur-line:0px; --rm-reveal:550ms; --rm-reveal-long:650ms; }
}

/* ---------- keyframes (standalone translate/scale only — they compose with the
   runtime's hover transform:translateY() and active transform:scale()) ---------- */
@keyframes rmUp    { from{ opacity:0; translate:0 var(--rm-dy); } }
@keyframes rmDown  { from{ opacity:0; translate:0 -10px; } }
@keyframes rmLeft  { from{ opacity:0; translate:calc(-1 * var(--rm-dx)) 0; } }
@keyframes rmRight { from{ opacity:0; translate:var(--rm-dx) 0; } }
@keyframes rmFade  { from{ opacity:0; } }
@keyframes rmBlur  { from{ opacity:0; translate:0 var(--rm-dy); filter:blur(var(--rm-blur)); } to{ opacity:1; translate:0 0; filter:blur(0); } }
@keyframes rmScale { from{ opacity:0; translate:0 18px; scale:.96; } }
@keyframes rmMask  { from{ opacity:0; clip-path:inset(100% 0 0 0 round 12px); } to{ opacity:1; clip-path:inset(0 0 0 0 round 12px); } }
@keyframes rmLine  { from{ opacity:0; translate:0 .35em; filter:blur(var(--rm-blur-line)); } to{ opacity:1; translate:0 0; filter:blur(0); } }
@keyframes rmHeroZoom  { from{ scale:1.08; } to{ scale:1; } }
@keyframes rmImgSettle { from{ scale:1.08; } }
@keyframes rmSweep { from{ translate:-130% 0; } to{ translate:130% 0; } }
@keyframes rmPop   { from{ opacity:0; scale:.6; } }

/* ---------- scroll reveals: data-rm="up|down|left|right|fade|blur|scale|mask" ----------
   Hidden only while html.rm-on is present and .rm-in has not landed. Reveals are CSS
   animations (not transitions) because many cards/CTAs carry inline transition lists that
   would swallow a class transition; fill-mode:backwards holds the from-state during the
   stagger delay and releases to the element's natural styles afterwards. */
html.rm-on [data-rm]:not(.rm-in){ opacity:0; }
html.rm-on [data-rm]:not(.rm-in):focus-within{ opacity:1; }
html.rm-on [data-rm].rm-in{
  animation-duration: var(--rm-reveal);
  animation-timing-function: var(--rm-ease);
  animation-fill-mode: backwards;
  animation-delay: calc(var(--rm-d, 0ms) + min(var(--rm-i, 0) * var(--rm-step, 80ms), 420ms));
}
html.rm-on [data-rm="up"].rm-in   { animation-name: rmUp; }
html.rm-on [data-rm="down"].rm-in { animation-name: rmDown; }
html.rm-on [data-rm="left"].rm-in { animation-name: rmLeft; }
html.rm-on [data-rm="right"].rm-in{ animation-name: rmRight; }
html.rm-on [data-rm="fade"].rm-in { animation-name: rmFade; }
html.rm-on [data-rm="blur"].rm-in { animation-name: rmBlur;  animation-duration: var(--rm-reveal-long); }
html.rm-on [data-rm="scale"].rm-in{ animation-name: rmScale; }
html.rm-on [data-rm="mask"].rm-in { animation-name: rmMask;  animation-duration: var(--rm-reveal-long); }
html.rm-on [data-rm].rm-in.rm-now { animation: none; }   /* late-JS / fallback: land instantly */
@media (max-width:767px){
  html.rm-on [data-rm="left"].rm-in, html.rm-on [data-rm="right"].rm-in{ animation-name: rmUp; }
}

/* ---------- hero entrance (fresh loads only — html.rm-late skips it) ---------- */
html.rm-on:not(.rm-late) header[data-screen-label="Header"]{ animation: rmDown .6s var(--rm-ease) both; }
html.rm-on:not(.rm-late) #raize-hero-img{ animation: rmHeroZoom 2.4s var(--rm-ease-hero) both; transform-origin:60% 40%; }
html.rm-on:not(.rm-late) .hero-col > :nth-child(1){ animation: rmUp .6s var(--rm-ease) 120ms both; --rm-dy:18px; }
html.rm-on:not(.rm-late) .hero-line{ animation: rmLine .8s var(--rm-ease) both; }
html.rm-on:not(.rm-late) .hero-line:nth-child(1){ animation-delay:260ms; }
html.rm-on:not(.rm-late) .hero-line:nth-child(2){ animation-delay:380ms; }
html.rm-on:not(.rm-late) .hero-line:nth-child(3){ animation-delay:500ms; }
html.rm-on:not(.rm-late) .hero-col > :nth-child(3){ animation: rmUp .7s var(--rm-ease) 620ms both; --rm-dy:18px; }
html.rm-on:not(.rm-late) .hero-col > :nth-child(4){ animation: rmUp .7s var(--rm-ease) 740ms both; --rm-dy:18px; }
html.rm-on:not(.rm-late) #hero-stats{ animation: rmUp .7s var(--rm-ease) 860ms both; --rm-dy:12px; }
html.rm-on:not(.rm-late) #hero-stats > div{ animation: rmUp .6s var(--rm-ease) both; --rm-dy:12px; }
html.rm-on:not(.rm-late) #hero-stats > div:nth-child(1){ animation-delay:900ms; }
html.rm-on:not(.rm-late) #hero-stats > div:nth-child(2){ animation-delay:980ms; }
html.rm-on:not(.rm-late) #hero-stats > div:nth-child(3){ animation-delay:1060ms; }
/* the brand shimmer repaints the headline every frame — pause it while the hero is off-screen */
#top.rm-off .raize-shimmer{ animation-play-state: paused; }
#top.rm-off .raize-ping{ animation-play-state: paused; }

/* ---------- parallax (desktop pointer devices only; values written by the script) ---------- */
@media (min-width:1024px) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  html.rm-on #raize-hero-img{ translate: 0 calc(var(--rm-sy, 0) * 48px); }      /* lags the page; exposed strip is already off-screen */
  html.rm-on #host{ --rm-bleed: 24px; }                                           /* img box grows 24px top+bottom so ±24px never exposes an edge */
  html.rm-on #host > img{ translate: 0 calc((var(--rm-vy, .5) - .5) * -48px); }
  html.rm-on .video-card{ translate: 0 calc((var(--rm-vy, .5) - .5) * -24px); }
}

/* ---------- header ---------- */
header[data-screen-label="Header"]{ transition: box-shadow .4s var(--rm-ease-io); }
html.rm-scrolled header[data-screen-label="Header"]{ box-shadow: 0 10px 30px rgba(0,0,0,.45); }
header[data-screen-label="Header"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(var(--rm-copper),.45), transparent);
  opacity:0; transition: opacity .4s var(--rm-ease-io);
}
html.rm-scrolled header[data-screen-label="Header"]::after{ opacity:1; }
#nav-links > a{ position:relative; }
#nav-links > a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:#ac7761;
  scale:0 1; transform-origin:left center; transition: scale .35s var(--rm-ease);
}
#nav-links > a.rm-active{ color:#fff; }
#nav-links > a.rm-active::after, #nav-links > a:focus-visible::after{ scale:1 1; }
header[data-screen-label="Header"] > a:first-child svg{ transition: scale .4s var(--rm-ease); }
#menu-btn{ transition: box-shadow .25s var(--rm-ease), scale .15s var(--rm-ease); }
#menu-btn:active{ scale:.92; }

/* ---------- section seams: a soft copper light on the existing #1c1c1c dividers ---------- */
.sec-trusted, #games, #dealers, #faq, .sec-closing, footer[data-screen-label="Footer"]{ position:relative; }
.sec-trusted::before, .sec-trusted::after, #games::before, #trust::before, #dealers::before, #faq::before, .sec-closing::before, footer[data-screen-label="Footer"]::before{
  content:''; position:absolute; top:-1px; left:50%; translate:-50% 0; width:min(60%, 720px); height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(var(--rm-copper),.32) 50%, transparent);
}
.sec-trusted::after{ top:auto; bottom:-1px; }
.sec-closing::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(var(--rm-copper),.2), transparent);
}
#hero-stats{ position:relative; }
#hero-stats::before{ content:''; position:absolute; top:-1px; left:0; width:120px; height:1px; background: linear-gradient(90deg, #ac7761, transparent); }

/* ---------- trust strip ---------- */
.sec-trusted i{ transition: translate .22s var(--rm-ease); }

/* ---------- feature cards (Why RAIZE) ---------- */
.feature-grid > div{ position:relative; box-shadow: 0 20px 40px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.feature-grid > div::before{
  content:''; position:absolute; top:-1px; left:12%; right:12%; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(var(--rm-copper),.4), transparent);
}
.feature-grid > div > div:first-child{ transition: box-shadow .35s var(--rm-ease); }
.feature-grid > div i{ transition: translate .22s var(--rm-ease); }

/* ---------- game cards + crypto band ---------- */
.games-grid > div{ box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.games-grid > div > img{ transition: scale .8s var(--rm-ease); }
.crypto-band{ position:relative; isolation:isolate; box-shadow: 0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.crypto-band::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 90% at 85% 50%, rgba(var(--rm-copper),.10), transparent 70%);
}
.crypto-band > div:last-child > div{ transition: translate .25s var(--rm-ease), box-shadow .25s var(--rm-ease); }
@media (max-width:600px){ .crypto-band > div:last-child > div{ flex: 1 1 calc(50% - 6px); } }

/* ---------- fair play video card ---------- */
.video-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(var(--rm-copper),.35); opacity:0; transition: opacity .35s var(--rm-ease);
}
html.rm-on .video-card.rm-in video{ animation: rmImgSettle 1.4s var(--rm-ease) backwards; animation-delay: var(--rm-d, 0ms); }

/* ---------- dealer cards ---------- */
.dealer-grid > div > img{ transition: scale .8s var(--rm-ease); }
.dealer-grid > div > div:nth-of-type(2){ transition: translate .35s var(--rm-ease); }
html.rm-on .dealer-grid > div.rm-in > img{
  animation: rmImgSettle 1.2s var(--rm-ease) backwards;
  animation-delay: calc(var(--rm-d, 0ms) + min(var(--rm-i, 0) * var(--rm-step, 80ms), 420ms));
}

/* ---------- host checklist ticks pop in with their row ---------- */
html.rm-on #host li.rm-in > i{
  animation: rmPop .5s var(--rm-ease) backwards;
  animation-delay: calc(var(--rm-d, 0ms) + min(var(--rm-i, 0) * var(--rm-step, 80ms), 420ms));
}

/* ---------- FAQ ---------- */
#faq > div > div:last-child > div{ box-shadow: 0 12px 32px -20px rgba(0,0,0,.8); transition: box-shadow .35s var(--rm-ease); }
#faq > div > div:last-child > div:has(button[aria-expanded="true"]){ box-shadow: 0 0 0 1px rgba(var(--rm-copper),.35), 0 12px 32px -20px rgba(0,0,0,.8); }
#faq button{ -webkit-tap-highlight-color: transparent; }
#faq button:focus-visible{ outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- CTAs (class="cta cta-primary|cta-ghost" on the seven pills) ----------
   Fill, border, text and the runtime's hover brightness / active scale stay as exported.
   Additions live on box-shadow, the standalone translate property and a ::before sweep. */
.cta{ position:relative; isolation:isolate; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.cta > i{ transition: translate .22s var(--rm-ease); }
.cta-primary{ box-shadow: 0 10px 30px -12px rgba(var(--rm-copper),.35); }
.cta-primary::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; translate:-130% 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
}
.cta-primary.rm-sweep::before{ animation: rmSweep .9s var(--rm-ease-io) 1; }
.cta-primary:focus-visible{ box-shadow: 0 0 0 4px rgba(var(--rm-copper),.18), 0 14px 34px -10px rgba(var(--rm-copper),.6); }
.cta-ghost:focus-visible{ box-shadow: inset 0 0 0 999px rgba(255,255,255,.05), 0 0 0 4px rgba(255,255,255,.05); }
.cta:active{ box-shadow: 0 0 0 2px rgba(var(--rm-copper),.25), 0 4px 12px -8px rgba(0,0,0,.6); }
.cta-ghost:active{ box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }
@media (max-width:480px){ .cta-row > a{ flex: 1 1 100%; justify-content:center; } }

/* ---------- footer + support button ---------- */
footer[data-screen-label="Footer"] a[data-community] i{ transition: scale .22s var(--rm-ease); }
html.rm-on a.chat-fab{ animation: rmPop .6s var(--rm-ease) backwards; }   /* plays when community-links.js reveals it */

/* ---------- hover set (pointer devices only; touch keeps the runtime's :active press) ---------- */
@media (hover:hover) and (pointer:fine){
  #nav-links > a:hover::after{ scale:1 1; }
  header[data-screen-label="Header"] > a:first-child:hover svg{ scale:1.08; }
  #menu-btn:hover{ box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
  .sec-trusted span:hover > i{ translate:0 -2px; }
  .feature-grid > div:hover{ box-shadow: 0 28px 56px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--rm-copper),.2), inset 0 1px 0 rgba(255,255,255,.06); }
  .feature-grid > div:hover > div:first-child{ box-shadow: 0 0 0 6px rgba(var(--rm-copper),.08); }
  .feature-grid > div:hover i{ translate:0 -1px; }
  .games-grid > div:hover{ box-shadow: 0 28px 56px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--rm-copper),.2); }
  .games-grid > div:hover > img{ scale:1.05; }
  .crypto-band > div:last-child > div:hover{ translate:0 -2px; box-shadow: 0 0 0 1px #674739; }
  .video-card:hover::after{ opacity:1; }
  .dealer-grid > div:hover{ box-shadow: 0 24px 48px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--rm-copper),.2); }
  .dealer-grid > div:hover > img{ scale:1.05; }
  .dealer-grid > div:hover > div:nth-of-type(2){ translate:0 -3px; }
  #faq button:hover{ --rm-faq-bg: rgba(255,255,255,.04); }
  #faq > div > div:last-child > div:hover{ box-shadow: 0 0 0 1px #674739, 0 12px 32px -20px rgba(0,0,0,.8); }
  .cta-primary:hover{ box-shadow: 0 0 0 4px rgba(var(--rm-copper),.18), 0 14px 34px -10px rgba(var(--rm-copper),.6); }
  .cta-primary:hover::before, .cta-primary:focus-visible::before{ translate:130% 0; transition: translate .8s var(--rm-ease-io); }
  .cta:hover > i{ translate:4px 0; }
  .cta-ghost:hover{ box-shadow: inset 0 0 0 999px rgba(255,255,255,.05), 0 0 0 4px rgba(255,255,255,.05); }
  footer[data-screen-label="Footer"] a[data-community]:hover i{ scale:1.12; }
}

/* ---------- card stack: the three game felts pin and square up like a deck (desktop only) ----------
   Needs the wrapper div / #top / #host at overflow:clip (a hidden ancestor would make sticky inert)
   and the cards' inline position routed through var(--rm-pos, relative). */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion: no-preference){
  html.rm-on .games-grid.rm-stack{ display:block; padding-bottom:4vh; }
  html.rm-on .rm-stack > div{
    --rm-pos: sticky;
    top: calc(88px + var(--rm-i, 0) * 14px);          /* fixed header 71px + breathing; each later card sits 14px lower */
    height: min(54vh, 480px);
    max-width: 960px; margin-left:auto; margin-right:auto;
    z-index: calc(2 + var(--rm-i, 0));
    scale: calc(1 - var(--rm-p, 0) * .05);
    transform-origin: 50% 0%;
  }
  html.rm-on .rm-stack > div + div{ margin-top: 10vh; }   /* short solo dwell before the next felt arrives */
  html.rm-on .rm-stack > div::after{ content:''; position:absolute; inset:0; background:#000; opacity: calc(var(--rm-p, 0) * .55); pointer-events:none; }
  html.rm-on .rm-stack.rm-live > div{ will-change: scale; }
}

/* ---------- reduced motion: a designed low-motion state, not a dead page ---------- */
@media (prefers-reduced-motion: reduce){
  html.rm-on [data-rm].rm-in{
    animation-name: rmFade; animation-duration: .3s; animation-timing-function: ease;
    animation-delay: calc((var(--rm-d, 0ms) + min(var(--rm-i, 0) * var(--rm-step, 80ms), 420ms)) / 2);
  }
  html.rm-on:not(.rm-late) header[data-screen-label="Header"],
  html.rm-on:not(.rm-late) .hero-col > :nth-child(1),
  html.rm-on:not(.rm-late) .hero-line,
  html.rm-on:not(.rm-late) .hero-col > :nth-child(3),
  html.rm-on:not(.rm-late) .hero-col > :nth-child(4),
  html.rm-on:not(.rm-late) #hero-stats,
  html.rm-on:not(.rm-late) #hero-stats > div{ animation-name: rmFade; animation-duration: .35s; animation-timing-function: ease; }
  html.rm-on:not(.rm-late) #raize-hero-img{ animation: none; }
  html.rm-on .video-card.rm-in video, html.rm-on .dealer-grid > div.rm-in > img, html.rm-on #host li.rm-in > i{ animation: none; }
  html.rm-on a.chat-fab{ animation-name: rmFade; animation-duration: .3s; }
  .cta-primary::before, .cta-primary.rm-sweep::before{ display:none; }
  .cta > i, .games-grid > div > img, .dealer-grid > div > img, .dealer-grid > div > div:nth-of-type(2),
  #nav-links > a::after, header[data-screen-label="Header"] > a:first-child svg, .sec-trusted i, .feature-grid > div i,
  .crypto-band > div:last-child > div, header[data-screen-label="Header"], header[data-screen-label="Header"]::after, #menu-btn{ transition-duration: 0s; }
}

/* ---------- print: everything visible ---------- */
@media print{
  html.rm-on [data-rm]:not(.rm-in){ opacity:1; }
  html.rm-on [data-rm].rm-in{ animation:none; }
}