/* Section 01 hero (#top), owner S1 — design v5 sections/01-hero.html (sizes, colours, timings as its inline styles).
   Text column on the left; on the right the decorative mock-up: a 560 x 600 stage (blob, sector label, floating
   emojis, phone with the restaurant's menu, "new order" chip, mascot) scaled to the width of .hero-vis, then the
   carousel dots. The current slide carries .is-on (the first one in the HTML, then hero.js). Blob colour and shape
   come from custom properties set on .hero__show (--hero-c, --hero-r, --hero-rot, --hero-r2, --hero-rot2). */

.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 80px) var(--mc-gutter) clamp(40px, 6vw, 96px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  overflow-x: clip; /* the rotated blobs' corners never widen the page */
}
.hero__text { flex: 1 1 560px; min-width: 0; max-width: 680px; }
.hero__show {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------------------- text column */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  min-height: 36px;
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  background: var(--mc-paper);
  box-shadow: inset 0 0 0 1px rgba(46, 20, 8, .1);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: var(--mc-ink-2);
  animation: mcFade .3s ease-out both;
}

.hero-title {
  margin: 0;
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(46px, 6.7vw, 94px);
  line-height: .98;
  letter-spacing: -0.025em;
  text-wrap: balance;
  isolation: isolate; /* keeps the underline (z-index -1) just behind the word */
}
.hero-title__word { display: inline-block; animation: mcUp .36s var(--mc-ease-out) both; }
.hero-title__word:nth-child(2) { animation-delay: .04s; }
.hero-title__word:nth-child(3) { animation-delay: .08s; }
.hero-title__word:nth-child(4) { animation-delay: .12s; }
.hero-title__word:nth-child(5) { animation-delay: .16s; }
.hero-title__word:nth-child(6) { animation-delay: .2s; }
.hero-title__word:nth-child(7) { animation-delay: .24s; }
.hero-title__word:nth-child(8) { animation-delay: .28s; }
.hero-title__word:nth-child(n+9) { animation-delay: .32s; }
.hero-title__word--mark { position: relative; }
.hero-title__line {
  position: absolute;
  left: 0;
  right: .3em;
  bottom: .02em;
  height: .13em;
  border-radius: 999px;
  background: var(--mc-caramel);
  z-index: -1;
  transform-origin: left;
  animation: mcLine .36s var(--mc-ease-out) .48s both;
}

.hero-lead {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  max-width: 540px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--mc-text);
  text-wrap: pretty;
  animation: mcFade .3s ease-out .26s both;
}

.hero-actions {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  animation: mcFade .3s ease-out .32s both;
}

.hero-ticks {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  animation: mcFade .3s ease-out .38s both;
}
.hero-ticks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--mc-ink-2);
}
.hero-tick {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mc-honey);
  color: var(--mc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-tick svg { display: block; }

/* ---------------------------------------------------------------- mock-up: 560 x 600 stage, scaled */
/* Desktop: 560 px, overflowing its column a little as in the design, but never by more than the side padding.
   Mobile (< 760 px): the design's max(290, min(width - 36, 440)), never wider than the column. */
.hero-vis {
  position: relative;
  flex: none;
  width: 560px;
  width: min(560px, 100% + 2 * var(--mc-gutter) - 16px);
  aspect-ratio: 560 / 600;
  container-type: inline-size;
}
.hero-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 600px;
  transform-origin: 0 0;
  transform: scale(1);
  transform: scale(tan(atan2(100cqw, 560px))); /* = width / 560 */
}
@media (max-width: 759.98px) {
  .hero-vis { width: min(100%, clamp(290px, 100vw - 36px, 440px)); }
}
/* Browsers without container units / atan2(): stepped scales. */
@supports not (transform: scale(tan(atan2(100cqw, 560px)))) {
  @media (max-width: 759.98px) { .hero-stage { transform: scale(.78); } }
  @media (max-width: 470px) { .hero-stage { transform: scale(.66); } }
  @media (max-width: 400px) { .hero-stage { transform: scale(.62); } }
  @media (max-width: 370px) { .hero-stage { transform: scale(.56); } }
  @media (max-width: 340px) { .hero-stage { transform: scale(.5); } }
}

.hero-blob { position: absolute; width: 450px; height: 450px; }
.hero-blob--back { left: 70px; top: 36px; animation: mcBlobIn .9s var(--mc-ease-out) both; }
.hero-blob--front { left: 24px; top: 70px; animation: mcBlobIn .7s var(--mc-ease-out) both; }
.hero-blob__shape { width: 100%; height: 100%; background-color: var(--hero-c, #D4592E); }
.hero-blob--back .hero-blob__shape {
  opacity: .16;
  border-radius: var(--hero-r2);
  transform: rotate(var(--hero-rot2, 0deg));
  transition: background-color .9s var(--mc-ease-inout), border-radius 1.6s var(--mc-ease-inout),
    transform 1.6s var(--mc-ease-inout);
}
.hero-blob--front .hero-blob__shape {
  border-radius: var(--hero-r);
  transform: rotate(var(--hero-rot, 0deg));
  transition: background-color .9s var(--mc-ease-inout), border-radius 1.4s var(--mc-ease-inout),
    transform 1.4s var(--mc-ease-inout);
}

/* "Your site for / Pizzeria" on the blob. Further in and a little smaller than the design (44px / 132px / 66px),
   where the light labels (Pizzeria, Burger) ran off the blob onto the cream page. A label too long for the space
   left of the phone wraps between its words ("Ice / cream") instead of going under the phone. */
.hero-sector {
  position: absolute;
  left: 84px;
  top: 150px;
  color: var(--hero-ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .7s var(--mc-ease-out);
}
.hero-sector.is-on { opacity: 1; transform: translateY(0); }
.hero-sector__kicker { font-size: 13px; font-weight: 800; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.hero-sector__name {
  max-width: 204px; /* up to 8px before the phone (left 296px) */
  margin-top: 6px;
  font-family: var(--mc-serif);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Floating ingredients (design FLPOS) */
.hero-float {
  --r: 0deg;
  position: absolute;
  line-height: 1;
  opacity: 0;
  transform: scale(.4) rotate(calc(var(--r) - 30deg));
  transition: opacity .4s ease, transform .8s cubic-bezier(.34, 1.45, .64, 1);
  filter: drop-shadow(0 14px 12px rgba(46, 20, 8, .22));
}
.hero-float:nth-child(1) { --r: -14deg; left: 30px; top: 50px; font-size: 50px; }
.hero-float:nth-child(2) { --r: 10deg; left: 214px; top: 26px; font-size: 60px; }
.hero-float:nth-child(3) { --r: 16deg; left: 492px; top: 40px; font-size: 48px; }
.hero-floats.is-on .hero-float { opacity: 1; transform: scale(1) rotate(var(--r)); }

/* Phone with the restaurant's ordering site */
.hero-phone {
  position: absolute;
  left: 296px;
  top: 104px;
  width: 244px;
  height: 492px;
  border-radius: 46px;
  background: var(--mc-ink);
  padding: 9px;
  box-shadow: 0 50px 70px -34px rgba(46, 20, 8, .6), inset 0 0 0 2px var(--mc-brown);
  animation: mcUp .6s var(--mc-ease-out) .12s both;
}
.hero-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--mc-paper);
  color: #2A1608;
}
.hero-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 3;
  width: 76px;
  height: 22px;
  border-radius: 999px;
  background: var(--mc-ink);
  transform: translateX(-50%);
}
.hero-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 42px 12px 12px;
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-app.is-on { opacity: 1; }
.hero-app__head { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.hero-app__avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--app-c);
  color: var(--app-on-c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-serif);
  font-size: 15px;
}
.hero-app__who { min-width: 0; }
.hero-app__name { display: block; font-family: var(--mc-serif); font-size: 15px; line-height: 1.1; white-space: nowrap; }
.hero-app__domain { display: block; font-size: 11px; font-weight: 700; color: #6B4A35; }
.hero-app__banner {
  position: relative;
  margin-top: 12px;
  height: 126px;
  border-radius: 20px;
  background: var(--app-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 62px;
  line-height: 1;
}
.hero-app__pickup {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #2A1608;
  white-space: nowrap;
}
.hero-app__items { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.hero-app__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 10px -8px rgba(46, 20, 8, .4);
  font-size: 13px;
  font-weight: 700;
}
.hero-app__emoji { font-size: 17px; line-height: 1; }
.hero-app__dish { flex: 1; min-width: 0; }
.hero-app__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-app__add {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--app-c);
  color: var(--app-on-c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.hero-app__order {
  margin-top: auto;
  height: 44px;
  border-radius: 999px;
  background: var(--app-c);
  color: var(--app-on-c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

/* "New order" notification */
.hero-chip {
  position: absolute;
  left: 150px;
  top: 322px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 34px -18px rgba(46, 20, 8, .45), 0 0 0 1px rgba(46, 20, 8, .05);
  opacity: 0;
  transform: translateY(12px) scale(.92);
  transition: opacity .4s ease, transform .6s var(--mc-ease-spring) .15s;
}
.hero-chip.is-on { opacity: 1; transform: translateY(0) scale(1); }
.hero-chip__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--app-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.hero-chip__text b { display: block; font-size: 13px; color: #2A1608; white-space: nowrap; }
.hero-chip__text span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6B4A35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Mascot with its "Hi chef!" bubble */
.hero-mascot {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 168px;
  animation: mcSpring .5s var(--mc-ease-out) .35s both;
}
.hero-mascot__bubble {
  position: absolute;
  left: 10px;
  bottom: calc(100% - 16px);
  color: var(--mc-cream);
  box-shadow: 0 14px 24px -12px rgba(46, 20, 8, .5);
  animation: mcPop .3s var(--mc-ease-out) .8s both;
}
.hero-mascot .mc-mascot { filter: drop-shadow(0 18px 18px rgba(46, 20, 8, .28)); }

/* ---------------------------------------------------------------- carousel dots */
.hero-dots { display: flex; gap: 2px; }
.hero-dot {
  width: 34px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-dot__bar {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(46, 20, 8, .22);
  transition: width .35s var(--mc-ease-out), background-color .3s ease;
}
.hero-dot:hover .hero-dot__bar { background: rgba(46, 20, 8, .4); }
.hero-dot.is-on .hero-dot__bar { width: 26px; background: var(--mc-ink); }