/* Latest interaction polish: one-shot header videos, RGB learning CTA, learning reveal. */

.brand .brand-video {
  animation-iteration-count: 1 !important;
}

.wide-head .filters {
  flex: 1 1 min(720px, 100%);
  justify-content: flex-end;
  align-items: stretch;
  gap: 9px;
  min-width: min(720px, 100%);
  overflow: visible;
}

.wide-head .learning-filter {
  position: relative;
  isolation: isolate;
  flex: 1 1 360px;
  min-width: min(420px, 100%);
  justify-content: center;
  border: 2px solid transparent !important;
  color: #041006 !important;
  background:
    linear-gradient(135deg, var(--accent), var(--cyan)) padding-box,
    conic-gradient(from var(--learn-rgb-angle, 0deg), #39ff14, #38bdf8, #7c3aed, #ff3df2, #39ff14) border-box !important;
  box-shadow:
    0 18px 46px var(--accent-glow),
    0 0 34px rgba(56,189,248,0.24) !important;
  animation: learningRgb 5s linear infinite;
}

.wide-head .learning-filter::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--learn-rgb-angle, 0deg), #39ff14, #38bdf8, #7c3aed, #ff3df2, #39ff14);
  filter: blur(12px) saturate(1.28);
  opacity: 0.62;
  animation: learningRgb 5s linear infinite;
}

.wide-head .learning-filter:hover {
  transform: translateY(-2px);
}

@property --learn-rgb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes learningRgb {
  to { --learn-rgb-angle: 360deg; }
}

.learning-step {
  transform-origin: center bottom;
  transition:
    opacity 0.72s ease,
    transform 0.82s cubic-bezier(.16,.84,.2,1),
    clip-path 0.82s cubic-bezier(.16,.84,.2,1),
    border-color 0.72s ease,
    box-shadow 0.72s ease !important;
}

.learning-step.reveal-item {
  opacity: 0;
  clip-path: inset(40% 46% 40% 46% round 8px);
  border-color: transparent;
  box-shadow:
    inset 0 0 0 0 rgba(56,189,248,0),
    0 0 0 rgba(56,189,248,0);
}

.learning-step.is-left.reveal-item {
  transform: translate3d(38%, 96px, 0) scale(0.94);
}

.learning-step.is-right.reveal-item {
  transform: translate3d(-38%, 96px, 0) scale(0.94);
}

.learning-step.reveal-item.is-visible,
.learning-step.is-left.reveal-item.is-visible,
.learning-step.is-right.reveal-item.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 8px);
  transform: translate3d(0, 0, 0) scale(1);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cyan) 18%, transparent),
    0 18px 60px rgba(0,0,0,0.24),
    0 0 30px color-mix(in srgb, var(--accent) 18%, transparent);
}

@media (max-width: 1040px) {
  .wide-head .filters {
    min-width: 100%;
    justify-content: flex-start;
  }

  .wide-head .learning-filter {
    flex-basis: 100%;
    min-width: 100%;
  }
}

@media (max-width: 680px) {
  .wide-head .filters {
    flex-wrap: wrap;
    overflow: visible;
  }

  .learning-step.is-left.reveal-item,
  .learning-step.is-right.reveal-item {
    transform: translate3d(0, 84px, 0) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wide-head .learning-filter::before {
    animation: none;
  }

  .learning-step.reveal-item,
  .learning-step.is-left.reveal-item,
  .learning-step.is-right.reveal-item {
    clip-path: none;
    transform: none;
  }
}