/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
}
img { display: block; }

em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
}

/* ---------- Hero video ---------- */
.hero-section {
  position: relative;
  background-color: #2A2A24;
  width: 100%;
  min-height: 100vh;
  z-index: 1;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.20) 30%,
      rgba(0, 0, 0, 0.35) 60%,
      rgba(251, 247, 240, 0.6) 92%,
      rgba(251, 247, 240, 1) 100%
    );
  pointer-events: none;
}

/* ---------- Scroll indicator ---------- */
@keyframes softPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 4px); }
}
.scroll-indicator {
  animation: softPulse 2.2s ease-in-out infinite;
}

/* ---------- Products section below hero ---------- */
#products {
  position: relative;
  z-index: 2;
}

/* ===== Washi paper grain — site-wide warmth (barely-there) ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: .035;
  mix-blend-mode: multiply;
}

/* ===== Cross-page slide ("book") transition ===== */
/* Works on http(s); degrades to instant navigation where unsupported. */
@view-transition { navigation: auto; }
/* keep the navbar pinned in place while the page slides underneath it */
#navbar { view-transition-name: site-nav; }
@keyframes vt-out { to   { transform: translateX(-5%); opacity: 0; } }
@keyframes vt-in  { from { transform: translateX(6%);  opacity: 0; } }
::view-transition-old(root) { animation: vt-out .5s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in  .5s cubic-bezier(.4,0,.2,1) both; }
::view-transition-group(site-nav) { animation-duration: .5s; animation-timing-function: cubic-bezier(.4,0,.2,1); }
/* the active droplet glides from the old link to the new one */
::view-transition-group(nav-droplet) { animation-duration: .55s; animation-timing-function: cubic-bezier(.45,.05,.2,1); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  body::before { opacity: .02; }
}

/* ===== Warm photo treatment — carries the hero look across the page ===== */
/* light-backdrop photos: pop the green, warm beige creeping in at the edges */
.warm-frame { position: relative; }
.warm-frame > img,
.warm-frame > video,
.warm-frame .slide img,
.warm-frame .slide video { filter: saturate(1.18) brightness(1.04) contrast(.97); }
.warm-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  mix-blend-mode: multiply;
  background: radial-gradient(72% 64% at 50% 52%,
                rgba(238,226,201,0) 40%,
                rgba(238,226,201,.40) 72%,
                rgba(238,226,201,.80) 100%);
}
/* dark-backdrop photos (studio black tables, the pour): keep blacks deep, just pop the green
   with a whisper of warmth at the very edges */
.warm-frame-dark { position: relative; }
.warm-frame-dark > img,
.warm-frame-dark > video,
.warm-frame-dark .slide img,
.warm-frame-dark .slide video { filter: saturate(1.16) contrast(1.03); }
.warm-frame-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  mix-blend-mode: multiply;
  background: radial-gradient(86% 78% at 50% 50%,
                rgba(214,200,170,0) 58%,
                rgba(120,110,78,.20) 100%);
}

/* soft warm/sage section wash + matcha splash accents */
.section-splash {
  position: absolute; pointer-events: none; user-select: none;
  mix-blend-mode: multiply; opacity: .8; z-index: 0;
}