/* ─── ANIMATIONS + POLISH ─── */

/* Page enter fade */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body {
  animation: pageFadeIn 0.7s var(--ease-out);
}

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }

/* Better hover for buttons — magnetic-ish lift */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), letter-spacing 0.5s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn:hover {
  transform: translateX(8px) translateY(-1px);
  letter-spacing: 0.22em;
}
.btn:hover::before {
  transform: translateX(0);
}

.btn--ghost::before { background: rgba(255,255,255,0.12); }

/* Nav link underline anim */
.nav .links a {
  position: relative;
  padding: 4px 0;
}
.nav .links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav .links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav .cart {
  transition: background-color 0.3s, border-color 0.3s;
}
.nav .cart:hover {
  background: rgba(255,255,255,0.08);
}
.nav .cart[data-pulse]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0;
  animation: cartPulse 1.6s var(--ease);
}
@keyframes cartPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Product image: subtle float */
@keyframes productFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.product-image img {
  animation: productFloat 7s var(--ease) infinite;
  will-change: transform;
}

/* Product big word: drift */
@keyframes wordDrift {
  0% { transform: translateX(-1%); }
  100% { transform: translateX(1%); }
}
.product-bigword {
  animation: wordDrift 12s ease-in-out infinite alternate;
}

/* Ingredient list: better hover */
.ing {
  cursor: default;
  position: relative;
}
.ing::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: opacity 0.35s, transform 0.35s var(--ease);
}
.ing:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Ritual step: counter pulse on hover */
.ritual-step {
  transition: padding-left 0.5s var(--ease);
}
.ritual-step:hover {
  padding-left: 12px;
}
.ritual-step .step-n {
  transition: transform 0.5s var(--ease), color 0.3s;
}
.ritual-step:hover .step-n {
  transform: scale(1.15);
  color: var(--ink);
}

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* PDP image hover */
.related-card {
  position: relative;
  overflow: hidden;
}
.related-card img {
  transition: transform 0.7s var(--ease);
}
.related-card:hover img {
  transform: scale(1.08) rotate(-2deg);
}
.related-card-overlay .nm {
  transition: transform 0.5s var(--ease);
}
.related-card:hover .related-card-overlay .nm {
  transform: translateX(6px);
}

/* CTA title shimmer accent */
.cta-title em {
  display: inline-block;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent) 50%, #fff 50%, #fff 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer 6s var(--ease) infinite;
}
@keyframes shimmer {
  0%, 30% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}

/* Carousel counter — animate on change */
.carousel-counter {
  transition: transform 0.4s var(--ease);
  will-change: transform;
}
.carousel-counter.flip {
  animation: counterFlip 0.45s var(--ease);
}
@keyframes counterFlip {
  0% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(-12px); opacity: 0; }
  60% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Hero scroll cue arrow */
.hero-foot .scroll-cue {
  cursor: pointer;
}

/* Manifesto stat numbers: subtle scale on parent hover */
.manifesto-stat > div {
  transition: transform 0.6s var(--ease);
}
.manifesto-stat:hover > div { transform: translateY(-4px); }

/* Tagline pill on PDP: hover bg */
.pdp-info .tagline {
  transition: background-color 0.3s, color 0.3s;
}
.pdp-info .tagline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Product nav (PDP): bigger arrow on hover */
.pdp-nav a {
  transition: gap 0.3s var(--ease), color 0.3s;
}
.pdp-nav a:hover { gap: 14px; color: #fff; }

/* Drawer item hover */
.cart-item {
  transition: padding-left 0.4s var(--ease);
}
.cart-item:hover { padding-left: 8px; }

/* ─── MOBILE: carousel becomes horizontal SWIPE-SNAP ─── */
@media (max-width: 900px) {
  /* Hide custom cursor */
  .cursor { display: none !important; }

  /* Nav: hamburger-ish */
  .nav {
    padding: 14px 18px;
    mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
    color: var(--ink);
  }
  .nav .mark { font-size: 18px; }
  .nav .mark sup { display: none; }
  .nav .cart {
    padding: 6px 12px;
    font-size: 10px;
    border-color: currentColor;
  }
  .nav .links { display: none; }

  /* Hero */
  .hero { height: 100vh; }
  .hero .stage {
    padding: 80px 18px 24px;
  }
  .hero-eyebrow {
    font-size: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .hero-eyebrow .right { gap: 12px; flex-wrap: wrap; }
  .hero-title {
    font-size: clamp(64px, 17vw, 110px) !important;
  }
  .hero-title .ln {
    padding: 0 !important;
    text-align: left !important;
  }
  .hero-title .ln:nth-child(2) { padding-left: 10vw !important; }
  .hero-title .ln:nth-child(3) { padding-left: 0 !important; }
  .hero-foot {
    font-size: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hero-foot > div[style] { text-align: left !important; }

  /* Manifesto */
  .manifesto { height: auto !important; min-height: 100vh; }
  .manifesto .stage { position: relative !important; height: auto; padding: 80px 18px; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 32px; }
  .manifesto-title { font-size: clamp(36px, 9vw, 64px) !important; }
  .manifesto-stat { flex-wrap: wrap; gap: 22px; }
  .manifesto-stat .n { font-size: 40px; }

  /* CAROUSEL → swipe snap */
  .carousel {
    height: auto !important;
  }
  .carousel .stage {
    position: relative !important;
    height: auto;
    background: var(--bg);
    color: var(--ink);
  }
  .carousel-head {
    position: relative;
    padding: 70px 18px 18px;
    color: var(--ink-soft);
  }
  .carousel-counter { color: var(--ink); }
  .track {
    width: 100% !important;
    transform: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 18px 28px;
  }
  .track::-webkit-scrollbar { display: none; }
  .product {
    width: 86vw !important;
    height: auto !important;
    flex-shrink: 0;
    scroll-snap-align: center;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto;
    padding: 28px 28px 32px !important;
    border-radius: 18px;
    margin-right: 14px;
    background: var(--pcard, var(--deep));
    color: #fff;
  }
  .product-bigword { font-size: 38vw !important; }
  .product-image {
    height: 54vh !important;
    order: 1;
  }
  .product-image img {
    max-height: 100%;
    height: auto;
    width: auto;
  }
  .product-info { order: 2; }
  .product-info .num { color: rgba(255,255,255,0.6); }
  .product-info .name { font-size: clamp(40px, 11vw, 64px) !important; margin-bottom: 14px; }
  .product-info .blurb { color: rgba(255,255,255,0.78); font-size: 14px; margin-bottom: 22px; }
  .product-info .pricerow { margin-bottom: 18px; }
  .product-info .price { font-size: 28px; }
  .product-info .btn { font-size: 11px; padding: 14px 20px; }

  /* Science / Ritual / CTA */
  .science { padding: 80px 18px 100px; }
  .science-head .title { font-size: clamp(36px, 9vw, 60px); }
  .ritual { padding: 80px 18px; }
  .ritual-title { font-size: clamp(40px, 10vw, 68px) !important; }
  .cta { padding: 120px 18px 80px; }
  .cta-title { font-size: clamp(56px, 18vw, 130px) !important; }
  .cta-sub { font-size: 15px; }
  .cta-actions { flex-direction: column; gap: 10px; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .footer { padding: 60px 18px 24px; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Tweaks panel — smaller on mobile */
  .tweaks {
    bottom: 12px; right: 12px; left: 12px; min-width: 0;
  }
  .tweaks .swatches { gap: 8px; }
  .tweaks .sw { width: 30px; height: 30px; }

  /* PDP mobile */
  .pdp-hero { grid-template-columns: 1fr; gap: 24px; padding: 80px 18px 36px; }
  .pdp-image { aspect-ratio: 4 / 5; max-height: 70vh; }
  .pdp-image .pdp-bigword { font-size: 50vw; }
  .pdp-info .name { font-size: clamp(48px, 13vw, 80px) !important; }
  .pdp-detail { padding: 80px 18px; }
  .pdp-detail-head h2 { font-size: clamp(36px, 9vw, 60px); }
  .pdp-long, .pdp-how { grid-template-columns: 1fr !important; gap: 24px; }
  .pdp-ing-list li { grid-template-columns: 36px 1fr; gap: 16px; }
  .pdp-ing-list li .d { grid-column: 2; }
  .pdp-related { padding: 80px 18px; }
  .pdp-related h2 { font-size: clamp(40px, 10vw, 64px); }
  .related-grid { grid-template-columns: 1fr; gap: 16px; }
  .pdp-quick { grid-template-columns: 1fr; gap: 6px; }
  .pdp-buy { grid-template-columns: 1fr; gap: 16px; }
  .pdp-tiny { flex-wrap: wrap; gap: 12px; }

  /* Cart drawer mobile */
  .cart-drawer { width: 100vw; }
  .cart-head { padding: 22px 20px 16px; }
  .cart-items { padding: 6px 20px; }
  .cart-foot { padding: 18px 20px 22px; }
  .cart-toast { left: 16px; right: 16px; bottom: 16px; justify-content: center; }

  /* No row/col hover effects on touch */
  .ing:nth-child(odd) { border-right: none; padding-right: 0; }
  .ing:nth-child(even) { padding-left: 0; }
  .ing:hover, .ing:nth-child(even):hover { padding-left: 0; }

  /* Disable product image float anim on mobile to save battery */
  .product-image img { animation: none; }
}

/* Carousel head swipe hint on mobile only */
@media (max-width: 900px) {
  .swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .swipe-hint .arrow {
    display: inline-block;
    animation: swipeBounce 1.6s var(--ease) infinite;
  }
  @keyframes swipeBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
  }
}
@media (min-width: 901px) {
  .swipe-hint { display: none; }
}