/* Hyper Timing — styles.css */

/* ─── Reset & Base ─── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{--accent:#c6ff3a;--ink:#0a0a0c}
::selection{background:var(--accent);color:#0a0a0c}

/* ─── Keyframes ─── */
@keyframes htPulse{
  0%  {box-shadow:0 0 0 0   rgba(198,255,58,.5)}
  70% {box-shadow:0 0 0 7px rgba(198,255,58,0)}
  100%{box-shadow:0 0 0 0   rgba(198,255,58,0)}
}
@keyframes htPulse2{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── Inputs ─── */
.ht-in{color:#fafafa}
.ht-in:focus{outline:none;border-color:var(--accent)}
.ht-in::placeholder{color:#5a5a62}

/* ─── Live leaderboard ─── */
.ht-leaderboard{background:#101012;border:1px solid #1e1e22;border-radius:3px;overflow:hidden;width:100%}
.ht-lb-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #1e1e22}
.ht-pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:htPulse 1.4s infinite;display:inline-block;flex-shrink:0}
.ht-lb-live{font:700 12px 'Saira Semi Condensed',sans-serif;letter-spacing:.14em;color:var(--accent)}
.ht-lb-info{font:500 12px 'Saira Semi Condensed',sans-serif;letter-spacing:.08em;color:#7a7a82}
.ht-lb-clock{font:700 14px 'Saira Semi Condensed',sans-serif;color:#fafafa;letter-spacing:.04em}
.ht-lb-colheads{display:flex;align-items:center;gap:12px;padding:9px 18px;font:700 10px 'Saira Semi Condensed',sans-serif;letter-spacing:.12em;color:#6f6f78;text-transform:uppercase}
.ht-lb-row{position:absolute;left:0;right:0;top:0;height:50px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid #161618;box-sizing:border-box;transition:transform .7s cubic-bezier(.22,1,.36,1),background .3s}
.col-pos{width:24px;flex:none}
.col-bib{width:34px;flex:none}
.col-name{flex:1;min-width:0}
.col-lap{width:36px;text-align:right;flex:none}
.col-last{width:58px;text-align:right;flex:none}
.col-best{width:58px;text-align:right;flex:none}
.col-gap{width:64px;text-align:right;flex:none}

/* ─── Light tower ─── */
.ht-light{width:72px;height:72px;border-radius:50%;border:3px solid #28282c;background:#18181c;transition:background .12s ease,box-shadow .15s ease}
.ht-lt-label{font:700 11px 'Saira Semi Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 18px;border:1px solid #1e1e22;border-radius:2px;transition:color .2s,background .2s,border-color .2s;min-width:160px;text-align:center}

/* ─── Layout helpers ─── */
.ht-container{max-width:1180px;margin:0 auto}
.ht-container-sm{max-width:820px;margin:0 auto}
.ht-grid-hero{display:grid;grid-template-columns:1fr 560px;gap:56px;align-items:center}
.ht-grid-2{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.ht-grid-results{display:grid;grid-template-columns:1fr 440px;align-items:center}
.ht-grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.ht-grid-footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}

/* ─── Nav ─── */
.ht-nav-links{display:flex;gap:30px;font:600 13px 'Saira Semi Condensed',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#9a9aa2}
.ht-nav-links a{color:inherit;text-decoration:none}
.ht-nav-links a:hover{color:#fafafa}

.ht-nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid #34343a;
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.ht-nav-toggle-bar{
  display:block;
  width:18px;
  height:2px;
  margin:0 auto;
  background:#fafafa;
  border-radius:1px;
  transition:transform .2s ease,opacity .2s ease;
}
.ht-header.is-open .ht-nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ht-header.is-open .ht-nav-toggle-bar:nth-child(2){opacity:0}
.ht-header.is-open .ht-nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.ht-mobile-menu{
  display:none;
  border-top:1px solid #16161a;
  background:rgba(10,10,12,.97);
  backdrop-filter:blur(12px);
}
.ht-mobile-menu[hidden]{display:none!important}
.ht-header.is-open .ht-mobile-menu{
  display:block;
}
.ht-mobile-nav{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:8px 22px 0;
  font:600 15px 'Saira Semi Condensed',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ht-mobile-nav a{
  color:#d4d4da;
  text-decoration:none;
  padding:16px 0;
  border-bottom:1px solid #1a1a1e;
}
.ht-mobile-nav a:hover{color:var(--accent)}
.ht-mobile-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px 22px 24px;
}
.ht-mobile-actions .ht-btn-outline,
.ht-mobile-actions .ht-btn-accent{
  display:block;
  text-align:center;
  font:700 13px 'Saira Semi Condensed',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:14px 20px;
  border-radius:2px;
  text-decoration:none;
}
.ht-mobile-actions .ht-btn-outline{
  color:#fafafa;
  border:1px solid #34343a;
}
.ht-mobile-actions .ht-btn-accent{
  background:var(--accent);
  color:var(--ink);
}

body.ht-nav-open{overflow:hidden}

@media(min-width:981px){
  .ht-mobile-menu,.ht-nav-toggle{display:none!important}
}

/* ─── Responsive ─── */
@media(max-width:980px){
  .ht-grid-hero,.ht-grid-2,.ht-grid-results{grid-template-columns:1fr}
  .ht-grid-3{grid-template-columns:1fr}
  .ht-grid-footer{grid-template-columns:1fr 1fr}
  .ht-hero-board{width:100%!important;max-width:560px}
  .ht-container{padding-left:22px!important;padding-right:22px!important}
  .ht-container-sm{padding-left:22px!important;padding-right:22px!important}
  .ht-nav-links,.ht-nav-actions{display:none!important}
  .ht-nav-toggle{display:flex}
  .ht-cta-row{flex-wrap:wrap}
}
@media(max-width:600px){
  .ht-hero-title{font-size:50px!important}
  .ht-section-h2{font-size:32px!important}
  .ht-demo-h2{font-size:34px!important}
  .ht-grid-footer{grid-template-columns:1fr}
  /* Hero leaderboard: drop timing columns that overflow narrow viewports */
  .ht-lb-colheads,.ht-lb-row{gap:8px;padding-left:14px;padding-right:14px}
  .ht-lb-colheads{padding-top:8px;padding-bottom:8px}
  .col-best,.col-last{display:none}
  .col-gap{width:52px}
}
@media(max-width:400px){
  .col-lap{display:none}
}