/* Gridiron Neon — custom CSS */

/* ── Self-hosted fonts (DS-03) ───────────────────────────────────────
   Replaces the runtime Google Fonts dependency. Files in fonts/ (see
   fonts/README.md). font-family names must match tailwind.config.js. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/anton-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;      /* variable weight range */
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 900;      /* variable weight range */
  font-display: swap;
  src: url('fonts/hanken-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;      /* variable wght axis */
  font-display: swap;
  src: url('fonts/material-symbols-outlined.woff2') format('woff2');
}

html {
  scroll-behavior: smooth;
}

/* ── Skewed parallelogram buttons ─────────────────────────────────── */
.skew-btn {
  transform: skew(-12deg);
  display: inline-block;
}
.skew-btn > * {
  transform: skew(12deg);
  display: inline-block;
}

/* ── Neon glow effects ────────────────────────────────────────────── */
.neon-border-primary {
  box-shadow: 0 0 15px rgba(213, 187, 255, 0.3), inset 0 0 5px rgba(213, 187, 255, 0.2);
}
.neon-glow-secondary {
  text-shadow: 0 0 10px rgba(0, 218, 243, 0.6);
}

/* ── Glassmorphism card ───────────────────────────────────────────── */
.glass-panel {
  background: rgba(19, 19, 24, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(213, 187, 255, 0.1);
}

/* ── Stadium radial gradient overlay ─────────────────────────────── */
.stadium-gradient {
  background: radial-gradient(circle at top, rgba(125, 0, 255, 0.15) 0%, rgba(13, 13, 18, 1) 70%);
}

/* ── Material Symbols base rule (DS-03) ──────────────────────────────
   Google's Material Symbols stylesheet used to supply this. We now self-host
   a codepoint-subset woff2, so icons are referenced by codepoint (e.g.
   ), not ligature name — see fonts/README.md.
   Wrapped in :where() (0 specificity) so Tailwind text-size utilities
   (text-4xl / text-xl / text-lg) still override font-size/line-height exactly
   as they did with the CDN; icons with no size utility fall back to 24px. */
:where(.material-symbols-outlined) {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Filled icon variant (DS-02: replaces inline style="font-variation-settings:'FILL' 1"). */
.material-symbols-outlined.msym-fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Fade-in animation ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeUp 0.8s ease both;
}

/* ── Dark form inputs ────────────────────────────────────────────── */
.input-dark {
  background: rgba(213, 187, 255, 0.05);
  border: 1px solid rgba(213, 187, 255, 0.15);
  color: #e4e1e9;
}
.input-dark::placeholder {
  color: rgba(228, 225, 233, 0.3);
}
.input-dark:focus {
  outline: none;
  border-color: #d5bbff;
  box-shadow: 0 0 0 3px rgba(213, 187, 255, 0.2);
}
.input-dark.invalid {
  border-color: #ffb4ab;
}

/* Contact form success banner (DS-02: replaces inline style on #form-success). */
.form-success {
  background: rgba(0, 218, 243, 0.1);
  border-color: #00daf3;
  color: #bdf4ff;
}

/* Contact form error banner — shown when the /api/contact send fails. */
.form-error {
  background: rgba(255, 180, 171, 0.1);
  border-color: #ffb4ab;
  color: #ffb4ab;
}
.form-error a {
  text-decoration: underline;
}

/* ── Coach flip cards ─────────────────────────────────────────────── */
.coach-card {
  aspect-ratio: 3 / 4;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.coach-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(213, 187, 255, 0.5);
  border-radius: 0.75rem;
}
.coach-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
@media (hover: hover) {
  .coach-card:hover .coach-card-inner { transform: rotateY(180deg); }
}
.coach-card.flipped .coach-card-inner { transform: rotateY(180deg); }

.coach-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.75rem;
  overflow: hidden;
}
.coach-back {
  transform: rotateY(180deg);
}

/* Fallback avatar shown when a coach photo is missing/broken */
.coach-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Anton', sans-serif;
  font-size: 4rem;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: linear-gradient(135deg, #7d00ff 0%, #00daf3 100%);
}

@media (prefers-reduced-motion: reduce) {
  .coach-card-inner { transition: none; }
}

/* ── Anchor offset for fixed navbar ──────────────────────────────── */
section[id] {
  scroll-margin-top: 6rem;
}

/* ── Hero tagline staggered entrance ─────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* Per-word stagger (DS-02: replaces inline animation-delay on each span). */
.hero-word:nth-child(1) { animation-delay: 0.1s; }
.hero-word:nth-child(2) { animation-delay: 0.25s; }
.hero-word:nth-child(3) { animation-delay: 0.4s; }
.hero-word:nth-child(4) { animation-delay: 0.55s; }

/* ── Faceted "diamond cut" card corners ──────────────────────────── */
.facet-card {
  clip-path: polygon(
    20px 0, 100% 0,
    100% calc(100% - 20px), calc(100% - 20px) 100%,
    0 100%, 0 20px
  );
  border-radius: 0;
}

/* ── Diamond division badges ─────────────────────────────────────── */
.diamond-badge {
  width: 3.4rem;
  height: 4.1rem;
  margin: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpolygon points='24,2 76,2 98,42 50,118 2,42' fill='rgba(156,240,255,0.05)' stroke='%239cf0ff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: filter 0.3s, background-image 0.3s;
}
.diamond-badge:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpolygon points='24,2 76,2 98,42 50,118 2,42' fill='rgba(0,218,243,0.12)' stroke='%2300daf3' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(0, 218, 243, 0.6));
}
.diamond-badge > span {
  padding-bottom: 0.35rem;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #9cf0ff;
}

/* ── Angled section divider ──────────────────────────────────────── */
.section-slash {
  height: 64px;
  background: #0e0e13;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  margin-top: 4rem;
}

/* ── Results ticker ──────────────────────────────────────────────── */
.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker-track {
  display: inline-block;
  animation: ticker-scroll 28s linear infinite;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Scroll-triggered reveals (scoped to .js so no-JS users still see content) ── */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-word { animation: none; opacity: 1; }
  .ticker-track { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .fade-in { animation: none; }
}