/* Upload optional fonts to assets/fonts. Keep these filenames to apply them automatically. */
@font-face {
  font-family: "Cafe Display";
  src: url("../assets/fonts/cafe-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Cafe Text";
  src: url("../assets/fonts/cafe-text.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --green: #536449; /* brand green */
  --deep-green: #2b3727;
  --moss: #34452f;
  --cream: #f3f0e7;
  --sand: #e9e3d1;
  --sage: #c5d6b6;
  --sage-soft: #dde8d2;
  --display: "Cafe Display", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --body: "Cafe Text", "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--green);
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--green);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--green); color: var(--cream); }

.wrap { width: min(100% - 48px, 1200px); margin-inline: auto; }

/* ───────── scroll progress ───────── */
.scroll-progress {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: var(--page-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--cream));
}

/* ───────── buttons ───────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--deep-green);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgb(10 16 9 / 55%);
  transition: transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}

.pill span { font: 16px/1 var(--body); transition: transform .3s var(--ease); }
.pill:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgb(10 16 9 / 65%); }
.pill:hover span { transform: translate(4px, -3px); }

.ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 6px;
  border-bottom: 1px solid rgb(255 255 255 / 55%);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .3s ease, gap .3s var(--ease);
}

.ghost:hover { border-color: white; gap: 18px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 30px; }

/* ───────── split hero + finale ─────────
   Default (no JS / reduced motion): the hero and the finale simply stack.
   JS adds .split-on, which pins the stage and lets scroll drive --t (doors) and --f (finale text). */
:root { --t: 0; --f: 1; }

.split { position: relative; }
.stage { position: relative; }

.split-on { --f: 0; height: 340vh; height: 340svh; }
.split-on .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* doors (hero) */
.doors { position: relative; display: block; height: 100vh; height: 100svh; z-index: 2; }
.split-on .doors { position: absolute; inset: 0; height: auto; pointer-events: none; }

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--green);
  will-change: transform;
}

.door--left  { left: 0;  width: calc(50% + 1px); }
.door--right { left: 50%; width: 50%; }

.split-on .door--left  { transform: translate3d(calc(var(--t) * -100%), 0, 0); z-index: 2; }
.split-on .door--right { transform: translate3d(calc(var(--t) * 100%), 0, 0); }

/* soft shadow on the cut edge while the doors open */
.door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  pointer-events: none;
  opacity: 0;
}

.split-on .door::after { opacity: calc(var(--t) * 1.2); }
.door--left::after  { right: 0; background: linear-gradient(90deg, rgb(10 16 9 / 0%), rgb(10 16 9 / 45%)); }
.door--right::after { left: 0;  background: linear-gradient(270deg, rgb(10 16 9 / 0%), rgb(10 16 9 / 45%)); }

/* each half draws the full-width scene, anchored to its own outer edge */
.door__scene {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sw, 100vw);
}

.door--left  .door__scene { left: 0; }
.door--right .door__scene { right: 0; }

.door__bg {
  position: absolute;
  inset: 0;
  background: url("../assets/images/hero-cafe.jpg") center / cover no-repeat;
  animation: settle 2.4s var(--ease) both;
  scale: calc(1 + var(--t) * .12);
}

@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }

.door__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgb(34 45 31 / 52%), rgb(34 45 31 / 6%) 72%),
    linear-gradient(180deg, rgb(83 100 73 / 45%) 0%, rgb(83 100 73 / 22%) 40%, rgb(30 40 27 / 82%) 100%);
}

.hero-logo {
  position: absolute;
  top: clamp(24px, 5vh, 48px);
  left: 50%;
  width: clamp(130px, 11vw, 180px);
  height: auto;
  transform: translateX(-50%);
  opacity: 0;
  animation: fade-in 1.4s ease .2s forwards;
}

@keyframes fade-in { to { opacity: .95; } }

.hero-title {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0 24px 16vh;
  color: var(--cream);
  font: 500 clamp(56px, 11vw, 176px)/.94 var(--display);
  letter-spacing: -.05em;
  text-align: center;
  text-shadow: 0 6px 60px rgb(0 0 0 / 30%);
}

.row { display: block; white-space: nowrap; }

/* line-mask entrance: one orchestrated moment on load, identical in both halves */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.w > span {
  display: inline-block;
  transform: translateY(112%);
  animation: rise-in 1.2s var(--ease) forwards;
  animation-delay: calc(.35s + var(--i, 0) * .12s);
}

.w > span { --i: 0; }
.row:nth-child(2) .w:nth-child(1) > span { --i: 1; }
.row:nth-child(2) .w:nth-child(2) > span { --i: 2; }

@keyframes rise-in { to { transform: none; } }

/* single hairline cue, sits exactly on the seam */
.cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: clamp(54px, 10vh, 96px);
  overflow: hidden;
  background: rgb(243 240 231 / 22%);
  opacity: 0;
  animation: fade-in-full .8s ease 1.8s forwards;
}

.split-on .cue { opacity: max(0, calc(1 - var(--t) * 6)); animation: none; }
.split-on .cue::after { animation-delay: 1.8s; }

.cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateY(-100%);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes fade-in-full { to { opacity: 1; } }

/* finale (Serving Soon), waits behind the doors */
.finale {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  background: var(--green);
  z-index: 1;
}

.split-on .finale { position: absolute; inset: 0; min-height: 0; }

.finale__image {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: url("../assets/images/finale-nature.jpg") center / cover no-repeat;
  transform: scale(calc(1.18 - var(--t) * .18));
  filter: contrast(1.1) saturate(1.15);
  will-change: transform;
}

.finale__shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgb(26 36 24 / 55%), rgb(26 36 24 / 0%) 100%),
    linear-gradient(180deg, rgb(83 100 73 / 45%) 0%, rgb(83 100 73 / 22%) 40%, rgb(30 40 27 / 82%) 100%),
    rgb(64 82 56 / 38%);
}

/* fine film grain: keeps a soft photo from looking blurry or pixelated */
.finale__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.finale__content {
  width: min(100% - 48px, 1100px);
  padding: 0;
  text-align: center;
}

/* logo lockup: logo with hairlines that grow out of its sides, plus a slow shine */
.finale__brand {
  --o: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  margin: 0 0 clamp(22px, 3.4vw, 44px);
}

.finale__brand::before,
.finale__brand::after {
  content: "";
  height: 1px;
  width: calc(var(--k, 1) * clamp(40px, 11vw, 190px));
}

.finale__brand::before { background: linear-gradient(270deg, rgb(243 240 231 / 75%), rgb(243 240 231 / 0%)); }
.finale__brand::after  { background: linear-gradient(90deg,  rgb(243 240 231 / 75%), rgb(243 240 231 / 0%)); }

.finale__logo {
  position: relative;
  display: block;
  width: clamp(170px, 20vw, 300px);
  filter: drop-shadow(0 4px 30px rgb(18 26 16 / 45%));
}

.finale__logo img { display: block; width: 100%; height: auto; }

/* the shine only paints inside the logo letters (the logo is used as a mask) */
.finale__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgb(255 255 255 / 95%) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  -webkit-mask: url("../assets/images/fumes-logo-light.png") center / contain no-repeat;
  mask: url("../assets/images/fumes-logo-light.png") center / contain no-repeat;
  animation: logo-shine 6s ease-in-out 1.5s infinite;
}

@keyframes logo-shine {
  0%, 55% { background-position: 160% 0; }
  100%    { background-position: -60% 0; }
}

.finale h2 {
  margin: 0;
  padding-bottom: .06em;
  color: var(--cream);
  font: 500 clamp(64px, 11.5vw, 180px)/.88 var(--display);
  letter-spacing: -.055em;
  text-shadow: 0 6px 60px rgb(0 0 0 / 30%);
}

.finale h2 em { color: var(--sage-soft); font-weight: 500; }

h2.f-item { --o: .3; }

/* heading rises in as the doors open (--f is driven by scroll) */
.split-on .f-item {
  --k: clamp(0, calc(var(--f) * 1.5 - var(--o, .1)), 1);
  opacity: var(--k);
  transform: translate3d(0, calc((1 - var(--k)) * 60px), 0);
}

.soon {
  display: inline-block;
  padding: 0 .04em .06em;
  background: linear-gradient(100deg, #e6eedb 0%, #c8dbb6 28%, #a9c795 50%, #c8dbb6 72%, #e6eedb 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 3px 22px rgb(18 26 16 / 55%));
  animation: shimmer 7s ease-in-out infinite alternate;
}

@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ───────── responsive ───────── */
@media (max-width: 700px) {
  .hero-title { font-size: clamp(54px, 15.5vw, 110px); line-height: .96; }
  .row:nth-child(2) .w { display: block; text-align: center; }
  .row:nth-child(2) .w + .w { margin-top: 0; }
  .row:nth-child(2) { white-space: normal; }
  .finale h2 { font-size: clamp(62px, 18.5vw, 110px); }
  .finale__logo { width: clamp(150px, 44vw, 210px); }
  .finale__brand::before, .finale__brand::after { width: calc(var(--k, 1) * 36px); }
  .hero-logo { width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .cue { display: none; }
}