/*
 * Vitanatura visual tokens and scoped starter components.
 * Nothing in this stylesheet globally overrides Blocksy's header, shop or checkout.
 */
:root {
  --vn-forest: #173b32;
  --vn-terracotta: #c97855;
  --vn-sand: #f2e4d5;
  --vn-gold: #b5a16b;
  --vn-beige: #e8d4b8;
}

/* Optional initial component: paste the HTML from START-HERE.txt into a Custom HTML block. */
.vn-intro {
  box-sizing: border-box;
  color: var(--vn-sand);
  background: radial-gradient(circle at 85% 20%, #285a48 0, transparent 42%), var(--vn-forest);
  border-radius: 16px;
  padding: clamp(42px, 8vw, 112px) clamp(22px, 7vw, 92px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vn-intro *, .vn-intro *::before, .vn-intro *::after { box-sizing: border-box; }

.vn-intro__eyebrow {
  display: block;
  color: var(--vn-gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.vn-intro__title {
  color: var(--vn-sand);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 1.06;
  max-width: 15ch;
  margin: 0 0 1.4rem;
  letter-spacing: -.03em;
}

.vn-intro__copy {
  color: var(--vn-beige);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  max-width: 43ch;
  margin: 0;
}

/* Reveal behavior is opt-in. Without JavaScript the content remains visible. */
@media (prefers-reduced-motion: no-preference) {
  .vn-motion-ready [data-vn-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 650ms ease, transform 650ms ease;
  }
  .vn-motion-ready [data-vn-reveal].vn-is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .vn-intro { border-radius: 12px; }
}