/* -------------------------------------------------------------------------------- */
/* landing.css — Race‑inspired continuous scroll‑snap landing page                    */
/* -------------------------------------------------------------------------------- */

/* ────────────────────────────────────────────────────────── */
/* Color Palette                                             */
/* ────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-dark:   #111E2E;  /* deep navy */
  --bg-mid:    #1F2A3B;  /* dark slate */
  --bg-light:  #2C3E50;  /* muted blue-gray */

  /* Text */
  --text:      #F2F2F2;  /* off-white */

  /* Accents */
  --blue:      #4A90E2;  /* primary blue */
  --blue-light:#A3D9E6;  /* lighter blue */
  --orange:    #FF8C00;  /* signal orange */

  /* Neutrals */
  --border:    #34526F;  /* steel border */
  --muted:     #777777;  /* input borders, placeholders */
  /* add your repeating‑text SVG tile once for reuse: */
 /* --text-pattern: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
 <text x='0' y='20' font-family='Exo 2' font-size='20' fill='rgba(255,255,255,0.1)'>\
   WHAT IF I DID A BUNCH OF TEXT SIDE BY SIDE OVER AND OVER\
 </text>\
</svg>"); */
}

/* ────────────────────────────────────────────────────────── */
/* Light Mode Color Palette                                   */
/* ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds - Professional layered grays (inspired by Notion/Linear) */
  --bg-dark:   #E8E8EA;  /* visible medium gray - main background (much more contrast!) */
  --bg-mid:    #FFFFFF;  /* pure white - elevated surfaces (cards, modals) */
  --bg-light:  #F5F5F7;  /* light gray - subtle sections */

  /* Text - High contrast for maximum readability (AAA standard) */
  --text:      #1A1A1A;  /* true near-black for primary text (21:1 contrast) */
  --text-muted:#6B6B6B;  /* medium gray for secondary text (7:1 contrast) */

  /* Accents - Professional blues and oranges with better contrast */
  --blue:      #0052CC;  /* deeper professional blue (Atlassian-style) */
  --blue-light:#2684FF;  /* vibrant medium blue for interactive elements */
  --blue-dark: #0747A6;  /* very dark blue for emphasis */
  --orange:    #D97706;  /* amber orange (better contrast than bright orange) */

  /* Neutrals - More defined borders and structure */
  --border:    #D1D5DB;  /* visible but soft border (gray-300) */
  --muted:     #9CA3AF;  /* muted elements (gray-400) */

  /* Shadows - Stronger for better depth perception */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 6px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.12);
}

/* ────────────────────────────────────────────────────────── */
/* Base & Layout                                            */
/* ────────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;           /* disable default page scroll */
}

body.landing-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-dark);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Exo 2", sans-serif !important;
  font-weight: 200;
  line-height: 1.5;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1em;
  text-align: center;        /* center inline/heading content */
}

/* ────────────────────────────────────────────────────────── */
/* Sections                                                  */
/* ────────────────────────────────────────────────────────── */
section {
  background: var(--bg-mid);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  padding: 1em;
  margin: 1em 0;
  position:relative;
}

/* ────────────────────────────────────────────────────────── */
/* Headings                                                  */
/* ────────────────────────────────────────────────────────── */
h2 {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.6rem;
  margin: 0 0 .5em;
  position: relative;
}
h2::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 3px;
  background-size: 20px 3px;
}

h4 {
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.6rem;
  margin: 0 0 .5em;
  position: relative;
}
h4::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 3px;
  background-size: 20px 3px;
}

.bottom-title {
  position: absolute;
   display: inline-flex;
  bottom: 20px;            /* space from the bottom of the section */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5em 1em;
  color: white;
  font-size: clamp(2rem, 2vw, 6rem) !important;
  text-align: center;
  font-family: "Exo 2", sans-serif !important;
  font-weight: bold;
}

.bottom-title::after {
  content: "▾ ";
  display: block;
  text-align: center;
  font-size: 2rem;
  color: var(--blue);
  margin-top: 0.5rem;
  animation: bounce 1.5s infinite;
  /* optionally adjust opacity / spacing here */
}
.bottom-title::before {
  content: "▾ ";
  display: block;
  text-align: center;
  font-size: 2rem;
  color: var(--blue);
  margin-top: 0.5rem;
  animation: bounce 1.5s infinite;
  /* optionally adjust opacity / spacing here */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40%                    { transform: translateY(6px); }
  60%                    { transform: translateY(3px); }
}
/* ────────────────────────────────────────────────────────── */
/* Snappier Native Scroll‑Snap                              */
/* ────────────────────────────────────────────────────────── */
#landing {
  flex: 1 1 auto;            /* fill below the fixed header */
  overflow-y: auto;          /* scroll here instead of the page */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* scroll-padding-top: 110px; /* match your header height */ */
}

/* each panel exactly fills the scroll‑container */
/* Snappier Native Scroll‑Snap */
#landing .section {
  margin: 0 !important;
  height: 100vh !important;   /* ← make each section fill the entire viewport */
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}


/* ────────────────────────────────────────────────────────── */
/* Navigation Dots                                           */
/* ────────────────────────────────────────────────────────── */
.nav-dots {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 900;
}
.nav-dots ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-dots li {
  margin: .5rem 0;
}
.nav-dots a {
  display: block;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--muted);
  transition: background .3s;
}
.nav-dots a.active,
.nav-dots a:hover {
  background: var(--blue);
}

/* ────────────────────────────────────────────────────────── */
/* Header & Logo                                             */
/* ────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 110px;            /* fixed header height */
  background: var(--bg-mid);
  border-bottom: 3px solid var(--blue);
  z-index: 1000;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
}
.site-logo-title {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.site-logo__img {
  height: 100%;
  width: auto;
}
.site-logo__text {
  display: inline-block;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  text-transform: uppercase;
  color: #FFFFFF !important;
  padding: .3em .1em 0;
  transform: skewX(-15deg);
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 #000, 3px 3px 0 #4A90E2;
  line-height: .5;
}
.small__logo__text {
  /* display: inline-block;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  color: #FFFFFF;
  padding: 0 0.4em;
  transform: skewX(-15deg);
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 #000, 3px 3px 0 #4A90E2;
  line-height: 1; */
  font-size: 1rem !important;
}

/* ────────────────────────────────────────────────────────── */
/* Site‑Nav Buttons                                          */
/* ────────────────────────────────────────────────────────── */
.site-nav__btn {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.5em 1.2em;
  background: var(--blue);
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  transition: background .2s, transform .1s;
}
.site-nav__btn:hover {
  background: var(--blue-light);
  transform: translateY(-1px);
}
.site-nav__btn:active {
  transform: translateY(0);
}
.site-nav__btn.active {
  background: var(--orange);
}

/* ────────────────────────────────────────────────────────── */
/* Site‑Nav Buttons                                          */
/* ────────────────────────────────────────────────────────── */
.frameless-site-nav__btn {
  display: inline-block;
  margin-left: 1rem;
  padding: 0.5em 1.2em;
  /* background: var(--blue); */
  color: var(--text);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  /* transition: background .2s, transform .1s; */
}
.__btn:hover {
  background: var(--blue-light);
  transform: translateY(-1px);
}
.site-nav__btn:active {
  transform: translateY(0);
}
.site-nav__btn.active {
  background: var(--orange);
}


/* ────────────────────────────────────────────────────────── */
/* Forms & Inputs                                            */
/* ────────────────────────────────────────────────────────── */
.direction-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5em;
  margin: 1em 0;
}
.direction {
  flex: 1 1 auto;
  padding: .5em;
  font-size: 0.9rem;
  border: 2px solid var(--border);
  border-radius: 3px;
  background: var(--bg-light);
  color: var(--text);
  transition: border .2s, box-shadow .2s;
}
.direction:focus {
  border-color: var(--blue);
  box-shadow: 0 0 4px var(--blue);
  outline: none;
}

.js-form {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin-bottom: 1em;
}
.js-input {
  flex: 1 1 150px;
  padding: .5em;
  font-size: 0.9rem;
  border: 2px solid var(--border);
  border-radius: 3px;
  background: var(--bg-light);
  color: var(--text);
  transition: border .2s, box-shadow .2s;
}
.js-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 4px var(--blue);
  outline: none;
}

/* ────────────────────────────────────────────────────────── */
/* List Items & Buttons                                       */
/* ────────────────────────────────────────────────────────── */
.js-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.js-list li {
  background: var(--bg-light);
  margin-bottom: .4em;
  padding: .6em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--blue);
  border-radius: 3px;
  opacity: 0;
  transform: translateX(40px);
  animation: fadeIn 0.3s forwards ease-out;
}
.js-list li.removing {
  animation: fadeOut 0.25s forwards ease-in;
}
.remove {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color .2s;
}
.remove:hover {
  color: var(--blue);
}

/* ────────────────────────────────────────────────────────── */
/* Call‑to‑Action Button                                      */
/* ────────────────────────────────────────────────────────── */
.tail-light {
  background: var(--orange);
  color: var(--text);
  border: none;
  padding: 0.7em 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  display: block;
  margin: 1em auto;
}
.tail-light:hover {
  box-shadow: 0 0 8px rgba(255,140,0,0.6);
}

/* ────────────────────────────────────────────────────────── */
/* Animations                                                */
/* ────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(40px);
    height: 0; margin: 0; padding: 0;
  }
}
@keyframes shine {
  to { left: 125%; }
}

/* ────────────────────────────────────────────────────────── */
/* Responsive                                                */
/* ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  section { padding: .5em; }
  h2 { font-size: 1.3rem; }
  .js-form { gap: .3em; }
  .direction-container { flex-wrap: wrap; }
  .direction, .regenerate { width: 100%; }
  .js-form button,
  .generate, .regenerate, #list { width: 100%; }
}

/* ────────────────────────────────────────────────────────── */
/* Footer                                                    */
/* ────────────────────────────────────────────────────────── */
.site-footer {
  display: none;             /* hidden by default */
  background: yellow;
  border-top: 1px solid var(--border);
  padding: 1em 0;
}
.site-footer .container {
  max-width: 1600px;
  margin: 0 auto;
  text-align: center;
}
.site-footer p,
.site-footer a {
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--blue);
}
.site-footer.show {
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 950;
}


#landing .section {
  /* make the section a flex‐centered container */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* apply to your headings or any element with class .section-text */
#landing .section h2,
#landing .section .section-text {
  /* really big, responsive sizing */
  font-size: clamp(4rem, 10vw, 12rem);
  line-height: 1.1;
  color: var(--text);
  margin: 0;  /* kill any default spacing */
}

#landing .section h4,
#landing .section .section-text {
  /* really big, responsive sizing */
  font-size: clamp(2rem, 10vw, 6rem);
  line-height: 1.1;
  color: var(--text);
  margin: 0;  /* kill any default spacing */
}
/* ────────────────────────────────────────────────────────── */
/* 1) Base .section layout + dark overlay for legibility    */
/* ────────────────────────────────────────────────────────── */
.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.section-content {
  position: relative;
  z-index: 2;
}

/* ────────────────────────────────────────────────────────── */
/* 2) Hero section: repeating‑text wallpaper                */
/* ────────────────────────────────────────────────────────── */
.section--hero {
  background-color: var(--bg-mid);       /* fallback */
  background-image: var(--text-pattern); /* your SVG tile */
  background-repeat: repeat;
  background-size: 200px 200px;
  background-position: 0 0;
}

/* ────────────────────────────────────────────────────────── */
/* 3) Headline sizing                                       */
/* ────────────────────────────────────────────────────────── */
.section-content h2 {
  font-size: clamp(4rem, 10vw, 12rem);
  margin: 0;
  color: var(--text);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ────────────────────────────────────────────────────────── */
/* Hero background text (single block, wraps across width)  */
/* ────────────────────────────────────────────────────────── */
.section--hero {
  position: relative;
  overflow: hidden;           /* clip any overflow of the bg text */
  background-color: var(--bg-mid); /* fallback behind the text */
}

.section--hero .bg-text {

  /* FROM THE MIDDLE */

  /* position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  padding: 0rem; */

  /* FROM THE BOTTOM */

  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  padding: 0rem;

  /* giant, responsive font size */
  font-size: clamp(2rem, 3vw, 2rem);
  line-height: 1.5;           /* tighten up the wraps */

  /* wrap words normally */
  white-space: normal;
  word-break: break-word;

  /* very low‑opacity so it sits “in the background” */
  color: rgba(255,255,255,0.3);

  /* sit behind your actual content */
  z-index: 1;
  /* tiny tweak: remove any existing transform so animation starts fresh */
}

/* bring your real content above the bg‑text */
.section--hero .section-content {
  position: relative;
  z-index: 2;
}

.section--hero .bg-text {
  /* keep your existing settings: */
  position: absolute;
  inset: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  font-size: clamp(2rem,3vw,2rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.3);
  z-index: 1;
}

/* new real‑element cursor */
.section--hero .bg-text .cursor {
  display: inline-block;
  animation: blink-cursor 1s step-end infinite;
}

/* ensure your real content stays on top */
.section--hero .section-content {
  position: relative;
  z-index: 2;
}



/* preserve wrapping */
.section--hero .bg-text {
  white-space: pre-wrap;
  word-break: break-word;
}


/* CHARTS */


/* Charts background layout */
.section--charts {
  position: relative;
  overflow: hidden;
  /* each section is already 100vh tall via your #landing .section rule */
}

.section--charts .chart-bg {
  position: absolute;
  inset: 0;                /* fill 100% width & height of section */
  z-index: 1;
}

.section--charts .chart-bg canvas {
  /* force it to match the parent’s full size */
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#chartjs-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 1.1rem;         /* bump this up as you like */
  white-space: nowrap;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 1000;             /* above your h2 (which is z-index:2) */
}

.animated .speed-needle { animation: speedSweep 2.5s ease-out forwards; }
.animated .tach-needle  { animation: tachSweep  2.5s ease-out forwards; }

#tach-needle,
#speed-needle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(-135deg);
}

/* ────────────────────────────────────────────────────────── */
/* Dashboard section full‑bleed SVG                         */
/* ────────────────────────────────────────────────────────── */
.section--dashboard {
  position: relative;   /* make chart‑bg absolute inside it */
  overflow: hidden;     /* clip anything outside */
}

.section--dashboard .chart-bg {
  position: absolute;
  inset: 0;             /* top/right/bottom/left: 0 */
  z-index: 1;           /* behind .section-content */
}

.section--dashboard .chart-bg svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity:30%;
}

#car-dashboard{
  opacity:100%;
}

/* ————— Scroll‑snap container ————— */
#landing {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;         /* smooth programmatic scrolls */
  overscroll-behavior-y: contain;  /* avoids bounce at edges */
}

/* ————— Each full‑page section ————— */
#landing .section {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;       /* lock entirely to each panel */
}



/* FINAL SECTION CTA */
#section-final {
  /* background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('/static/dashboard/img/Racetrack.jpeg')  center/cover no-repeat;; */
  background: url('/static/dashboard/img/Racetrack.jpeg') center/cover no-repeat;
  color: white;
  overflow: hidden;
  box-sizing: border-box;
}

.final-panel.unified {
  background: rgba(0, 0, 0, 0.65);
  /* make it almost full‑width of the viewport */
  width: 100%;
  max-width: 95vw;
  max-height: 90vh;
  padding: clamp(1.5em, 3vw, 3em) clamp(3vw, 6vw, 6vw);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1em, 2vw, 2em);
  overflow-y: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
#section-final .final-panel.unified h2 {
  font-size: clamp(1.5rem, 4vw, 3rem) !important;
  margin-bottom: 0.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  text-align: center;
  color: var(--blue) !important;
}

.final-panel.unified .intro {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  line-height: 1.4;
  margin-bottom: 1em;
  color: #eee;
  text-align: center;
  width: 100%;
}

.features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1em, 2vw, 1.5em);
  width: 100%;
}

/* Mobile: hide features, show only heading/intro/CTA */
@media (max-width: 768px) {
  .features {
    display: none;
  }

  .final-panel.unified {
    gap: 1.5em;
    padding: 2em 5vw;
    justify-content: center;
  }

  #section-final .final-panel.unified h2 {
    font-size: 2rem !important;
    margin-bottom: 0.5em;
  }

  .final-panel.unified .intro {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1em;
  }

  .cta-group {
    margin-top: 1em;
  }

  .cta-group h3 {
    font-size: 1.75rem;
  }

  .cta-group p {
    font-size: 1rem;
  }
}

.features li strong {
  display: block;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: #ffcc33;
  margin-bottom: 0.5em;
}

.features li p {
  margin: 0;
  color: #ddd;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  line-height: 1.4;
}

.cta-group {
  width: 100%;
  text-align: center;
  margin-top: 1em;
}

.cta-group h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0.5em;
  color: #ffcc33;
  font-weight: 700;
}

.cta-group p {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  margin-bottom: 1em;
  color: #eee;
}

.cta-button {
  background: #ffcc33;
  color: #000;
  text-decoration: none;
  padding: 0.75em 2em;
  font-weight: bold;
  border-radius: 6px;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background: #ffd84d;
}

.tiny-text{
  font-size: .7rem !important;
  padding-left: 12px;
  text-shadow: 1px 1px 0 #000, 1.75px 1.75px 0 var(--orange);
}