/* ============================================================
   DreamLearn — Premium 3D layer
   Shared across every page: tilt cards, glass depth, orb canvas,
   scroll-reveal, magnetic buttons. Additive — does not override
   existing layout, only enhances it.
   ============================================================ */

:root{
  --p3d-shadow-soft: 0 10px 30px rgba(15,23,42,0.08);
  --p3d-shadow-deep: 0 30px 70px rgba(20,40,120,0.22);
  --p3d-shadow-lift: 0 18px 45px rgba(42,110,245,0.28);
  --p3d-glass-bg: rgba(255,255,255,0.62);
  --p3d-glass-border: rgba(255,255,255,0.55);
}

/* ---------- Knowledge Orb canvas mounts ---------- */
.knowledge-orb-canvas{
  position:relative;
  width:100%;
  height:100%;
  pointer-events:none;
  will-change:transform;
}
.knowledge-orb-canvas canvas{ pointer-events:none; }

.orb-hero-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.orb-hero-wrap .knowledge-orb-canvas{
  position:absolute;
  top:50%; left:50%;
  width:min(720px,90vw);
  height:min(720px,90vw);
  transform:translate(-50%,-50%);
}

.orb-badge{
  width:64px; height:64px;
  display:inline-block;
}

/* ---------- 3D tilt cards ---------- */
.tilt-3d{
  transform-style:preserve-3d;
  transition:transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
  will-change:transform;
}
.tilt-3d:hover{
  box-shadow:var(--p3d-shadow-deep);
  z-index:2;
}
.tilt-3d-inner{
  transform:translateZ(28px);
}

/* Reduced motion: kill tilt entirely */
@media (prefers-reduced-motion: reduce){
  .tilt-3d{ transition:none !important; transform:none !important; }
}

/* ---------- Glass depth panels ---------- */
.glass-3d{
  background:var(--p3d-glass-bg);
  border:1px solid var(--p3d-glass-border);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:var(--p3d-shadow-soft);
}

/* ---------- Magnetic premium buttons ---------- */
.btn-primary, .btn-hero, .btn-outline, .btn-hero-outline{
  transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, filter 0.25s ease !important;
}
.btn-primary:hover, .btn-hero:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:var(--p3d-shadow-lift);
}
.btn-outline:hover, .btn-hero-outline:hover{
  transform:translateY(-2px);
}

/* ---------- Scroll reveal (3D rise) ---------- */
.reveal-3d{
  opacity:0;
  transform:translateY(38px) rotateX(6deg);
  transform-origin:bottom center;
  transition:opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal-3d.is-visible{
  opacity:1;
  transform:translateY(0) rotateX(0deg);
}
@media (prefers-reduced-motion: reduce){
  .reveal-3d{ opacity:1; transform:none; transition:none; }
}

/* ---------- Floating ambient shapes ---------- */
@keyframes p3d-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(4deg); }
}
.p3d-floating{ animation:p3d-float 5.5s ease-in-out infinite; }

/* ---------- Depth grid perspective wrapper (optional) ---------- */
.p3d-perspective{
  perspective:1400px;
}

/* ---------- Premium sheen sweep on hover for cards ---------- */
.tilt-3d{ position:relative; overflow:hidden; }
.tilt-3d::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg);
  transition:left 0.75s ease;
  pointer-events:none;
  z-index:1;
}
.tilt-3d:hover::after{ left:130%; }