/* ==========================================================================
   LOOT cookies — hero carousel
   Interaction ported from 21st.dev "Framer Normal Carousel" (spring slide +
   a progress rail where the active dot is a wide pill). That component is
   React + Motion + Tailwind and this project is plain HTML, so the behaviour
   is rebuilt here: same spring slide, same pill-vs-dot rail, plus the fill
   that runs the autoplay clock.
   ========================================================================== */

.hero {
  --cream: #f6e7c1;
  --white: #fffdf7;

  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
}

.hero__track {
  display: flex;
  height: 100svh;
  will-change: transform;
  /* Without this the track jumped straight to the next slide. The burst is
     held back until the slide has landed, see SLIDE_MS in hero.js. */
  transition: transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--bar) + 2rem) var(--edge) 7rem;
  overflow: hidden;
}

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

.hero__type {
  position: relative;
  z-index: 3;
  text-align: center;
  /* Full width, not a ch cap. `ch` resolves against this element's own 16px
     font, so 22ch was a 314px box trying to centre a 1000px headline — the
     line simply overflowed it and sat off to one side. The slide's padding
     supplies the margin; the measure below is only for the small copy. */
  width: 100%;
  max-width: none;
}

.hero__shout,
.hero__type > p {
  max-width: 22ch;
  margin-inline: auto;
}

.hero__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 11rem);
  line-height: .84;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

.hero__line--sm { font-size: clamp(2rem, 6.5vw, 6rem); }

.hero__shout {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  letter-spacing: -.01em;
  text-transform: lowercase;
  margin-top: 1.25rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 2rem;
  padding: 1.05rem 2.25rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.9rem, 1.5vw, 1.35rem);
  text-transform: lowercase;
  text-decoration: none;
  transition: transform .2s;
}
.hero__cta:hover { transform: translateY(-3px); }

/* --------------------------------------------------- slide 1: the baker -- */

/* Type sits flush left against the edge margin, he stands on the right. */
.hero--baker { place-items: center start; }

/* The brand is set as the mark itself rather than the word typed out. */
.hero__mark {
  display: block;
  width: min(46vw, 26rem);
  aspect-ratio: 824 / 274;
  background-color: var(--ink);
  -webkit-mask-image: url("../img/logo-mark.png");
  mask-image: url("../img/logo-mark.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  margin-bottom: .35rem;
}

.hero--baker .hero__type {
  text-align: left;
  max-width: 15ch;
  margin-inline-end: auto;
}

.hero__figure {
  position: absolute;
  right: max(2vw, calc(var(--edge) - 2rem));
  bottom: 0;
  width: clamp(11rem, 22vw, 21rem);
  z-index: 2;
  pointer-events: none;
}

.hero__figure img { width: 100%; height: auto; }

/* The follower count sits as a slab behind him rather than as body copy. */
/* The follower count is the slab and nothing else. It used to be said twice,
   once as a slab and once as body copy underneath. */
.hero__slab {
  position: absolute;
  left: var(--edge);
  bottom: 8%;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 7.5vw, 7rem);
  line-height: .82;
  letter-spacing: -.04em;
  text-transform: lowercase;
  opacity: .2;
  pointer-events: none;
}

/* ------------------------------------------------- slide 2: the burst ---- */

/* White underneath, cream on top. Each cookie has torn its own hole through
   the cream and is coming out of it, so the hole is that cookie's silhouette
   grown a little and rounded off, not a generic circle.

   Every animated part is authored so its BASE state is the finished state and
   the keyframes only describe where it came FROM, with fill-mode backwards.
   If an animation never runs the slide still reads correctly instead of
   sitting blank. */

.hero--burst { background: var(--white); }

.hero__cream {
  position: absolute;
  inset: 0;
  background: var(--cream);
  z-index: 0;
}

.burst {
  position: absolute;
  z-index: 1;
  width: var(--w, 22vmin);
  translate: -50% -50%;
}

.burst__hole {
  position: absolute;
  left: 50%;
  top: 50%;
  /* Comfortably larger than the cookie, or the cookie covers its own hole
     completely and the burst reads as no hole at all. */
  width: 152%;
  translate: -50% -50%;
  aspect-ratio: var(--ratio, 1.12);
  background: var(--white);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: 0;
  scale: 1;
}

.burst__cookie {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  rotate: var(--spin, 0deg);
  scale: 1;
}

.burst__crumbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.burst__crumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 26px);
  translate: calc(-50% + var(--x)) calc(-50% + var(--y));
  rotate: var(--turn, 0deg);
  opacity: 1;
}

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

/* Held collapsed for the whole of the travel. Without this the finished burst
   is on screen while the slide is still sliding in, and then replays the moment
   it lands — the composition arrives twice. These values are exactly the
   keyframes' `from`, so swapping is-armed for is-live is seamless. */
.hero__slide.is-armed .burst__hole { scale: 0; }

.hero__slide.is-armed .burst__cookie {
  scale: .18;
  rotate: 0deg;
  translate: 0 22%;
}

.hero__slide.is-armed .burst__crumb {
  opacity: 0;
  translate: -50% -50%;
  rotate: 0deg;
}

/* The burst is armed only once the track has landed, so nothing flies while
   the frame is still travelling underneath it. */
.hero__slide.is-live .burst__hole {
  animation: burst-hole .85s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: var(--delay, 0s);
}

.hero__slide.is-live .burst__cookie {
  animation: burst-out 1s cubic-bezier(.18, 1.1, .3, 1) backwards;
  animation-delay: calc(var(--delay, 0s) + .1s);
}

.hero__slide.is-live .burst__crumb {
  animation: burst-crumb 1.1s cubic-bezier(.2, .85, .3, 1) backwards;
  animation-delay: calc(var(--delay, 0s) + .14s);
}

@keyframes burst-hole {
  from { scale: 0; }
}

/* Small and low, down inside the hole, then up and out of it. */
@keyframes burst-out {
  from { scale: .18; rotate: 0deg; translate: 0 22%; }
}

@keyframes burst-crumb {
  from { opacity: 0; translate: -50% -50%; rotate: 0deg; }
}

/* ------------------------------------------------ slide 3: the delivery -- */

/* The promise is the number, so the number is the headline and the rest hangs
   off it. Fixed rhythm between the parts instead of three stacked spans each
   bringing their own margin. */
.hero--clock .hero__type {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.hero--clock .hero__kicker {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 2.1rem);
  letter-spacing: -.01em;
  text-transform: lowercase;
  opacity: .62;
}

.hero--clock .hero__big {
  display: flex;
  align-items: baseline;
  gap: clamp(.5rem, 1.6vw, 1.4rem);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.045em;
  text-transform: lowercase;
}

.hero--clock .hero__num { font-size: clamp(6rem, 15vw, 15rem); }
.hero--clock .hero__unit { font-size: clamp(2.4rem, 6vw, 6rem); }

.hero--clock .hero__hours {
  margin-top: .9rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  letter-spacing: .02em;
  text-transform: lowercase;
}

.hero--clock .hero__cta { margin-top: 1.6rem; }

/* Two counter-running lines of type framing the promise. */
.hero__strip {
  position: absolute;
  left: -10%;
  width: 120%;
  z-index: 0;
  display: flex;
  gap: 2rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: lowercase;
  white-space: nowrap;
  opacity: .13;
  pointer-events: none;
}

.hero__strip--top { top: 7%; animation: hero-strip-l 26s linear infinite; }
.hero__strip--bot { bottom: 7%; animation: hero-strip-r 30s linear infinite; }

@keyframes hero-strip-l { to { transform: translateX(-33.333%); } }
@keyframes hero-strip-r { from { transform: translateX(-33.333%); } to { transform: none; } }

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

.hero__controls {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .4rem;
  border-radius: 100px;
  background: rgb(255 253 247 / .82);
  backdrop-filter: blur(6px);
}

.hero__rail {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero__dot {
  position: relative;
  height: .5rem;
  width: .5rem;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: rgb(var(--shade) / .28);
  cursor: pointer;
  overflow: hidden;
  transition: width .45s cubic-bezier(.16, 1, .3, 1), background-color .45s;
}

.hero__dot.is-active { width: 3.25rem; }

/* The fill is the autoplay clock made visible: it runs the width of the pill
   over exactly the time the slide is up. */
.hero__dot i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left center;
  scale: 0 1;
}

.hero__dot.is-active i { animation: hero-fill var(--hold, 6s) linear forwards; }


@keyframes hero-fill { to { scale: 1 1; } }

/* Arrows flank the dots as one control cluster rather than floating at the
   screen edges, where they would sit on top of the big type. */
.hero__arrow {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--shade) / .12);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.hero__arrow:hover { background: rgb(var(--shade) / .22); transform: scale(1.08); }

.hero__arrow svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (max-width: 900px) {
  .hero__slide { padding: calc(var(--bar) + 1rem) var(--edge) 6rem; }

  .hero__figure { width: 62vw; right: 50%; translate: 50% 0; opacity: .9; }

  .hero--baker .hero__type { align-self: start; }

  .hero__slab { display: none; }

  .hero__hole { width: 58vmin; }

  .hero__rail { bottom: 4.5rem; }
  .hero__pause { right: 50%; translate: 50% 0; bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__track { transition: none !important; }
  .hero__strip--top,
  .hero__strip--bot { animation: none; }
  .hero__slide.is-live .hero__hole,
  .hero__slide.is-live .hero__fly,
  .hero__slide.is-live .hero__crumb { animation-duration: 1ms; }
  .hero__dot.is-active i { animation: none; scale: 1 1; }
}

/* The sliding contact bar belongs to the flavour deck. On the hero it is one
   more thing crawling across the bottom of an already busy frame. */
/* !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"] .ticker { opacity: 0 !important; pointer-events: none; }

/* Slide 3 was a bare cream field with type on it. The promise is about food,
   so the food is in the frame: cookies drifting around the number, behind the
   type, on the same float language as the flavour deck. */
.clock__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.clock__cookie {
  position: absolute;
  width: var(--w, 16vmin);
  height: auto;
  translate: -50% -50%;
  rotate: var(--spin, 0deg);
  filter: drop-shadow(0 1.2rem 1.1rem rgb(var(--shade) / .18));
  animation: clock-drift var(--float, 5s) ease-in-out infinite alternate;
}

@keyframes clock-drift {
  from { translate: -50% -46%; }
  to   { translate: -50% -54%; }
}

/* Behind the number, the strips step back so they do not fight the cookies. */
.hero--clock .hero__strip { opacity: .09; }

@media (max-width: 900px) {
  /* Two of four on a phone: any more crowds the number. */
  .clock__cookie { width: 22vmin; }
  .clock__cookie:nth-child(2),
  .clock__cookie:nth-child(3) { display: none; }
  .clock__cookie:nth-child(1) { left: 18% !important; top: 20% !important; }
  .clock__cookie:nth-child(4) { left: 82% !important; top: 80% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .clock__cookie { animation: none; }
}

@media (max-width: 900px) {
  /* The dot is 8px of paint; the thumb needs ~40. Pad the button out and clip
     the paint back to the content box so the target grows and the dot does not. */
  .hero__dot {
    height: 40px;
    padding: 16px 0;
    overflow: visible;
    background-clip: content-box;
  }

  .hero__dot i { inset: 16px 0; }

  .hero__arrow { width: 44px; height: 44px; }
}

@media (max-width: 620px) {
  /* "30 минут" is one flex row, and the clamp minimums (6rem + 2.4rem) are
     wider than a 375px screen, so the unit was running off the right edge.
     Scale both off the viewport instead of a fixed floor. */
  .hero--clock .hero__num { font-size: clamp(3.6rem, 24vw, 7rem); }
  .hero--clock .hero__unit { font-size: clamp(1.5rem, 9.5vw, 3rem); }
  .hero--clock .hero__big { gap: .35rem; }
  .hero--clock .hero__hours { font-size: .82rem; margin-top: .7rem; }
  .hero--clock .hero__kicker { font-size: .95rem; }
}