/* ============================================================
   HOMEPAGE · SECTION TRANSITIONS
   Shared section-level enhancements: entrance mask, gradient edge,
   scroll-progress driven hue shift, tightened rhythm.
   Layers on top of existing `.section`, `.section-with-mark`.
   ============================================================ */

/* Cinematic rhythm — override token only on home page sections */
:root {
  --section-pad-block: clamp(6rem, 10vw, 12rem);
}

section[data-section] {
  --section-progress: 0; /* 0 enters, 1 exits (driven by JS) */
  position: relative;
  padding-block: var(--section-pad-block);
  scroll-margin-block-start: 80px; /* for in-page anchors */
}

/* Soft gradient seam between sections */
section[data-section]::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(232, 160, 32, 0.25) 35%,
    rgba(236, 72, 153, 0.25) 65%,
    transparent 100%
  );
  opacity: calc(0.3 + var(--section-progress) * 0.7);
  pointer-events: none;
}

/* Section header entrance */
section[data-section] .section-header {
  opacity: calc(0.15 + var(--section-progress) * 0.85);
  transform: translate3d(0, calc((1 - var(--section-progress)) * 40px), 0);
  transition: transform 80ms linear, opacity 80ms linear;
}

section[data-section] .section-title {
  color: #F0F0FF; /* accessible fallback — Lighthouse reads this for contrast checks */
  background: var(--accent-gradient);
  background-size: 220% 100%;
  background-position: calc(var(--section-progress) * 100%) 50%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 120ms linear;
}

/* Stagger cards/items driven by IO, keyed off data-reveal-group */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0) scale(0.985);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: calc(var(--reveal-stagger) * var(--i, 0));
}

[data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

[data-reveal-group] > *:nth-child(1)  { --i: 0; }
[data-reveal-group] > *:nth-child(2)  { --i: 1; }
[data-reveal-group] > *:nth-child(3)  { --i: 2; }
[data-reveal-group] > *:nth-child(4)  { --i: 3; }
[data-reveal-group] > *:nth-child(5)  { --i: 4; }
[data-reveal-group] > *:nth-child(6)  { --i: 5; }
[data-reveal-group] > *:nth-child(7)  { --i: 6; }
[data-reveal-group] > *:nth-child(8)  { --i: 7; }
[data-reveal-group] > *:nth-child(9)  { --i: 8; }
[data-reveal-group] > *:nth-child(10) { --i: 9; }

/* Section edge fade — subtle cross-fade when scrolling between sections */
section[data-section] > .container {
  will-change: transform, opacity;
}

/* Features bento — extra lift on scroll progress */
section[data-section="features"] .bento-item {
  transition:
    transform 400ms var(--ease-out),
    box-shadow 400ms var(--ease-out),
    border-color 400ms var(--ease-out);
}

section[data-section="features"] .bento-item:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--depth-4), var(--glow-gold-sm);
}

/* Curriculum accordion — glow on open */
section[data-section="curriculum"] [data-item].open {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(232,160,32,0.25) inset;
}

/* Testimonials drift */
section[data-section="testimonials"] .testimonial-card {
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out);
}
section[data-section="testimonials"] .testimonial-card:hover {
  transform: translate3d(0, -4px, 0) rotate(-0.3deg);
}

/* Pricing promo subtle glow tied to progress */
section[data-section="pricing"] {
  position: relative;
}
section[data-section="pricing"]::after {
  content: '';
  position: absolute;
  inset-inline: 10%;
  top: 10%;
  bottom: 10%;
  background: radial-gradient(closest-side, rgba(239,68,68,0.12), transparent 70%);
  opacity: var(--section-progress);
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  section[data-section] .section-header,
  section[data-section] .section-title,
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    background-position: 0 50% !important;
  }
}

/* Mobile: disable scroll-progress opacity — small viewport means section
   appears while progress is still low (~0.1), making headers near-invisible */
@media (max-width: 768px) {
  section[data-section] .section-header {
    opacity: 1 !important;
    transform: none !important;
  }
  section[data-section] .section-title {
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
    background-position: unset !important;
    text-shadow: 0 0 40px rgba(232, 160, 32, 0.4), 0 2px 8px rgba(0,0,0,0.6);
  }
  section[data-section] .section-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
  }
}