/* ==========================================================================
   RAUSHEENA GROUP — 3D LAYER
   Depth + motion added on top of the base site. Everything here is driven by
   js/three-d.js, which only switches it on when the visitor has NOT asked for
   reduced motion, so this file is inert for them (and if the script fails).
   Feature flags live in js/three-d.js (RG3D config).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 3D scroll reveals — content swings in with perspective instead of a flat
   slide. Final (visible) state is `transform: none` so nothing lingers on the
   element afterwards (crisp text, no stray stacking contexts).
   -------------------------------------------------------------------------- */
html.rg3d-reveal [data-reveal="up"]{ transform: perspective(1100px) translate3d(0, 48px, -70px) rotateX(-10deg); transform-origin: 50% 100%; }
html.rg3d-reveal [data-reveal="down"]{ transform: perspective(1100px) translate3d(0, -40px, -70px) rotateX(10deg); transform-origin: 50% 0; }
html.rg3d-reveal [data-reveal="left"]{ transform: perspective(1100px) translate3d(-56px, 0, -60px) rotateY(16deg); transform-origin: 0 50%; }
html.rg3d-reveal [data-reveal="right"]{ transform: perspective(1100px) translate3d(56px, 0, -60px) rotateY(-16deg); transform-origin: 100% 50%; }
html.rg3d-reveal [data-reveal="scale"]{ transform: perspective(1100px) translate3d(0, 24px, -120px) rotateX(-6deg) scale(0.94); transform-origin: 50% 100%; }
html.rg3d-reveal [data-reveal].is-visible{ transform: none; }

html.rg3d-reveal [data-reveal-group] > *{ transform: perspective(900px) translate3d(0, 40px, -60px) rotateX(-12deg); transform-origin: 50% 100%; }
html.rg3d-reveal [data-reveal-group].is-visible > *{ transform: none; }

/* --------------------------------------------------------------------------
   2. Tilt + glare cards (pointer devices only). The tilt itself uses the
   individual `rotate` property, so it composes with the reveal/hover
   `transform`s already on these cards instead of fighting them; the parent
   supplies the perspective. Glare is an injected span.
   -------------------------------------------------------------------------- */
:root{ --rg3d-glare: rgba(150, 200, 255, 0.22); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --rg3d-glare: rgba(0, 140, 200, 0.14); }
}
:root[data-theme="light"]{ --rg3d-glare: rgba(0, 140, 200, 0.14); }

.rg3d-tilt{ position: relative; transform-style: flat; }
.rg3d-tilt > .rg3d-glare{
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--rg3d-glare), transparent 58%);
  opacity: var(--glare, 0);
  transition: opacity 0.35s var(--ease-out);
}

/* 3. Ecosystem + logo coin styling lives in css/ecosystem.css. */

/* --------------------------------------------------------------------------
   4. Hero intro — a short dolly-in that settles at 1:1 (the photo always ends
   whole and un-zoomed). Starts when the preloader lifts.
   -------------------------------------------------------------------------- */
@keyframes rg3dDolly{
  from{ transform: scale(1.06); }
  to{ transform: scale(1); }
}
html.rg3d-intro body.is-loading .hero-media,
html.rg3d-intro body.is-loading .page-hero-media{ transform: scale(1.06); }
html.rg3d-intro body:not(.is-loading) .hero-media,
html.rg3d-intro body:not(.is-loading) .page-hero-media{ animation: rg3dDolly 2.4s var(--ease-out) both; }