/* Data Makers — small custom layer alongside the compiled Tailwind utilities.
   Global resets, self-hosted fonts, and motion that is awkward as utilities. */

/* ---- Self-hosted Inter (latin subset) ----
   Weights 400–800 so headings/CTAs can use real bold (no faux-bold). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800.woff2") format("woff2");
}

:root {
  --dm-yellow: #f9d901;
  --dm-yellow-hover: #fee539;
  --dm-amber: #e6b800;
  --dm-ink: #0c0b06;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  background-color: var(--dm-ink);
}

/* Branded scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--dm-ink);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dm-amber), var(--dm-yellow));
  border-radius: 999px;
}

:focus-visible {
  outline: 2px solid var(--dm-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

.text-gradient-yellow {
  background: linear-gradient(90deg, #e6b800, #f9d901, #fee539);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Soft circuit pattern — yellow-tinted tech texture for the hero mesh */
.cyber-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F9D901' stroke-opacity='0.55' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M0 24 H34 L46 36 H78'/%3E%3Cpath d='M46 36 V70 L58 82 V120'/%3E%3Cpath d='M120 50 H92 L80 38 V8'/%3E%3Cpath d='M120 96 H86 L74 84'/%3E%3Cpath d='M16 0 V22'/%3E%3Cpath d='M0 92 H22 L34 104 H64'/%3E%3Ccircle cx='88' cy='64' r='10'/%3E%3Ccircle cx='88' cy='64' r='4'/%3E%3C/g%3E%3Cg fill='%23F9D901' fill-opacity='0.7'%3E%3Ccircle cx='34' cy='24' r='2.2'/%3E%3Ccircle cx='78' cy='36' r='2.2'/%3E%3Ccircle cx='58' cy='82' r='2.2'/%3E%3Ccircle cx='80' cy='8' r='2.2'/%3E%3Ccircle cx='64' cy='104' r='2.2'/%3E%3Ccircle cx='22' cy='92' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
}

/* ---- Hero dataset-studio motion (curation, not detection) ---- */
.hero-pulse {
  animation: hero-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Raw sample cards gently bob on staggered phases */
.hero-sample-a,
.hero-sample-b,
.hero-sample-c {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-sample 5.2s ease-in-out infinite;
}
.hero-sample-b { animation-delay: 0.45s; }
.hero-sample-c { animation-delay: 0.9s; }
@keyframes hero-sample {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Maker figures gently bob (position/mirror stays on the outer SVG group) */
.hero-figure {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-sample 5.6s ease-in-out infinite;
}

/* Label chips light up in sequence like a curator applying tags */
.hero-tag {
  animation: hero-tag 8s ease-in-out infinite;
}
.hero-tag.t1 { animation-delay: 0s; }
.hero-tag.t2 { animation-delay: 0.55s; }
.hero-tag.t3 { animation-delay: 1.1s; }
.hero-tag.t4 { animation-delay: 1.65s; }
.hero-tag.t5 { animation-delay: 2.2s; }
@keyframes hero-tag {
  0%, 10% { opacity: 0.4; }
  18%, 62% { opacity: 1; }
  72%, 100% { opacity: 0.4; }
}

/* Flow dots drift raw → curated */
.hero-flow {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-flow 2.4s ease-in-out infinite;
}
.hero-flow.f1 { animation-delay: 0s; }
.hero-flow.f2 { animation-delay: 0.35s; }
.hero-flow.f3 { animation-delay: 0.7s; }
@keyframes hero-flow {
  0% { opacity: 0.15; transform: translateX(0); }
  40% { opacity: 1; }
  100% { opacity: 0.15; transform: translateX(18px); }
}

/* Scattered data-point confetti drifts on staggered phases */
.hero-confetti {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-confetti 6s ease-in-out infinite;
}
@keyframes hero-confetti {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Pooled data at the flask base gently shimmers as it fills */
.hero-pool {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: hero-pool 4.5s ease-in-out infinite;
}
@keyframes hero-pool {
  0%, 100% { opacity: 0.82; transform: scaleY(0.94); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* Bubbles rise through the flask, then fade */
.hero-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-bubble 3.2s ease-in-out infinite;
}
@keyframes hero-bubble {
  0% { opacity: 0; transform: translateY(8px); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* Curated pack soft glow breathe */
.hero-pack {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-pack 4.5s ease-in-out infinite;
}
@keyframes hero-pack {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

/* Quality / coverage bars fill, hold, reset */
.hero-bar {
  transform-box: fill-box;
  transform-origin: left center;
  animation: hero-bar 7s ease-in-out infinite;
}
.hero-bar-delay { animation-delay: 0.55s; }
@keyframes hero-bar {
  0%, 8% { transform: scaleX(0.18); opacity: 0.7; }
  35%, 72% { transform: scaleX(1); opacity: 1; }
  88%, 100% { transform: scaleX(0.18); opacity: 0.7; }
}

@media (max-width: 640px) {
  .dm-card-glow {
    box-shadow: 0 2px 18px 6px rgba(249, 217, 1, 0.32);
  }
}

/* Scroll-reveal: hidden only when JS can reveal (progressive enhancement). */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .animate-float,
  .hero-pulse,
  .hero-figure,
  .hero-sample-a,
  .hero-sample-b,
  .hero-sample-c,
  .hero-tag,
  .hero-flow,
  .hero-pack,
  .hero-bar,
  .hero-confetti,
  .hero-bubble,
  .hero-pool {
    animation: none !important;
  }
}