/* ============================================================
   Traffic Dodge — trafficdodge.com
   The page IS the game: grass either side, road down the middle,
   traffic driving through the content.

   Performance rules of the house:
   · zero JavaScript, zero webfonts (system rounded stack)
   · every animation is transform/opacity only (compositor-cheap)
   · all imagery is resized AVIF, a few KB each
   ============================================================ */

:root {
  --grass-hi: #12a52e;
  --grass-lo: #076b1e;
  --road-hi: #33363c;
  --road-lo: #26282d;
  --lane: #f2f5f0;
  --sun: #ffd60a;
  --sun-deep: #ffb703;
  --ink: #221a00;
  --panel: linear-gradient(165deg, rgba(7, 26, 10, 0.62), rgba(5, 18, 8, 0.48));
  --panel-line: rgba(255, 255, 255, 0.14);
  --road-w: min(700px, 78vw);
  --radius: 22px;
  --spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --title-font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold",
                "Segoe UI", system-ui, sans-serif;
  /* one shared rhythm so lanes, kerbs & scenery scroll as one road */
  --road-tick: 1.1s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--title-font);
  background: var(--grass-hi);
  color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Links are the game's sunny yellow everywhere — readable on dark panels,
   and it matches the title accent. */
a {
  color: var(--sun);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
a:hover { color: #fff; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--sun); color: #143a10; }

/* ---------- the road world (fixed backdrop) ---------- */

.road {
  position: fixed;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: var(--road-w);
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, var(--road-hi), var(--road-lo) 55%, var(--road-hi));
  overflow: hidden;
  z-index: 0;
  box-shadow:
    inset 14px 0 24px -18px rgba(0, 0, 0, 0.65),
    inset -14px 0 24px -18px rgba(0, 0, 0, 0.65);
}

/* rumble-strip kerbs that scroll with the lane lines: tile is 70px,
   translate is 210px (×3), so they loop seamlessly on the same clock */
.road::before,
.road::after {
  content: "";
  position: absolute;
  top: -210px;
  bottom: -210px;
  width: 8px;
  background: repeating-linear-gradient(
    to bottom, var(--sun) 0 35px, var(--lane) 35px 70px);
  animation: laneScroll var(--road-tick) linear infinite;
  will-change: transform;
}
.road::before { left: 0; }
.road::after  { right: 0; }

/* two dashed lane lines, scrolling downward forever */
.lane-lines { position: absolute; inset: 0; overflow: hidden; }
.lane-lines::before,
.lane-lines::after {
  content: "";
  position: absolute;
  top: -210px;
  bottom: -210px;
  width: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    to bottom, var(--lane) 0 120px, transparent 120px 210px);
  animation: laneScroll var(--road-tick) linear infinite;
  will-change: transform;
  opacity: 0.92;
}
.lane-lines::before { left: 33.3%; }
.lane-lines::after  { left: 66.6%; }
@keyframes laneScroll {
  to { transform: translateY(210px); }
}

/* oncoming traffic driving down the page, behind the content —
   with a lick of lane-keeping wobble on the way */
.drive-by {
  position: absolute;
  top: 0;
  width: 64px;
  opacity: 0.95;
  animation: driveDown linear infinite;
  will-change: transform;
}
@keyframes driveDown {
  0%   { transform: translateY(-32vh) translateX(0); }
  30%  { transform: translateY(17vh)  translateX(-5px); }
  65%  { transform: translateY(73vh)  translateX(4px); }
  100% { transform: translateY(130vh) translateX(0); }
}
.vehicle-1 { left: 12%; width: 88px;  animation-duration: 9s;  animation-delay: 0s; }
.vehicle-2 { left: 42%; width: 80px;  animation-duration: 12s; animation-delay: 3.5s; }
.vehicle-3 { left: 72%; width: 42px;  animation-duration: 8s;  animation-delay: 6s; }
.vehicle-4 { left: 40%; width: 86px;  animation-duration: 11s; animation-delay: 8.5s; }
.vehicle-5 { left: 14%; width: 30px;  animation-duration: 16s; animation-delay: 12s; }

/* grass verges: gradient light + freshly-mown stripes */
.verge {
  position: fixed;
  top: 0; bottom: 0;
  width: calc((100vw - var(--road-w)) / 2);
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.045) 0 90px,
      rgba(0, 0, 0, 0.05) 90px 180px),
    linear-gradient(180deg, var(--grass-hi), var(--grass-lo));
  z-index: 0;
  overflow: hidden;
}
.verge-left  { left: 0; }
.verge-right { right: 0; }

/* roadside scenery rolling past at road speed — the world drives with you.
   Only on screens wide enough to have real verges. */
.scenery {
  display: none;
  position: absolute;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.28));
  animation: sceneryScroll 7.5s linear infinite;
  will-change: transform;
}
@keyframes sceneryScroll {
  from { transform: translateY(-25vh); }
  to   { transform: translateY(120vh); }
}
@media (min-width: 980px) {
  .scenery { display: block; }
  .tree-1 { width: 110px; left: 12%; animation-delay: 0s; }
  .bush-1 { width: 64px;  left: 58%; animation-delay: 2.8s; }
  .tree-2 { width: 84px;  left: 38%; animation-delay: 5.2s; }
  .verge-right .tree-1 { left: auto; right: 14%; animation-delay: 1.4s; }
  .verge-right .bush-1 { left: auto; right: 56%; animation-delay: 4.4s; }
  .verge-right .tree-2 { left: auto; right: 34%; animation-delay: 6.6s; }
}

/* ---------- content ---------- */

main {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(6, 58, 17, 0.5), 0 8px 22px rgba(0, 0, 0, 0.35);
  margin: 0 0 28px;
}

section { margin-bottom: 92px; }

/* ---------- hero ---------- */

.hero { padding: 9vh 0 64px; }

.hero h1 { line-height: 0.95; }

.title-big {
  display: block;
  font-size: clamp(3.4rem, 12.5vw, 6.8rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 55%, #d9f9dc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(6, 58, 17, 0.55))
          drop-shadow(0 16px 26px rgba(0, 0, 0, 0.35));
}

.title-small {
  display: block;
  font-size: clamp(1.7rem, 6.4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.35em;
  margin-left: 0.35em; /* optically recentre the tracking */
  background: linear-gradient(180deg, #ffe93c, var(--sun-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(96, 62, 0, 0.55))
          drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
}

.tagline {
  margin-top: 18px;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  font-weight: 700;
  color: #eaffea;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hero-car {
  margin: 34px auto 10px;
  display: block;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.38));
  animation: heroBounce 1.6s ease-in-out infinite;
}
@keyframes heroBounce {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-9px) rotate(1.5deg); }
}

.store-cta { margin-top: 28px; }

.coming-soon {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(180deg, #ffe93c, var(--sun-deep));
  color: var(--ink);
  font-weight: 900;
  font-size: 1.05rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 2px 0 rgba(122, 80, 0, 0.45);
  animation: ctaWiggle 5s ease-in-out infinite;
}
/* a shine sweeps across the pill every few seconds */
.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, 0.65) 50%, transparent 58%);
  transform: translateX(-160%);
  animation: ctaShine 5s ease-in-out infinite;
}
@keyframes ctaShine {
  0%, 55%  { transform: translateX(-160%); }
  75%, 100% { transform: translateX(160%); }
}
@keyframes ctaWiggle {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-2deg); }
  96% { transform: rotate(2deg); }
  98% { transform: rotate(-1deg); }
}

.sub {
  margin: 22px auto 0;
  max-width: 30rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: #ecffe9;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  padding: 12px 18px;
  border-radius: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ---------- feature cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  text-align: center;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-top-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-radius: var(--radius);
  padding: 28px 20px 24px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.35s var(--spring),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}
/* light sheen sweeps the glass on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  transform: translateX(-160%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.card:hover::before { transform: translateX(160%); }

.card img {
  height: 74px;
  width: auto;
  margin-bottom: 14px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.3));
  /* `scale` composes with the keyframe transforms below */
  transition: scale 0.35s var(--spring);
}
.card:hover img { scale: 1.12; }

/* little idle animations, one per prop */
.card:nth-child(1) img { animation: coinSpin 3.2s ease-in-out infinite; }
@keyframes coinSpin { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
.card:nth-child(2) img { animation: starPulse 1.6s ease-in-out infinite; }
@keyframes starPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14) rotate(8deg); } }
.card:nth-child(3) img { animation: heartBeat 1.3s ease-in-out infinite; }
@keyframes heartBeat { 0%,100% { transform: scale(1); } 18% { transform: scale(1.12); } 36% { transform: scale(1); } 54% { transform: scale(1.1); } }
.card:nth-child(4) img { animation: oilShimmy 4s ease-in-out infinite; }
@keyframes oilShimmy { 0%,100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }

.card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: var(--sun);
}

.card p {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  color: #f2fff0;
}

/* ---------- screenshots ---------- */

.shot-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.shot-row img {
  width: min(230px, 62vw);
  height: auto;
  border-radius: 34px;
  border: 6px solid #17181c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.42);
  transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
}
.shot-row img:nth-child(1) { transform: rotate(-2.5deg); }
.shot-row img:nth-child(3) { transform: rotate(2.5deg); }
.shot-row img:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 26px 54px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

/* ---------- garage ---------- */

.garage-row {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.garage-row figure {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-top-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border-radius: 18px;
  padding: 18px 22px 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s var(--spring), box-shadow 0.35s ease;
}
.garage-row figure:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

.garage-row img {
  height: 88px;
  width: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.3));
}
/* the car does a happy little hop when you visit its bay */
.garage-row figure:hover img { animation: garageHop 0.55s var(--spring); }
@keyframes garageHop {
  0%   { transform: none; }
  30%  { transform: translateY(-10px) scale(0.94, 1.08); }
  60%  { transform: translateY(0) scale(1.06, 0.92); }
  100% { transform: none; }
}

.garage-row figcaption {
  margin-top: 8px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* ---------- footer ---------- */

footer {
  padding: 34px 10px 22px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #dcf8d6;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

footer::before {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  margin: 0 auto 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

footer p { margin-bottom: 10px; }

footer a { color: var(--sun); }

.ellabyte { font-size: 0.95rem; }

/* ---------- scroll-driven reveals (progressive enhancement) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .features h2, .screens h2, .garage h2,
    .card, .shot-row img, .garage-row figure {
      animation: reveal both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- calm mode ---------- */

@media (prefers-reduced-motion: reduce) {
  .lane-lines::before, .lane-lines::after,
  .road::before, .road::after,
  .drive-by, .scenery, .hero-car,
  .card img, .coming-soon, .coming-soon::after,
  .garage-row figure:hover img { animation: none !important; }
  .card, .card::before, .card img,
  .shot-row img, .garage-row figure { transition: none !important; }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  .title-big  { font-size: 12vw; letter-spacing: 0; }
  .title-small{ font-size: 5.8vw; }
  .hero { padding-top: 6vh; }
  .shot-row img:nth-child(1),
  .shot-row img:nth-child(3) { transform: none; } /* stacked shots: no tilt */
  section { margin-bottom: 64px; }
}