/* ==========================================================================
   SMOOSHERY - fresh-pressed squishies
   Art direction taken from the product box: purple-to-magenta night sky,
   orange headline type outlined in cream, purple drips, graveyard silhouette.
   Single-theme by design: a storefront should look identical to every
   customer, so every colour is painted explicitly and nothing is inherited
   from the host or browser theme.
   ========================================================================== */

:root {
  /* Moonlit graveyard: green-teal night, the reference palette.
     Darkest at the edges, cold light blooming around the moon. */
  --night:    #08120F;
  --deep:     #0D1F1A;
  --moss-sky: #17342B;
  --teal:     #235044;
  --glow:     #3E8A63;
  --moonlit:  #9FD8B4;

  /* Legacy names kept so existing rules keep resolving */
  --purple:   #0D1F1A;
  --purple-2: #17342B;
  --magenta:  #235044;
  --orchid:   #3E8A63;
  --surface:  #12241E;

  /* Warm - pumpkins and the brand, the only warmth in the scene */
  --orange:   #E8761B;
  --amber:    #F5A032;
  --ember:    #B0500D;

  /* Weathered stone */
  --stone:    #7C8768;
  --stone-lo: #4A5340;

  /* Paper */
  --cream:    #F5EFE0;

  --lime:     #A8C63F;
  --moss:     #5E7A2E;

  /* Text */
  --fg:       #F5EFE0;
  --fg-soft:  #C3D4C4;
  --fg-faint: #8CA391;

  /* Type */
  --display: "Luckiest Guy", Impact, "Arial Black", sans-serif;
  --bouncy:  "Chewy", "Comic Sans MS", cursive;
  --body:    "Nunito", "Segoe UI", Helvetica, Arial, sans-serif;
  --stamp:   "Nunito", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --step-4:  clamp(2.8rem, 2rem + 3.8vw, 5.4rem);

  --wrap: 68rem;
  --radius: 14px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  /* the box sky: magenta glow at the horizon, darkness above and below */
  background-image:
    radial-gradient(ellipse 70% 35% at 68% 12%, rgba(62,138,99,0.30), transparent 68%),
    linear-gradient(180deg, var(--night) 0%, var(--deep) 30%, var(--moss-sky) 55%, var(--night) 100%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.05; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* --- Outlined headline type, as on the box ----------------------------- */
/* Cream outline + a dark shadow under it. text-shadow rather than
   -webkit-text-stroke so the outline sits OUTSIDE the glyph everywhere. */
.outlined {
  color: var(--orange);
  text-shadow:
    -2px -2px 0 var(--cream),  2px -2px 0 var(--cream),
    -2px  2px 0 var(--cream),  2px  2px 0 var(--cream),
    -3px  0   0 var(--cream),  3px  0   0 var(--cream),
     0   -3px 0 var(--cream),  0    3px 0 var(--cream),
     0    7px 0 rgba(6,16,12,0.55);
}

/* --- Small caps label -------------------------------------------------- */
.stamp {
  font-family: var(--stamp);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0;
}
.stamp--warm { color: var(--amber); }

/* --- Drip divider: the purple run-off under "BUTTER" on the box -------- */
.tear {
  height: 26px;
  border: 0;
  margin: 0;
  background-repeat: repeat-x;
  background-size: 120px 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cg fill='%23F2871E'%3E%3Crect width='120' height='9'/%3E%3Ccircle cx='18' cy='11' r='7'/%3E%3Ccircle cx='48' cy='9' r='5'/%3E%3Ccircle cx='80' cy='13' r='8.5'/%3E%3Ccircle cx='105' cy='9' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- Wrapper marquee --------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--orange);
  color: var(--night);
  padding-block: 0.5rem;
}
.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: slide 38s linear infinite;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --- Header ------------------------------------------------------------ */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.2rem;
}
.wordmark {
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: 0.03em;
  color: var(--cream);
  text-decoration: none;
  line-height: 1;
}
.wordmark span { color: var(--orange); }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 800;
  font-size: var(--step-0);
  line-height: 1;
  padding: 1rem 1.6rem;
  border: 3px solid var(--cream);
  border-radius: 999px;
  background: var(--orange);
  color: var(--night);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ember), 0 9px 16px rgba(6,16,12,0.5);
  transition: transform 110ms ease, box-shadow 110ms ease, background 110ms ease;
}
.btn:hover { background: var(--amber); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ember), 0 12px 20px rgba(6,16,12,0.55); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ember), 0 4px 8px rgba(6,16,12,0.5); }
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245,239,224,0.45);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(245,239,224,0.1); border-color: var(--cream); transform: none; box-shadow: none; }
.btn--wide { width: 100%; }

/* --- Hero -------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) 0; position: relative; }
.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__eyebrow {
  text-shadow: 0 2px 10px rgba(4,12,9,0.7);
  font-family: var(--bouncy);
  font-size: var(--step-2);
  color: var(--amber);
  line-height: 1;
  margin-bottom: 0.2rem;
  transform: rotate(-2deg);
  display: inline-block;
}
.hero__title {
  font-family: var(--display);
  font-size: var(--step-4);
  letter-spacing: 0.02em;
  margin-block: 0.4rem 0;
}
.hero__lede {
  font-size: var(--step-1);
  color: var(--fg-soft);
  max-width: 34ch;
  margin-block: 1.4rem 0;
  text-shadow: 0 2px 10px rgba(4,12,9,0.75), 0 1px 2px rgba(4,12,9,0.9);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.9rem; }

/* Box callouts: "Super Soft! Slow Rising!" */
.callouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}
.callouts li {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--amber);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}
.callouts li:nth-child(2) { background: var(--lime); }
.callouts li:nth-child(3) { background: var(--cream); }

/* Scarcity stamp */
.scarcity {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--lime);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  transform: rotate(-2deg);
  margin-top: 1.5rem;
}

/* --- Scroll journey ----------------------------------------------------
   Top of the page is night sky with clouds; the middle warms to the orange
   band off the box; the graveyard rises out of the bottom of that band and
   the page falls back into darkness. Each band carries its own text colours
   so nothing is ever cream-on-orange. */

.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  fill: rgba(6,16,12,0.55);
}
/* Only the content wrapper is lifted above the decorative layers. Using
   `.hero > *` here would also match .clouds and friends and cancel their
   absolute positioning, dropping them back into flow. */
.hero > .wrap { position: relative; z-index: 3; }

/* The warm middle band */
.band--orange {
  background: linear-gradient(180deg, var(--amber) 0%, var(--orange) 50%, var(--ember) 100%);
  color: var(--night);
  position: relative;
}
.band--orange .section__title { color: var(--night); }
.band--orange .section__lede  { color: rgba(6,16,12,0.82); }
.band--orange .stamp          { color: rgba(6,16,12,0.62); }
.band--orange .design {
  background: rgba(6,16,12,0.22);
  border-color: rgba(6,16,12,0.35);
}
.band--orange .ph        { color: rgba(6,16,12,0.62); }
.band--orange .ph__icon  { color: rgba(6,16,12,0.35); }

/* Graveyard silhouette: rises out of the orange band into the dark below */
.scene {
  display: block;
  width: 100%;
  /* Fixed height + "slice" in the SVG: the scene crops at the sides on narrow
     screens rather than scaling the tombstones down to nothing. */
  height: clamp(95px, 13vw, 175px);
  margin-bottom: -1px;   /* kill the sub-pixel gap above the next section */
  fill: var(--night);
}

/* Bats drifting in the hero */
.bat {
  position: absolute;
  color: var(--night);
  opacity: 0.55;
  animation: drift 9s ease-in-out infinite;
}
.bat--1 { top: 12%; right: 8%;  width: 34px; animation-delay: 0s; }
.bat--2 { top: 26%; right: 22%; width: 22px; animation-delay: 1.4s; }
.bat--3 { top: 6%;  right: 34%; width: 16px; animation-delay: 2.6s; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}
@media (max-width: 60rem) { .bat { display: none; } }

/* --- Product frame (the wrapper) --------------------------------------- */
.wrapper-frame {
  position: relative;
  background: linear-gradient(160deg, var(--magenta), var(--purple-2));
  border: 3px solid var(--cream);
  border-radius: var(--radius);
  padding: 0.8rem;
  box-shadow: 0 14px 30px rgba(6,16,12,0.55);
}
.wrapper-frame__inner {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: rgba(6,16,12,0.5);
}
.wrapper-frame img { width: 100%; height: 100%; object-fit: cover; }
.wrapper-frame__tag {
  position: absolute;
  top: -0.85rem;
  left: 1.2rem;
  background: var(--lime);
  color: var(--night);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

/* Placeholder shown until real photography lands */
.ph {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  color: var(--fg-faint);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph__icon { font-family: var(--display); font-size: 2.2rem; color: rgba(245,239,224,0.25); }

/* --- Generic section --------------------------------------------------- */
.section { padding-block: clamp(3rem, 7vw, 5rem); }
.section__head { max-width: 46ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section__title {
  font-family: var(--display);
  font-size: var(--step-3);
  color: var(--cream);
  margin-top: 0.6rem;
  letter-spacing: 0.02em;
}
.section__lede { color: var(--fg-soft); margin-top: 1rem; max-width: 60ch; }

/* --- Steps (the mystery mechanic) -------------------------------------- */
.steps {
  display: grid;
  gap: 1.5rem;
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: rgba(35,80,68,0.18);
  border: 2px solid rgba(245,239,224,0.14);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--orange);
  color: var(--night);
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}
.step h3 { font-size: var(--step-1); font-family: var(--body); font-weight: 800; color: var(--cream); }
.step p { color: var(--fg-soft); margin-block: 0.5rem 0; }

/* --- Design grid ------------------------------------------------------- */
.designs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (min-width: 40rem) { .designs { grid-template-columns: repeat(4, 1fr); } }
.design {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, rgba(35,80,68,0.35), rgba(13,31,26,0.5));
  border: 2px solid rgba(245,239,224,0.16);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.design img { width: 100%; height: 100%; object-fit: cover; }
.design .ph { padding: 0.75rem; font-size: 0.66rem; }
.design .ph__icon { font-size: 1.3rem; }

/* --- Pricing ----------------------------------------------------------- */
.prices {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .prices { grid-template-columns: repeat(4, 1fr); } }

.price {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: linear-gradient(170deg, rgba(35,80,68,0.3), rgba(13,31,26,0.55));
  border: 2px solid rgba(245,239,224,0.18);
  border-radius: var(--radius);
  padding: 1.5rem 1.3rem 1.3rem;
  position: relative;
}
.price--hero {
  border-color: var(--amber);
  background: linear-gradient(170deg, rgba(245,160,50,0.20), rgba(13,31,26,0.6));
  box-shadow: 0 10px 28px rgba(6,16,12,0.5);
}
.price__flag {
  position: absolute;
  top: -0.8rem;
  left: 1.1rem;
  background: var(--lime);
  color: var(--night);
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.price__name {
  font-family: var(--body);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--cream);
}
.price__fig {
  font-family: var(--display);
  font-size: var(--step-3);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-top: 0.35rem;
}
.price__each {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.price__ship { font-size: var(--step--1); color: var(--fg-soft); margin-block: 0.55rem 0; }
.price__ship strong { color: var(--lime); }
.price .btn { margin-top: 1.2rem; }

/* --- Trust row --------------------------------------------------------- */
.trust {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(2, 1fr);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 52rem) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { border-left: 3px solid var(--orange); padding-left: 0.9rem; }
.trust b { display: block; color: var(--cream); font-size: var(--step-0); font-weight: 800; }
.trust span { color: var(--fg-soft); font-size: var(--step--1); }

/* --- Pre-order notice -------------------------------------------------- */
.preorder-note {
  display: none;               /* switched on by main.js when preOrder is true */
  align-items: flex-start;
  gap: 0.75rem;
  border: 2px solid var(--moss);
  background: rgba(168,198,63,0.12);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-top: 1.6rem;
  max-width: 60ch;
}
.preorder-note.is-on { display: flex; }
.preorder-note p { margin: 0; color: var(--fg-soft); font-size: var(--step--1); line-height: 1.7; }
.preorder-note strong {
  color: var(--lime);
  display: block;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* --- FAQ --------------------------------------------------------------- */
.faq { display: grid; gap: 0; max-width: 54rem; }
.qa { border-bottom: 2px solid rgba(245,239,224,0.14); }
.qa summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.2rem;
  font-weight: 800;
  color: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  font-family: var(--display);
  color: var(--orange);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.qa[open] summary::after { content: "\2013"; }
.qa p { color: var(--fg-soft); margin-block: 0 1.2rem; max-width: 62ch; }

/* --- Sticky buy bar (mobile) ------------------------------------------ */
.buybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--purple-2);
  border-top: 3px solid var(--orange);
  transform: translateY(110%);
  transition: transform 220ms ease;
}
.buybar.is-visible { transform: translateY(0); }
.buybar__txt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-soft); }
.buybar__txt b { display: block; font-size: 0.98rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--cream); }
.buybar .btn { padding-inline: 1.2rem; }
@media (min-width: 60rem) { .buybar { display: none; } }

/* --- Footer ------------------------------------------------------------ */
.site-foot {
  padding-block: clamp(2.5rem, 5vw, 4rem) 6rem;
  color: var(--fg-faint);
  font-size: var(--step--1);
}
@media (min-width: 60rem) { .site-foot { padding-bottom: 3rem; } }
.site-foot a { color: var(--fg-soft); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; justify-content: space-between; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.warning {
  border: 2px solid rgba(245,239,224,0.16);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-top: 2rem;
  max-width: 62ch;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--fg-soft);
}
.warning strong { color: var(--amber); }

/* --- Simple prose pages (policies, success) ---------------------------- */
.prose { max-width: 62ch; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.prose h1 { font-family: var(--display); font-size: var(--step-3); color: var(--cream); letter-spacing: 0.02em; }
.prose h2 { font-family: var(--body); font-weight: 800; font-size: var(--step-1); color: var(--amber); margin-top: 2.4rem; }
.prose p, .prose li { color: var(--fg-soft); }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-block: 0.45rem; }
.prose .stamp { margin-bottom: 0.8rem; }
.prose strong { color: var(--cream); }

/* Bare-tree branches in the graveyard scene are strokes, not fills */
.scene .twig path {
  stroke: var(--night);
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
}

/* ==========================================================================
   ATMOSPHERE
   Storm clouds, lightning, wind, ghosts, cobwebs, crows, carved pumpkins.
   Every animation here is disabled by the prefers-reduced-motion block
   near the top of this file.
   ========================================================================== */

/* --- Storm clouds ------------------------------------------------------ */
.clouds { fill: none; }                    /* per-layer fills below */
.cloud--back  { fill: #0A1713; }
.cloud--mid   { fill: #102019; }
.cloud--front { fill: #162C23; }

/* The whole cloud bank creeps sideways: a slow, heavy gust */
.clouds__drift { animation: gust 26s ease-in-out infinite alternate; }
@keyframes gust {
  from { transform: translateX(-18px); }
  to   { transform: translateX(18px); }
}

/* --- Lightning ---------------------------------------------------------
   Deliberately restrained: a dim bolt, a low-opacity sky wash, a long gap.
   No full-screen white strobe - that reads as cheap and is a seizure risk. */
.bolt {
  fill: #FFF3C4;
  opacity: 0;
  animation: strike 7s linear infinite;
}
.bolt--2 { animation-delay: 3.4s; }
@keyframes strike {
  0%, 84%, 100% { opacity: 0; }
  85%           { opacity: 1; }
  87%           { opacity: 0.15; }
  89%           { opacity: 0.9; }
  93%           { opacity: 0.55; }
  96%           { opacity: 0; }
}
.sky-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(198,240,214,0.26), transparent 70%);
  opacity: 0;
  animation: skyflash 7s linear infinite;
}
@keyframes skyflash {
  0%, 84%, 100% { opacity: 0; }
  85%           { opacity: 1; }
  87%           { opacity: 0.15; }
  89%           { opacity: 0.85; }
  93%           { opacity: 0.4; }
  96%           { opacity: 0; }
}

/* --- Wind streaks ------------------------------------------------------ */
.wind {
  position: absolute;
  inset-inline: 0;
  top: 32%;
  height: 120px;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  stroke: rgba(245,239,224,0.22);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.wind path { animation: blow 7s ease-in-out infinite; }
.wind path:nth-child(2) { animation-delay: 1.1s; }
.wind path:nth-child(3) { animation-delay: 2.3s; }
@keyframes blow {
  0%   { transform: translateX(-30%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* --- Cobwebs in the corners ------------------------------------------- */
.cobweb {
  position: absolute;
  top: 0;
  width: clamp(90px, 16vw, 190px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  stroke: rgba(245,239,224,0.32);
  fill: none;
  stroke-width: 1.6;
}
.cobweb--l { left: 0; }
.cobweb--r { right: 0; transform: scaleX(-1); }

/* --- Ghost ------------------------------------------------------------- */
.ghost {
  position: absolute;
  z-index: 1;
  width: clamp(48px, 7vw, 86px);
  height: auto;
  pointer-events: none;
  animation: haunt 11s ease-in-out infinite;
}
.ghost--1 { top: 46%; right: 6%; }
.ghost--2 { top: 16%; right: 40%; width: clamp(32px, 4.5vw, 54px); animation-delay: 3.5s; opacity: 0.6; }
@keyframes haunt {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); opacity: 0.85; }
  50%      { transform: translate(-16px, -22px) rotate(3deg); opacity: 0.45; }
}
@media (max-width: 60rem) {
  .ghost--2 { display: none; }
  .ghost--1 { top: auto; bottom: 4%; right: 4%; opacity: 0.5; }
}

/* --- Crows ------------------------------------------------------------- */
.crow-fly {
  position: absolute;
  z-index: 1;
  width: clamp(44px, 5.5vw, 76px);
  fill: #180C2C;
  pointer-events: none;
  animation: haunt 13s ease-in-out infinite;
}
.crow-fly--1 { top: 9%;  right: 27%; }
.crow-fly--2 { top: 23%; right: 11%; width: clamp(30px, 3.8vw, 52px); animation-delay: 2.2s; }
@media (max-width: 60rem) { .crow-fly { display: none; } }

/* --- Carved pumpkins in the graveyard ---------------------------------- */
.jack-glow { animation: emberpulse 4.5s ease-in-out infinite; transform-origin: center; }
.jack-glow--b { animation-delay: 1.6s; }
@keyframes emberpulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* The bare tree leans in the gust */
.twig { animation: lean 7s ease-in-out infinite; transform-origin: 980px 160px; }
@keyframes lean {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* ==========================================================================
   DEPTH
   Parallax layers, atmospheric haze, a 3D-tilting product frame and
   scroll reveals. All of it degrades to a flat, static page when the
   viewer asks for reduced motion (js/depth.js checks the same query).
   ========================================================================== */

/* Parallax layers are moved by js/depth.js via --py. Declaring the custom
   property lets the browser interpolate it and keeps it off the main thread
   for compositing. */
@property --py {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* Elements that carry their own keyframe animation fold --py into the
   keyframes instead, so the two transforms don't fight. */
.ghost, .crow-fly { will-change: transform; }

@keyframes haunt {
  0%, 100% { transform: translate3d(0, var(--py, 0px), 0) rotate(-2deg); opacity: 0.85; }
  50%      { transform: translate3d(-16px, calc(var(--py, 0px) - 22px), 0) rotate(3deg); opacity: 0.45; }
}

/* --- The moon: furthest layer, moves least -------------------------- */
.moon {
  position: absolute;
  /* Right-hand sky: the hero copy runs down the left, so the moon would
     otherwise sit behind the lede and wash it out. */
  top: 3%;
  right: 8%;
  width: clamp(90px, 13vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 36% 32%, #FFF6DC 0%, #F6E4B4 46%, #D9BE86 100%);
  box-shadow:
    0 0 60px 18px rgba(255, 236, 186, 0.22),
    0 0 160px 60px rgba(255, 220, 150, 0.12);
}
/* craters */
.moon::before,
.moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(180, 152, 106, 0.35);
}
.moon::before { width: 22%; height: 22%; top: 24%; left: 52%; }
.moon::after  { width: 14%; height: 14%; top: 58%; left: 30%; }

/* --- Atmospheric haze: sells distance between the layers ------------- */
.haze {
  position: absolute;
  inset-inline: 0;
  height: 42%;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(13, 31, 26, 0.55) 70%, rgba(6, 16, 12, 0.85));
}

/* Far cloud layer sits slightly out of focus - cheap, convincing depth */
.cloud--back { filter: blur(2.5px); }
.cloud--mid  { filter: blur(0.8px); }

/* --- Fog rolling through the graveyard ------------------------------- */
.fog {
  position: absolute;
  inset-inline: -10%;
  bottom: 0;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 30% 100%, rgba(190, 226, 200, 0.16), transparent 70%),
              radial-gradient(ellipse 50% 100% at 75% 100%, rgba(190, 226, 200, 0.12), transparent 70%);
  animation: roll 24s ease-in-out infinite alternate;
}
@keyframes roll {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* --- Product frame: real 3D tilt ------------------------------------- */
.frame-stage { perspective: 1100px; }
.wrapper-frame {
  transform-style: preserve-3d;
  transition: transform 260ms cubic-bezier(.2,.7,.3,1), box-shadow 260ms ease;
  box-shadow:
    0 2px 6px rgba(4, 12, 9, 0.4),
    0 12px 28px rgba(4, 12, 9, 0.45),
    0 34px 70px rgba(4, 12, 9, 0.5);
}
.frame-stage:hover .wrapper-frame {
  box-shadow:
    0 4px 10px rgba(4, 12, 9, 0.45),
    0 20px 42px rgba(4, 12, 9, 0.5),
    0 52px 96px rgba(4, 12, 9, 0.55);
}
/* the label and the photo lift off the card face */
.wrapper-frame__tag  { transform: translateZ(46px); }
.wrapper-frame__inner { transform: translateZ(18px); }

/* --- Scroll reveal ----------------------------------------------------
   Gated behind .js (set by an inline script in <head>). If JavaScript is
   blocked or depth.js throws, none of this applies and every block renders
   normally - content must never be able to get stuck invisible. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1),
              transform 700ms cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: 80ms; }
.js .reveal:nth-child(3) { transition-delay: 160ms; }

/* Cards gain depth rather than flat borders */
.price, .step {
  box-shadow: 0 2px 4px rgba(4,12,9,0.3), 0 10px 26px rgba(4,12,9,0.34);
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
}
.price:hover, .step:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(4,12,9,0.34), 0 18px 44px rgba(4,12,9,0.42);
}
.price--hero:hover { transform: translateY(-6px); }

/* No motion requested: everything sits still and fully visible */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none; }
  .price:hover, .step:hover, .frame-stage:hover .wrapper-frame { transform: none; }
}

/* On narrow screens the hero is single-column and the lede runs full width,
   so the moon has to move up and shrink to stay out of the text. */
@media (max-width: 48rem) {
  .moon {
    top: 0.5%;
    right: 5%;
    width: clamp(64px, 19vw, 92px);
    opacity: 0.85;
  }
}

/* ==========================================================================
   REALISTIC SKY
   Clouds are fractal-noise turbulence rather than drawn circles - that is
   what buys the soft, wispy edges a shape-based cloud can never have.
   The filter rasterises once; only cheap transforms are animated over it.

   TO USE A REAL PHOTO INSTEAD: drop a file at img/bg-graveyard.jpg and set
       .sky-stage { background-image: url("../img/bg-graveyard.jpg"); }
       .sky { display: none; }
   Everything else keeps working.
   ========================================================================== */

.sky-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-size: cover;
  background-position: center bottom;
}
.sky { width: 100%; height: 100%; display: block; }

/* Cloud bands: two depths, drifting at different speeds and breathing
   slightly so the bank looks like it is being pushed by the wind. */
.cloudband {
  transform-origin: 50% 40%;
  will-change: transform, opacity;
}
.cloudband--far {
  animation: driftFar 90s linear infinite, swayFar 19s ease-in-out infinite alternate;
}
.cloudband--near {
  animation: driftNear 58s linear infinite, swayNear 13s ease-in-out infinite alternate;
}
@keyframes driftFar  { from { transform: translateX(0); }      to { transform: translateX(-600px); } }
@keyframes driftNear { from { transform: translateX(0); }      to { transform: translateX(-600px); } }
@keyframes swayFar   { from { transform: translateY(-6px) scaleY(1.00); } to { transform: translateY(7px) scaleY(1.05); } }
@keyframes swayNear  { from { transform: translateY(5px)  scaleY(1.04); } to { transform: translateY(-8px) scaleY(1.00); } }

/* drift and sway both animate transform, so they compose on nested groups */
.cloudband--far > g,
.cloudband--near > g { will-change: transform; }

/* js/depth.js fades the whole bank out as the graveyard comes up */
.sky-stage { opacity: var(--sky-opacity, 1); }

/* Ground mist sitting at the base of the sky stage */
.mist {
  position: absolute;
  inset-inline: -5%;
  bottom: -2%;
  height: 34%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 100% at 22% 100%, rgba(159,216,180,0.13), transparent 72%),
    radial-gradient(ellipse 45% 100% at 62% 100%, rgba(159,216,180,0.10), transparent 72%),
    radial-gradient(ellipse 60% 100% at 88% 100%, rgba(159,216,180,0.09), transparent 72%);
  animation: roll 30s ease-in-out infinite alternate;
}

/* --- Falling leaves ---------------------------------------------------- */
.leaves { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.leaf {
  position: absolute;
  top: -6%;
  width: 18px;
  height: 18px;
  opacity: 0;
  fill: #C85A18;
  animation: fall linear infinite;
}
.leaf:nth-child(1) { left:  8%; width: 15px; animation-duration: 17s; animation-delay: 0s;   fill: #D4691F; }
.leaf:nth-child(2) { left: 26%; width: 21px; animation-duration: 23s; animation-delay: 4s;   fill: #B84E14; }
.leaf:nth-child(3) { left: 47%; width: 13px; animation-duration: 19s; animation-delay: 9s;   fill: #E8861B; }
.leaf:nth-child(4) { left: 68%; width: 19px; animation-duration: 26s; animation-delay: 2.5s; fill: #A8450F; }
.leaf:nth-child(5) { left: 85%; width: 16px; animation-duration: 21s; animation-delay: 12s;  fill: #D4691F; }
@keyframes fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);          opacity: 0; }
  8%   { opacity: 0.85; }
  92%  { opacity: 0.6; }
  100% { transform: translate3d(70px, 108vh, 0) rotate(520deg); opacity: 0; }
}
@media (max-width: 48rem) { .leaf:nth-child(n+4) { display: none; } }

/* ==========================================================================
   THE REEL - swipeable mystery-bundle browser
   Native CSS scroll-snap does the swiping, so touch drag works with no
   library and no JS. The buttons and dots are progressive enhancement.
   ========================================================================== */

.reel { position: relative; margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.reel__track {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0;
  padding: 0 0 1.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.reel__track::-webkit-scrollbar { display: none; }

.reel__item {
  flex: 0 0 min(78%, 320px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
@media (min-width: 60rem) { .reel__item { flex-basis: 300px; } }

/* --- The plinth: a weathered tombstone the squishy rests on ------------ */
.plinth { display: flex; flex-direction: column; align-items: center; }

/* Shared stage: the stone fills it, the artwork sits in front, near the base */
.plinth__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: end center;
}
.plinth__stone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: drop-shadow(0 16px 22px rgba(4,12,9,0.55));
}
.plinth__art {
  position: relative;
  z-index: 1;
  width: 52%;
  aspect-ratio: 3 / 4;
  margin-bottom: 9%;
  border-radius: 10px;
  overflow: hidden;
  /* opaque, so it reads as an object resting against the stone rather than
     a pane of glass laid over it */
  background: linear-gradient(165deg, #1B3A30, #0C1C17);
  border: 2px solid rgba(245,239,224,0.3);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px rgba(4,12,9,0.7);
  transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}
.plinth__art img { width: 100%; height: 100%; object-fit: cover; }
.reel__item:hover .plinth__art { transform: translateY(-8px) scale(1.03); }

.plinth__label { margin-top: 0.9rem; text-align: center; }
.plinth__label b {
  display: block;
  font-weight: 800;
  color: var(--cream);
  font-size: var(--step-0);
}
.plinth__label span { font-size: var(--step--1); color: var(--fg-faint); }

/* --- Arrows ------------------------------------------------------------ */
.reel__nav {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(245,239,224,0.35);
  background: rgba(8,18,15,0.78);
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.reel__nav:hover { background: var(--orange); border-color: var(--cream); color: var(--night); }
.reel__nav[disabled] { opacity: 0.3; cursor: default; }
.reel__nav--prev { left: -6px; }
.reel__nav--next { right: -6px; }
@media (min-width: 60rem) {
  .reel__nav--prev { left: -22px; }
  .reel__nav--next { right: -22px; }
}
/* Touch devices swipe; the arrows would only get in the way */
@media (hover: none) { .reel__nav { display: none; } }

/* --- Dots -------------------------------------------------------------- */
.reel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.reel__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(245,239,224,0.3);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.reel__dots button[aria-current="true"] { background: var(--orange); transform: scale(1.45); }

.reel__hint {
  text-align: center;
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--fg-faint);
}
@media (hover: hover) { .reel__hint--swipe { display: none; } }
@media (hover: none)  { .reel__hint--drag  { display: none; } }

/* Placeholder inside the plinth needs more contrast than the page default */
.plinth__art .ph { color: rgba(245,239,224,0.55); font-size: 0.6rem; padding: 0.5rem; }
.plinth__art .ph__icon { font-size: 1.1rem; color: rgba(245,239,224,0.3); }

/* ==========================================================================
   CART
   Slide-over drawer, styled from the same tokens as the rest of the site.
   ========================================================================== */

/* Header cart button + count badge */
.cartbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 2px solid rgba(245,239,224,0.3);
  background: rgba(8,18,15,0.55);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.cartbtn:hover { border-color: var(--orange); background: rgba(232,118,27,0.14); }
.cartbtn__count {
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--orange);
  color: var(--night);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Backdrop */
.cart__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4,12,9,0.66);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.cart__backdrop.is-open { opacity: 1; visibility: visible; }

/* Drawer */
.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #12241E, #08120F);
  border-left: 2px solid rgba(245,239,224,0.16);
  box-shadow: -18px 0 50px rgba(4,12,9,0.6);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.2,.7,.3,1);
}
.cart.is-open { transform: translateX(0); }

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 2px solid rgba(245,239,224,0.14);
}
.cart__head h2 {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--cream);
  letter-spacing: 0.02em;
}
.cart__close {
  background: none;
  border: 0;
  color: var(--fg-soft);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.cart__close:hover { color: var(--cream); }

.cart__body { flex: 1 1 auto; overflow-y: auto; padding: 0.5rem 1.25rem; }
.cart__empty { color: var(--fg-faint); padding: 2rem 0; text-align: center; }

.cart__line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "main  total"
    "qty   remove";
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(245,239,224,0.12);
}
.cart__lineMain { grid-area: main; }
.cart__lineMain b { display: block; color: var(--cream); font-weight: 800; }
.cart__lineMain span { font-size: var(--step--1); color: var(--fg-faint); }
.cart__lineTotal {
  grid-area: total;
  color: var(--amber);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cart__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 2px solid rgba(245,239,224,0.22);
  border-radius: 999px;
  padding: 0.1rem;
}
.cart__qty button {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.cart__qty button:hover { background: rgba(232,118,27,0.25); }
.cart__qty span {
  min-width: 1.8rem;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}

.cart__remove {
  grid-area: remove;
  justify-self: end;
  background: none;
  border: 0;
  color: var(--fg-faint);
  font-size: var(--step--1);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart__remove:hover { color: var(--orange); }

.cart__foot {
  flex: 0 0 auto;
  padding: 1.15rem 1.25rem calc(1.15rem + env(safe-area-inset-bottom));
  border-top: 2px solid rgba(245,239,224,0.14);
  background: rgba(4,12,9,0.5);
}
.cart__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--step--1);
  color: var(--fg-soft);
  margin-bottom: 0.4rem;
}
.cart__row span:last-child { font-variant-numeric: tabular-nums; }
.cart__row--total {
  font-size: var(--step-0);
  font-weight: 800;
  color: var(--cream);
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(245,239,224,0.16);
}
.cart__note { font-size: 0.74rem; color: var(--fg-faint); margin: 0.7rem 0 0.9rem; }

.cart__error {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(232,118,27,0.5);
  background: rgba(232,118,27,0.12);
  color: #FFD3A8;
  font-size: var(--step--1);
}

/* Checkout button fills the drawer foot */
.cart__foot .btn { width: 100%; }
.cart__foot .btn[disabled] { opacity: 0.6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .cart, .cart__backdrop { transition: none; }
}

/* Header right-hand cluster: stock stamp + cart button */
.site-head__right { display: flex; align-items: center; gap: 0.9rem; }
@media (max-width: 30rem) {
  .site-head__right .stamp { display: none; }   /* cart wins the space on small phones */
}