/* The Fuel Lab — VSL Landing Page styles */

@font-face {
  font-family: "Excalifont";
  src: url("./fonts/Excalifont-Regular.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Caveat:wght@400;500;700&display=swap");

:root {
  --fuel-teal: #2A9D8F;
  --fuel-teal-dark: #1F7268;
  --fuel-teal-soft: #BFEAE5;
  --fuel-cream: #FFFBF5;
  --fuel-paper: #F4EFE6;
  --fuel-ink: #2C2C2A;
  --fuel-ink-soft: #5A5A55;
  --fuel-ink-faint: #8a8a82;
  --fuel-coral: #D85A30;
  --fuel-line: #2C2C2A;
}

html, body {
  background: var(--fuel-cream);
  color: var(--fuel-ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--fuel-cream);
  background-image: radial-gradient(circle, rgba(44, 44, 42, 0.08) 1px, transparent 1.4px);
  background-size: 28px 28px;
}

.font-hand { font-family: "Excalifont", "Patrick Hand", "Comic Sans MS", system-ui, sans-serif; }
.font-script { font-family: "Caveat", "Excalifont", cursive; }
.font-body { font-family: "Inter", system-ui, sans-serif; }

/* Wiggle filter — applied to borders/edges of cards, dividers, buttons */
.wiggle { filter: url(#wiggle); }
.wiggle-strong { filter: url(#wiggle-strong); }
.wiggle:hover { filter: url(#wiggle-hover); }

/* Hand-drawn dashed border helper — uses an SVG turbulence-displaced
   border-image rather than CSS border so corners stay organic. */
.hd-border {
  position: relative;
  border: 1.5px dashed var(--fuel-ink);
  filter: url(#wiggle);
}
.hd-border-solid {
  position: relative;
  border: 2px solid var(--fuel-ink);
  filter: url(#wiggle);
}
.hd-border-teal {
  border-color: var(--fuel-teal);
}
.hd-border-coral {
  border-color: var(--fuel-coral);
}

/* Paper card with soft shadow */
.paper {
  background: #FFFFFF;
  box-shadow: 2px 3px 0 0 rgba(44, 44, 42, 0.08),
              6px 8px 18px -4px rgba(44, 44, 42, 0.18);
}

.paper-warm {
  background: var(--fuel-paper);
}

/* Hand underline (teal swipe) - used under accent words */
.hd-underline {
  position: relative;
  display: inline-block;
}
.hd-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.05em;
  height: 0.32em;
  background: var(--fuel-teal-soft);
  z-index: -1;
  filter: url(#wiggle);
  transform: rotate(-0.5deg);
}

/* Highlighter wash (sits behind text) */
.hd-highlight {
  background: linear-gradient(to top,
    var(--fuel-teal-soft) 0%,
    var(--fuel-teal-soft) 60%,
    transparent 60%,
    transparent 100%);
  padding: 0 0.12em;
}

/* Adjacent rotated inline-block word spans collapse the trailing space —
   restore a word-gap between siblings inside any heading or hero copy. */
h1 span[style*="inline-block"] + span[style*="inline-block"],
h2 span[style*="inline-block"] + span[style*="inline-block"],
h3 span[style*="inline-block"] + span[style*="inline-block"],
.font-hand span[style*="inline-block"] + span[style*="inline-block"] {
  margin-left: 0.28em;
}

/* Excalifont rotation utilities */
.rot-l1 { display: inline-block; transform: rotate(-1deg); }
.rot-r1 { display: inline-block; transform: rotate(1deg); }
.rot-l2 { display: inline-block; transform: rotate(-2deg); }
.rot-r2 { display: inline-block; transform: rotate(2deg); }
.rot-l05 { display: inline-block; transform: rotate(-0.5deg); }
.rot-r05 { display: inline-block; transform: rotate(0.5deg); }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Section eyebrow rule */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow-rule::before {
  content: "";
  width: 38px;
  height: 2px;
  background: currentColor;
  filter: url(#wiggle);
  border-radius: 999px;
}

/* Hand-drawn dashed list separator */
.dashed-row {
  border-bottom: 1.5px dashed rgba(44, 44, 42, 0.45);
  filter: url(#wiggle);
}

/* Sticky CTA bar transition */
.sticky-cta {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Button blob — fallback if SVG path fails */
.btn-blob {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Excalifont", "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-blob:hover { transform: translateY(-1px) scale(1.015); }
.btn-blob:active { transform: translateY(0) scale(0.985); }

/* Q&A accordion */
.qa-row + .qa-row { margin-top: 1.25rem; }

/* Trust pill */
.trust-pill {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--fuel-ink-soft);
}

/* Small visual: the 'paper tape' tab corners on hero card */
.tape {
  position: absolute;
  width: 110px;
  height: 22px;
  background: rgba(46, 196, 182, 0.55);
  filter: url(#wiggle);
}

/* Three-fuel-systems icon positioning */
.fuel-system-card {
  background: #FFFFFF;
  box-shadow: 1px 2px 0 0 rgba(44, 44, 42, 0.06),
              3px 5px 12px -3px rgba(44, 44, 42, 0.15);
}

/* Hide scrollbar in horizontal scroll regions */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* === DYNAMISM ============================================================= */

/* Floating doodle drift keyframes */
@keyframes tflDrift0 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes tflDrift1 {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px -6px; }
}
@keyframes tflDrift2 {
  0%, 100% { translate: 0 0; }
  50% { translate: -3px -10px; }
}

/* Kinetic word entrance — used by <KineticWords> */
.kw .kw-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px) rotate(-2deg);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: pre;
}
.kw.kw-in .kw-word {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* Card hover: lift + tape brighten + slight rotate snap */
.paper, .fuel-system-card {
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.paper:hover, .fuel-system-card:hover {
  transform: translateY(-3px) rotate(0deg) !important;
  box-shadow: 3px 4px 0 0 rgba(44, 44, 42, 0.10),
              10px 14px 28px -6px rgba(44, 44, 42, 0.22);
}
.paper:hover .tape, .fuel-system-card:hover .tape {
  background: rgba(46, 196, 182, 0.85);
}
.tape { transition: background 0.3s; }

/* Pulse on the play button — gentle */
@keyframes tflPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.play-pulse { animation: tflPulse 2.6s ease-in-out infinite; transform-origin: center; }

/* Wobble — used on individual icons / accents */
@keyframes tflWobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.wobble { animation: tflWobble 5.2s ease-in-out infinite; transform-origin: center; }

/* Hand-drawn underline — animated reveal version */
.hd-underline-anim {
  position: relative;
  display: inline-block;
}
.hd-underline-anim::after {
  content: "";
  position: absolute;
  left: -2%;
  bottom: -0.05em;
  height: 0.32em;
  background: var(--fuel-teal-soft);
  z-index: -1;
  filter: url(#wiggle);
  transform: rotate(-0.5deg) scaleX(0);
  transform-origin: left center;
  width: 104%;
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
.kw.kw-in .hd-underline-anim::after,
.reveal.is-in .hd-underline-anim::after,
.hd-underline-anim.in::after {
  transform: rotate(-0.5deg) scaleX(1);
}

/* Section anchor margin holder for floating doodle ribbon */
.doodle-margin {
  position: relative;
}

/* Soft pencil-shake on dashed dividers (very subtle) */
@keyframes tflDividerShimmer {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.5px); }
}

/* Tweak: wiggle scale variable so the panel can adjust intensity */
:root {
  --wiggle-scale: 2;
}

/* Coral accent helpers */
.text-coral { color: var(--fuel-coral); }
.bg-coral-soft { background: rgba(216, 90, 48, 0.08); }
.border-coral { border-color: var(--fuel-coral); }

.text-teal { color: var(--fuel-teal); }
.text-teal-dark { color: var(--fuel-teal-dark); }
.bg-teal { background: var(--fuel-teal); }
.bg-cream { background: var(--fuel-cream); }
.bg-paper { background: var(--fuel-paper); }
.text-ink { color: var(--fuel-ink); }
.text-ink-soft { color: var(--fuel-ink-soft); }
.text-ink-faint { color: var(--fuel-ink-faint); }
.border-ink { border-color: var(--fuel-ink); }
.border-teal { border-color: var(--fuel-teal); }

/* Section spacing */
.sec-pad { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 768px) {
  .sec-pad { padding-top: 3rem; padding-bottom: 3rem; }
}

/* Container */
.page-wrap { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.prose-wrap { max-width: 38rem; }