/* Academy card transitions — paired with the hover state in home-teasers.css.
   (course-card / course-card--mini own their transitions in components.css.) */
.acad {
  transition:
    background var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

/* Hero entrance.
   - h1: left-to-right wipe via clip-path. Whole headline (white + aqua
     accent span) reveals as one mask sliding open from the left.
   - supporting rows (lede, CTAs, stats): the calm fade-rise primitive,
     staggered so they cascade in after the wipe lands. */
@keyframes wipe-in-left {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes reveal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero h1 {
  animation: wipe-in-left 2200ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
}
.hero-left .hero-lede,
.hero-left .hero-cta-row,
.hero-left .hero-stats {
  animation: reveal-fade-in var(--duration-reveal) var(--ease-out) both;
}
/* Supporting rows: tighter 150 ms cascade so they read as one motion, not
   three separate beats. They overlap the tail of the h1 wipe on purpose. */
.hero-left .hero-lede    { animation-delay: 900ms; }
.hero-left .hero-cta-row { animation-delay: 1050ms; }
.hero-left .hero-stats   { animation-delay: 1200ms; }

@media (prefers-reduced-motion: reduce) {
  .hero h1,
  .hero-left .hero-lede,
  .hero-left .hero-cta-row,
  .hero-left .hero-stats { animation: none; }
}

/* Enterprise band title — same left-to-right wipe as the hero h1 and
   section heads, triggered by AOS when the band enters view. AOS stamps
   `data-aos="fade"` on the h2 (set in scroll-reveal.js); we override its
   opacity so only the clip-path wipe drives the reveal. (Section-head
   wipe lives in base.css, next to the section-head structure itself, so
   it can be scoped to .section-head-text without sweeping the CTA.) */
.ent-mc-body h2[data-aos] {
  opacity: 1 !important;
  clip-path: inset(0 100% 0 0);
}
.ent-mc-body h2[data-aos].aos-animate {
  animation: wipe-in-left 3200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .ent-mc-body h2[data-aos] { clip-path: none; }
  .ent-mc-body h2[data-aos].aos-animate { animation: none; }
}

/* AI section — heading wipes in from the left (matching section-head
   and hero h1). Supporting rows (input, sub, chips, CTA) just fade
   in after the heading lands. */
.aip-gen .aip-gen-h {
  clip-path: inset(0 100% 0 0);
}
.aip-gen.aos-animate .aip-gen-h {
  animation: wipe-in-left 2200ms cubic-bezier(0.22,1,0.36,1) 200ms forwards;
}
@keyframes aip-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.aip-gen-sub,
.aip-gen-input-wrap,
.aip-gen-chips-hint,
.aip-gen-chips,
.aip-gen-form > .aip-gen-cta {
  opacity: 0;
}
.aip-gen.aos-animate .aip-gen-sub                  { animation: aip-fade-in 600ms ease-out  800ms forwards; }
.aip-gen.aos-animate .aip-gen-input-wrap           { animation: aip-fade-in 600ms ease-out 1000ms forwards; }
.aip-gen.aos-animate .aip-gen-chips-hint           { animation: aip-fade-in 600ms ease-out 1200ms forwards; }
.aip-gen.aos-animate .aip-gen-chips                { animation: aip-fade-in 600ms ease-out 1300ms forwards; }
.aip-gen.aos-animate .aip-gen-form > .aip-gen-cta  { animation: aip-fade-in 600ms ease-out 1400ms forwards; }

@media (prefers-reduced-motion: reduce) {
  .aip-gen .aip-gen-h { clip-path: none; }
  .aip-gen.aos-animate .aip-gen-h { animation: none; }
}

/* Scroll progress strip pinned to the top */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue-600), var(--aqua-500));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 100ms linear;
}

/* ---------- DRAW-IN BORDER ----------
   Course cards + academy cards have their static border hidden on first
   reveal; a pseudo-element traces the same border line clockwise around the
   perimeter (top → right → bottom → left), then stops — the drawn line IS
   the card's border from that point on, matching the card's normal
   border-color and thickness so there's no visual change at completion.
   Triggered by AOS's `.aos-animate` class (see scroll-reveal.js →
   drawBorderCards). */
.draw-border {
  position: relative;
  isolation: isolate;
  /* Hide the card's static border while the drawn line takes its place.
     Border space is preserved (the box doesn't shift); only the color hides. */
  border-color: transparent !important;
  /* Drawn line tokens — overridable per-variant on darker surfaces below. */
  --line: 1px;
  --color: var(--border-subtle);
}

/* AOS sets opacity:0 on [data-aos="fade"]; we override so the card body stays
   visible while the border draws. The inner children fade in via the rule below. */
.draw-border[data-aos] {
  opacity: 1 !important;
}

/* Inner content starts hidden, fades in mid-draw so the line completes around
   already-populated content. */
.draw-border > * {
  opacity: 0;
  transition: opacity 700ms var(--ease-out) 900ms;
}
.draw-border.aos-animate > * {
  opacity: 1;
}

/* The drawn line — same color and thickness as the card's normal border so
   the result is indistinguishable from a static-bordered card. The line
   tokens (--line, --color) are inherited from .draw-border so per-variant
   overrides (e.g. .acad.draw-border) take effect via cascade. */
.draw-border::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--color), var(--color)) top    left  / 0 var(--line)  no-repeat, /* top   */
    linear-gradient(var(--color), var(--color)) top    right / var(--line) 0  no-repeat, /* right */
    linear-gradient(var(--color), var(--color)) bottom right / 0 var(--line)  no-repeat, /* bot   */
    linear-gradient(var(--color), var(--color)) bottom left  / var(--line) 0  no-repeat; /* left  */
}
.draw-border.aos-animate::after {
  animation: draw-border-trace 1600ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
/* Hover: card border-color would change on a normal card; mirror that here
   so hovering a freshly-drawn card still feels alive. */
.draw-border:hover { --color: var(--border-default); }

@keyframes draw-border-trace {
  /* phase 1 — top edge draws left→right */
  0%   { background-size: 0 var(--line),      var(--line) 0,    0 var(--line),      var(--line) 0;    }
  25%  { background-size: 100% var(--line),   var(--line) 0,    0 var(--line),      var(--line) 0;    }
  /* phase 2 — right edge draws top→bottom */
  50%  { background-size: 100% var(--line),   var(--line) 100%, 0 var(--line),      var(--line) 0;    }
  /* phase 3 — bottom edge draws right→left */
  75%  { background-size: 100% var(--line),   var(--line) 100%, 100% var(--line),   var(--line) 0;    }
  /* phase 4 — left edge draws bottom→top */
  100% { background-size: 100% var(--line),   var(--line) 100%, 100% var(--line),   var(--line) 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .draw-border > * { opacity: 1; transition: none; }
  .draw-border.aos-animate::after {
    animation: none;
    background-size: 100% var(--line), var(--line) 100%, 100% var(--line), var(--line) 100%;
  }
}

/* Per-variant overrides for the drawn line. The AI-journey result cards
   sit on a solid dark surface, so the trace flips to white with a thicker
   stroke to read against it. */
.course-card--dark.draw-border {
  --color: var(--alpha-white-70);
  --line: 2px;
}

/* AOS honors prefers-reduced-motion via its own disable() check in scroll-reveal.js. */

/* ---------- TRUST MARQUEE (placeholder operator logos) ---------- */
.trust-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.trust-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: trust-scroll 40s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.org-ph {
  flex: 0 0 200px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}

/* ---------- AI PLANNER DARK INTERIOR (aqua details only) ---------- */
.aip .planner {
  background: var(--alpha-white-4);
  border: 1px solid var(--alpha-lightblue-18);
  border-top: 2px solid var(--aqua-500);
  box-shadow: 0 0 60px var(--alpha-aqua-10);
}