/* One scroll sequence: turning kick, camera impact, torn-paper values reveal. */
.hero-front {
  position: absolute;
  inset: 0;
  padding: 38px 4.2% 32px;
  background: var(--paper);
  isolation: isolate;
  z-index: 2;
}
.hero-front .hero-grid {
  z-index: -2;
}
.hero-front .sun {
  z-index: -1;
}
.hero-scroll {
  height: 330svh;
}
.hero-front .hero-athlete {
  transform-origin: 45% 42%;
}
.tear-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.tear-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.tear-edges path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}
.tear-shadow {
  stroke: #40362755;
  stroke-width: 9px;
}
.tear-fiber {
  stroke: #fffdf4;
  stroke-width: 5px;
  stroke-dasharray: 13 1 7 1 3 1;
}
.values-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 800px;
  height: 100svh;
  background: #e9decb;
  color: var(--ink);
}
.values-panel.values-reveal {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  z-index: 0;
}
.values-panel picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.values-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.values-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 43%, #f4eddf44, transparent 70%);
}
.values-copy {
  position: absolute;
  top: 20%;
  left: 8%;
  right: 8%;
  text-align: center;
}
.values-copy .mini-label {
  font-size: 11px;
  letter-spacing: 3px;
}
.values-copy h2 {
  font-family: var(--display);
  font-size: clamp(80px, 8vw, 140px);
  line-height: 0.9;
  margin: 24px 0;
}
.values-copy p {
  font-size: 14px;
  line-height: 1.7;
  margin: 22px auto 0;
}
.values-panel .ticker {
  position: absolute;
  bottom: 21%;
  left: 0;
  right: 0;
  background: #f2ebdcbb;
  color: #20211e;
  border-block: 1px solid #42382a33;
  padding: 18px 0;
  font-size: clamp(28px, 3.5vw, 54px);
  letter-spacing: 2px;
}
.values-panel .ticker i {
  color: #b72e23;
}
.values-caption {
  position: absolute;
  bottom: 5%;
  left: 5%;
  right: 5%;
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
}
@media (max-width: 760px) {
  .hero-front {
    padding: 30px 5%;
  }
  .hero-scroll {
    height: 330svh;
  }
  .values-panel {
    min-height: 740px;
  }
  .values-copy {
    top: 24%;
    left: 5%;
    right: 5%;
  }
  .values-copy .mini-label {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .values-copy h2 {
    font-size: clamp(70px, 19vw, 110px);
    margin: 22px 0;
  }
  .values-copy p {
    max-width: 220px;
    font-size: 12px;
  }
  .values-copy p span {
    display: block;
  }
  .values-panel .ticker {
    padding: 16px 0;
    font-size: 30px;
    letter-spacing: 1px;
  }
  .values-caption {
    bottom: 6%;
    font-size: 7px;
    letter-spacing: 1px;
  }
}
.motion-disabled .hero-scroll,
.motion-disabled .training-scroll {
  height: auto;
}
.motion-disabled .hero-scroll .hero,
.motion-disabled .training-scroll #classes {
  position: relative;
  height: auto;
}
.motion-disabled .hero-scroll .hero {
  min-height: 800px;
}
.motion-disabled .training-scroll #classes {
  min-height: 0;
}
.motion-disabled .training-scroll .training-grid {
  display: grid;
  width: auto;
}
.motion-disabled .training-scroll .training-card {
  width: auto;
}
.motion-disabled .ticker > div {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll,
  .training-scroll {
    height: auto;
  }
}

/* The animation owns the full hero viewport, preventing atlas-cell clipping. */
.hero-scroll .hero-front .hero-athlete.kick-ready {
  width: 100%;
  height: 100%;
  inset: 0;
  transform: none;
}
.hero-front .kick-sequence {
  object-fit: fill;
  filter: none;
}