/* ==========================================================================
   Way2Automation — Home 3D enhancement layer
   Loaded only on index.html (body.home-3d). Adds perspective, depth and
   pointer-driven tilt on top of the shared design system in styles.css.
   ========================================================================== */

body.home-3d {
  --shadow-3d:
    0 1px 2px rgba(15, 23, 42, .05),
    0 12px 24px -10px rgba(15, 23, 42, .12),
    0 34px 64px -28px rgba(23, 66, 163, .25);
  --shadow-3d-lift:
    0 2px 4px rgba(15, 23, 42, .06),
    0 20px 36px -14px rgba(15, 23, 42, .18),
    0 48px 90px -32px rgba(23, 66, 163, .35);
}

/* Pointer-driven tilt ------------------------------------------------------
   JS (js/home-3d.js) sets --rx / --ry / --mx / --my on [data-tilt] elements
   and toggles .tilting while the pointer is over them. */
body.home-3d [data-tilt] { position: relative; }
body.home-3d [data-tilt].tilting {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.015);
  transition: box-shadow .25s ease;
  box-shadow: var(--shadow-3d-lift);
  will-change: transform;
  z-index: 3;
}

/* Specular glare that follows the cursor */
body.home-3d [data-tilt]::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .5), transparent 42%);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .3s ease;
}
body.home-3d [data-tilt].tilting::after { opacity: 1; }

/* Sections tip up out of the page in 3D as they scroll into view ----------- */
@media (prefers-reduced-motion: no-preference) {
  body.home-3d .reveal {
    transform: perspective(1000px) rotateX(9deg) translateY(30px);
    transform-origin: 50% 100%;
  }
  body.home-3d .reveal.in { transform: none; }
}

/* Hero scene ---------------------------------------------------------------
   Perspective on the grid lets the code card and floating badges live at
   different depths. */
body.home-3d .hero-grid { perspective: 1400px; }
body.home-3d .hero-visual { transform-style: preserve-3d; }

/* Whole visual composition (card + badges) drifts slowly in 3D space.
   heroDrift starts only after the heroUp entrance animation has finished
   so the two never fight over the transform. */
body.home-3d .hero-visual {
  animation: heroUp .8s ease .35s forwards, heroDrift 14s ease-in-out 1.3s infinite;
}
@keyframes heroDrift {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50%      { transform: translateY(-10px) rotateX(1.6deg) rotateY(2.2deg); }
}

/* Receding grid floor behind the hero */
body.home-3d .hero-floor {
  position: absolute; left: -12%; right: -12%; bottom: -6%; height: 56%;
  pointer-events: none;
  background:
    linear-gradient(rgba(37, 84, 200, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 84, 200, .16) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(650px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 82%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 82%);
  opacity: .55;
  animation: floorMove 5s linear infinite;
}
@keyframes floorMove {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 46px, 0 46px; }
}

/* Floating 3D geometry in the hero background ------------------------------ */
body.home-3d .hero-orbs { perspective: 900px; }
body.home-3d .shape3d {
  position: absolute; display: block;
  transform-style: preserve-3d; pointer-events: none;
}

/* Wireframe cubes */
body.home-3d .cube { animation: cubeSpin 22s linear infinite; }
body.home-3d .cube i {
  position: absolute; inset: 0; border-radius: 6px;
  background: rgba(37, 84, 200, .05);
  border: 1.5px solid rgba(37, 84, 200, .24);
}
body.home-3d .cube i:nth-child(1) { transform: rotateY(0deg)   translateZ(calc(var(--s) / 2)); }
body.home-3d .cube i:nth-child(2) { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
body.home-3d .cube i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
body.home-3d .cube i:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--s) / 2)); }
body.home-3d .cube i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); }
body.home-3d .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@keyframes cubeSpin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
body.home-3d .cube.c1 { --s: 58px; width: var(--s); height: var(--s); bottom: 14%; right: 4%; }
body.home-3d .cube.c2 {
  --s: 36px; width: var(--s); height: var(--s); top: 22%; left: 38%;
  animation-duration: 16s; animation-direction: reverse;
}
body.home-3d .cube.c2 i {
  background: rgba(220, 38, 38, .05);
  border-color: rgba(220, 38, 38, .22);
}

/* Tilted orbit ring with a travelling dot */
body.home-3d .ring3d {
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid rgba(37, 84, 200, .30);
  animation: ringSpin 12s linear infinite;
}
body.home-3d .ring3d::after {
  content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 14px rgba(239, 68, 68, .8);
}
@keyframes ringSpin {
  from { transform: rotateX(66deg) rotateZ(0deg); }
  to   { transform: rotateX(66deg) rotateZ(360deg); }
}
body.home-3d .ring3d.r1 { top: 12%; right: 40%; }

/* Code card: resting 3D pose replaces the flat sway animation */
body.home-3d .code-card {
  animation: none;
  transform: perspective(1200px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -8deg));
  transition: transform .6s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease;
  box-shadow:
    0 40px 80px -24px rgba(11, 42, 107, .45),
    0 22px 44px -26px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.home-3d .code-card.tilting {
  transform: perspective(1200px) rotateX(var(--rx, 4deg)) rotateY(var(--ry, -8deg)) scale(1.01);
  transition: box-shadow .3s ease;
}
body.home-3d .code-card::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 45%);
  mix-blend-mode: screen;
}

/* Soft ground shadow beneath the card */
body.home-3d .hero-visual::before {
  content: "";
  position: absolute; left: 6%; right: 6%; bottom: -38px; height: 44px;
  background: radial-gradient(50% 100% at 50% 50%, rgba(11, 42, 107, .30), transparent 72%);
  filter: blur(7px);
  z-index: 0; pointer-events: none;
}

/* Floating badges hover above the card plane */
body.home-3d .hero-badge {
  z-index: 2;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .75);
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 40px -14px rgba(15, 23, 42, .30),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.home-3d .hero-badge.b1 { animation-name: badgeFloat3d; }
body.home-3d .hero-badge.b2 { animation-name: badgeFloat3d; }
@keyframes badgeFloat3d {
  0%, 100% { transform: translateZ(64px) translateY(0); }
  50%      { transform: translateZ(64px) translateY(-12px); }
}

/* Header & buttons ---------------------------------------------------------- */
body.home-3d .site-header { box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .3); }

body.home-3d .btn-primary,
body.home-3d .btn-red {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    var(--shadow-blue);
}
body.home-3d .btn-red {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    var(--shadow-red);
}
body.home-3d .btn:active { transform: translateY(2px) scale(.99); }

/* Logos: subtle emboss ------------------------------------------------------ */
body.home-3d .logo-row span {
  color: #b9c4d6;
  text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(15, 23, 42, .16);
}

/* Cards: features, courses, blog, testimonials ------------------------------ */
body.home-3d .feature,
body.home-3d .course-card,
body.home-3d .blog-card,
body.home-3d .testi {
  box-shadow: var(--shadow-3d);
  border-color: rgba(203, 213, 225, .55);
}
body.home-3d .testi { transition: transform .25s ease, box-shadow .25s ease; }

/* Features keep true 3D so inner elements pop toward the viewer on tilt */
body.home-3d .feature { transform-style: preserve-3d; }
body.home-3d .feature .ic {
  transition: transform .35s cubic-bezier(.2, .8, .25, 1);
  box-shadow:
    0 12px 22px -8px rgba(23, 66, 163, .45),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.home-3d .feature:nth-child(2n) .ic {
  box-shadow:
    0 12px 22px -8px rgba(220, 38, 38, .40),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.home-3d .feature h3,
body.home-3d .feature p { transition: transform .35s cubic-bezier(.2, .8, .25, 1); }
body.home-3d .feature.tilting .ic { transform: translateZ(38px); }
body.home-3d .feature.tilting h3 { transform: translateZ(26px); }
body.home-3d .feature.tilting p { transform: translateZ(14px); }

/* Stat band: frosted-glass tiles with extruded numerals --------------------- */
body.home-3d .stat-band {
  background:
    radial-gradient(700px 320px at 15% -20%, rgba(255, 255, 255, .14), transparent 60%),
    var(--grad-blue);
}
body.home-3d .stat {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
  padding: 24px 14px;
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 16px 34px -16px rgba(3, 12, 40, .55);
  transition: background .25s ease;
  animation: statFloat 7s ease-in-out infinite;
}
body.home-3d .stat:nth-child(2) { animation-delay: .9s; }
body.home-3d .stat:nth-child(3) { animation-delay: 1.8s; }
body.home-3d .stat:nth-child(4) { animation-delay: 2.7s; }
@keyframes statFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
body.home-3d .stat:hover { background: rgba(255, 255, 255, .13); }
body.home-3d .stat b {
  text-shadow:
    0 2px 0 rgba(3, 12, 40, .28),
    0 10px 22px rgba(3, 12, 40, .4);
}

/* Batches table -------------------------------------------------------------- */
body.home-3d .table-wrap { box-shadow: var(--shadow-3d); }

/* FAQ -------------------------------------------------------------------------- */
body.home-3d .faq-item { transition: transform .2s ease, box-shadow .2s ease; }
body.home-3d .faq-item:hover,
body.home-3d .faq-item.open {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(23, 66, 163, .35);
}

/* CTA band: resting perspective tilt + deep brand shadow ---------------------- */
body.home-3d .cta-band {
  background:
    radial-gradient(600px 300px at 80% 0, rgba(255, 255, 255, .18), transparent 60%),
    var(--grad-brand);
  border: 1px solid rgba(255, 255, 255, .22);
  transform: perspective(1400px) rotateX(2deg);
  transition: transform .5s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease;
  box-shadow:
    0 44px 90px -30px rgba(23, 66, 163, .55),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: ctaBreathe 9s ease-in-out infinite;
}
@keyframes ctaBreathe {
  0%, 100% { transform: perspective(1400px) rotateX(2.4deg) translateY(0); }
  50%      { transform: perspective(1400px) rotateX(.6deg) translateY(-5px); }
}
body.home-3d .cta-band.tilting {
  animation: none;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: box-shadow .3s ease;
}

/* Promo flyer gets the same depth language ------------------------------------ */
body.home-3d .flyer {
  box-shadow:
    0 50px 100px -30px rgba(3, 12, 40, .6),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Motion & device safety ------------------------------------------------------ */
@media (hover: none), (pointer: coarse) {
  body.home-3d [data-tilt]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-3d .code-card { transform: none; }
  body.home-3d .hero-badge.b1,
  body.home-3d .hero-badge.b2 { animation: none; }
  body.home-3d .cta-band { transform: none; animation: none; }
  body.home-3d [data-tilt]::after { display: none; }
  body.home-3d .hero-floor,
  body.home-3d .shape3d,
  body.home-3d .cube,
  body.home-3d .stat { animation: none; }
}
@media (max-width: 960px) {
  body.home-3d .hero-floor { opacity: .35; }
  body.home-3d .code-card { transform: perspective(1200px) rotateX(2deg) rotateY(-4deg); }
  body.home-3d .shape3d { opacity: .45; }
}
@media (max-width: 760px) {
  body.home-3d .stat { padding: 18px 10px; }
  body.home-3d .cta-band { transform: none; animation: none; }
  body.home-3d .shape3d { display: none; }
}