/* Rickie's Shop — Race Day theme
   Custom CSS that Tailwind utilities can't express: diagonal cuts,
   the race-plate badge, the loader animation, and scroll reveals. */

:root {
  --race-red: #d71920;
  --race-red-dark: #a31217;
  --race-yellow: #f2b90f;
  --race-black: #0a0a0a;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  /* Reveal animations translate/skew elements off-screen before they
     trigger; without this a still-hidden section can create a phantom
     horizontal scrollbar at narrow widths. */
  overflow-x: hidden;
}

body {
  background-color: var(--race-black);
}

.font-display {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.01em;
}

/* Real logo art is a solid-black wordmark on transparent — invert to white
   so it reads against the theme's black header/footer bars. */
.logo-invert {
  filter: brightness(0) invert(1);
}

.font-condensed {
  font-family: "Oswald", sans-serif;
}

/* ---------- Diagonal section cuts ---------- */
.clip-angle-b {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.clip-angle-t {
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}
.clip-angle-tb {
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
}

/* Angular corner-cut cards instead of rounded corners */
.card-cut {
  clip-path: polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    22px 100%,
    0 calc(100% - 22px)
  );
}
.card-cut-sm {
  clip-path: polygon(
    0 0,
    calc(100% - 14px) 0,
    100% 14px,
    100% 100%,
    14px 100%,
    0 calc(100% - 14px)
  );
}

/* ---------- Race-number plate badge ---------- */
.plate {
  background: #fff;
  border: 4px solid var(--race-black);
  color: var(--race-red);
  transform: rotate(-3deg);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Checkered accent strip (tasteful, not literal checkerboard) ---------- */
.flag-strip {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--race-red) 0 18px,
    #fff 18px 36px
  );
}

/* ---------- Scroll reveal (diagonal wipe feel) ---------- */
.reveal {
  opacity: 0;
  transform: translateX(-36px) skewX(-4deg);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(36px) skewX(4deg);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in,
.reveal-right.in,
.reveal-up.in {
  opacity: 1;
  transform: translateX(0) translateY(0) skewX(0);
}

/* ---------- Loader ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--race-black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader.loader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  width: min(86vw, 480px);
}

.loader-track {
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 64px;
  overflow: visible;
}

.loader-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: var(--race-red);
}

.loader-bike-wrap {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-8%, -100%);
  width: 76px;
  height: auto;
}

.loader-bike-wrap svg {
  animation: bikeBob 0.28s ease-in-out infinite;
}

.wheel-rear,
.wheel-front {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin 0.5s linear infinite;
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bikeBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.dust-particle {
  position: absolute;
  bottom: -2px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(210, 180, 140, 0.55);
  pointer-events: none;
  animation: dustPuff 0.7s ease-out forwards;
}

@keyframes dustPuff {
  0% {
    opacity: 0.55;
    transform: translate(0, 0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-34px, -14px) scale(1.6);
  }
}

.loader-label {
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.35em;
}

/* Page content revealed after loader completes */
body.is-loading {
  overflow: hidden;
}
#page-content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
}
#page-content.shown {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Mobile nav ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open {
  max-height: 420px;
}