/* Minimal reset for initial scaffolding. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

body {
  min-height: 100vh;
  background-color: #050608;
  color: #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

/* TODO: Integrate structured utility-first styling (Tailwind) in later implementation phases per /.ai/refs/homepage.md. */

/* Hero copy animation: typewriter reveal + redacted strike sweep. */
.hero-copy-line {
  --line-index: 0;
  position: relative;
  clip-path: inset(0 100% 0 0);
}

.hero-copy-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0.95em;
  transform: translateY(-50%);
  background: #000000;
  opacity: 0;
}

p.hero-copy-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 74%;
  width: 0;
  height: 0.28em;
  transform: translateY(-50%);
  background: #000000;
  opacity: 0;
}

p.hero-copy-line::after {
  top: 32%;
  height: 0.28em;
}

.hero-copy.is-typing .hero-copy-line {
  animation: hero-type-reveal 1.1s steps(24, end) forwards;
  animation-delay: calc(var(--line-index) * 0.2s);
}

.hero-copy.is-redacting .hero-copy-line::after {
  animation: hero-redact-line 0.6s linear forwards;
  animation-delay: calc(var(--line-index) * 0.08s);
}

.hero-copy.is-redacting p.hero-copy-line::before {
  animation: hero-redact-line 0.6s linear forwards;
  animation-delay: calc(var(--line-index) * 0.08s);
}

@keyframes hero-type-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hero-redact-line {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

.product-cycler-card {
  opacity: 1;
  transition: opacity 320ms ease;
}

.product-cycler-card.is-fading {
  opacity: 0;
}

/* Keep card text blocks stable while product variants cycle. */
.product-cycler-card p:nth-of-type(1) {
  min-height: 2.8em;
}

.product-cycler-card p:nth-of-type(2) {
  min-height: 3.3em;
}

@media (min-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
}

.feature-snap .feature-type-line {
  display: block;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.feature-snap .feature-type-chunk {
  display: inline-block;
  margin-right: 0.35ch;
  vertical-align: baseline;
}

.feature-snap .feature-type-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: #000000;
  pointer-events: none;
}

.feature-snap a,
.feature-snap button {
  clip-path: none !important;
}

.feature-snap.is-typing .feature-type-line {
  animation: feature-type-reveal var(--feature-type-duration, 2000ms)
    steps(var(--feature-type-steps, 32), end) forwards;
  animation-delay: var(--feature-type-delay, 0ms);
}

.feature-snap.is-redacting .feature-type-line::after {
  animation: feature-redact-in 220ms linear forwards;
  animation-delay: var(--feature-redact-delay, 0ms);
}

.feature-snap.is-unredacting .feature-type-line::after {
  animation: feature-redact-out 520ms ease-out forwards;
  animation-delay: var(--feature-redact-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .feature-snap .feature-type-line {
    clip-path: inset(0 0 0 0);
  }

  .feature-snap.is-typing .feature-type-line {
    animation: none;
  }

  .feature-snap .feature-type-line::after {
    animation: none;
    transform: scaleX(0);
  }
}

@keyframes feature-type-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes feature-redact-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes feature-redact-out {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}