/* =========================================================
   PREVIEW-FIRST STAGING
   ========================================================= */

#bg-canvas,
.edu-preview,
.bg-gradient-overlay,
header,
main,
.scroll-indicator,
.footer-basic{
  transition:opacity .55s ease, visibility .55s ease;
}

#bg-canvas{
  position:fixed;
  left:0;
  top:0;
  width:var(--edu-vw, 100%);
  height:var(--edu-vh, 100svh);
  z-index:0;
  pointer-events:none;
  display:block;
  opacity:0;
}

body.glb-live #bg-canvas{
  opacity:1;
}

.edu-preview{
  position:fixed;
  inset:0;
  width:var(--edu-vw, 100%);
  height:var(--edu-vh, 100svh);
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
  visibility:visible;
}

.edu-preview-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:none;
  filter:saturate(1.01) contrast(1.01) brightness(.9);
}

.edu-preview-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(166,255,181,0.10), transparent 48%),
    radial-gradient(circle at 80% 18%, rgba(142,153,251,0.12), transparent 54%),
    linear-gradient(
      to bottom,
      rgba(8,10,14,0.14),
      rgba(8,10,14,0.34) 58%,
      rgba(8,10,14,0.62)
    );
}

body.glb-live .edu-preview{
  opacity:0;
  visibility:hidden;
}

/* Subtle atmospheric overlay above preview and GLB. */
.bg-gradient-overlay{
  position:fixed;
  left:0;
  top:0;
  width:var(--edu-vw, 100%);
  height:var(--edu-vh, 100svh);
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(166,255,181,0.06), transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(142,153,251,0.08), transparent 60%),
    linear-gradient(to bottom, rgba(11,13,18,0.10), rgba(11,13,18,0.18));
  mix-blend-mode:soft-light;
}

/* Stable scroll runway for the camera animation. */
main{
  min-height:280svh;
  position:relative;
  z-index:2;
}

/* =========================================================
   PAGE VARIABLES / ACTIVE TEXT SUPPORT
   ========================================================= */

:root{
  --cloud-pad-y:.55em;
  --cloud-pad-x:.85em;
  --cloud-radius:20px;
  --cloud-alpha:1;
  --cloud-vis:0;
  --cloud-blur:14px;
  --cloud-border:rgba(255,255,255,0.02);
  --cloud-shadow:0 10px 26px rgba(0,0,0,0.22);
}

html.core-bg-fade body{
  transition:background .6s ease;
  background:var(--bg);
}

.hero-secondary{
  font-size:1.02rem;
  line-height:1.9;
  color:rgba(226,232,240,0.92);
  max-width:42rem;
  text-shadow:0 6px 25px rgba(0,0,0,0.55);
}

@media (min-width:1440px){
  .hero-secondary{
    max-width:56rem;
  }

  .metric-card{
    max-width:720px;
  }
}

@media (max-width:900px){
  .program-highlights{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}

/* =========================================================
   APPLE-STYLE LOADER CHIP
   ========================================================= */

.loader{
  position:fixed;
  left:clamp(16px, 2vw, 28px);
  bottom:clamp(16px, 2vw, 26px);
  z-index:35;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  pointer-events:none;
}

.loader-card{
  position:relative;
  width:min(360px, calc(var(--edu-vw, 100%) - 32px));
  border-radius:18px;
  padding:14px 14px 12px;
  border:1px solid rgba(148,163,184,0.28);
  background:rgba(10,12,18,0.52);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 46px rgba(0,0,0,0.42);
  text-align:left;
}

body.glb-live .loader{
  opacity:0;
  visibility:hidden;
}

.loader-title{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:1.05rem;
  margin-bottom:2px;
}

.loader-sub{
  color:rgba(148,163,184,0.95);
  font-size:.92rem;
  margin-bottom:12px;
}

.loader-bar{
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,0.18);
  overflow:hidden;
  border:1px solid rgba(148,163,184,0.22);
}

.loader-fill{
  height:100%;
  width:0%;
  background:var(--brand-grad);
  border-radius:999px;
  transition:width .12s linear;
}

.loader-pct{
  margin-top:10px;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(226,232,240,0.92);
}

@media (max-width:900px){
  .loader{
    left:16px;
    right:16px;
    bottom:16px;
  }

  .loader-card{
    width:100%;
  }
}

/* =========================================================
   CONTENT
   ========================================================= */

.metric-card{
  border-radius:18px;
  padding:14px 10px 12px;
  background:transparent;
  max-width:600px;
}

.metric-title .metric-title-main{
  display:block;
}

.metric-card.align-left{
  margin-right:auto;
  text-align:left;
}

.metric-card.align-right{
  margin-left:auto;
  text-align:right;
}

.program-highlights{
  display:flex;
  flex-direction:column;
  gap:72px;
  overflow:visible;
}

.section{
  padding:40px 0 8px;
}

/* =========================================================
   CLOUD SYSTEM
   ========================================================= */

.cloud-text{
  position:relative;
  display:inline-block;
  isolation:isolate;
  z-index:1;
  max-width:100%;
  padding:var(--cloud-pad-y) var(--cloud-pad-x);
  border-radius:var(--cloud-radius);
  overflow:visible;
  font-weight:400;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
}

.cloud-text::before{
  z-index:-1;
  content:"";
  position:absolute;
  inset:-7px 0;
  border-radius:calc(var(--cloud-radius) + 6px);
  pointer-events:none;
  background:
    radial-gradient(
      120% 140% at 50% 50%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.06) 48%,
      rgba(0,0,0,0.00) 74%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.06) 45%,
      rgba(255,255,255,0.03) 100%
    ),
    rgba(34,36,39,0.48);
  backdrop-filter:blur(var(--cloud-blur)) saturate(118%);
  -webkit-backdrop-filter:blur(var(--cloud-blur)) saturate(118%);
  border:1px solid var(--cloud-border);
  box-shadow:var(--cloud-shadow);
  opacity:calc(var(--cloud-vis) * var(--cloud-alpha));
  transition:opacity .55s ease;
}

.hero-secondary.cloud-text::before{
  inset:-14px 0;
}

.reveal-text{
  will-change:opacity, transform, filter;
  backface-visibility:hidden;
  transform:translateZ(0);
}

html.cloud-cut{
  --cloud-vis:0;
}

html.cloud-cut .cloud-text::before{
  transition:none !important;
  opacity:0 !important;
}

html.cloud-in{
  --cloud-vis:1;
}

html.cloud-in .cloud-text::before{
  transition:opacity .55s ease !important;
}

html.cloud-hold{
  --cloud-vis:1;
}

html.cloud-hold .cloud-text::before{
  transition:none !important;
}

html.cloud-out{
  --cloud-vis:0;
}

html.cloud-out .cloud-text::before{
  transition:opacity 3s ease !important;
}

html.cloud-idle{
  --cloud-vis:0;
}

html.cloud-idle .cloud-text::before{
  transition:none !important;
  opacity:0 !important;
}

@media (max-width:780px){
  :root{
    --cloud-pad-y:.50em;
    --cloud-pad-x:.75em;
    --cloud-radius:16px;
  }

  .cloud-text::before{
    inset:-10px 0;
  }

  .hero-secondary.cloud-text::before{
    inset:-14px 0;
  }
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .cloud-text::before{
    inset:-8px 0;
    border-radius:calc(var(--cloud-radius) + 8px);
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    background:
      radial-gradient(
        120% 140% at 50% 50%,
        rgba(18,22,26,0.16) 0%,
        rgba(18,22,26,0.16) 80%,
        rgba(18,22,26,0.00) 100%
      ),
      radial-gradient(
        90% 90% at 35% 35%,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.02) 55%,
        rgba(255,255,255,0.00) 85%
      );
  }
}

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

.spaceredu-xl{
  height:200px;
}

.spaceredu-xxl{
  height:600px;
}

.spaceredu-xxxl{
  height:1000px;
}

/* =========================================================
   SCROLL UI
   ========================================================= */

.scroll-indicator{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(148,163,184,0.95);
  pointer-events:none;
}

.scroll-mouse{
  width:24px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.45);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:6px;
  overflow:hidden;
  background:rgba(5,7,11,0.25);
  backdrop-filter:blur(10px);
}

.scroll-wheel{
  width:4px;
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,0.9);
  animation:wheelMove 1.6s ease-in-out infinite;
}

@keyframes wheelMove{
  0%{
    transform:translateY(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  80%{
    transform:translateY(10px);
    opacity:0;
  }

  100%{
    opacity:0;
  }
}

.enter-classroom-btn{
  position:fixed;
  left:clamp(16px, 2vw, 28px);
  bottom:calc(clamp(16px, 2vw, 26px) + 148px);
  z-index:96;
  min-height:46px;
  padding:12px 18px;
  border:1px solid rgba(148,163,184,0.34);
  border-radius:999px;
  background:rgba(10,12,18,0.58);
  color:rgba(255,255,255,0.96);
  font:inherit;
  font-size:.95rem;
  font-weight:700;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 46px rgba(0,0,0,0.34);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:
    opacity .28s ease,
    transform .28s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.enter-classroom-btn:hover{
  background:rgba(18,22,30,0.74);
  border-color:rgba(166,255,181,0.52);
  box-shadow:0 22px 54px rgba(0,0,0,0.42);
}

.enter-classroom-btn:focus-visible{
  outline:none;
  border-color:rgba(166,255,181,0.8);
  box-shadow:
    0 0 0 3px rgba(166,255,181,0.18),
    0 22px 54px rgba(0,0,0,0.42);
}

.enter-classroom-btn.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

@media (max-width:768px){
  .enter-classroom-btn{
    left:16px;
    right:16px;
    bottom:132px;
    width:auto;
    max-width:none;
    text-align:left;
  }
}

/* =========================================================
   SCROLL TO TOP
   ========================================================= */

#scrollTopBtn{
  position:fixed;
  right:22px;
  bottom:28px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background .2s ease;
  z-index:95;
}

#scrollTopBtn:hover{
  background:rgba(255,255,255,0.22);
}

#scrollTopBtn.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   EDU INTRO TEXT ORDER / CLASSROOM STORY RHYTHM
   ========================================================= */

.edu-intro{
  position:relative;
  min-height:1200px;
  padding-top:clamp(34px, 7vh, 96px);
  z-index:2;
  transform:translateY(200px);
}

.edu-intro-line{
  position:relative;
  display:block;
  margin:0;
  width:max-content;
  max-width:min(680px, 86vw);
  text-wrap:balance;
}

.edu-intro-line--first{
  margin-left:clamp(14px, 3vw, 54px);
}

.edu-intro-line--second{
  margin-top:clamp(26px, 5vh, 72px);
  margin-left:auto;
  margin-right:clamp(18px, 12vw, 220px);
}

.edu-intro-line--third{
  margin-top:300px;
  margin-left:clamp(14px, 4vw, 78px);
}

.edu-story-section{
  padding-top:0;
}

@media (max-width:780px){
  .edu-intro{
    min-height:950px;
    padding-top:clamp(28px, 7vh, 70px);
  }

  .edu-intro-line{
    width:auto;
    max-width:92vw;
  }

  .edu-intro-line--first,
  .edu-intro-line--second,
  .edu-intro-line--third{
    margin-left:14px;
    margin-right:14px;
  }

  .edu-intro-line--second{
    margin-top:clamp(36px, 7vh, 72px);
  }

  .edu-intro-line--third{
    margin-top:260px;
  }
}

/* =========================================================
   EDU STORY TYPOGRAPHY NORMALIZATION
   ========================================================= */

:root{
  --edu-story-font-size:1.02rem;
  --edu-story-line-height:1.9;
  --edu-story-weight:800;
}

.edu-intro-line,
.edu-intro-line strong,
.metric-title,
.metric-title .metric-title-main{
  font-size:var(--edu-story-font-size) !important;
  line-height:var(--edu-story-line-height) !important;
  font-weight:var(--edu-story-weight) !important;
  letter-spacing:-0.01em;
}

.metric-title{
  margin:0 0 .7rem;
}

@media (max-width:780px){
  :root{
    --edu-story-font-size:1rem;
    --edu-story-line-height:1.75;
  }
}