/* ==========================================================================
   FC FLEX — Core Design System
   Classic club identity: white ground, red ordinary, black type.
   Playfair Display for headings (a proper crest/masthead serif), Lora for
   body copy, EB Garamond (small-caps, letter-spaced) for labels and stats.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Lora:wght@400;500;600;700&family=EB+Garamond:wght@500;600;700&display=swap');

:root{
  --black:        #ffffff;   /* page background */
  --black-soft:   #f7f7f7;   /* soft panel / hover background */
  --black-panel:  #ffffff;   /* card background */
  --maroon:       #7f1d1d;   /* deep red — secondary accent / badges */
  --maroon-deep:  #5c1414;
  --maroon-glow:  rgba(185,28,28,.08);
  --gold:         #b91c1c;   /* red — primary accent */
  --gold-bright:  #dc2626;   /* brighter red — headings/highlights */
  --gold-dim:     #6b6b6b;   /* neutral grey — secondary text/labels */
  --cream:        #121212;   /* primary body text — black */
  --line:         rgba(17,17,17,.12);
  --shadow:       0 20px 50px rgba(0,0,0,.1);

  --font-display: 'Playfair Display', serif;
  --font-body:    'Lora', serif;
  --font-utility: 'EB Garamond', serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(185,28,28,.04), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(185,28,28,.03), transparent 40%),
    var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:.02em; }
p{ margin:0; }
button{ font-family:var(--font-body); cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

.gold-text{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- layout helpers ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
.section{ padding:110px 0; position:relative; }
.section-head{ margin-bottom:56px; text-align:center; }
.eyebrow{
  font-family:var(--font-utility); text-transform:uppercase; letter-spacing:.35em;
  font-size:12px; color:var(--gold); display:block; margin-bottom:14px;
}
.section-head h2{ font-size:clamp(30px,4vw,46px); color:var(--cream); }
.section-head .rule{
  width:70px; height:2px; margin:22px auto 0; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ---------- shield / crest motif (signature element) ---------- */
.shield-clip{
  clip-path: path('M100,0 C120,45 150,60 200,60 C200,150 200,230 100,300 C0,230 0,150 0,60 C50,60 80,45 100,0 Z');
}
.shield-frame{
  position:relative;
  aspect-ratio: 2/3;
  overflow:hidden;
  background:var(--black-panel);
  clip-path: polygon(50% 0%, 92% 18%, 92% 55%, 50% 100%, 8% 55%, 8% 18%);
  border:1px solid var(--line);
}
.shield-frame img{ width:100%; height:100%; object-fit:cover; }

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  transition:padding .3s ease, box-shadow .3s ease;
}
.site-nav.scrolled{ padding:11px 32px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.site-nav .brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); letter-spacing:.15em; }
.site-nav .brand img{ height:40px; width:auto; }
.site-nav .brand span{ font-size:18px; color:var(--gold-bright); }
.nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--font-utility); text-transform:uppercase; font-size:13px; letter-spacing:.12em;
  color:var(--cream); opacity:.75; position:relative; padding:6px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold);
  transition:width .25s ease;
}
.nav-links a:hover, .nav-links a.active{ opacity:1; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--gold); padding:8px 12px; border-radius:4px; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--black-soft); flex-direction:column; padding:100px 30px; gap:26px;
    transform:translateX(100%); transition:transform .35s ease; border-left:1px solid var(--line);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 30px;
  font-family:var(--font-utility); text-transform:uppercase; letter-spacing:.14em; font-size:13px;
  border-radius:2px; border:1px solid var(--gold); transition:all .25s ease;
}
.btn-primary{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--black); border-color:transparent; }
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.btn-ghost{ color:var(--gold-bright); background:transparent; }
.btn-ghost:hover{ background:rgba(185,28,28,.06); }

/* ---------- floating crest ---------- */
.floating-crest{
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.15));
}
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(-1.5deg); }
  50%{ transform: translateY(-18px) rotate(1.5deg); }
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:50px 0; text-align:center;
  font-family:var(--font-utility); letter-spacing:.1em; font-size:12px; color:var(--gold-dim);
}

/* ---------- cards grid ---------- */
.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---------- loading / empty states ---------- */
.state-msg{
  text-align:center; padding:60px 20px; color:var(--gold-dim); font-family:var(--font-utility);
  letter-spacing:.08em; text-transform:uppercase; font-size:13px;
}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:900; padding:20px;
}
.modal{
  background:var(--black-panel); border:1px solid var(--line); border-radius:6px;
  max-width:560px; width:100%; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow);
  padding:36px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:18px; background:none; border:none; color:var(--gold);
  font-size:22px; line-height:1;
}

/* ---------- forms ---------- */
.field{ margin-bottom:20px; }
.field label{
  display:block; margin-bottom:8px; font-family:var(--font-utility); text-transform:uppercase;
  font-size:12px; letter-spacing:.1em; color:var(--gold-dim);
}
.field input, .field select, .field textarea{
  width:100%; background:var(--black-soft); border:1px solid var(--line); color:var(--cream);
  padding:12px 14px; border-radius:3px; font-family:var(--font-body); font-size:14px;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:90px; }

.tag{
  display:inline-block; font-family:var(--font-utility); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border:1px solid var(--gold); color:var(--gold-bright);
  border-radius:2px;
}
.tag.status-upcoming{ border-color:#374151; color:#374151; }
.tag.status-completed{ border-color:var(--gold); color:var(--gold); }

/* ---------- motion engine support ---------- */
.player-card, .match-card, .preview-card, .cab-card{
  transform-style:preserve-3d; will-change:transform;
}
.grid, .preview-row{ perspective:1000px; }
.btn{ will-change:transform; }
#heroCanvas{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* ---------- animated success checkmark (Join Us) ---------- */
.success-check{ color:var(--gold-bright); margin:0 auto 20px; display:block; }
.success-check-circle{
  stroke-dasharray:226; stroke-dashoffset:226;
  animation:draw-circle .7s ease forwards;
}
.success-check-tick{
  stroke-dasharray:46; stroke-dashoffset:46;
  animation:draw-tick .45s .55s ease forwards;
}
@keyframes draw-circle{ to{ stroke-dashoffset:0; } }
@keyframes draw-tick{ to{ stroke-dashoffset:0; } }