/* ═══════════════════════════════════════════════════════════
   World Horse Racing Championship — Coming Soon
   styles.css
   ═══════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ──────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --gold:        #c8a84e;
  --gold-light:  #e6c878;
  --gold-dark:   #9a7e2e;
  --dark:        #0c0c0e;
  --dark-2:      #141418;
  --dark-3:      #1c1c22;
  --light:       #f4f1ea;
  --grey:        #8a8a92;
  --font-head:   'Georgia','Times New Roman',serif;
  --font-body:   -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--light);
  line-height:1.7;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color: var(--gold-light); text-decoration:none; transition:color .3s; }
a:hover { color: var(--gold); }

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:url('../images/hero-race.png') center/cover no-repeat fixed;
}
.hero::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,12,14,.55) 0%, rgba(12,12,14,.7) 50%, rgba(12,12,14,.95) 100%);
}
.hero-content { position:relative; z-index:2; padding:2rem; max-width:900px; }
.hero-badge {
  display:inline-block;
  padding:.45rem 1.4rem;
  border:1px solid var(--gold);
  border-radius:50px;
  font-size:.75rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color: var(--gold-light);
  margin-bottom:1.8rem;
  animation: fadeInDown .8s ease both;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight:400;
  line-height:1.1;
  color: var(--light);
  margin-bottom:1rem;
  animation: fadeInUp .8s ease .15s both;
}
.hero h1 span { color: var(--gold); display:block; font-style:italic; }
.hero p {
  font-size: clamp(1rem,2.5vw,1.3rem);
  color: rgba(244,241,234,.8);
  max-width:620px;
  margin:0 auto 2rem;
  animation: fadeInUp .8s ease .3s both;
}

/* ─── COUNTDOWN ─────────────────────────────────────────── */
.countdown { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; animation: fadeInUp .8s ease .45s both; }
.cd-item {
  background: rgba(255,255,255,.06);
  border:1px solid rgba(200,168,78,.3);
  border-radius:12px;
  padding:1rem 1.2rem;
  min-width:90px;
  backdrop-filter: blur(8px);
}
.cd-num { font-family:var(--font-head); font-size:2.2rem; color:var(--gold-light); line-height:1; }
.cd-label { font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--grey); margin-top:.4rem; }

.scroll-cue {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2;
  color:var(--grey); font-size:.7rem; letter-spacing:3px; text-transform:uppercase;
  animation: bounce 2s infinite;
}
.scroll-cue::after { content:''; display:block; width:1px; height:30px; background:var(--gold); margin:.6rem auto 0; }

/* ─── SECTION BASE ──────────────────────────────────────── */
.section { padding:5rem 1.5rem; max-width:1200px; margin:0 auto; }
.section-head { text-align:center; margin-bottom:3rem; }
.section-head h2 {
  font-family:var(--font-head); font-size:clamp(2rem,5vw,3.2rem); font-weight:400;
  color:var(--light); margin-bottom:.5rem;
}
.section-head .line { width:60px; height:2px; background:var(--gold); margin:1rem auto; }
.section-head p { color:var(--grey); font-size:1.05rem; max-width:620px; margin:0 auto; }

/* ─── ABOUT ─────────────────────────────────────────────── */
.about { background: var(--dark-2); }
.about-grid {
  display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:center;
}
.about-text h3 { font-family:var(--font-head); font-size:1.6rem; color:var(--gold-light); margin-bottom:1rem; }
.about-text p { color:rgba(244,241,234,.75); margin-bottom:1rem; }
.about-img { border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.about-img img { width:100%; height:auto; }

/* ─── GALLERY ───────────────────────────────────────────── */
.gallery { background: var(--dark); }
.gallery-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.2rem;
}
.gallery-item {
  position:relative; overflow:hidden; border-radius:12px; cursor:pointer;
  aspect-ratio: 3/2;
}
.gallery-item img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%, rgba(12,12,14,.6) 100%);
  pointer-events:none;
}

/* ─── CONTACT ───────────────────────────────────────────── */
.contact { background: var(--dark-2); }
.contact-wrap { max-width:600px; margin:0 auto; }
.form-group { margin-bottom:1.4rem; }
.form-group label { display:block; font-size:.85rem; color:var(--grey); margin-bottom:.4rem; letter-spacing:.5px; }
.form-group input,
.form-group textarea {
  width:100%; padding:.85rem 1rem;
  background: var(--dark-3);
  border:1px solid rgba(200,168,78,.2);
  border-radius:8px; color:var(--light);
  font-family:var(--font-body); font-size:1rem;
  transition:border-color .3s;
}
.form-group input:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--gold);
}
.form-group textarea { resize:vertical; min-height:120px; }
.honeypot { position:absolute !important; left:-9999px !important; }

.btn-submit {
  width:100%; padding:1rem; border:none; border-radius:8px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color:var(--dark); font-family:var(--font-body); font-size:1rem; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  transition:transform .2s, box-shadow .3s;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(200,168,78,.3); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.6; cursor:wait; }

.form-status {
  margin-top:1rem; padding:1rem; border-radius:8px; text-align:center;
  font-size:.95rem; display:none;
}
.form-status.show { display:block; }
.form-status.success { background:rgba(40,160,80,.15); border:1px solid rgba(40,160,80,.4); color:#6fcf7a; }
.form-status.error   { background:rgba(200,60,60,.15); border:1px solid rgba(200,60,60,.4); color:#e8786e; }

/* ─── FOOTER ────────────────────────────────────────────── */
footer {
  background:var(--dark); text-align:center; padding:2rem 1.5rem;
  border-top:1px solid rgba(200,168,78,.15);
}
footer p { font-size:.8rem; color:var(--grey); }
footer a { color:var(--gold-light); }

/* ─── ANIMATIONS ────────────────────────────────────────── */
@keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(20px); }  to { opacity:1; transform:translateY(0); } }
@keyframes bounce     { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-10px); } }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { background-attachment:scroll; }
  .about-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .cd-item { min-width:72px; padding:.7rem .9rem; }
  .cd-num { font-size:1.6rem; }
  .section { padding:3.5rem 1.2rem; }
}
@media (max-width:480px) {
  .countdown { gap:.6rem; }
  .cd-item { min-width:62px; }
}