/* ---------- Shared base ---------- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #131313; }
::-webkit-scrollbar-thumb { background: #353535; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #00dbe9; }

.cyan-glow:hover { box-shadow: 0 0 12px -2px #00F0FF; transition: box-shadow 0.2s ease-out; }
.input-glow:focus { box-shadow: 0 0 8px -2px #00F0FF; border-color: #00F0FF; outline: none; transition: all 0.2s ease-out; }

/* =====================================================================
   Cinematic scroll hero (homepage)
   Scroll-driven parallax engine: a tall section holds a sticky "stage";
   scroll position is smoothed and mapped to CSS custom properties that
   drive every transform/opacity below. See assets/cinematic.js.
   ===================================================================== */

.cinema-scroll {
  position: relative;
  height: calc(100vh + 4300px);
  --title-y: 0px; --title-scale: 1; --title-opacity: 1;
  --copy-y: 0px; --copy-opacity: 1;
  --vape-x: 0px; --vape-y: 0px; --vape-rot: 0deg; --vape-scale: 1; --vape-opacity: 1;
  --phone-x: 0px; --phone-y: 0px; --phone-scale: 1; --phone-opacity: 1;
  --wine-x: 0px; --wine-y: 40px; --wine-scale: 0.9; --wine-opacity: 0;
  --shade-alpha: 0; --blur-px: 0px; --bg-scale: 1.08; --bg-y: 0px;
  --panel1-opacity: 0; --panel1-y: 40px;
  --panel2-opacity: 0; --panel2-y: 40px;
  --slider-x: 60vw; --slider-visibility: hidden;
  --mx: 0px; --my: 0px;
}

.cinema-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
}

.cinema-world { position: absolute; inset: 0; overflow: hidden; }

.cinema-bg {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: brightness(0.34) saturate(1.05) blur(var(--blur-px));
  transform: translate3d(0, var(--bg-y), 0) scale(var(--bg-scale));
  will-change: transform, filter;
}

.cinema-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(0,240,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(6,8,8,0.35) 0%, rgba(6,8,8,0.15) 30%, rgba(6,8,8,0.55) 78%, rgba(6,8,8,0.92) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 3;
}

.cinema-shade {
  position: absolute;
  inset: 0;
  background: rgba(0,10,11, var(--shade-alpha));
  backdrop-filter: blur(calc(var(--blur-px) * 0.6));
  pointer-events: none;
  z-index: 4;
  transition: background 0.05s linear;
}

.scene-img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: transform, opacity;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}

.vape-img {
  left: 8%;
  bottom: 6%;
  width: min(30vw, 380px);
  z-index: 5;
  opacity: var(--vape-opacity);
  transform: translate3d(calc(var(--vape-x) + var(--mx) * -1.4), var(--vape-y), 0) rotate(var(--vape-rot)) scale(var(--vape-scale));
  transform-origin: 50% 100%;
}

.phone-img {
  right: 6%;
  bottom: 4%;
  width: min(26vw, 340px);
  z-index: 5;
  opacity: var(--phone-opacity);
  transform: translate3d(calc(var(--phone-x) + var(--mx) * 1.4), var(--phone-y), 0) scale(var(--phone-scale));
  transform-origin: 50% 100%;
}

.wine-img {
  left: 50%;
  bottom: 0;
  width: min(26vw, 320px);
  z-index: 6;
  opacity: var(--wine-opacity);
  transform: translate3d(calc(-50% + var(--wine-x)), var(--wine-y), 0) scale(var(--wine-scale));
  transform-origin: 50% 100%;
}

.cinema-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
}

.hero-title {
  position: absolute;
  left: 50%;
  top: clamp(120px, 22vh, 220px);
  width: min(94vw, 1200px);
  margin: 0;
  text-align: center;
  color: #f4fdfe;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.95;
  text-shadow: 0 18px 60px rgba(0,0,0,0.6);
  transform: translate3d(-50%, var(--title-y), 0) scale(var(--title-scale));
  opacity: var(--title-opacity);
  z-index: 10;
}

.hero-title span { color: #00dbe9; }

.cinema-copy {
  position: absolute;
  left: 50%;
  top: clamp(310px, 40vh, 400px);
  width: min(90vw, 620px);
  text-align: center;
  z-index: 10;
  transform: translate3d(-50%, var(--copy-y), 0);
  opacity: var(--copy-opacity);
}

.cinema-copy p {
  margin: 0 auto 24px;
  color: #d7e4e5;
  font-size: 1.15rem;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}

.cinema-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cinema-tags span {
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(219,252,255,0.08);
  border: 1px solid rgba(0,240,255,0.35);
  color: #dbfcff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, calc(100vw - 48px));
  text-align: center;
  z-index: 11;
  pointer-events: none;
}

.story-panel h2 {
  margin: 0;
  color: #f4fdfe;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1;
  text-shadow: 0 16px 40px rgba(0,0,0,0.6);
}

.story-panel p {
  width: min(480px, 100%);
  margin: 20px auto 0;
  color: #cfe4e5;
  font-size: 1.05rem;
  line-height: 1.5;
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
}

.story-panel-repair { transform: translate3d(-50%, calc(-50% + var(--panel1-y)), 0); opacity: var(--panel1-opacity); }
.story-panel-wine { transform: translate3d(-50%, calc(-50% + var(--panel2-y)), 0); opacity: var(--panel2-opacity); }

.drops-slider {
  position: absolute;
  left: 0; right: 0;
  bottom: 110px;
  z-index: 15;
  visibility: var(--slider-visibility);
  pointer-events: auto;
}

.drops-track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 6px 6vw 26px;
  transform: translate3d(var(--slider-x), 0, 0);
  will-change: transform;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  touch-action: pan-y;
}
.drops-track::-webkit-scrollbar { display: none; }
.drops-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.drop-card {
  flex: 0 0 clamp(280px, 25vw, 360px);
  height: 264px;
  padding: 30px;
  position: relative;
  border-radius: 22px;
  background: rgba(18,18,18,0.82);
  border: 1px solid rgba(0,240,255,0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: #e5e2e1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.drop-card:hover { border-color: #00f0ff; transform: translateY(-4px); }

.drop-card .drop-icon {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: rgba(0,240,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #00dbe9;
  margin-bottom: 18px;
  font-size: 26px;
}

.drop-card .drop-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00dbe9;
  margin-bottom: 8px;
}

.drop-card h3 { margin: 0 0 10px; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; color: #f4fdfe; }
.drop-card p { margin: 0; font-size: 0.98rem; line-height: 1.4; color: #b9cacb; }
.drop-card .drop-arrow { margin-top: auto; font-size: 13px; color: #00f0ff; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  color: #b9cacb;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: var(--title-opacity);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.scroll-cue .chevron { animation: cueBounce 1.8s ease-in-out infinite; color: #00dbe9; font-size: 20px; }
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 900px) {
  .hero-title { top: clamp(96px, 18vh, 150px); font-size: clamp(2.4rem, 11vw, 4rem); }
  .cinema-copy { top: clamp(230px, 34vh, 300px); }
  .vape-img { width: 40vw; left: 2%; }
  .phone-img { width: 34vw; right: 2%; }
  .wine-img { width: 34vw; }
  .drops-slider { bottom: 90px; }
  .drop-card { flex-basis: min(78vw, 320px); height: 240px; padding: 26px; }
  .whatsapp-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene-img, .hero-title, .cinema-copy, .story-panel, .drops-track { transition: none; }
}

/* ---------- WhatsApp ---------- */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-fab svg { width: 32px; height: 32px; }
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 42px rgba(0,0,0,0.5); }
.whatsapp-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25D366;
  opacity: 0.55;
  animation: whatsappPulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab::before { animation: none; display: none; }
}

/* Layout (display/gap) for .whatsapp-btn comes from Tailwind utility classes
   on each element so it never fights the "hidden" utility on specificity. */
.whatsapp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }