/* ===================================================================
   Casa Gelato — styles
   Full-page scroll-through video with floating content
   =================================================================== */

:root {
  --cream: #f6efe4;
  --cream-deep: #efe5d3;
  --marble: #fbf8f2;
  --terracotta: #c96f4c;
  --terracotta-deep: #a9502f;
  --pistachio: #6f8f4e;
  --pistachio-deep: #9ec36a;
  --brown: #4a3a2c;
  --brown-soft: #7a6551;
  --ink: #2c231b;

  --serif: "Playfair Display", Georgia, serif;
  --serif-soft: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;

  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  color: var(--marble);
  background: #16110c;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e6a582;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

/* ===================================================================
   FIXED VIDEO BACKGROUND — spans the whole landing page
   =================================================================== */

.video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #16110c;
}

#gelato-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tiny scale-up guarantees full-bleed cover on any aspect ratio */
  transform: scale(1.04);
  transform-origin: center;
}

/* Global scrim keeps overlaid text readable without hiding the video */
.video-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 35%, transparent 45%, rgba(16,11,8,0.5) 100%),
    linear-gradient(to bottom, rgba(16,11,8,0.35) 0%, rgba(16,11,8,0.15) 20%, rgba(16,11,8,0.25) 60%, rgba(16,11,8,0.55) 100%);
}

/* ===================================================================
   TRANSPARENT TOP BAR
   =================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1.25rem, 5vw, 3rem);
  background: rgba(22, 17, 12, 0.12);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid rgba(246, 239, 228, 0.08);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}

/* Slightly more solid once the user scrolls */
.topbar.scrolled {
  background: rgba(22, 17, 12, 0.5);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.topbar-brand {
  font-family: var(--serif-soft);
  font-size: 1.15rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}

.topbar-nav a {
  color: rgba(246, 239, 228, 0.85);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.topbar-nav a:hover { color: var(--cream); }

.topbar-btn {
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(246, 239, 228, 0.45);
  border-radius: 999px;
  background: rgba(246, 239, 228, 0.06);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease) !important;
}
.topbar-btn:hover {
  background: rgba(201, 111, 76, 0.85);
  border-color: transparent;
  color: var(--marble) !important;
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .topbar-nav a:not(.topbar-btn) { display: none; }
}

/* ===================================================================
   CONTENT LAYER — floats above the fixed video
   =================================================================== */

.content { position: relative; z-index: 10; }

/* Every section is the same tall height so the video scrubs EVENLY
   and slowly across the whole page — each stretch of scroll reveals a
   new drip, from the first layer down to the finished cup. */
:root { --section-h: 175vh; }

.hero {
  min-height: var(--section-h);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right;
  padding: clamp(2rem, 6vw, 6rem);
  padding-top: 42vh;
}

.hero-text { max-width: 560px; position: sticky; top: 42vh; }

.hero-brand {
  font-family: var(--serif-soft);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: var(--cream);
  opacity: 0.92;
}

.hero-tagline {
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  text-shadow: 0 4px 40px rgba(0,0,0,0.55);
}

.scroll-hint {
  position: fixed;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--cream);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.5s var(--ease);
}
/* fade the hint out once the user starts scrolling */
body.scrolled .scroll-hint { opacity: 0; pointer-events: none; }

.scroll-arrow { font-size: 1.1rem; animation: bob 1.8s var(--ease) infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}

[data-hero] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

/* ===================================================================
   PANELS — translucent glass so the video shows through
   =================================================================== */

.panel {
  min-height: var(--section-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;      /* content centered in the tall section */
  padding: 12vh clamp(1.5rem, 6vw, 4rem);
}
/* Statically centered (NOT sticky) so sections never overlap as you scroll
   past the boundary between them. The tall section height still gives the
   video plenty of scroll distance to scrub through slowly. */
.panel > * {
  width: 100%;
  max-width: var(--maxw);
}

.glass {
  max-width: 760px;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: 24px;
  background: rgba(22, 17, 12, 0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(246, 239, 228, 0.12);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.8);
}

/* STORY */
.story h2 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  color: var(--marble);
  margin-bottom: 1.6rem;
}
.story-body {
  font-family: var(--serif-soft);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  color: rgba(246, 239, 228, 0.85);
  line-height: 1.6;
}

/* AROME */
.section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 640px; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--marble); text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.section-lead {
  margin-top: 1.1rem;
  font-family: var(--serif-soft);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(246, 239, 228, 0.8);
  line-height: 1.55;
}

.flavors-inner { display: flex; flex-direction: column; align-items: center; }

.flavor-grid {
  max-width: var(--maxw);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.flavor-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: rgba(251, 248, 242, 0.08);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border-radius: 20px;
  padding: 1.5rem 1.6rem;
  border: 1px solid rgba(246, 239, 228, 0.14);
  overflow: hidden;
  transition: transform 0.5s var(--ease), background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.flavor-card::before {
  /* soft flavor-colored glow bleeding in from the left */
  content: "";
  position: absolute;
  left: -30%;
  top: 50%;
  width: 70%;
  height: 180%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, var(--flavor), transparent 70%);
  opacity: 0.28;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.flavor-card:hover {
  transform: translateY(-6px);
  background: rgba(251, 248, 242, 0.14);
  border-color: rgba(246, 239, 228, 0.28);
}
.flavor-card:hover::before { opacity: 0.5; }

.flavor-index {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--serif);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: rgba(246, 239, 228, 0.4);
}

.flavor-scoop {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(70% 70% at 32% 28%, var(--flavor-2), var(--flavor) 78%);
  box-shadow:
    inset -6px -8px 16px rgba(0,0,0,0.28),
    inset 4px 5px 12px rgba(255,255,255,0.35),
    0 12px 24px -10px rgba(0,0,0,0.6);
}
.flavor-scoop::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 22%;
  width: 30%;
  height: 24%;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  filter: blur(2px);
}

.flavor-body { flex: 1 1 auto; text-align: left; }
.flavor-card h3 { font-size: 1.5rem; color: var(--marble); margin-bottom: 0.25rem; }
.flavor-card p { font-family: var(--serif-soft); font-size: 1.12rem; color: rgba(246, 239, 228, 0.82); line-height: 1.4; }

/* VALORI */
.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--maxw);
  width: 100%;
  text-align: center;
}
.value-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.2rem;
  color: var(--pistachio-deep);
  display: grid;
  place-items: center;
}
.value-icon svg { width: 100%; height: 100%; }
.value-col h3 { font-size: 1.5rem; color: var(--marble); margin-bottom: 0.5rem; text-shadow: 0 3px 20px rgba(0,0,0,0.5); }
.value-col p { color: rgba(246, 239, 228, 0.82); font-size: 1.02rem; }

/* CTA */
.cta h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--marble); margin-bottom: 1.2rem; }
.cta-body {
  font-family: var(--serif-soft);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  color: rgba(246, 239, 228, 0.85);
  margin-bottom: 2.4rem;
}
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.95rem 2.2rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.btn-primary {
  background: var(--terracotta);
  color: var(--marble);
  box-shadow: 0 16px 40px -18px rgba(201, 111, 76, 0.9);
}
.btn-primary:hover { background: var(--terracotta-deep); transform: translateY(-3px); }
.btn-ghost {
  background: rgba(246, 239, 228, 0.06);
  color: var(--cream);
  border: 1px solid rgba(246, 239, 228, 0.4);
}
.btn-ghost:hover { background: rgba(246, 239, 228, 0.14); transform: translateY(-3px); }

/* ===================================================================
   FOOTER
   =================================================================== */

.footer {
  position: relative;
  z-index: 10;
  background: rgba(20, 15, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(246, 239, 228, 0.75);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4rem) 2rem;
  border-top: 1px solid rgba(246, 239, 228, 0.1);
}
.footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo {
  font-family: var(--serif-soft);
  font-size: 1.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 0.8rem;
}
.footer-tag { font-family: var(--serif-soft); font-size: 1.15rem; color: rgba(246,239,228,0.6); }
.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e6a582;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-col p { font-size: 0.98rem; line-height: 1.8; }
.socials { display: flex; gap: 0.8rem; }
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 228, 0.2);
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: background 0.4s var(--ease), transform 0.4s var(--ease);
}
.socials a:hover { background: var(--terracotta); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
.footer-bottom {
  max-width: var(--maxw);
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(246, 239, 228, 0.12);
  font-size: 0.82rem;
  color: rgba(246, 239, 228, 0.5);
  text-align: center;
}

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.flavor-grid .flavor-card:nth-child(2) { transition-delay: 0.06s; }
.flavor-grid .flavor-card:nth-child(3) { transition-delay: 0.12s; }
.flavor-grid .flavor-card:nth-child(4) { transition-delay: 0.18s; }
.flavor-grid .flavor-card:nth-child(5) { transition-delay: 0.24s; }
.flavor-grid .flavor-card:nth-child(6) { transition-delay: 0.30s; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { align-items: center; text-align: center; }
}

/* ---- PHONE ----
   Tall pinned sections don't suit small screens (a section's content can be
   taller than the viewport, which breaks sticky-centering). On phones we use
   normal flow: content scrolls over the fixed video with generous spacing. */
@media (max-width: 768px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 1.5rem 8rem;
  }
  .hero-text { position: static; max-width: 100%; }

  .panel {
    min-height: auto;
    padding: 22vh 1.25rem;      /* video breathes between sections */
  }
  .panel > * {
    position: static;
    transform: none;
    top: auto;
  }

  .glass { padding: 2.2rem 1.5rem; }

  /* one clean column of flavor cards */
  .flavor-grid { grid-template-columns: 1fr; }
  .flavor-card { padding: 1.3rem 1.4rem; }
  .flavor-scoop { width: 72px; height: 72px; }

  .section-head { margin-bottom: 2.5rem; }

  /* darken the scrim a touch so text stays readable over a busy frame */
  .video-scrim {
    background:
      radial-gradient(120% 90% at 50% 35%, transparent 35%, rgba(16,11,8,0.55) 100%),
      linear-gradient(to bottom, rgba(16,11,8,0.45) 0%, rgba(16,11,8,0.3) 30%, rgba(16,11,8,0.4) 65%, rgba(16,11,8,0.62) 100%);
  }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { margin-bottom: 0.5rem; }
  .socials { justify-content: center; }
  .hero-tagline { font-size: clamp(2rem, 9vw, 3rem); }
  .hero-brand { letter-spacing: 0.3em; }
  .cta-buttons { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-arrow { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  [data-hero] { transition: none; }
}