/* =========================================================================
   KERA MOTORSPORTS — Shared base styles
   ========================================================================= */

/* ---- Fonts ---- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2');}
/* Condensed weights are used in nav + headings — block to avoid font-swap flash on first paint. Combined with <link rel=preload> on each page so the wait is effectively zero. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:block;src:url('../fonts/barlowc-400.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:block;src:url('../fonts/barlowc-700.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:block;src:url('../fonts/barlowc-800.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:block;src:url('../fonts/barlowc-900.woff2') format('woff2');}

/* ---- Tokens ---- */
:root{
  --black:#14141A;
  --bg-1:#1A1A22;
  --bg-2:#21212B;
  --bg-3:#2A2A35;
  --bg-4:#33333F;
  --border:rgba(255,255,255,0.09);
  --border-2:rgba(255,255,255,0.18);
  --accent:#D93025;
  --accent-2:#E74C3C;
  --accent-glow:rgba(217,48,37,0.45);
  --green:#2ECC71;
  --gold:#C89050;
  --white:#FFFFFF;
  --t-1:#FFFFFF;
  --t-2:#B6B6BD;
  --t-3:#82828A;
  --t-4:#50505A;
  --t-5:#393944;
  --nav-h:72px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- Reset ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'Barlow',sans-serif;
  background:var(--bg-1);
  color:var(--t-1);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--accent);color:#fff;}

/* Subtle background grain */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,0.012) 1px,transparent 1px);
  background-size:3px 3px;
  opacity:0.6;
}

/* ---- Typography helpers ---- */
.h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(2.8rem,7vw,7rem);line-height:0.92;text-transform:uppercase;letter-spacing:-0.005em;}
.h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(1.7rem,3vw,2.6rem);text-transform:uppercase;line-height:1;letter-spacing:0.005em;}
.h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(1.3rem,2vw,1.7rem);text-transform:uppercase;line-height:1.05;}
.eyebrow{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);font-weight:700;display:inline-block;margin-bottom:14px;}
.body-t{font-size:clamp(0.95rem,1.05vw,1.05rem);color:var(--t-2);line-height:1.75;}
.muted{color:var(--t-3);}
.tag{font-size:0.68rem;letter-spacing:0.1em;color:var(--t-3);border:1px solid var(--border);padding:5px 10px;border-radius:3px;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.tag-accent{color:var(--accent);border-color:rgba(217,48,37,0.3);background:rgba(217,48,37,0.06);}
.divider{height:1px;background:var(--border);}
.divider-accent{height:2px;background:linear-gradient(90deg,var(--accent) 0%,transparent 100%);}
.title-rule{position:relative;display:inline-block;padding-bottom:10px;}
.title-rule::after{content:'';position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--accent);}
.h2-meta{display:flex;align-items:center;gap:14px;margin-top:10px;}
.h2-meta-rule{width:42px;height:3px;background:var(--accent);flex-shrink:0;border-radius:2px;}
.h2-meta-text{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.86rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--t-3);}

/* ---- Section helpers ---- */
.section{padding:80px 40px;position:relative;}
.section-inner{max-width:1180px;margin:0 auto;}
.section-head{margin-bottom:36px;}
.section-head .eyebrow{margin-bottom:8px;}
@media(max-width:768px){.section{padding:60px 20px;}}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:0.92rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:13px 28px;border-radius:4px;
  transition:transform .15s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
  cursor:pointer;border:1px solid transparent;line-height:1;white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-red{background:var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 6px 22px -8px var(--accent-glow);}
.btn-red:hover{background:var(--accent-2);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 8px 28px -6px var(--accent-glow);}
.btn-out{background:transparent;color:var(--t-2);border-color:var(--border-2);}
.btn-out:hover{color:#fff;border-color:rgba(255,255,255,0.32);background:rgba(255,255,255,0.03);}
.btn-ghost{background:transparent;color:var(--t-2);}
.btn-ghost:hover{color:#fff;}
.btn-lg{padding:17px 36px;font-size:1.02rem;}
.btn-sm{padding:9px 18px;font-size:0.78rem;}

/* ---- Nav ---- */
nav.kera-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;height:var(--nav-h);
  background:rgba(20,20,26,0.78);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
nav.kera-nav.scrolled{background:rgba(20,20,26,0.96);border-bottom-color:var(--border-2);}
.nav-brand{display:flex;align-items:center;gap:11px;}
.nav-logo{height:38px;width:38px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.4));}
.nav-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.18rem;letter-spacing:0.06em;text-transform:uppercase;}
.nav-name em{font-style:normal;color:var(--accent);}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center;}
.nav-links a{
  font-size:0.86rem;color:var(--t-3);
  font-weight:600;letter-spacing:0.04em;
  padding:9px 14px;border-radius:4px;
  transition:color .18s,background .18s;
  white-space:nowrap;
  position:relative;
}
.nav-links a:hover{color:var(--t-1);background:rgba(255,255,255,0.03);}
.nav-links a.active{color:var(--t-1);}
.nav-links a.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-cta{
  background:var(--accent)!important;color:#fff!important;
  padding:9px 18px!important;border-radius:4px!important;
  font-weight:700!important;font-size:0.78rem!important;letter-spacing:0.08em!important;
  text-transform:uppercase!important;
  box-shadow:0 4px 14px -6px var(--accent-glow);
}
.nav-cta:hover{background:var(--accent-2)!important;box-shadow:0 6px 18px -4px var(--accent-glow);}
.nav-cta::after{display:none!important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border-radius:4px;transition:background .15s;}
.hamburger:hover{background:rgba(255,255,255,0.04);}
.hamburger span{width:22px;height:2px;background:var(--t-1);border-radius:2px;transition:transform .25s var(--ease),opacity .15s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mob-nav{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:190;
  background:rgba(20,20,26,0.98);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);flex-direction:column;
  animation:slideDown .22s var(--ease);
}
.mob-nav.open{display:flex;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.mob-nav a{font-size:0.98rem;color:var(--t-2);padding:16px 24px;border-bottom:1px solid var(--border);transition:color .15s,background .15s;font-weight:500;}
.mob-nav a:last-child{border-bottom:none;}
.mob-nav a:hover,.mob-nav a.active{color:var(--t-1);background:rgba(255,255,255,0.02);}
.mob-cta{color:var(--accent)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:0.06em;font-size:0.9rem!important;}

/* ---- Footer ---- */
footer.kera-foot{background:#14141A;border-top:1px solid var(--border);padding:36px 40px 28px;position:relative;z-index:2;}
.foot-inner{max-width:1180px;margin:0 auto;}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:36px;}
.foot-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:0.14em;color:var(--t-1);margin-bottom:18px;}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.foot-col a{font-size:1rem;color:var(--t-3);transition:color .15s;}
.foot-col a:hover{color:var(--t-1);}
.foot-brand-block .foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.foot-brand-block .foot-logo{height:42px;width:42px;}
.foot-brand-block .foot-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.3rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--t-1);}
.foot-brand-block .foot-name em{font-style:normal;color:var(--accent);}
.foot-tag{font-size:0.95rem;color:var(--t-3);line-height:1.6;max-width:280px;margin-bottom:18px;}
.foot-badge{display:inline-flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--green);background:rgba(46,204,113,0.08);border:1px solid rgba(46,204,113,0.2);padding:7px 12px;border-radius:3px;}
.foot-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);}
.foot-bot{padding-top:28px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.foot-copy{font-size:0.92rem;color:var(--t-4);}
.foot-meta{font-size:0.88rem;color:var(--t-4);display:flex;gap:14px;flex-wrap:wrap;}
.foot-meta span{display:inline-flex;align-items:center;gap:6px;}
.foot-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--t-4);}
@media(max-width:900px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:36px 24px;}
  footer.kera-foot{padding:30px 24px 24px;}
}
@media(max-width:560px){
  .foot-cols{grid-template-columns:1fr;}
  .foot-bot{flex-direction:column;text-align:center;}
}

/* ---- Mobile nav ---- */
@media(max-width:880px){
  nav.kera-nav{padding:0 20px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* ---- Reveal animations ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---- Card/badge primitives ---- */
.badge-soon{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(200,144,80,0.32);background:rgba(200,144,80,0.05);padding:4px 10px;border-radius:3px;font-weight:700;}
.badge-avail{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);border:1px solid rgba(46,204,113,0.32);background:rgba(46,204,113,0.05);padding:4px 10px;border-radius:3px;font-weight:700;display:inline-flex;align-items:center;gap:6px;}
.badge-avail::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,204,113,0.7);animation:pulseDot 2s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(46,204,113,0.6);}70%{box-shadow:0 0 0 6px rgba(46,204,113,0);}100%{box-shadow:0 0 0 0 rgba(46,204,113,0);}}

/* ---- Back to top ---- */
.back-top{
  position:fixed;right:22px;bottom:22px;z-index:150;
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--border-2);
  color:var(--t-1);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),background .15s,border-color .15s;
}
.back-top:hover{background:var(--accent);border-color:var(--accent);}
.back-top.show{opacity:1;transform:none;pointer-events:auto;}
.back-top svg{width:18px;height:18px;}

/* ---- Page top headers (used on subpages) ---- */
.page-top{padding:calc(var(--nav-h) + 48px) 40px 36px;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.page-top::before{content:'';position:absolute;inset:0;background:radial-gradient(800px 220px at 20% 0%,rgba(217,48,37,0.10) 0%,transparent 70%);pointer-events:none;}
.page-top-inner{max-width:1180px;margin:0 auto;position:relative;}
.page-top h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(2.6rem,5.5vw,4.6rem);text-transform:uppercase;line-height:0.95;margin-bottom:14px;}
.page-top h1 em{font-style:normal;color:var(--accent);}
.page-top p{font-size:1.05rem;color:var(--t-3);max-width:520px;line-height:1.7;}
@media(max-width:600px){.page-top{padding:calc(var(--nav-h) + 28px) 20px 28px;}}