/* ==========================================================================
   LOOT cookies — flavour deck
   Art direction: candy-counter poster. Flat colour fields, no gradients, no
   glass, no drop-shadowed cards. The only depth on the page is the cookie
   floating and the shadow it casts.
   ========================================================================== */

/* Genty Sans is the brand face. Drop GentySans-*.woff2 into /fonts and it
   takes over everywhere; Unbounded stands in until then and covers Cyrillic. */
@font-face {
  font-family: "Genty Sans";
  src: url("../fonts/GentySans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Genty Sans";
  src: url("../fonts/GentySans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f2a93b;
  --ink: #33251c;
  --shade: 51 37 28;

  --font-display: "Genty Sans", "Unbounded", system-ui, sans-serif;
  --font-text: "Unbounded", system-ui, sans-serif;

  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --bar: 5.5rem;
  --ticker-h: 2.75rem;   /* the fixed contact bar; panels must clear it */
  --swap: 700ms cubic-bezier(.4, 0, .2, 1);
}

/* Each field is the flavour itself, not a colour that merely goes with it, so
   three of the four are dark and every theme carries its own ink. --shade is
   the cast shadow, kept as raw channels so opacity can vary per use. */
body[data-theme="cream"]   { --paper: #f6e7c1; --ink: #33251c; --shade:  51 37 28; }
body[data-theme="caramel"] { --paper: #f2a93b; --ink: #33251c; --shade:  51 37 28; }
body[data-theme="velvet"]  { --paper: #b32333; --ink: #fbe9dc; --shade:  58 6 12; }
body[data-theme="cocoa"]   { --paper: #7d4c2b; --ink: #f7e5cf; --shade:  38 20 8; }
body[data-theme="oreo"]    { --paper: #17130f; --ink: #f3ede2; --shade:   0 0 0; }

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

:where(body, h1, h2, h3, p, figure) { margin: 0; }
:where(img) { max-width: 100%; display: block; }
:where(button) { font: inherit; color: inherit; }

html { scroll-behavior: auto; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--swap), color var(--swap);
  overflow-x: clip;
}

/* --------------------------------------------------------------- topbar -- */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--edge);
}

.logo {
  width: 7.5rem;
  aspect-ratio: 824 / 413;
  background-color: var(--ink);
  -webkit-mask-image: url("../img/logo-loot.png");
  mask-image: url("../img/logo-loot.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex: none;
  transition: background-color var(--swap);
}

.topnav {
  display: flex;
  gap: 1.75rem;
  margin-inline-start: auto;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.topnav a {
  color: var(--ink);
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s;
  white-space: nowrap;
}
.topnav a:hover { opacity: 1; }

.order-btn {
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--swap), color var(--swap), transform .2s;
}
.order-btn:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------- deck --- */

.deck {
  /* Snapping is decided in JS, not here. `mandatory` traps inside the sweets
     section, which is far taller than the scrollport; `proximity` snaps or not
     depending on a UA-defined threshold, which reads as sometimes magnetic and
     sometimes free. Only the four flavour panels should pull, so main.js does
     exactly that and nothing else. */
  scroll-snap-type: none;
  height: 100svh;
  overflow-y: auto;
  overflow-x: clip;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.flavour {
  /* The Oreo band deliberately bleeds off the right edge (right: -50vw). Without
     clipping it here that bleed became 230px of horizontal overflow on .deck,
     and a horizontally-overflowing scroller eats trackpad gestures that drift
     sideways — which is why the scroll appeared to die approaching Орео. The
     panel is full-bleed, so clipping at its border box still lets the band run
     to the edge of the screen. */
  overflow: clip;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  /* Right padding keeps the cookie clear of the fixed flavour rail. */
  padding: calc(var(--bar) + 1rem) calc(var(--edge) + 6rem) 6rem var(--edge);
}

/* ---------------------------------------------------------------- type --- */

.flavour__type {
  max-width: 34ch;
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 1.25rem;
}

.num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: 0;
  opacity: 1;
}

.tag {
  padding: .3rem .7rem .25rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  font-size: .6rem;
  letter-spacing: .12em;
  transition: background-color var(--swap), color var(--swap);
}

.flavour__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 9.5vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: lowercase;
  margin-bottom: 1.75rem;
}

.flavour__desc {
  font-size: clamp(.85rem, 1.05vw, 1rem);
  line-height: 1.65;
  font-weight: 400;
  opacity: .75;
  max-width: 40ch;
  margin-bottom: 2rem;
}

.specs {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  margin-bottom: 2rem;
}

.spec {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .8rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: border-color var(--swap);
}

.spec b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}

.spec--price {
  background: var(--ink);
  color: var(--paper);
  transition: background-color var(--swap), color var(--swap), border-color var(--swap);
}

.more {
  display: inline-block;
  color: var(--ink);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .3rem;
  border-bottom: 2px solid currentColor;
  transition: opacity .2s;
}
.more:hover { opacity: .6; }

/* -------------------------------------------------------------- cookie --- */

.flavour__art {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

/* The Oreo panel is the biscuit's own two tones: near-black field, and the
   cookie sitting in a band of the cream filling. The band runs off the right
   edge rather than floating as a pill, and lives inside the art column so it
   stays centred on the cookie when the layout stacks on mobile. */
.flavour--oreo .flavour__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12%;
  right: -50vw;
  top: 50%;
  height: 30%;
  translate: 0 -50%;
  background: #f3ede2;
}

/* No aspect-ratio and no square padding on the files: each cookie keeps the
   shape it has in the photograph. --scale is its width relative to the widest
   of the four, so their sizes stay in the same proportion as the originals. */
.cookie {
  position: relative;
  width: calc(min(44vw, 58svh, 32rem) * var(--scale, 1));
}

/* The Oreo panel is the biscuit's own two tones: near-black field, and the
   cookie sitting in a band of the cream filling. */
.cookie__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  animation: loot-float var(--float, 2.5s) ease-in-out infinite alternate;
}

/* The shadow is on the same duration and easing as the float, so the two stay
   locked: as the cookie climbs the shadow shrinks, lightens and spreads, and
   it tightens and darkens again as the cookie settles. */
.cookie__shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -9%;
  width: 68%;
  aspect-ratio: 5 / 1;
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(var(--shade) / .55);
  animation: loot-shadow var(--float, 2.5s) ease-in-out infinite alternate;
  transition: background-color var(--swap);
}

@keyframes loot-float {
  from { translate: 0 3%; }
  to   { translate: 0 -5%; }
}

@keyframes loot-shadow {
  from { scale: 1.08; opacity: 1;   filter: blur(13px); }
  to   { scale: .74;  opacity: .44; filter: blur(25px); }
}

/* ---------------------------------------------------------------- rail --- */

.rail {
  position: fixed;
  z-index: 40;
  right: var(--edge);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-end;
}

.rail__dot {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .2rem 0;
  cursor: pointer;
  color: var(--ink);
  transition: color var(--swap);
}

.rail__dot::after {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  transition: background-color .3s, transform .3s;
}

.rail__dot.is-active::after { background: currentColor; transform: scale(1.25); }

/* On the Oreo panel the cream band runs under the rail, and cream ink on a
   cream band is invisible. Difference blending keeps the dots legible against
   both the band and the near-black field either side of it. */
body[data-theme="oreo"] .rail { mix-blend-mode: difference; color: #fff; }

.rail__dot span {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  translate: .5rem 0;
  transition: opacity .3s, translate .3s;
  white-space: nowrap;
}

.rail__dot:hover span,
.rail__dot.is-active span { opacity: .75; translate: 0 0; }

/* -------------------------------------------------------------- ticker --- */

.ticker {
  position: fixed;
  z-index: 30;
  inset: auto 0 0 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  padding: .7rem 0;
  pointer-events: none;
  transition: border-color var(--swap);
}

.ticker__row {
  display: flex;
  width: max-content;
  animation: loot-ticker 44s linear infinite;
}

.ticker__set {
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  white-space: nowrap;
}

@keyframes loot-ticker { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 900px) {
  :root { --bar: 4.5rem; }

  .topnav { display: none; }

  .order-btn { margin-inline-start: auto; height: 2.4rem; padding: 0 1.15rem; }

  .flavour {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1rem;
    padding: calc(var(--bar) + .5rem) var(--edge) 5rem;
  }

  .flavour__art { order: -1; }

  .cookie { width: min(66vw, 34svh); }

  .flavour__name { font-size: clamp(2.8rem, 15vw, 5rem); }

  .flavour__desc { font-size: .82rem; margin-bottom: 1.5rem; }

  .rail { right: .75rem; gap: .7rem; }
  .rail__dot span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie__img,
  .cookie__shadow,
  .ticker__row { animation: none; }
  body { transition-duration: 1ms; }
}

/* The flavour rail belongs to the flavour deck; the hero has its own. */
/* !important so this cannot be lost to cascade order between the three
   stylesheets: hiding deck chrome on the cream sections is absolute. */
body[data-theme="cream"] .rail { opacity: 0 !important; pointer-events: none; }
.rail { transition: opacity .35s; }
.ticker { transition: opacity .35s; }

/* Short phones: at 667px tall the centred column overflows its own padding and
   the last link slides under the fixed contact bar. Tighten the stack rather
   than add padding, which only squeezes the overflow further. */
@media (max-width: 900px) and (max-height: 740px) {
  .flavour__name { font-size: clamp(2.1rem, 11vw, 3.1rem); margin-bottom: .9rem; }
  .flavour__desc { font-size: .76rem; line-height: 1.5; margin-bottom: 1rem; }
  .eyebrow { margin-bottom: .7rem; }
  .specs { margin-bottom: 1rem; }
  .spec { padding: .58rem 1rem; }
  .spec b { font-size: 1rem; }
  .cookie { width: min(52vw, 27svh); }
  .flavour { gap: .4rem; }
}

/* --------------------------------------------- mobile touch affordances -- */

@media (max-width: 900px) {
  /* The nav collapses on a phone, which stranded WhatsApp and Сладкое with no
     route to them. Surface them as pills next to the order button instead of
     hiding the row outright. */
  .topnav {
    display: flex;
    gap: .4rem;
    font-size: .6rem;
    letter-spacing: .06em;
  }

  /* Only WhatsApp survives the collapse: logo + two pills + the order button
     do not fit across 375px, and WhatsApp is the one contact action worth a
     permanent slot. Сладкое is reachable from the scroll and the ticker. */
  .topnav a:not([href*="wa.me"]) { display: none; }

  .topnav a {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 .7rem;
    border: 1.5px solid var(--ink);
    border-radius: 100px;
    transition: border-color var(--swap), color var(--swap);
  }

  .topbar { gap: .5rem; }
  .logo { width: 5rem; }
  .order-btn { margin-inline-start: 0; height: 40px; padding: 0 .9rem; font-size: .66rem; }

  /* Comfortable tap targets: a 2px underline is not something to aim at. */
  .more {
    padding: .55rem 0 .4rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}