/* What the site adds on top of the shared stylesheet: three sections of its own, its display
   lettering, and its showpiece movement. First the added sections laid out plainly, then the
   lettering; that much is all a visitor who has asked for less motion will see. Everything under "With the heat on" needs the "motion" class on <html>, and
   sizzle.js does the moving. */

/* ---------- The added sections, laid out plainly ---------- */

/* Two lines of lettering as wide as they like, running off both sides of the page. */
.shout {
  padding-block: clamp(18px, 4vw, 44px);
  overflow: hidden;
}
.shout__row {
  display: flex;
  width: max-content;
  font: 400 calc(clamp(3.4rem, 13vw, 10.5rem) * var(--hand-size, 1)) / 1.02 var(--hand);
  white-space: nowrap;
}
.shout__row > span {
  display: inline-flex;
  align-items: center;
  padding-right: 0.32em;
}
.shout__row .steak {
  width: 0.86em;
  margin-left: 0.3em;
}
.shout__row--hollow {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

/* Rare to well done, a step at a time. Without motion it is a heading and a list. */
.cook__pin {
  padding-block: clamp(44px, 8vw, 96px);
}
.cook__steps {
  display: grid;
  gap: 1rem;
  margin-top: clamp(16px, 2.4vw, 24px);
}
.cook__steps li {
  display: grid;
  gap: 0.15rem;
}
.cook__steps b {
  font: 400 clamp(1.5rem, 3.6vw, 2.2rem) / 1 var(--hand);
}
.cook__steak,
.cook__scale,
.cook__stamp {
  display: none;
}

/* Go on, ask: the questions people have, as a list that opens one answer at a time. He stands
   beside it and answers. */
.ask {
  display: grid;
  gap: clamp(20px, 4vw, 56px);
}
.ask__steak {
  display: block;
  width: clamp(84px, 11vw, 132px);
  margin-top: clamp(10px, 2vw, 22px);
}
@media (min-width: 860px) {
  .ask {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
  }
  .ask__who {
    position: sticky;
    top: 28px;
  }
}
@media (max-width: 859px) {
  .ask__who {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }
  .ask__steak {
    flex: none;
    margin-top: 0;
  }
}
.qa {
  border-top: 2px solid var(--ink);
  interpolate-size: allow-keywords;
}
.qa > li {
  border-bottom: 2px solid var(--ink);
}
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 2px 15px;
  font: 400 calc(clamp(1.2rem, 1.9vw, 1.5rem) * var(--hand-size, 1)) / 1.2 var(--hand);
  letter-spacing: var(--hand-track, 0.005em);
  text-transform: var(--hand-case, none);
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker {
  display: none;
}
/* A plus, which turns to a cross while the answer is open. */
.qa summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
  transition: rotate 0.25s var(--ease-out);
}
.qa details[open] summary::after {
  rotate: 45deg;
}
.qa summary:hover,
.qa details[open] summary {
  color: var(--red);
}
.qa details p {
  max-width: 58ch;
  padding: 0 2px 20px;
}
/* The answer opens by growing, where the browser can do that; elsewhere it simply appears. */
.qa details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.32s var(--ease-out), content-visibility 0.32s allow-discrete;
}
.qa details[open]::details-content {
  block-size: auto;
}

/* The name once more, as big as the page is wide, under the footer. Only its top half shows:
   the page ends halfway down the letters. */
.bigword {
  height: 0.45em;
  margin-top: clamp(4px, 1.5vw, 20px);
  font: 400 calc(clamp(4.6rem, 23.5vw, 18.5rem) * var(--hand-size, 1)) / 0.86 var(--hand);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* ---------- Lettering ----------
   The display lettering is Alfa Slab One in capitals: butcher's-shop sign lettering. The shared
   stylesheet was drawn up around a marker face, so these values say how the slab is spaced and
   scaled to take up about the same room, and the rules after them apply that wherever the
   display lettering is used. */
@font-face {
  font-family: "Alfa Slab One";
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/AlfaSlabOne-Regular.ttf") format("truetype");
}
[data-layout="sizzle"] {
  --hand: "Alfa Slab One", Rockwell, Georgia, serif;
  --hand-weight: 400;
  --hand-case: uppercase;
  --hand-track: 0.005em;
  --hand-leading: 1.04;
  --hand-size: 0.8;
  --hand-tilt: -1.2deg;
}
[data-layout="sizzle"] .hand,
[data-layout="sizzle"] .ticket time,
[data-layout="sizzle"] .tape__run li,
[data-layout="sizzle"] .shout__row,
[data-layout="sizzle"] .cook__steps b,
[data-layout="sizzle"] .bigword {
  font-weight: var(--hand-weight);
  letter-spacing: var(--hand-track);
  text-transform: var(--hand-case);
}
[data-layout="sizzle"] .hand {
  line-height: var(--hand-leading);
}
[data-layout="sizzle"] .display {
  font-size: calc(clamp(3rem, 11.5vw, 6rem) * var(--hand-size));
  rotate: var(--hand-tilt);
}
[data-layout="sizzle"] .heading {
  font-size: calc(clamp(1.9rem, 4.6vw, 3rem) * var(--hand-size));
}
[data-layout="sizzle"] .order__line {
  font-size: calc(clamp(1.45rem, 2.4vw, 1.9rem) * var(--hand-size));
}
[data-layout="sizzle"] .ticket time {
  font-size: calc(clamp(1.05rem, 2vw, 1.5rem) * var(--hand-size));
}
[data-layout="sizzle"] .tape__run li {
  font-size: calc(clamp(1rem, 1.5vw, 1.2rem) * var(--hand-size));
}

/* ---------- With the heat on ---------- */

/* The cold open: a dark pan, he drops onto it, and the page sears open from where he landed. */
@property --hole {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
.pan {
  display: none;
}
.motion .pan {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ink) repeating-linear-gradient(115deg, #0000 0 34px, rgb(255 248 243 / 0.05) 34px 44px);
  -webkit-mask: radial-gradient(circle at 50% 50%, #0000 var(--hole), #000 calc(var(--hole) + 1.5px));
  mask: radial-gradient(circle at 50% 50%, #0000 var(--hole), #000 calc(var(--hole) + 1.5px));
}
.motion.is-loaded .pan {
  animation: pan-open 0.8s cubic-bezier(0.7, 0, 0.3, 1) 1.05s forwards;
}
@keyframes pan-open {
  to {
    --hole: 78vmax;
    visibility: hidden;
  }
}
.motion .pan .steak {
  width: min(42vw, 200px);
  transform-origin: 50% 90%;
  animation: steak-drop 0.72s cubic-bezier(0.3, 0.6, 0.4, 1) 0.12s backwards;
}
.motion.is-loaded .pan .steak {
  animation: steak-drop 0.72s cubic-bezier(0.3, 0.6, 0.4, 1) 0.12s backwards, pan-leave 0.45s ease-in 1s forwards;
}
@keyframes pan-leave {
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}
/* The sear line shoots across the pan as he lands. */
.motion .pan::before {
  content: "";
  position: absolute;
  inset: calc(50% + min(21vw, 100px)) 0 auto;
  height: 4px;
  background: var(--red);
  transform-origin: 0 50%;
  animation: pan-sear 0.5s var(--ease-out) 0.5s backwards;
}
@keyframes pan-sear {
  from {
    transform: scaleX(0);
  }
}

/* The page's own opening waits for the pan, and the headline is slammed down, not written. */
[data-layout="sizzle"] .display {
  --sear-delay: 1.45s;
}
.motion [data-layout="sizzle"] .display.is-in .c {
  animation: slam-in 0.62s cubic-bezier(0.2, 1.2, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 55ms + var(--sear-delay, 0ms));
}
.motion [data-layout="sizzle"] .display .c:nth-child(even) {
  --tilt: -1;
}
@keyframes slam-in {
  0% {
    opacity: 0;
    color: var(--red);
    transform: translateY(-0.9em) rotate(calc(var(--tilt, 1) * 16deg)) scale(2.3);
  }
  55% {
    opacity: 1;
    color: var(--red);
    transform: translateY(0.05em) rotate(0deg) scale(0.93, 1.07);
  }
}
.motion.is-loaded [data-layout="sizzle"] .top > * {
  animation-delay: 1.3s;
}
.motion.is-loaded [data-layout="sizzle"] .top > :nth-child(2) {
  animation-delay: 1.37s;
}
.motion.is-loaded [data-layout="sizzle"] .top > :nth-child(3) {
  animation-delay: 1.44s;
}
.motion.is-loaded [data-layout="sizzle"] .display .steak {
  animation-delay: calc(var(--steak-delay, 0.55s) * 2.2 + 1.5s);
}
.motion.is-loaded [data-layout="sizzle"] .hero .lede {
  animation-delay: 2.1s;
}
.motion.is-loaded [data-layout="sizzle"] .hero .order {
  animation-delay: 2.25s;
}
.motion.is-loaded [data-layout="sizzle"] .rail li {
  animation-delay: calc(2.45s + var(--n, 0) * 85ms);
}
.motion.is-loaded [data-layout="sizzle"] .day .stage {
  animation-delay: 2.6s;
}

/* He can be picked up and thrown. The one in the headline stays put, invisible, while a copy
   pinned to the window does the flying. */
.motion [data-layout="sizzle"] .display__end {
  position: relative;
}
.motion [data-layout="sizzle"] .display .steak {
  cursor: grab;
  touch-action: none;
}
.flyer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  display: none;
  cursor: grabbing;
  touch-action: none;
  will-change: transform;
}
.flyer svg {
  transition: none;
}
.throw-hint {
  position: absolute;
  top: 34%;
  left: 100%;
  margin-left: 0.5em;
  font-size: clamp(0.95rem, 0.19em, 1.35rem);
  color: var(--ink-soft);
  white-space: nowrap;
  rotate: -7deg;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s linear;
}
.throw-hint.is-on {
  opacity: 1;
}
.throw-hint svg {
  width: 1.7em;
  height: 1.3em;
  margin-right: 0.25em;
  vertical-align: 0.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The lettering runs with the scroll: faster and more slanted the harder you scroll. */
.motion .shout__row {
  will-change: transform;
}

/* The pretend screen starts tipped back and stands up as it arrives. --tip is set from the scroll. */
.motion [data-layout="sizzle"] .day .stage {
  perspective: 1500px;
}
.motion [data-layout="sizzle"] .day .screen {
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--tip, 0) * 20deg));
}

/* Rare to well done, pinned: one giant word per step, the scale searing along underneath,
   and him getting hotter beside it. */
.motion .cook {
  height: 380vh;
}
.motion .cook__pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(16px, 4vw, 56px);
  height: 100vh;
  height: 100svh;
  padding-block: clamp(20px, 5vh, 52px);
}
.motion .cook .heading {
  grid-column: 1 / -1;
}
.motion .cook__steps {
  position: relative;
  display: block;
  height: clamp(12rem, 40vh, 22rem);
  margin: 0;
}
.motion .cook__steps li {
  position: absolute;
  inset: 0;
  align-content: center;
  gap: 0.7rem;
  opacity: 0;
}
.motion .cook__steps li.is-on {
  opacity: 1;
}
.motion .cook__steps b {
  font-size: calc(clamp(3.3rem, 11.5vw, 9.5rem) * var(--hand-size, 1));
  line-height: 0.92;
  transform-origin: 0 60%;
}
.motion .cook__steps li.is-on b {
  animation: word-slam 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.motion .cook__steps span {
  max-width: 27ch;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.4;
}
.motion .cook__steps li.is-on span {
  animation: come-up 0.5s var(--ease-out) 0.14s both;
}
@keyframes word-slam {
  0% {
    opacity: 0;
    color: var(--red);
    transform: scale(1.7) rotate(-4deg);
  }
  60% {
    opacity: 1;
    color: var(--red);
    transform: scale(0.96) rotate(0.6deg);
  }
}
.motion .cook__plate {
  position: relative;
  display: grid;
  place-items: center;
}
/* The heat under him rises with the steps. */
.motion .cook__plate::before {
  content: "";
  position: absolute;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(165 30 24 / calc(var(--heat, 0) * 0.26)), #0000 62%);
  pointer-events: none;
}
.motion .cook__steak {
  position: relative;
  display: block;
  width: min(32vw, 44vh, 330px);
}
.motion .cook[data-step="1"] .cook__steak svg,
.motion .cook[data-step="2"] .cook__steak svg,
.motion .cook[data-step="3"] .cook__steak svg {
  animation: shimmy 0.42s ease-in-out infinite;
}
@keyframes shimmy {
  25% {
    transform: rotate(-2.4deg);
  }
  75% {
    transform: rotate(2.4deg);
  }
}
.motion .cook__stamp {
  position: absolute;
  right: -4%;
  bottom: 2%;
  display: inline-grid;
  font-size: clamp(0.95rem, 1.5vw, 1.25rem);
  opacity: 0;
}
.motion .cook__stamp.is-on {
  opacity: 0.9;
}
.motion .cook__scale {
  display: grid;
  grid-column: 1 / -1;
  margin-top: 0;
}
.cook__scale li {
  font-size: clamp(0.8rem, 1.5vw, 1.15rem);
  gap: 8px;
}
.cook__scale li::before {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.cook__scale::before,
.cook__scale::after {
  top: 10px;
}
.cook__scale::after {
  height: 4px;
  transition-duration: 0.12s;
}
@media (max-width: 760px) {
  .motion .cook__pin {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .motion .cook__plate {
    grid-row: 2;
    margin-top: 1.6rem;
  }
  .motion .cook__steak {
    width: min(40vw, 24vh);
  }
  .motion .cook__steps {
    height: auto;
    min-height: 11rem;
    align-self: stretch;
  }
  .motion .cook__steps b {
    font-size: calc(clamp(3rem, 17vw, 5rem) * var(--hand-size, 1));
  }
}

/* The questions rule themselves in like the list of facts. */
.motion .qa {
  border-top-color: transparent;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 0% 2px no-repeat border-box;
  transition: background-size 0.8s var(--ease-out);
}
.motion .qa > li {
  border-bottom-color: transparent;
  background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0% 2px no-repeat border-box;
  transition: background-size 0.8s var(--ease-out) var(--d, 0ms);
}
.motion .qa.is-in,
.motion .qa > li.is-in {
  background-size: 100% 2px;
}
.motion .qa > li > * {
  transition: opacity 0.5s linear var(--d, 0ms), translate 0.6s var(--ease-out) var(--d, 0ms);
}
.motion .qa > li:not(.is-in) > * {
  opacity: 0;
  translate: 0 12px;
}

/* Stamps come down hard here, and what they land on jumps. */
.motion [data-layout="sizzle"] .stamp.is-landing {
  animation: stamp-slam 0.36s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes stamp-slam {
  0% {
    opacity: 0;
    scale: 3.2;
    rotate: 9deg;
  }
  60% {
    opacity: 0.95;
    scale: 0.93;
  }
}
.is-thud {
  animation: thud 0.28s linear;
}
@keyframes thud {
  20% {
    transform: translate(0, 4px);
  }
  45% {
    transform: translate(-2px, -2px);
  }
  70% {
    transform: translate(2px, 1px);
  }
}

/* Buttons lean toward a pointer that comes close. */
.motion [data-layout="sizzle"] .btn {
  transition: transform 0.25s var(--ease-out), background-color 0.15s var(--ease-out),
    translate 0.15s var(--ease-out), background-position 0.65s var(--ease-out);
}

/* The big name. Its letters rise into place as it arrives, then sit in the paper's own shade
   until the pointer finds them: a circle of light follows it and shows grill marks seared into
   the letters. Nothing else about them changes. --mx, --my and --r come from sizzle.js. */
.motion .bigword {
  position: relative;
  color: var(--paper-shade);
}
.motion .bigword span {
  display: inline-block;
  transform-origin: 50% 85%;
}
.motion .bigword:not(.is-in) span {
  opacity: 0;
}
.motion .bigword.is-in span {
  animation: big-in 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes big-in {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
}
.motion .bigword__sear {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 25%, #0000 100%);
  mask: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 25%, #0000 100%);
}
.motion .bigword__sear span {
  background: repeating-linear-gradient(-45deg, var(--red) 0 0.014em, #0000 0.014em 0.062em);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Tickets thrown in the air when someone joins the list. */
.bit {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: 16px;
  height: 10px;
  border-radius: 0 0 2px 2px;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(43 18 10 / 0.25);
  pointer-events: none;
}