/* ==========================================================================
   Retake — Pure Spices, Rich Flavours
   Custom styles layered on top of Tailwind CDN utilities
   ========================================================================== */

:root {
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  scroll-behavior: smooth;
}

html {
  background: #fbf7ee;
}

body {
  font-family: 'Jost', sans-serif;
  background-color: #fbf7ee;
  color: #211c15;
  overflow-x: hidden;
  cursor: default;
  /* Live announcement bar sits fixed above #navbar; JS measures its
     rendered height into --announce-h so in-flow content starts right
     where it always did relative to the navbar, with no hardcoded px. */
  padding-top: var(--announce-h, 0px);
}

::selection {
  background: #c9a227;
  color: #fbf7ee;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f2e9d6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c9a227, #7a171b);
  border-radius: 10px;
}

/* Grain overlay for texture / premium feel */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.4;
}

/* Headings */
h1, h2, h3, h4, .font-display {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.01em;
}

.font-accent {
  font-family: 'Great Vibes', cursive;
}

.text-gradient-gold {
  background: linear-gradient(120deg, #c9a227 0%, #a8751a 55%, #6b5210 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section label chip */
.eyebrow {
  letter-spacing: 0.35em;
}

/* Custom cursor ------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #e9d08a;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(233, 208, 138, 0.7);
  transition: width 0.25s var(--ease-elegant), height 0.25s var(--ease-elegant), opacity 0.25s;
}
.cursor-ring.is-active {
  width: 60px;
  height: 60px;
  background: rgba(193, 39, 45, 0.15);
}
@media (pointer: coarse), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* Preloader ------------------------------------------------------------ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #fbf7ee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
}
.loader-bar {
  width: min(260px, 60vw);
  height: 2px;
  background: rgba(28, 23, 18, 0.12);
  position: relative;
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #c1272d, #c9a227);
}
#preloader.loading .loader-bar::after {
  animation: loaderFill 1.6s var(--ease-elegant) forwards;
}
@keyframes loaderFill {
  to { transform: scaleX(1); }
}

/* Navigation ------------------------------------------------------------ */
#navbar {
  /* Shifted down by the fixed announce bar's height (0 when it's absent). */
  top: var(--announce-h, 0px);
  transition: background-color 0.4s var(--ease-elegant), padding 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
}
#navbar.scrolled {
  background-color: rgba(251, 247, 238, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -15px rgba(28, 23, 18, 0.15);
}
/* While the fullscreen menu is open, the header itself goes transparent
   (logo text switches to light) so the dark menu panel reads as one
   continuous surface behind it, instead of a light bar across the top. */
#navbar.menu-open {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
  color: #fbf7ee;
}
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 1px;
  background: #c9a227;
  transition: width 0.35s var(--ease-elegant);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Hamburger toggle --------------------------------------------------------
   Three lines that morph into an X. #navbar itself stays above the
   fullscreen menu (see z-index note below) so this button doubles as the
   close control once open — a child can't out-stack its own parent, so
   the button's z-index alone wouldn't be enough. */
.hamburger-btn {
  position: relative;
  z-index: 1;
}
.hamburger-line {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease-elegant), opacity 0.3s var(--ease-elegant), background-color 0.4s var(--ease-elegant);
}
.hamburger-btn[aria-expanded="true"] {
  color: #fbf7ee;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Fullscreen menu ----------------------------------------------------------
   Two independent layers: a background panel that reveals top-to-bottom
   like a curtain (transform-only, so it stays smooth), and a content layer
   that fades/slides in on its own timing — kept separate so the panel's
   scale never distorts the link text. */
.fullscreen-menu {
  position: fixed;
  inset: 0;
  /* Below #navbar's z-50 (Tailwind), not above — .menu-open makes the
     header transparent instead, so the hamburger button (inside the
     header's own stacking context) stays clickable as the close control
     rather than getting buried under this panel. */
  z-index: 45;
  visibility: hidden;
  pointer-events: none;
}
.fullscreen-menu.open {
  visibility: visible;
  pointer-events: auto;
}
.fullscreen-menu-panel {
  position: absolute;
  inset: 0;
  background: #1c1712;
  background-image: radial-gradient(circle at 85% 15%, rgba(193, 39, 45, 0.25), transparent 55%),
                     radial-gradient(circle at 10% 90%, rgba(60, 110, 71, 0.2), transparent 50%);
  transform: scaleY(0);
  transform-origin: top;
}
.fullscreen-menu-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Not `center`: with 10 large links this list is routinely taller than
     the viewport, and centering an overflowing flex child pushes its top
     past the scrollable area with no way to scroll up to it — losing the
     first item(s) off-screen. Top-aligned + generous top padding (clears
     the fixed header) keeps every item reachable via the container's own
     scroll. */
  justify-content: flex-start;
  padding: 7.5rem 6vw 3rem;
  opacity: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Without this, an exhausted scroll inside the overlay chains to the
     page behind it (still `overflow-hidden` via JS, but some browsers
     rubber-band anyway), which reads as "the menu won't scroll further"
     even though its own scrollTop has more room. */
  overscroll-behavior: contain;
}
.fullscreen-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fs-nav-link {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 600;
  color: rgba(251, 247, 238, 0.55);
  padding: 0.4rem 0;
  transition: color 0.4s var(--ease-elegant);
}
.fs-nav-index {
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(201, 162, 39, 0.6);
}
.fs-nav-link:hover,
.fs-nav-link:focus-visible,
.fs-nav-link.active {
  color: #fbf7ee;
}
.fs-nav-link:hover .fs-nav-index,
.fs-nav-link:focus-visible .fs-nav-index,
.fs-nav-link.active .fs-nav-index {
  color: #c1272d;
}
.fullscreen-menu-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(251, 247, 238, 0.1);
}
@media (max-width: 640px) {
  .fullscreen-menu-content { padding: 6.5rem 6vw 2.5rem; }
  .fs-nav-link { font-size: clamp(1.75rem, 9vw, 2.75rem); padding: 0.3rem 0; }
}

/* Buttons ---------------------------------------------------------------- */
.btn-magnetic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-magnetic span { position: relative; z-index: 1; }
.btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #e1454c, #c1272d 55%, #7a171b);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-elegant);
  z-index: 0;
}
.btn-magnetic:hover::before { transform: translateX(0); }

.btn-outline-gold {
  border: 1px solid rgba(201, 162, 39, 0.6);
  transition: background-color 0.4s var(--ease-elegant), color 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant), border-color 0.4s var(--ease-elegant);
}
.btn-outline-gold:hover {
  background: #c9a227;
  color: #0a0908;
  box-shadow: 0 8px 30px -8px rgba(201, 162, 39, 0.6);
}

/* Hero blobs / floating spices -------------------------------------------- */
.hero-blob {
  filter: blur(90px);
  opacity: 0.22;
}

.floating-spice {
  will-change: transform;
}

/* Marquee ------------------------------------------------------------------ */
.marquee-track {
  display: flex;
  width: max-content;
}

/* Divider paisley ------------------------------------------------------------ */
.paisley-divider {
  width: 34px;
  height: 34px;
  opacity: 0.85;
}

/* Cards -------------------------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}
.feature-card {
  background: linear-gradient(180deg, #ffffff, #fbf6e8);
  border: 1px solid rgba(28, 23, 18, 0.07);
  box-shadow: 0 10px 30px -20px rgba(28, 23, 18, 0.25);
  transition: border-color 0.4s var(--ease-elegant), transform 0.4s var(--ease-elegant), background 0.4s var(--ease-elegant), box-shadow 0.4s var(--ease-elegant);
}
.feature-card:hover {
  border-color: rgba(201, 162, 39, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(28, 23, 18, 0.3);
}

/* Horizontal scroll gallery -------------------------------------------------- */
#horizontal-section {
  overflow: hidden;
}
.h-scroll-track {
  display: flex;
  width: max-content;
}

/* Below the GSAP-pin breakpoint (md, 768px) the JS skips scroll-jacking and
   leaves this as a plain swipeable row instead, so overflow must open up. */
@media (max-width: 767px) {
  #horizontal-section {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  #horizontal-section::-webkit-scrollbar {
    display: none;
  }
  #horizontal-section .spice-card {
    scroll-snap-align: start;
  }
}
.spice-card {
  transition: transform 0.5s var(--ease-elegant), box-shadow 0.5s var(--ease-elegant);
}
.spice-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px -20px rgba(0,0,0,0.7);
}

/* Timeline ------------------------------------------------------------------ */
.timeline-line {
  background: linear-gradient(180deg, transparent, #c9a227 15%, #c9a227 85%, transparent);
}
.timeline-dot {
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.15);
}

/* Form ------------------------------------------------------------------- */
.input-elegant {
  background: rgba(28, 23, 18, 0.03);
  border: 1px solid rgba(28, 23, 18, 0.15);
  transition: border-color 0.3s var(--ease-elegant), background 0.3s var(--ease-elegant);
}
.input-elegant:focus {
  outline: none;
  border-color: #c9a227;
  background: rgba(28, 23, 18, 0.05);
}

/* Star rating (feedback form) --------------------------------------------
   Radio inputs in reverse DOM order + row-reverse layout is the classic
   CSS-only star picker: the sibling combinator can only look forward, so
   reversing the source order lets ":checked ~ label" light up every star
   up to and including the chosen one once flipped back visually. */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.25rem;
}
.star-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star-rating label {
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: rgba(28, 23, 18, 0.18);
  transition: color 0.15s var(--ease-elegant), transform 0.15s var(--ease-elegant);
}
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #c9a227;
}
.star-rating label:active {
  transform: scale(0.88);
}

/* Accordion (FAQ) ------------------------------------------------------------ */
.faq-item .faq-icon { transition: transform 0.4s var(--ease-elegant); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-elegant), padding 0.4s var(--ease-elegant);
}
.faq-item.open .faq-answer {
  max-height: 400px;
}

/* Counter chip ------------------------------------------------------------ */
.pulse-dot {
  box-shadow: 0 0 0 0 rgba(60, 110, 71, 0.7);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(60, 110, 71, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(60, 110, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 110, 71, 0); }
}

/* Utility reveal (fallback / no-js safety) ---------------------------------- */
.reveal-up { opacity: 0; transform: translateY(40px); }
.js-ready .reveal-up { opacity: 1; transform: none; }

/* Toast ------------------------------------------------------------------ */
#toast {
  transform: translateY(140%);
  transition: transform 0.5s var(--ease-elegant);
}
#toast.show { transform: translateY(0); }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Small screens tune-ups */
@media (max-width: 640px) {
  .font-display { letter-spacing: 0; }
}

/* Spice Personality Quiz --------------------------------------------------- */
.quiz-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(28, 23, 18, 0.12);
  transition: background 0.4s var(--ease-elegant);
}
.quiz-dot.done,
.quiz-dot.current {
  background: linear-gradient(90deg, #c9a227, #c1272d);
}

.quiz-slide {
  display: none;
}
.quiz-slide.active {
  display: block;
  animation: quizIn 0.5s var(--ease-elegant);
}
@keyframes quizIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(28, 23, 18, 0.12);
  background: linear-gradient(180deg, #ffffff, #fbf6e8);
  color: #211c15;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: 0 6px 20px -14px rgba(28, 23, 18, 0.3);
  transition: border-color 0.3s var(--ease-elegant), background 0.3s var(--ease-elegant), transform 0.3s var(--ease-elegant), box-shadow 0.3s var(--ease-elegant);
}
.quiz-option i {
  color: #c9a227;
  width: 1.1em;
  flex-shrink: 0;
}
.quiz-option:hover {
  border-color: rgba(201, 162, 39, 0.55);
  background: linear-gradient(180deg, #fffdf8, #f8ecd0);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(28, 23, 18, 0.35);
}
.quiz-option:active {
  transform: translateY(0) scale(0.98);
}

/* Comparison — "Retake vs. The Rest" fight card ------------------------------ */
.compare-vs-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c1272d, #7a171b);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fbf7ee;
  animation: compareVsPulse 2.4s ease-out infinite;
}
.compare-vs-badge span {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-style: italic;
  color: #f6ecd2;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
@media (min-width: 640px) {
  .compare-vs-badge { width: 78px; height: 78px; }
  .compare-vs-badge span { font-size: 1.2rem; }
}
@keyframes compareVsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0.55), 0 6px 20px -6px rgba(28, 23, 18, 0.35); }
  70%  { box-shadow: 0 0 0 16px rgba(193, 39, 45, 0), 0 6px 20px -6px rgba(28, 23, 18, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0), 0 6px 20px -6px rgba(28, 23, 18, 0.35); }
}

.compare-side-us {
  animation: compareGoldGlow 3.6s ease-in-out infinite;
}
@keyframes compareGoldGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  50%      { box-shadow: 0 0 42px -6px rgba(201, 162, 39, 0.4); }
}

.compare-crown {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 1.3rem;
  color: #c9a227;
  filter: drop-shadow(0 4px 10px rgba(201, 162, 39, 0.5));
  animation: compareCrownFloat 3s ease-in-out infinite;
}
@keyframes compareCrownFloat {
  0%, 100% { transform: translateX(-50%) rotate(-8deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-4deg) translateY(-6px); }
}

/* Generic "other brand" pouch — built entirely from CSS, no stock photo */
.compare-pouch {
  position: relative;
  border-radius: 10px 10px 26px 26px;
  background: linear-gradient(160deg, #ded4b8 0%, #c7bb9a 60%, #b3a684 100%);
  box-shadow: 0 14px 26px -16px rgba(33, 23, 18, 0.4), inset 0 0 0 1px rgba(33, 28, 21, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  transform: rotate(-4deg);
  animation: compareWobble 6s ease-in-out infinite;
  overflow: hidden;
}
@keyframes compareWobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(-1.5deg); }
}
.compare-pouch-fold {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22%;
  background: repeating-linear-gradient(90deg, rgba(33, 28, 21, 0.14) 0 6px, transparent 6px 12px);
  border-bottom: 1px dashed rgba(33, 28, 21, 0.3);
}
.compare-pouch-barcode {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.compare-pouch-barcode i {
  display: block;
  width: 2px;
  height: 100%;
  background: #211c15;
}
.compare-pouch-barcode i:nth-child(2n) { height: 65%; }
.compare-pouch-barcode i:nth-child(3n) { height: 85%; }
.compare-pouch-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.25;
  color: #4a4232;
  text-align: center;
}
.compare-pouch-sub {
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: rgba(33, 28, 21, 0.4);
  margin-top: 3px;
}
@media (min-width: 640px) {
  .compare-pouch-label { font-size: 0.72rem; }
  .compare-pouch-sub { font-size: 0.58rem; }
  .compare-pouch-barcode { height: 20px; margin-bottom: 10px; }
}

/* Confetti burst (waitlist "opening ceremony" moment) ----------------------- */
.confetti-particle {
  position: fixed;
  z-index: 60;
  border-radius: 2px;
  pointer-events: none;
  will-change: transform, opacity;
}