/* ============================================================
   NEXTGEN DIGITAL ACADEMY
   Custom Utility Classes
   ============================================================
   These extend Tailwind with brand-specific one-purpose classes.
   All use CSS Custom Properties so they cascade from :root.
   ============================================================ */


/* ============================================================
   GLOW UTILITIES
   ============================================================ */

.glow-xs   { box-shadow: 0 0  8px rgba(255,102,0,0.18); }
.glow-sm   { box-shadow: 0 0 15px rgba(255,102,0,0.28); }
.glow-md   { box-shadow: 0 0 28px rgba(255,102,0,0.45); }
.glow-lg   { box-shadow: 0 0 52px rgba(255,102,0,0.58); }
.glow-xl   { box-shadow: 0 0 80px rgba(255,102,0,0.68); }

.glow-hover-md { transition: box-shadow var(--ease-base); }
.glow-hover-md:hover { box-shadow: 0 0 28px rgba(255,102,0,0.45); }

.glow-hover-lg { transition: box-shadow var(--ease-base); }
.glow-hover-lg:hover { box-shadow: 0 0 52px rgba(255,102,0,0.58); }

/* Text glow */
.text-glow {
  text-shadow:
    0 0 18px rgba(255,102,0,0.55),
    0 0 38px rgba(255,102,0,0.28);
}

.text-glow-sm {
  text-shadow: 0 0 12px rgba(255,102,0,0.45);
}

/* Inner glow on panels */
.inner-glow {
  box-shadow: inset 0 0 45px rgba(255,102,0,0.07);
}

.inner-glow-lg {
  box-shadow: inset 0 0 80px rgba(255,102,0,0.12);
}


/* ============================================================
   GRADIENT UTILITIES
   ============================================================ */

/* Background gradients */
.bg-grad-orange       { background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-l) 100%); }
.bg-grad-orange-v     { background: linear-gradient(180deg, var(--c-orange) 0%, var(--c-orange-d) 100%); }
.bg-grad-dark         { background: linear-gradient(180deg, var(--bg-dark)  0%, var(--bg-card)    100%); }
.bg-grad-card         { background: linear-gradient(135deg, var(--bg-card)  0%, var(--bg-surface) 100%); }
.bg-radial-orange     { background: radial-gradient(ellipse at center,     rgba(255,102,0,0.14) 0%, transparent 65%); }
.bg-radial-tr         { background: radial-gradient(ellipse at top right,  rgba(255,102,0,0.14) 0%, transparent 60%); }
.bg-radial-tl         { background: radial-gradient(ellipse at top left,   rgba(255,102,0,0.14) 0%, transparent 60%); }
.bg-radial-br         { background: radial-gradient(ellipse at bottom right,rgba(255,102,0,0.14) 0%, transparent 60%); }
.bg-mesh              { background-image: var(--tw-bg-mesh-grid, none); }

/* Text gradients */
.text-grad-orange {
  background: linear-gradient(135deg, var(--c-orange) 0%, var(--c-orange-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad-warm {
  background: linear-gradient(135deg, #FF9A3C 0%, #FFD580 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-grad-white {
  background: linear-gradient(135deg, #FFFFFF 0%, #A0A0A0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   BORDER UTILITIES
   ============================================================ */

.border-dim    { border-color: rgba(255,102,0,0.15); }
.border-mid    { border-color: rgba(255,102,0,0.35); }
.border-bright { border-color: rgba(255,102,0,0.65); }
.border-full   { border-color: var(--c-orange); }

/* Gradient border (requires position: relative + overflow: visible) */
.border-grad-orange {
  position: relative;
  isolation: isolate;
}

.border-grad-orange::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--c-orange), var(--c-orange-l), rgba(255,102,0,0.1));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Subtle dark border */
.border-subtle { border: 1px solid var(--bg-border); }
.border-surface { border: 1px solid var(--bg-surface); }


/* ============================================================
   COLOR UTILITIES
   ============================================================ */

.text-orange    { color: var(--c-orange); }
.text-orange-l  { color: var(--c-orange-l); }
.text-orange-d  { color: var(--c-orange-d); }
.text-sec       { color: var(--text-secondary); }
.text-muted-b   { color: var(--text-muted); }

.bg-orange      { background-color: var(--c-orange); }
.bg-orange-dim  { background-color: rgba(255,102,0,0.10); }
.bg-orange-mid  { background-color: rgba(255,102,0,0.20); }
.bg-dark-card   { background-color: var(--bg-card); }
.bg-dark-surf   { background-color: var(--bg-surface); }


/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.font-display       { font-family: var(--font-display); }
.font-mono          { font-family: var(--font-mono); }
.tracking-display   { letter-spacing: -0.03em; }
.tracking-heading   { letter-spacing: -0.02em; }
.tracking-caps      { letter-spacing: 0.08em; text-transform: uppercase; }
.leading-tight-b    { line-height: 1.1; }
.leading-body       { line-height: 1.75; }

/* Truncation helpers */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   INTERACTIVE UTILITIES
   ============================================================ */

/* Hover lift + shadow */
.hover-lift {
  transition: transform var(--ease-spring), box-shadow var(--ease-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

/* Hover orange text */
.hover-orange {
  transition: color var(--ease-base);
}
.hover-orange:hover { color: var(--c-orange); }

/* Hover glow border */
.hover-border-orange {
  border: 1px solid transparent;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}

.hover-border-orange:hover {
  border-color: rgba(255,102,0,0.4);
  box-shadow: 0 0 18px rgba(255,102,0,0.20);
}

/* Scale-in on hover */
.hover-scale {
  transition: transform var(--ease-spring);
}
.hover-scale:hover { transform: scale(1.04); }

/* Opacity dimming */
.hover-dim {
  transition: opacity var(--ease-base);
}
.hover-dim:hover { opacity: 0.75; }


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

/* Full-bleed (bypass container padding) */
.bleed {
  margin-inline: calc(var(--container-px) * -1);
}

/* Auto-fit grids */
.auto-grid-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.auto-grid-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.auto-grid-lg { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.auto-grid-xl { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

/* Sticky top with navbar offset */
.sticky-below-nav {
  position: sticky;
  top: var(--navbar-h);
  z-index: var(--z-raised);
}

/* Absolute centering */
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Stretch to fill parent */
.fill-parent {
  position: absolute;
  inset: 0;
}

/* Pointer-events pass-through */
.no-events { pointer-events: none; }
.events     { pointer-events: auto; }


/* ============================================================
   GLASSMORPHISM / BLUR UTILITIES
   ============================================================ */

.blur-backdrop-sm {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blur-backdrop {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.blur-backdrop-lg {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}


/* ============================================================
   SPACING UTILITIES
   ============================================================ */

.section-gap    { padding-block: var(--section-py); }
.section-gap-sm { padding-block: calc(var(--section-py) * 0.55); }
.section-gap-lg { padding-block: calc(var(--section-py) * 1.6); }

.pt-navbar { padding-top: var(--navbar-h); }


/* ============================================================
   PERFORMANCE UTILITIES
   ============================================================ */

.will-transform { will-change: transform; }
.will-opacity   { will-change: opacity; }
.gpu            { transform: translateZ(0); }
.contain-paint  { contain: paint; }
.contain-layout { contain: layout; }


/* ============================================================
   SCROLLBAR HIDE (for horizontal sliders)
   ============================================================ */

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }


/* ============================================================
   RESPONSIVE SHOW / HIDE HELPERS
   ============================================================ */

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}


/* ============================================================
   PRINT RESET
   ============================================================ */

@media print {
  .no-print { display: none !important; }
  body { background: white; color: black; }
  .glow-orb, #three-canvas { display: none; }
}