/*
 * Arpan Staff Portal — assets/depth.css
 * Copyright (c) 2026 Arpan. All rights reserved.
 *
 * A lightweight "depth" layer: elevation, tilt-on-hover, glass, and entrance
 * hooks that make the portal feel three-dimensional without any heavy 3D
 * library. Pure CSS + GPU-accelerated transforms, phone-friendly, and fully
 * disabled under prefers-reduced-motion.
 */

/* ---- Elevation scale: cards that feel like they float at different heights ---- */
.ar-elev-1 { box-shadow: 0 1px 2px rgba(10,40,38,0.06), 0 2px 6px rgba(10,40,38,0.05); }
.ar-elev-2 { box-shadow: 0 2px 4px rgba(10,40,38,0.07), 0 6px 16px rgba(10,40,38,0.08); }
.ar-elev-3 { box-shadow: 0 4px 8px rgba(10,40,38,0.08), 0 14px 34px rgba(10,40,38,0.12); }
.ar-elev-hover { transition: box-shadow .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1); will-change: transform; }
.ar-elev-hover:hover { box-shadow: 0 6px 14px rgba(10,40,38,0.10), 0 22px 48px rgba(10,40,38,0.16); transform: translateY(-3px); }

/* ---- Tilt: cards subtly rotate toward the cursor (JS sets the CSS vars) ---- */
.ar-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateZ(0);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.ar-tilt-reset { transition: transform .5s cubic-bezier(.22,1,.36,1); }
/* An inner layer can be pushed forward for a real parallax-of-depth feel */
.ar-tilt-pop { transform: translateZ(28px); transform-style: preserve-3d; }

/* ---- Glass: frosted, layered surfaces (already used on modals; reusable here) ---- */
.ar-glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.5);
}
html.no-backdrop .ar-glass { background: rgba(255,255,255,0.92); }

/* ---- Entrance reveals: CSS-only so content is NEVER dependent on JS to appear ----
 * Elements animate in via a pure CSS keyframe that runs with no JavaScript at all.
 * If GSAP is present, motion.js adds .ar-gsap-motion to opt these out and drive a
 * richer animation instead. Either way, content always ends fully visible. */
@keyframes arRise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes arFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes arScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

[data-animate] { opacity: 1; } /* default visible — the safe baseline */
html:not(.ar-gsap-motion) [data-animate="rise"]  { animation: arRise  .6s cubic-bezier(.22,1,.36,1) both; }
html:not(.ar-gsap-motion) [data-animate="fade"]  { animation: arFade  .6s ease both; }
html:not(.ar-gsap-motion) [data-animate="scale"] { animation: arScale .6s cubic-bezier(.22,1,.36,1) both; }
/* Honour per-element stagger delays declared inline via --animate-delay if set. */
html:not(.ar-gsap-motion) [data-animate][style*="--animate-delay"] { animation-delay: var(--animate-delay); }

/* When GSAP drives the motion instead, hide only briefly while GSAP takes over. */
html.ar-gsap-motion [data-animate] { opacity: 0; }

/* ---- Ambient depth background layer (for showpiece screens) ---- */
.ar-depth-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.ar-depth-orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
  will-change: transform;
}

/* ---- Respect reduced motion: strip all movement, keep the layout intact ---- */
@media (prefers-reduced-motion: reduce) {
  .ar-elev-hover, .ar-tilt, .ar-tilt-reset { transition: none !important; transform: none !important; }
  .ar-elev-hover:hover { transform: none; }
  [data-animate] { opacity: 1 !important; transform: none !important; }
  .ar-depth-orb { display: none; }
}

/* ---- Login pages: clean, centered, consistent across IT and A&L. No 3D/tilt
 * effects here on purpose — a login screen must be simple and bulletproof. ---- */
.ar-login-wrap { max-width: 440px; margin: 0 auto; padding-top: 40px; }
.ar-login-card { box-shadow: 0 2px 6px rgba(10,40,38,0.07), 0 12px 32px rgba(10,40,38,0.10); }