/* Headlight/Emblem: exact owner Lovable source CSS, scoped tokens and local font aliases. */
:root { --hh-preloader-ready: 1; }
.hh-pre, .hh-pre * { box-sizing: border-box; }
.hh-pre {
 --carbon: oklch(0.19 0.005 250);
 --carbon-foreground: oklch(0.97 0.005 80);
 --primary: oklch(0.58 0.16 47);
 --font-display: "Helmet Hub Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
 font-family: "Helmet Hub Inter", Inter, ui-sans-serif, system-ui, sans-serif;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 touch-action: none;
}
.hh-pre-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.hh-pre-primary { color: var(--primary); }
.hh-pre-kicker { margin: 0; }
.hh-pre {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--carbon);
  color: var(--carbon-foreground);
  animation: hhPreIn 0.22s ease-out both, hhPreDeadline 1ms step-end 4999ms forwards;
}
.hh-pre[data-tone="cream"] {
  background: var(--cream);
  color: var(--carbon);
}
.hh-pre[data-exit="1"] {
  animation: hhPreOut 0.52s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.hh-pre[data-exit="1"] .hh-pre-stack,
.hh-pre[data-exit="1"] .hh-lights {
  animation: hhFade 0.2s ease-in forwards;
}
.hh-pre--box {
  --ui: 0.52;
  position: absolute;
  animation: none;
}
@keyframes hhPreIn {
  from {
    opacity: 0;
  }
}
@keyframes hhPreOut {
  to {
    transform: translateY(-101%);
  }
}
@keyframes hhFade {
  to {
    opacity: 0;
  }
}

/* shared parts ---------------------------------------------------------- */
.hh-pre-stack {
  display: grid;
  justify-items: center;
  gap: calc(18px * var(--ui, 1));
  padding: calc(28px * var(--ui, 1));
  text-align: center;
}
.hh-pre-word {
  display: flex;
  gap: calc(11px * var(--ui, 1));
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: 0.045em;
  font-size: calc(min(54px, 13vw) * var(--ui, 1));
}
.hh-pre-w {
  display: flex;
}
.hh-pre-l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: hhLetter 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes hhLetter {
  to {
    opacity: 1;
    transform: none;
  }
}
.hh-pre-kicker {
  font-size: calc(10px * var(--ui, 1));
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in oklab, currentColor 52%, transparent);
}
.hh-pre-bar {
  width: calc(190px * var(--ui, 1));
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in oklab, currentColor 14%, transparent);
}
.hh-pre-bar i {
  display: block;
  height: 100%;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(0);
  animation: hhBar var(--dur, 1.4s) linear forwards;
}
@keyframes hhBar {
  to {
    transform: scaleX(1);
  }
}
.hh-wipe {
  clip-path: inset(0 100% 0 0);
  animation: hhWipe 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes hhWipe {
  to {
    clip-path: inset(0 -3% 0 0);
  }
}


@keyframes hhIn { to { opacity: 1; } }
.hh-emblem {
  display: grid;
  justify-items: center;
  gap: calc(20px * var(--ui, 1));
  padding: calc(28px * var(--ui, 1));
  text-align: center;
}
.hh-badge-wrap {
  position: relative;
  width: calc(196px * var(--ui, 1));
  height: calc(196px * var(--ui, 1));
  display: grid;
  place-items: center;
}
.hh-badge-wrap::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--primary) 34%, transparent),
    transparent 70%
  );
  opacity: 0;
  animation: hhIn 0.6s ease-out 0.35s forwards;
}
.hh-badge {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 80%;
  border-radius: 999px;
  object-fit: cover;
  clip-path: circle(0% at 50% 50%);
  transform: scale(0.86);
  animation: hhBadge 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes hhBadge {
  from {
    clip-path: circle(0% at 50% 50%);
    transform: scale(0.86);
  }
  to {
    clip-path: circle(51% at 50% 50%);
    transform: scale(1);
  }
}
.hh-badge-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hh-badge-track {
  fill: none;
  stroke: color-mix(in oklab, var(--carbon-foreground) 16%, transparent);
  stroke-width: 2.5;
}
.hh-badge-sweep {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hhSweep 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
@keyframes hhSweep {
  to {
    stroke-dashoffset: 0;
  }
}

.hh-fade {
  opacity: 0;
  animation: hhFadeIn 0.5s ease-out var(--d, 0.5s) forwards;
}
@keyframes hhFadeIn {
  to {
    opacity: 1;
  }
}


@keyframes hhPreDeadline { to { visibility:hidden;opacity:0;pointer-events:none; } }
@media (prefers-reduced-motion: reduce) { .hh-pre:not([data-forced="1"]) { display:none; } }
