/* ==========================================================================
   From The Forest Creations: home page side-scroller
   All scene geometry is measured from the 1920x1080 Canva references.
   1 "u" = one reference pixel at the current scene scale.
   ========================================================================== */

:root {
  /* Brand colors sampled from the Canva references */
  --charcoal: #212121;
  --charcoal-deep: #1a1a1a;
  --jade: #2f8150;          /* buttons */
  --jade-hover: #37965d;
  --grass: #2d5439;         /* forest floor */
  --card-green: #53735b;    /* product card face */
  --gold: #e8c77d;          /* glow / accent */
  --cream: #f5e5c1;         /* display titles */
  --cream-soft: #ecdcbc;    /* body copy */
  --velvet: #27462f;        /* owner's favorite green */
  --white: #ffffff;

  --font-display: "Distillery Display", "Bigelow Rules", "Georgia", serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scene sizing: each scene is 16:9 at full viewport height, never narrower than the viewport */
  --sw: max(100vw, calc(100svh * 16 / 9));
  --u: calc(var(--sw) / 1920);
  --ov: calc(100 * var(--u));     /* seam overlap between neighbouring scenes */

  --glow: 0 0 calc(30 * var(--u)) rgba(232, 199, 125, 0.7),
          0 0 calc(10 * var(--u)) rgba(245, 229, 193, 0.45);
  --stroke: max(0.6px, calc(1.6 * var(--u)));   /* adds weight to the hand-drawn display face */
}

/* Distillery Display: when the owner supplies the file, save it as
   assets/fonts/distillery-display.woff2 and uncomment this rule.
@font-face {
  font-family: "Distillery Display";
  src: url("../assets/fonts/distillery-display.woff2") format("woff2");
  font-display: swap;
}
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--charcoal);
  color: var(--cream-soft);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: none; }

/* The walk replaces page scrolling once the script is running */
html.has-walk, html.has-walk body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.no-walk .walk { overflow-x: auto; }
h1, h2, h3, p { margin: 0; font-style: normal; }
a { color: inherit; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: clamp(10px, calc(24 * var(--u)), 28px);
  left: clamp(12px, calc(30 * var(--u)), 36px);
  z-index: 20;
}
.site-logo { display: block; border-radius: 50%; }
.site-logo img { width: clamp(64px, calc(104 * var(--u)), 120px); height: auto; }
.site-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---------- The walk (pinned viewport) ---------- */
.walk {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--charcoal);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.moon {
  position: absolute;
  /* reference: moon centre at x 900, y 230, diameter 245 inside the 1920x1080 frame */
  width: calc(245 * var(--u));
  height: auto;
  left: calc(777 * var(--u));
  top: calc(100% - 972 * var(--u));
  will-change: transform;
}

.strip {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: 100%;
  display: flex;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.scene {
  position: relative;
  flex: 0 0 var(--sw);
  width: var(--sw);
  height: 100%;
}
/* Neighbouring scenes overlap so the forest floor can be blended at each seam */
.scene + .scene { margin-left: calc(var(--ov) * -1); }

/* The art frame: a bottom-anchored 16:9 box, so the grass always sits on the bottom edge */
.frame {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}
.layer { position: absolute; height: auto; }
.layer--bg {
  left: 0;
  top: var(--top);
  width: 100%;
  z-index: 2;
}
.scene + .scene .layer--bg {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ov));
          mask-image: linear-gradient(to right, transparent 0, #000 var(--ov));
}
.layer--fg-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  will-change: transform;
}
.layer--snail { left: 62.66%; top: 37.31%; width: 22.92%; }
.layer--glow {
  left: 23.07%;
  top: 2.13%;
  width: 53.8%;
  z-index: 1;
  opacity: 0.75;
  will-change: transform, opacity;
}
.mist-field, .bubble-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
}
.mist, .bubble {
  position: absolute;
  height: auto;
  will-change: transform;
}
.layer[data-src], .feature-card[data-src] { opacity: 0; }
.is-loaded { opacity: 1; transition: opacity 0.6s ease; }
.layer--glow.is-loaded { opacity: 0.75; }
/* A second candle glow sits just past the candles scene's left edge, so its light
   bleeds back into the right side of the hero, behind the grass and the snail */
.layer--glow-bleed { left: -24%; top: 6%; }

/* ---------- Content (desktop and landscape) ---------- */
.content {
  position: absolute;
  z-index: 5;
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: var(--glow);
  -webkit-text-stroke: var(--stroke) currentColor;
  letter-spacing: 0;
  line-height: 1.05;
}

.content--hero {
  left: calc(210 * var(--u));
  top: calc(100% - (1080 - 382) * var(--u));
  width: calc(720 * var(--u));
}
.content--hero .display { font-size: calc(104 * var(--u)); line-height: 1.02; }
.display .line { display: block; }
.lede {
  margin-top: calc(26 * var(--u));
  font-size: calc(24 * var(--u));
  color: var(--cream-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(32 * var(--u));
  margin-top: calc(34 * var(--u));
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(66 * var(--u));
  padding: 0 calc(30 * var(--u));
  font-family: var(--font-body);
  font-size: calc(28 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  background: var(--jade);
  border-radius: calc(7 * var(--u));
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.btn:hover { background: var(--jade-hover); box-shadow: 0 0 calc(18 * var(--u)) rgba(232, 199, 125, 0.35); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Category scenes: feature card on the left, copy column on the right */
.content--category {
  display: flex;
  align-items: flex-start;
  gap: calc(117 * var(--u));
  left: calc(var(--x) * var(--u));
  top: calc(100% - (1080 - var(--y)) * var(--u));
}
.scene--candles .content { --x: 325; --y: 262; }
.scene--perfume .content { --x: 300; --y: 212; }
.scene--bath    .content { --x: 283; --y: 208; }

.feature-link {
  display: block;
  flex: 0 0 auto;
  margin-top: calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  transition: transform 0.35s ease;
}
.feature-link:hover { transform: translateY(calc(-4 * var(--u))); }
.feature-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.feature-card {
  width: calc(362 * var(--u));
  height: auto;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35));
}
.copy { width: calc(790 * var(--u)); }
.copy .display { font-size: calc(150 * var(--u)); line-height: 1; }
.scene--perfume .copy .display { font-size: calc(140 * var(--u)); line-height: 1; max-width: calc(720 * var(--u)); }

.body {
  margin-top: calc(22 * var(--u));
  font-size: calc(27 * var(--u));
  line-height: 1.48;
  color: var(--cream-soft);
}
.scene--perfume .body { margin-top: calc(18 * var(--u)); }

.copy .actions { margin-top: calc(44 * var(--u)); }
.copy .actions .btn { height: calc(80 * var(--u)); font-size: calc(34 * var(--u)); padding: 0 calc(36 * var(--u)); border-radius: calc(8 * var(--u)); }

/* Scroll hint, fades away once the walk begins */
.scroll-hint {
  position: absolute;
  z-index: 5;
  left: calc(210 * var(--u));
  top: calc(100% - (1080 - 800) * var(--u));
  font-size: clamp(11px, calc(16 * var(--u)), 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 229, 193, 0.6);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.scroll-hint::after {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* Footer lives in the final scene */
.site-footer {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  width: min(100vw, 100%);
  padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(245, 229, 193, 0.82);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0), rgba(26, 26, 26, 0.78) 55%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* ==========================================================================
   Portrait (phones and tablets): same walk, content stacks in a soft scrim
   ========================================================================== */
@media (orientation: portrait) {
  :root { --box: min(calc(100vw - 32px), 460px); }

  .moon {
    width: clamp(108px, 30vw, 190px);
    left: calc(50vw - clamp(108px, 30vw, 190px) / 2);
    top: 7svh;
  }

  .content,
  .content--hero,
  .content--category {
    display: block;
    width: var(--box);
    top: 50%;
    transform: translateY(-44%);
    padding: 22px 20px 22px;
    background: rgba(26, 26, 26, 0.66);
    border-radius: 18px;
    box-shadow: 0 0 36px 22px rgba(26, 26, 26, 0.55);
  }
  .scene--hero .content    { left: 16px; transform: translateY(-38%); }
  .scene--candles .content,
  .scene--perfume .content { left: calc(50% - var(--box) / 2); }
  .scene--bath .content    { left: calc(100% - var(--box) - 16px); }

  .content--hero .display { font-size: clamp(50px, 14.5vw, 80px); }
  .lede { margin-top: 12px; font-size: clamp(15px, 4.2vw, 19px); }

  /* Card on the left, title beside it, copy and buttons underneath */
  .content--category {
    display: grid;
    grid-template-columns: clamp(78px, 22vw, 110px) 1fr;
    gap: 0 16px;
    align-items: center;
  }
  .copy { display: contents; }
  .feature-link { grid-column: 1; grid-row: 1; margin: 0; border-radius: 10px; }
  .feature-card { width: 100%; }
  .copy .display { grid-column: 2; grid-row: 1; }
  .copy .body, .copy .actions { grid-column: 1 / -1; }
  .copy .body { margin-top: 14px; }
  .copy .display,
  .scene--perfume .copy .display { font-size: clamp(38px, 10.5vw, 62px); line-height: 1; max-width: none; }
  .body,
  .scene--perfume .body { margin-top: 10px; font-size: clamp(13.5px, 3.6vw, 17px); line-height: 1.55; }


  .actions, .copy .actions { gap: 12px; margin-top: 18px; }
  .btn,
  .copy .actions .btn { height: 46px; padding: 0 22px; font-size: 16px; border-radius: 7px; }
  .feature-link:hover { transform: none; }

  .layer--snail { left: auto; right: auto; top: auto; bottom: 0; width: clamp(170px, 46vw, 300px); }
  .scene--hero .layer--snail { left: calc(100vw - 92px); }

  .scroll-hint { left: 34px; top: auto; bottom: calc(23svh); white-space: nowrap; font-size: 11px; }
  .scroll-hint::after { width: 26px; }
}

/* Short phones: tighten the stack */
@media (orientation: portrait) and (max-height: 760px) {
  .content, .content--hero, .content--category { padding: 16px 16px; }
  .body { font-size: 13px; line-height: 1.5; }
}

/* Landscape phones: very little height, keep everything legible */
@media (orientation: landscape) and (max-height: 500px) {
  .site-logo img { width: 52px; }
  .body { font-size: max(12px, calc(27 * var(--u))); }
  .btn, .copy .actions .btn { font-size: max(12px, calc(28 * var(--u))); height: max(32px, calc(66 * var(--u))); }
  .lede { font-size: max(12px, calc(24 * var(--u))); }
}

/* ---------- Entrance: starting states (the script animates them in) ---------- */
html.intro .site-header,
html.intro .moon,
html.intro #hero-title,
html.intro .content--hero .lede,
html.intro .content--hero .btn,
html.intro .scroll-hint,
html.intro .layer--glow-bleed { opacity: 0; }
html.intro .layer--bg { transform: translateY(100%); }
html.intro .layer--snail { transform: translateX(120%); }
html.intro .content--hero,
html.intro-running .content--hero { background-color: transparent; box-shadow: none; }
#hero-title { width: fit-content; }
.content--hero { transition: background-color 0.8s ease, box-shadow 0.8s ease; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint::after { animation: none; }
  .is-loaded { transition: none; }
}