/* ==========================================================================
   Yujverse — Homepage styles
   ========================================================================== */

/* ---------------- Hero ----------------
   The brand video is a LIGHT logo-reveal (silver mark on near-white) that
   already contains the wordmark + "Unlock the universe within". So the hero
   is a light, airy stage: the film is the centerpiece; we add only an eyebrow
   and the brick "Unlock Now" CTA. Dark text → legible on the light footage.   */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 50% 40%, var(--gold-soft) 0%, transparent 60%),
    linear-gradient(180deg, #fdf7ec 0%, var(--cream-bg) 100%);
}
/* Ambient gold glow that drifts (parallax-friendly) */
.hero__glow {
  position: absolute; z-index: -3; width: 80vmax; height: 80vmax; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 55%, transparent) 0%, transparent 62%);
  opacity: .7; pointer-events: none;
}
.hero__media {
  position: relative; z-index: -2;
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  outline: 1px solid var(--line);
  margin-top: 1.5rem;
}
.hero__video, .hero__poster-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;            /* JS parallax target (P6) */
}
.hero__poster-fallback { z-index: -1; }   /* sits behind the video; shown if video can't play */
.hero__video { z-index: 0; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 120px 20px rgba(247,228,205,.5);   /* soft cream vignette to blend edges */
}

/* Content sits over the lower portion */
.hero__inner {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(3rem, 9vh, 7rem);
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.hero__eyebrow {
  font-family: var(--font-accent);
  letter-spacing: .32em; text-transform: uppercase;
  font-size: .82rem; color: var(--brick);
  padding: .35rem 1rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--cream) 75%, transparent);
  backdrop-filter: blur(4px);
}

/* Scroll cue */
.hero__cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid color-mix(in srgb, var(--brick) 45%, transparent);
  border-radius: var(--radius-full); display: grid; justify-items: center; padding-top: 8px;
  z-index: 2;
}
.hero__cue span { width: 4px; height: 8px; border-radius: 4px; background: var(--brick); animation: cueDrop 1.6s var(--ease-in-out) infinite; }

@keyframes cueDrop { 0% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 80%,100% { transform: translateY(14px); opacity: 0; } }

@media (max-width: 600px) {
  .hero__media { aspect-ratio: 4 / 5; }      /* taller frame on mobile so the centered logo isn't cropped */
  .hero__video, .hero__poster-fallback { object-fit: contain; background: #f4f1ec; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }            /* show the still poster instead of looping motion */
  .hero__cue span { animation: none; }
}

/* ==========================================================================
   Vision · Mission
   ========================================================================== */
.vmv__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
@media (max-width: 800px) { .vmv__split { grid-template-columns: 1fr; } }
.vmv__card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.vmv__card .num-anchor { position: absolute; top: 1rem; right: 1.4rem; opacity: .35; }
.vmv__card h3 { font-size: var(--fs-h3); color: var(--brick); margin: .2rem 0 .8rem; }
.vmv__card p { color: var(--ink-soft); }

/* ==========================================================================
   Core values
   ========================================================================== */
.values__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter); }
@media (max-width: 1000px) { .values__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .values__grid { grid-template-columns: 1fr; } }
.value-card { text-align: center; }
.value-card .card__icon { margin-inline: auto; }

/* ==========================================================================
   Slider (Golden Moments)
   ========================================================================== */
.slider { position: relative; margin-top: 2.5rem; }
.slider__viewport { overflow: hidden; padding-block: .5rem; }
.slider__track { display: flex; gap: 1.2rem; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  transition: transform var(--dur-slow) var(--ease-out); will-change: transform; }
.slide {
  flex: 0 0 clamp(240px, 30vw, 380px); margin: 0;
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--cream-warm);
}
.slide img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.slide:hover img { transform: scale(1.05); }
.slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--brick); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-md); z-index: 2; transition: background var(--dur), color var(--dur), transform var(--dur);
}
.slider__btn:hover { background: var(--brick); color: var(--cream); }
.slider__btn--prev { left: clamp(.5rem, 2vw, 2rem); }
.slider__btn--next { right: clamp(.5rem, 2vw, 2rem); }
.slider__dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.6rem; }
.slider__dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer;
  background: color-mix(in srgb, var(--brick) 25%, transparent); transition: all var(--dur);
}
.slider__dots button.is-active { background: var(--brick); width: 26px; border-radius: 5px; }
@media (max-width: 700px) { .slider__btn { display: none; } .slide { flex-basis: 78vw; } }

/* ==========================================================================
   Programs grid
   ========================================================================== */
.programs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 1000px) { .programs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .programs__grid { grid-template-columns: 1fr; } }
.program-card { text-align: left; }

/* ==========================================================================
   Numbers Speak (dark + count-up)
   ========================================================================== */
.numbers { overflow: hidden; }
.numbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); text-align: center; }
@media (max-width: 760px) { .numbers__grid { grid-template-columns: 1fr; gap: 2.2rem; } }
.stat-num__value { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--gold); line-height: 1; }
.stat-num__label { font-family: var(--font-serif); font-size: 1.15rem; color: var(--cream); margin-top: .5rem; }
.stat-num__text { color: var(--on-dark-mute); margin: .8rem auto 0; max-width: 34ch; font-size: .95rem; }

/* ==========================================================================
   Founder
   ========================================================================== */
.founder__split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
@media (max-width: 820px) { .founder__split { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.founder__media { position: relative; }
.founder__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  background: var(--cream-warm);
}
.founder__badge {
  position: absolute; bottom: -18px; right: -18px; width: 70px; height: 70px; border-radius: 50%;
  background: var(--gold); color: var(--brick); display: grid; place-items: center;
  box-shadow: var(--shadow-md); border: 4px solid var(--bg);
}
.founder__quote {
  position: relative; font-family: var(--font-serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  line-height: 1.5; color: var(--ink); margin: 1rem 0 1.6rem; padding-left: 0;
}
.founder__qmark { display: block; color: var(--clay); margin-bottom: .4rem; }
.founder__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--brick); }
.founder__role { color: var(--ink-mute); font-size: .95rem; }

/* ==========================================================================
   Why join (CTA band)
   ========================================================================== */
.section--cta {
  background:
    radial-gradient(70% 120% at 50% 0%, var(--gold-soft), transparent 60%),
    var(--cream-warm);
}
.section--cta h2 { font-size: var(--fs-h2); margin-top: .4rem; }

/* ---------------- Yujverse Way tagline ---------------- */
.values__tagline {
  text-align: center; margin: 2.4rem auto 0; max-width: 60ch;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
  color: var(--brick);
}
/* ---------------- Founder "Follow Dhruti" inline IG ---------------- */
.founder__ig { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; color: var(--brick); transition: color var(--dur) var(--ease-out); }
.founder__ig:hover { color: var(--brick-deep); }