/* ════════════════════════════════════════════════════════════════════
   GHS PREMIUM ENHANCEMENT LAYER
   Dark premium + glassmorphism · subtle motion · "less but better"
   ════════════════════════════════════════════════════════════════════ */

/* ── Motion-safe defaults ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Custom scrollbar ───────────────────────────────────────── */
html{scroll-behavior:smooth}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0e0e0e}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1d4ed8,#3b82f6);border-radius:8px;border:2px solid #0e0e0e}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3b82f6,#60a5fa)}
* { scrollbar-color: #3b82f6 #0e0e0e; scrollbar-width: thin; }

/* ── Body grain + ambient gradient orbs (page-wide depth) ──── */
body{position:relative}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:
    radial-gradient(circle at 12% 18%, rgba(59,130,246,.07), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(96,165,250,.05), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(167,139,250,.03), transparent 55%);
  animation: ambientShift 22s ease-in-out infinite alternate;
}
@keyframes ambientShift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-20px,15px,0) scale(1.05)}
}

/* ── Scroll progress bar ───────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,#1d4ed8,#3b82f6,#60a5fa,#3b82f6);
  background-size:200% 100%;
  box-shadow:0 0 14px rgba(59,130,246,.55), 0 0 4px rgba(59,130,246,.9);
  transition:width .12s ease-out;
  animation: progressShimmer 2.5s linear infinite;
}
@keyframes progressShimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ── Page-load fade transition ─────────────────────────────── */
/* Splash handles initial paint; body only fades on navigation out */
body.page-leave{opacity:0;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease}

/* ── Page-load splash (very brief, dismisses on load) ──────── */
.ghs-splash{
  position:fixed;inset:0;z-index:99999;background:#0e0e0e;display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.ghs-splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.ghs-splash-ring{
  width:54px;height:54px;border-radius:50%;
  border:2.5px solid rgba(59,130,246,.18);
  border-top-color:#3b82f6;
  animation:splashSpin .9s linear infinite;
  filter:drop-shadow(0 0 12px rgba(59,130,246,.45));
}
@keyframes splashSpin{to{transform:rotate(360deg)}}

/* ── Nav glass + scrolled state ────────────────────────────── */
nav{
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease, backdrop-filter .35s ease;
  background:linear-gradient(180deg, rgba(20,20,20,.78), rgba(20,20,20,.55))!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
nav.scrolled{
  background:rgba(14,14,14,.82)!important;
  border-bottom-color:rgba(59,130,246,.18)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.5), 0 1px 0 rgba(59,130,246,.08) inset;
  padding-top:10px!important;padding-bottom:10px!important;
}
.nav-links a{position:relative}
.nav-links a:not(.nav-cta):not(.nav-ai)::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,transparent,#3b82f6,transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .3s ease;border-radius:2px;
}
.nav-links a:not(.nav-cta):not(.nav-ai):hover::after,
.nav-links a.active:not(.nav-cta):not(.nav-ai)::after{transform:scaleX(1)}

/* ── Buttons: smooth hover, scale, glow, ripple, loading state ── */
.btn-primary,.nav-cta,.nav-signup,.fcourse-btn-enroll,.chat-send{
  position:relative;overflow:hidden;
  transition: background .25s ease, color .25s ease, box-shadow .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease!important;
  will-change: transform, box-shadow;
}
.btn-primary::before,.nav-cta::before,.nav-signup::before,.fcourse-btn-enroll::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  transform:translateX(-120%);transition:transform .7s ease;pointer-events:none;
}
.btn-primary:hover,.nav-cta:hover,.nav-signup:hover,.fcourse-btn-enroll:hover{
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 12px 32px rgba(59,130,246,.42), 0 0 0 1px rgba(96,165,250,.4) inset!important;
  filter:saturate(1.1);
}
.btn-primary:hover::before,.nav-cta:hover::before,.nav-signup:hover::before,.fcourse-btn-enroll:hover::before{transform:translateX(120%)}
.btn-primary:active,.nav-cta:active,.nav-signup:active,.fcourse-btn-enroll:active{transform:translateY(0) scale(.98);transition-duration:.05s!important}

.btn-ghost,.fcourse-btn-detail,.nav-signin{
  transition: border-color .3s ease, background .3s ease, color .3s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease!important;
}
.btn-ghost:hover,.fcourse-btn-detail:hover,.nav-signin:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.25) inset;
}

/* Ripple (added via JS) */
.btn-ripple{
  position:absolute;border-radius:50%;transform:scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  animation:ripple .6s ease-out forwards;pointer-events:none;
}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Loading state */
.btn-primary.is-loading,.nav-cta.is-loading,.nav-signup.is-loading,.fcourse-btn-enroll.is-loading{
  color:transparent!important;pointer-events:none;
}
.btn-primary.is-loading::after,.nav-cta.is-loading::after,.nav-signup.is-loading::after,.fcourse-btn-enroll.is-loading::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(0,0,0,.25);border-top-color:#111;border-radius:50%;
  animation:splashSpin .7s linear infinite;
}

/* ── Cards: 3D tilt prep + soft lift + glow ────────────────── */
.module-card,.review-card,.step,.fcourse-card,.feature-card,.role-card,.tier-card,.plan-card{
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s ease, border-color .35s ease, background .35s ease!important;
  transform-style:preserve-3d;will-change:transform, box-shadow;
  position:relative;
}
.module-card{
  background:linear-gradient(160deg, rgba(35,35,35,.95), rgba(28,28,28,.95))!important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.module-card:hover,.review-card:hover,.fcourse-card:hover,.feature-card:hover,.role-card:hover,.tier-card:hover,.plan-card:hover{
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(59,130,246,.22) inset,
    0 0 38px rgba(59,130,246,.16)!important;
}

/* Tilt children pop a little (true 3D layering) */
.tilt-pop{transform:translateZ(40px)}
.module-card .module-icon,.step .step-icon{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.module-card:hover .module-icon,.step:hover .step-icon{transform:translateZ(30px) scale(1.08) rotate(-3deg)}

/* Glow border sweep on card hover */
.module-card::after,.fcourse-card::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg), transparent 0deg, rgba(59,130,246,.55) 45deg, transparent 90deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px;opacity:0;transition:opacity .35s ease;
}
.module-card:hover::after,.fcourse-card:hover::after{opacity:1;animation:angSpin 4s linear infinite}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes angSpin{to{--ang:360deg}}

/* ════════════════════════════════════════════════════════════
   HERO CINEMATIC LAYERS — video bg, three.js canvas, depth layers
   ════════════════════════════════════════════════════════════ */
.hero{overflow:hidden}
.hero-video,
.hero-three,
.hero-overlay{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.hero-video{
  z-index:0;object-fit:cover;
  filter:brightness(.42) saturate(1.15) contrast(1.05);
  transform:scale(1.08);
  will-change:transform;
  opacity:0;transition:opacity 1.2s ease;
}
.hero-video.loaded{opacity:1}
.hero-three{z-index:1;mix-blend-mode:screen;opacity:.85}
.hero-overlay{
  z-index:2;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(0,0,0,.30), rgba(0,0,0,.70) 90%),
    linear-gradient(180deg, rgba(20,20,20,.55) 0%, rgba(20,20,20,.30) 40%, rgba(20,20,20,.85) 100%);
}
.hero-overlay::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(59,130,246,.10), transparent 38%),
    radial-gradient(circle at 82% 78%, rgba(96,165,250,.07), transparent 42%);
  mix-blend-mode:screen;
}
.hero-layout{position:relative;z-index:3} /* keep text/CTA above all layers */
.hero-bg-orb{z-index:2} /* orbs ride on top of video but below text */

/* Vignette grain for cinematic feel */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.35;mix-blend-mode:overlay;
}

/* Depth layers (for any element wanting cinematic depth) */
.depth-back  { will-change: transform; }
.depth-mid   { will-change: transform; }
.depth-front { will-change: transform; }

/* Hero text gets a subtle cinematic float */
.hero-text{will-change:transform}
.hero-illustration{will-change:transform, opacity}
.hero-illustration img{
  border-radius:18px;
  box-shadow:
    0 28px 80px rgba(0,0,0,.65),
    0 0 60px rgba(59,130,246,.18),
    0 0 0 1px rgba(59,130,246,.18) inset!important;
}

/* Original hero gradient still applies as additional depth */
.hero{position:relative;isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(ellipse 50% 45% at 80% 70%, rgba(96,165,250,.07), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(96,165,250,.06), transparent 60%);
  filter:blur(40px);
  animation: heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%  {transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(40px,-30px,0) rotate(8deg)}
}
.hero-bg-orb{will-change:transform;transition:transform .2s ease-out}

/* Hero illustration / image breathing parallax */
.hero-illustration img,.hero-svg{will-change:transform;transition:transform .25s ease-out}

/* ── Section reveal (enhanced) ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(22px);transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.reveal-stagger.visible > *{opacity:1;transform:translateY(0)}

/* Children inside any container marked reveal that has multiple children — auto stagger */
section .reveal.visible .module-card,
section .reveal.visible .review-card,
section .reveal.visible .step{animation: cardIn .65s cubic-bezier(.2,.7,.2,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Section dividers / soft transitions between sections ──── */
section{position:relative}
section + section::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;max-width:480px;height:1px;
  background:linear-gradient(90deg,transparent, rgba(59,130,246,.25), transparent);
  pointer-events:none;
}

/* ── Stat counter pulse on increment ───────────────────────── */
.stat-num{transition:transform .15s ease}
.stat-num.bump{transform:scale(1.06)}

/* ── Section titles: subtle gradient sweep ─────────────────── */
.section-title span{
  background:linear-gradient(90deg,#3b82f6,#60a5fa,#3b82f6);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textSweep 6s linear infinite;
}
@keyframes textSweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ── Hero headline gradient + text shimmer ─────────────────── */
.hero-text h1 span{
  background:linear-gradient(120deg,#3b82f6,#60a5fa 45%, #a78bfa 55%, #60a5fa 65%, #3b82f6);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:textSweep 5s linear infinite;
}

/* ── Hero badge glow pulse ─────────────────────────────────── */
.hero-badge{
  box-shadow: 0 0 0 0 rgba(59,130,246,.18);
  animation: badgePulse 3.2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100% {box-shadow:0 0 0 0 rgba(59,130,246,.18)}
  50%     {box-shadow:0 0 0 12px rgba(59,130,246,0)}
}

/* ── 3D icons: hover pop ───────────────────────────────────── */
.icon-3d{transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease}
.module-card:hover .icon-3d,.step:hover .icon-3d,.fcourse-card:hover .icon-3d{
  filter:saturate(1.15) brightness(1.08);
}

/* ── Live chat: smoother appearance + glassy ───────────────── */
.live-chat-bubble{
  background: radial-gradient(circle at 30% 30%, #60a5fa, #1d4ed8);
  box-shadow: 0 8px 28px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.3);
}
.live-chat-bubble::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.35), transparent 70%);
  animation:pulse-ring 2.2s ease-in-out infinite;z-index:-1;
}
.chat-window{
  background:linear-gradient(160deg, rgba(38,38,38,.95), rgba(24,24,24,.95))!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08)!important;
}

/* ── Footer subtle gradient + social hover ─────────────────── */
footer{background:linear-gradient(180deg,#141414, #0e0e0e)!important;position:relative}
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent, rgba(59,130,246,.35), transparent);
}

/* ── Inputs: focus glow ────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]),textarea,select{
  transition: border-color .25s ease, box-shadow .3s ease, background .25s ease!important;
}
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,select:focus{
  outline:none;
  border-color: rgba(59,130,246,.55)!important;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 8px 24px rgba(0,0,0,.35)!important;
}

/* ── Image lazy-fade ───────────────────────────────────────── */
img{transition:filter .4s ease, transform .4s ease}
img[loading="lazy"]{will-change:filter}

/* ── Selection styling ─────────────────────────────────────── */
::selection{background:rgba(59,130,246,.35);color:#fff}

/* ── Focus rings (accessibility) ───────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #60a5fa;outline-offset:3px;border-radius:6px;
}

/* ── "Back to top" button ──────────────────────────────────── */
.to-top{
  position:fixed;bottom:96px;right:32px;z-index:199;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(59,130,246,.35);
  background:rgba(26,26,26,.85);color:#60a5fa;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease, visibility .3s ease, transform .3s ease, background .25s ease, box-shadow .3s ease;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:.9rem;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:rgba(59,130,246,.16);box-shadow:0 8px 22px rgba(59,130,246,.35)}

/* ── Mobile tuning ─────────────────────────────────────────── */
@media (max-width: 600px){
  .to-top{bottom:88px;right:18px;width:38px;height:38px}
  .live-chat-bubble{bottom:18px;right:18px}
  body::after{opacity:.22}
}

/* ════════════════════════════════════════════════════════════
   GAMING-THEMED CUSTOM CURSOR
   2 layered elements: glowing dot + trailing game-controller icon.
   Pointer events disabled, native cursor stays visible for a11y.
   ════════════════════════════════════════════════════════════ */
.ghs-cursor-dot,
.ghs-cursor-icon{
  position:fixed; top:0; left:0; pointer-events:none;
  z-index:99998; will-change:transform;
  transition: width .25s ease, height .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.ghs-cursor-dot{
  width:10px; height:10px;
  background: radial-gradient(circle at 35% 30%, #93c5fd, #3b82f6 70%);
  border-radius:50%;
  box-shadow: 0 0 12px rgba(96,165,250,0.85), 0 0 28px rgba(59,130,246,0.5);
  mix-blend-mode: screen;
}
.ghs-cursor-icon{
  width:26px; height:26px; opacity:.78;
  filter: drop-shadow(0 0 8px rgba(96,165,250,0.5));
  color:#60a5fa;
}
.ghs-cursor-icon svg{ width:100%; height:100%; display:block; transition: transform .25s ease; }

/* Active state when hovering over interactive elements */
.ghs-cursor-active .ghs-cursor-dot{
  width:14px; height:14px;
  box-shadow: 0 0 16px rgba(96,165,250,1), 0 0 36px rgba(139,92,246,0.55);
}
.ghs-cursor-active .ghs-cursor-icon{ opacity:1; color:#a78bfa; }
.ghs-cursor-active .ghs-cursor-icon svg{ transform: scale(1.15) rotate(-8deg); }

/* Click pulse on the dot */
.ghs-cursor-press .ghs-cursor-dot{ animation: cursorPress .45s ease; }
@keyframes cursorPress{
  0%   { box-shadow: 0 0 12px rgba(96,165,250,0.85), 0 0 28px rgba(59,130,246,0.5); }
  50%  { box-shadow: 0 0 24px rgba(167,139,250,1), 0 0 56px rgba(139,92,246,0.7); }
  100% { box-shadow: 0 0 12px rgba(96,165,250,0.85), 0 0 28px rgba(59,130,246,0.5); }
}

/* Hide custom cursor on touch / coarse pointers */
@media (hover: none), (pointer: coarse){
  .ghs-cursor-dot, .ghs-cursor-icon{ display:none; }
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .ghs-cursor-dot, .ghs-cursor-icon{ display:none; }
}