/* =============================================================
   FINAL 3D — depth & motion layer on top of final.css
   Scoped to body.f3d — the base version stays untouched.
   ============================================================= */

/* ---------- 3D ambient scene ---------- */
.f3d {
  overflow-x: hidden;
}
.f3d::before {
  /* perspective grid floor */
  content: "";
  position: fixed;
  inset-inline: -20vw;
  bottom: -12vh;
  height: 46vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--f-navy) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--f-navy) 8%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 78%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent 78%);
  animation: f3d-grid-drift 26s linear infinite;
}
@keyframes f3d-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 56px, 56px 0; }
}
.f3d.dark::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--f-cs) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--f-cs) 14%, transparent) 1px, transparent 1px);
}

/* floating orbs */
.f3d-orb {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.f3d-orb--a {
  width: 480px; height: 480px;
  inset-block-start: -160px;
  inset-inline-end: -120px;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--f-gold) 26%, transparent), transparent 70%);
  animation: f3d-orb-a 18s ease-in-out infinite alternate;
}
.f3d-orb--b {
  width: 560px; height: 560px;
  inset-block-start: 30vh;
  inset-inline-start: -200px;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--f-navy) 22%, transparent), transparent 70%);
  animation: f3d-orb-b 24s ease-in-out infinite alternate;
}
.f3d.dark .f3d-orb { opacity: 0.35; }
@keyframes f3d-orb-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-60px, 50px, 0) scale(1.12); }
}
@keyframes f3d-orb-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(70px, -40px, 0) scale(0.94); }
}

/* keep app above scene */
.f3d .f-shell { position: relative; z-index: 1; background-image: none; }

/* =============================================================
   POINTER TILT — JS sets --rx / --ry / --mx / --my / --tilt-on
   ============================================================= */
.f3d [data-f3d-tilt] {
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition: transform var(--f-dur-md) var(--f-spring), border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease), flex var(--f-dur-md) var(--f-spring);
  will-change: transform;
}
.f3d [data-f3d-tilt].is-tilting {
  transition: transform var(--f-dur-fast) linear, border-color var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease), background var(--f-dur) var(--f-ease), flex var(--f-dur-md) var(--f-spring);
}

/* glare sheen following the pointer */
.f3d [data-f3d-tilt]:not(.f-spot)::after,
.f3d .f-spot[data-f3d-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.22),
    transparent 65%);
  transition: opacity var(--f-dur-md) var(--f-ease);
}
.f3d.dark [data-f3d-tilt]:not(.f-spot)::after {
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.08),
    transparent 65%);
}
.f3d [data-f3d-tilt].is-tilting:not(.f-spot)::after,
.f3d .f-spot[data-f3d-tilt].is-tilting::before { opacity: 1; }

/* deeper shadow while lifted */
.f3d [data-f3d-tilt].is-tilting {
  box-shadow:
    0 1px 2px rgba(22,21,19,0.05),
    0 30px 60px -22px rgba(22,21,19,0.22);
}
.f3d.dark [data-f3d-tilt].is-tilting {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 34px 70px -24px rgba(0,0,0,0.8);
}

/* inner elements float at different depths */
.f3d [data-f3d-tilt] .f-deck__ico,
.f3d [data-f3d-tilt] .fs-card__ico,
.f3d [data-f3d-tilt] .f-exp__ico,
.f3d [data-f3d-tilt] .fd-hero__ico,
.f3d [data-f3d-tilt] .f-spot__ico,
.f3d [data-f3d-tilt] .fg-card__ico {
  transform: translateZ(0);
  transition: transform var(--f-dur-md) var(--f-spring);
}
.f3d [data-f3d-tilt].is-tilting .f-deck__ico,
.f3d [data-f3d-tilt].is-tilting .fs-card__ico,
.f3d [data-f3d-tilt].is-tilting .f-exp__ico,
.f3d [data-f3d-tilt].is-tilting .fd-hero__ico,
.f3d [data-f3d-tilt].is-tilting .f-spot__ico,
.f3d [data-f3d-tilt].is-tilting .fg-card__ico {
  transform: translateZ(34px) scale(1.04);
}
.f3d [data-f3d-tilt].is-tilting .f-deck__wm { transform: translateZ(14px); }
.f3d [data-f3d-tilt].is-tilting .f-deck__cta,
.f3d [data-f3d-tilt].is-tilting .fs-card__go { transform: translateZ(26px); }
.f3d .f-deck__wm, .f3d .f-deck__cta { transition: transform var(--f-dur-md) var(--f-spring), color var(--f-dur) var(--f-ease), filter var(--f-dur) var(--f-ease); }

/* =============================================================
   SCROLL REVEAL — JS adds .f3d-in when section enters viewport
   ============================================================= */
.f3d .f3d-reveal {
  opacity: 0;
  transform: perspective(900px) rotateX(7deg) translateY(26px);
  transform-origin: 50% 0%;
}
.f3d .f3d-reveal.f3d-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--f-dur-md) var(--f-ease), transform var(--f-dur-md) var(--f-spring);
}

/* =============================================================
   PAGE ENTER — deeper 3D variant
   ============================================================= */
.f3d .fp-enter {
  animation: f3d-page-in 640ms var(--f-spring) both;
}
@keyframes f3d-page-in {
  from { opacity: 0; transform: perspective(1000px) rotateX(5deg) translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   PAPER FORM — unfolds in 3D
   ============================================================= */
.f3d .ff-paper {
  animation: f3d-paper-unfold 720ms var(--f-spring) both;
  transform-origin: 50% 0%;
}
@keyframes f3d-paper-unfold {
  from { opacity: 0; transform: perspective(1400px) rotateX(-14deg) translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   SPOTLIGHT — slow levitation of the big icon
   ============================================================= */
.f3d .f-spot__ico {
  animation: f3d-levitate 5.2s ease-in-out infinite;
}
@keyframes f3d-levitate {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-9px) rotateZ(-2deg); }
}

/* =============================================================
   STATS — counter cards rise stacked
   ============================================================= */
.f3d .f-stat {
  position: relative;
}

/* current-stage pulse ring gets a 3D halo */
.f3d .fc-stage.is-now .fc-stage__dot {
  box-shadow:
    0 0 0 0 color-mix(in srgb, var(--lead-c) 45%, transparent),
    0 10px 20px -8px color-mix(in srgb, var(--lead-c) 60%, transparent);
}

/* tab indicator springs */
.f3d .ff-tab.is-on { transform: translateZ(0) scale(1.02); }

/* buttons press down in Z */
.f3d .f-btn:active,
.f3d .f-deck__cta:active,
.f3d .f-spot__cta:active { transform: perspective(600px) translateZ(-12px) scale(0.97); }

/* topbar floats above with stronger blur shadow */
.f3d .f-top {
  box-shadow: 0 14px 34px -22px rgba(22,21,19,0.25);
}
.f3d.dark .f-top {
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7);
}

/* =============================================================
   REDUCED MOTION — flatten everything
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .f3d::before, .f3d-orb { animation: none !important; }
  .f3d [data-f3d-tilt] { transform: none !important; }
  .f3d .f3d-reveal { opacity: 1 !important; transform: none !important; }
  .f3d .fp-enter, .f3d .ff-paper { animation: none !important; }
  .f3d .f-spot__ico { animation: none !important; }
}

/* touch devices: no tilt, keep the rest */
@media (hover: none) {
  .f3d [data-f3d-tilt] { transform: none !important; }
  .f3d [data-f3d-tilt]:not(.f-spot)::after,
  .f3d .f-spot[data-f3d-tilt]::before { display: none; }
}