/* =====================================================================
   LIGHT-3D LAYER · Alagar Public School  (decorative only)
   Real 3D depth via a single perspective context on the hero group.
   Disabled entirely for reduced-motion users; skipped on touch in JS.
   ===================================================================== */

/* perspective lives on the DIRECT parent of the element we rotate */
.hero .wrap{perspective:1100px}
.hero-visual{transform-style:preserve-3d;transition:transform .16s ease-out;will-change:transform}

/* the photo frame + its glare highlight */
.hero-card-img{position:relative;transform:translateZ(24px);box-shadow:0 36px 70px rgba(8,26,15,.45)}
.hero-card-img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,22%),rgba(255,255,255,.45),transparent 48%);
  opacity:0;transition:opacity .25s ease;mix-blend-mode:overlay}
.hero-visual:hover .hero-card-img::after{opacity:1}

/* badges float forward at different depths -> automatic parallax on tilt */
.hero-badge{transform:translateZ(72px)}
.hero-badge.tr{transform:translateZ(104px)}
.hero__dots{transition:transform .3s ease-out;will-change:transform}

/* card tilt (self-contained perspective set in JS) */
.tilt{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease;will-change:transform}
.tilt:hover{box-shadow:0 26px 52px rgba(20,40,25,.20)}

/* gentle floating depth on the welcome badges */
@keyframes aps-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.about-media .exp-badge{animation:aps-float 5s ease-in-out infinite}
.about-media .stat-badge{animation:aps-float 5.6s ease-in-out infinite;animation-delay:1.1s}

@media (prefers-reduced-motion: reduce){
  .hero-visual,.hero-card-img,.hero-badge,.hero__dots,.tilt{transform:none!important;transition:none!important;animation:none!important}
  .hero-card-img::after{display:none}
  .about-media .exp-badge,.about-media .stat-badge{animation:none!important}
}