/* =============================================================================
   Maurya Logistics — 3D motion layer
   -----------------------------------------------------------------------------
   Loaded after style.css. Everything here is an enhancement:

   • Every rule is scoped behind `html.js`, so with JavaScript off the site
     renders exactly as style.css leaves it.
   • Cursor-driven values arrive as custom properties (--rx --ry --mx --my)
     set by js/fx3d.js. Their fallbacks are all neutral, so an element that
     never receives them simply sits flat.
   • The last block switches the whole file off under
     `prefers-reduced-motion: reduce`.

   Nothing here changes layout — only `transform`, `box-shadow`, `opacity` and
   `filter`, all of which are composited and cost no reflow.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --fx-persp: 900px;
  --fx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Scroll parallax ---------------------------------------------
   js/fx3d.js writes --pz (px) on every [data-parallax] element on scroll.     */
.js [data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--pz, 0px), 0) scale(1.14);
}

/* ---------- 3. Hero -------------------------------------------------------- */

/* The perspective floor recedes toward the headline's baseline. */
.js .hero__floor {
  perspective: 260px;
  perspective-origin: 50% 0%;
}
.js .hero__floor span {
  transform: rotateX(62deg);
  transform-origin: 50% 0%;
  animation: fxFloorRun 3.2s linear infinite;
}
@keyframes fxFloorRun {
  to { transform: rotateX(62deg) translateY(60px); }
}

/* Credential chips drift on slightly different clocks so they never look
   like one block moving. */
.js .chip--float {
  animation: fxChipFloat 5.6s var(--fx-ease) infinite;
  transform-origin: 50% 120%;
}
.js .hero__badges .chip--float:nth-child(2) { animation-delay: -1.85s; }
.js .hero__badges .chip--float:nth-child(3) { animation-delay: -3.7s; }
@keyframes fxChipFloat {
  0%, 100% { transform: perspective(600px) translateY(0) rotateX(0deg); }
  50%      { transform: perspective(600px) translateY(-7px) rotateX(7deg); }
}

/* Telemetry panel: rests at a slight angle, straightens toward the cursor. */
.js .hero__panel { perspective: 1200px; }
.js .hero__panel .tpanel {
  transform:
    rotateY(var(--ry, -9deg))
    rotateX(var(--rx, 4deg))
    translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
  will-change: transform;
}
.js .hero__panel.is-tilting .tpanel {
  transition: transform .1s linear, box-shadow .4s var(--fx-ease);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* Panel internals float above the glass so the tilt reads as real depth.
   .tpanel has no `overflow` of its own, so preserve-3d survives here. */
.js .hero__panel .tpanel__bar    { transform: translateZ(26px); }
.js .hero__panel .tpanel__route,
.js .hero__panel .tpanel__ends   { transform: translateZ(18px); }
.js .hero__panel .tpanel__chart  { transform: translateZ(30px); }
.js .hero__panel .tpanel__rows   { transform: translateZ(14px); }

/* Hero stat tiles lift out of the strip individually. */
.js .hero__stat {
  transition: transform .34s var(--fx-ease), background .34s;
}
.js .hero__stat:hover {
  transform: perspective(700px) translateZ(24px) rotateX(-7deg);
  background: rgba(23, 162, 196, .22);
  z-index: 2;
}

/* ---------- 4. Cursor-tilt cards ------------------------------------------
   Applied by js/fx3d.js to .card .temp .office .quote .logo-cell .hero__stat
   and anything carrying [data-tilt]. --rx/--ry come from the pointer; --ty is
   the hover lift, folded into the same transform so it can't be clobbered.   */
.js .tilt3d {
  position: relative;             /* anchors the injected .glare3d overlay */
  transform:
    perspective(var(--fx-persp))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0px));
  transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .3s;
}
.js .tilt3d.is-tilting {
  transition: transform .09s linear, box-shadow .3s var(--fx-ease), border-color .3s;
  box-shadow: 0 34px 60px -26px rgba(11, 30, 61, .5);
  z-index: 2;
}
.js .card--navy.tilt3d.is-tilting,
.js .section--navy .tilt3d.is-tilting {
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, .6);
}

/* Specular sheen that tracks the pointer. Injected as its own element rather
   than a pseudo-element because .step and .quote already use ::before/::after.
   Deliberately *not* scoped to .js: the resting state is invisible, so a glare
   element can never wash out a card even if it exists without the class. */
.glare3d {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--fx-ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, 0) 62%
  );
  mix-blend-mode: soft-light;
}
.js .tilt3d.is-tilting .glare3d { opacity: 1; }
/* On dark panels a soft-light sheen barely registers — brighten it instead. */
.js .card--navy > .glare3d,
.js .section--navy .tilt3d > .glare3d {
  mix-blend-mode: screen;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(120, 200, 235, .3),
    rgba(120, 200, 235, 0) 60%
  );
}

/* Icon tiles and watermark numerals push forward as the card tilts. Each has
   its own `perspective()` because the parent card is `overflow: hidden`, which
   forces `transform-style: flat` and would otherwise flatten them. */
.js .tilt3d .card__icon,
.js .tilt3d .temp__dial {
  transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease);
}
.js .tilt3d.is-tilting .card__icon {
  transform: perspective(520px) rotateY(-16deg) rotateX(9deg) translateZ(18px) scale(1.05);
  box-shadow: -10px 12px 22px -12px rgba(11, 30, 61, .55);
}
.js .tilt3d.is-tilting .temp__dial {
  transform: perspective(520px) rotateY(-12deg) translateZ(14px) scale(1.05);
}
.js .tilt3d .card__num {
  transition: transform .45s var(--fx-ease), color .3s;
}
.js .tilt3d.is-tilting .card__num {
  transform: perspective(520px) translateZ(-30px) scale(1.14);
}
.js .tilt3d .card__tag {
  transition: transform .45s var(--fx-ease);
}
.js .tilt3d.is-tilting .card__tag {
  transform: perspective(520px) translateZ(26px) scale(1.04);
}

/* The Managing Director's name plate lifts off the photograph as the portrait
   turns. Same story as the icon tiles above: .owner__figure is overflow:hidden,
   so the plate carries its own perspective() or the translateZ flattens. */
.js .owner__plate { transition: transform .45s var(--fx-ease); }
.js .owner__figure.is-tilting .owner__plate {
  transform: perspective(600px) translateZ(30px) scale(1.02);
}

/* ---------- 5. Pop targets -------------------------------------------------
   Unboxed repeaters — a sheen would have nothing to sit inside, so these get
   a straight rotate-and-rise instead.                                        */
.js .pop3d {
  transition: transform .38s var(--fx-ease);
}
.js .pop3d:hover {
  transform: perspective(800px) rotateX(-8deg) translateZ(20px);
}
.js .step.pop3d:hover      { transform: perspective(800px) rotateX(-7deg) rotateY(3deg) translateZ(18px); }
.js .tl-item.pop3d:hover   { transform: perspective(900px) rotateY(-5deg) translateZ(16px); }
.js .stat.pop3d:hover      { transform: perspective(700px) rotateX(-10deg) translateZ(22px); }
.js .city-group.pop3d:hover { transform: perspective(900px) rotateY(-3deg) translateZ(12px); }

/* Timeline year badges spin forward with their row. */
.js .tl-item .tl-dot { transition: transform .4s var(--fx-ease); }
.js .tl-item.pop3d:hover .tl-dot {
  transform: perspective(400px) rotateY(180deg) translateZ(10px);
}

/* ---------- 6. Media lift --------------------------------------------------
   Photos and figures rise off the page and turn very slightly toward the
   viewer. Applied to `figure` and `.media-stack`, minus any that sit inside a
   tilt card (js/fx3d.js drops those so the two effects can't fight).         */
.js .lift3d {
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
}
.js .lift3d:hover {
  transform: perspective(1100px) rotateY(-4deg) rotateX(3deg) translateZ(26px);
  box-shadow: 0 40px 70px -32px rgba(11, 30, 61, .55);
}
.js .media-stack__badge { transition: transform .5s var(--fx-ease); }
.js .media-stack.lift3d:hover .media-stack__badge {
  transform: perspective(600px) translateZ(40px) scale(1.06);
}

/* ---------- 7. Reveal, in 3D ----------------------------------------------
   Overrides the flat translate in style.css §reveal (same specificity, later
   in the cascade). Every element already carrying [data-reveal] — some 200 of
   them — now unfolds from the horizon instead of sliding up.                 */
.js [data-reveal] {
  opacity: 0;
  transform: perspective(1400px) rotateX(-14deg) translateY(38px);
  transform-origin: 50% 100%;
  transition: opacity .85s var(--fx-ease), transform .85s var(--fx-ease);
}
.js [data-reveal][data-reveal="left"]  { transform: perspective(1400px) rotateY(16deg) translateX(-34px); transform-origin: 100% 50%; }
.js [data-reveal][data-reveal="right"] { transform: perspective(1400px) rotateY(-16deg) translateX(34px); transform-origin: 0% 50%; }
.js [data-reveal][data-reveal="scale"] { transform: perspective(1400px) translateZ(-160px) scale(.97); transform-origin: 50% 50%; }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (max-width: 720px) {
  /* Narrow screens: keep the depth, drop the sideways swing — a rotateY here
     costs horizontal room the viewport doesn't have. */
  .js [data-reveal][data-reveal="left"],
  .js [data-reveal][data-reveal="right"] {
    transform: perspective(1400px) rotateX(-12deg) translateY(30px);
    transform-origin: 50% 100%;
  }
  .js [data-reveal].in { transform: none; }
}

/* ---------- 8. Client marquee as a 3D conveyor ---------------------------- */
.js .marquee {
  perspective: 1100px;
  perspective-origin: 50% 50%;
}
.js .marquee__track { transform-style: preserve-3d; }
.js .marquee__item {
  transform: rotateY(-17deg) translateZ(-26px);
  transition: transform .5s var(--fx-ease), filter .5s;
}
.js .marquee__item:hover {
  transform: rotateY(0deg) translateZ(46px);
}

/* Static logo wall: tiles tilt toward the cursor via .tilt3d, and the mark
   inside floats above the tile. */
.js .logo-cell.tilt3d.is-tilting img {
  transform: perspective(500px) translateZ(24px) scale(1.09);
}
/* filter is still transitioned — the hover state adds a drop-shadow. opacity is
   not: the marks are shown at full strength now, never faded. */
.js .logo-cell img { transition: transform .45s var(--fx-ease), filter .45s; }

/* ---------- 9. Buttons ---------------------------------------------------- */
.js .btn:hover  { transform: perspective(600px) rotateX(-10deg) translateZ(8px) translateY(-2px); }
.js .btn:active { transform: perspective(600px) rotateX(0deg) translateZ(0) translateY(1px); }

/* Extruded primary CTA — a hard bottom edge that compresses when pressed. */
.js .btn--3d {
  box-shadow: 0 6px 0 -1px #96101a, 0 16px 30px -10px rgba(224, 27, 34, .6);
}
.js .btn--3d:hover {
  box-shadow: 0 9px 0 -1px #96101a, 0 24px 40px -12px rgba(224, 27, 34, .65);
}
.js .btn--3d:active {
  box-shadow: 0 2px 0 -1px #96101a, 0 8px 18px -8px rgba(224, 27, 34, .5);
}

/* ---------- 10. Header & floating actions -------------------------------- */
.js .brand img { transition: transform .45s var(--fx-ease); }
.js .brand:hover img {
  transform: perspective(500px) rotateY(-16deg) translateZ(14px);
}
.js .fab:hover {
  transform: perspective(420px) rotateX(-14deg) translateZ(16px) translateY(-3px) scale(1.06);
}

/* ---------- 11. Scroll progress rail ------------------------------------
   A single element appended to <body> by js/fx3d.js; --p is 0 → 1.          */
.js .fx-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 3px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--red-500), var(--amber-500) 50%, var(--frost-500));
  box-shadow: 0 0 12px rgba(23, 162, 196, .6);
}

/* ---------- 12. Section depth -------------------------------------------
   A slow drifting grid behind the navy panels, receding on the X axis.      */
.js .section--navy > .fx-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 300px;
  perspective-origin: 50% 100%;
  opacity: .35;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
          mask-image: linear-gradient(to top, #000, transparent 70%);
}
.js .section--navy > .fx-depth::before {
  content: "";
  position: absolute;
  inset: -50% -20% 0;
  transform: rotateX(64deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(to right,  rgba(150, 195, 230, .3) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(to bottom, rgba(150, 195, 230, .22) 0 1px, transparent 1px 90px);
  animation: fxDepthRun 6s linear infinite;
}
@keyframes fxDepthRun {
  to { transform: rotateX(64deg) translateY(90px); }
}
/* Keep the panel's own content above the backdrop. */
.js .section--navy > .wrap { position: relative; z-index: 1; }

/* ---------- 13. Opt out -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-parallax],
  .js .tilt3d,
  .js .pop3d,
  .js .pop3d:hover,
  .js .lift3d,
  .js .lift3d:hover,
  .js .hero__panel .tpanel,
  .js .hero__stat:hover,
  .js .marquee__item,
  .js .marquee__item:hover,
  .js .chip--float,
  .js .btn:hover,
  .js .btn:active,
  .js .fab:hover,
  .js .brand:hover img,
  .js .tilt3d .card__icon,
  .js .tilt3d .card__num,
  .js .tilt3d .card__tag,
  .js .tilt3d .temp__dial,
  .js .owner__plate,
  .js .hero__panel .tpanel > * {
    transform: none !important;
    animation: none !important;
  }
  .js .glare3d,
  .js .fx-progress,
  .js .hero__floor,
  .js .section--navy > .fx-depth { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}