/* play.css — the playground: intro, page-turn transitions, cutlery
   cursor, chef mode. This is Joey's fun hobby site; whimsy is the point.
   Two standing rules: nothing here is generic-template motion, and all of it
   dies under prefers-reduced-motion. No sound, anywhere, ever. */

/* ============ the opening: Drawn & Devoured ============ */
#intro {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: grid; place-items: center;
  cursor: pointer;
}
#intro.done { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
#intro svg { width: min(92vw, 900px); height: auto; overflow: visible; }

/* Pacing (author note, 2026-08-02: "too fast, I don't get to process it").
   The sequence is a slow read, not a splash screen: draw, then the title
   arrives and HOLDS still for ~1.6s before anything eats it. Every number
   below is one timeline; if you move one, walk the rest. Anyone impatient
   clicks. */

/* the line and its swirls draw themselves */
#intro .draw {
  fill: none; stroke: var(--text-strong); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw 1.7s cubic-bezier(.55,.1,.3,1) forwards;
}
#intro .swirl-l, #intro .swirl-r { animation-delay: 1.25s; animation-duration: 1.35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

#intro .title {
  font-family: var(--font-display); font-weight: 700;
  fill: var(--text-strong); text-anchor: middle;
  letter-spacing: 0.06em;
  opacity: 0; animation: titlein 0.95s cubic-bezier(.2,.7,.2,1) forwards;
}
#intro .t1 { animation-delay: 2.00s; }
#intro .t2 { animation-delay: 2.45s; }
@keyframes titlein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

#intro .vol {
  font-family: var(--font-body); font-style: italic; fill: var(--text-soft);
  text-anchor: middle; opacity: 0;
  animation: titlein 0.8s ease 3.0s forwards;
}

/* the bites: scalloped chomps eat the title away (black in the mask = gone).
   Held until 5s so the whole title has been sitting there, readable. */
#intro .bite circle {
  transform: scale(0); transform-box: fill-box; transform-origin: center;
  animation: chomp 0.22s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
#intro .bite-1 circle { animation-delay: 5.00s; }
#intro .bite-2 circle { animation-delay: 5.34s; }
#intro .bite-3 circle { animation-delay: 5.68s; }
#intro .bite-4 circle { animation-delay: 6.00s; }
@keyframes chomp { to { transform: scale(1); } }

/* crumbs scatter from each bite (delays live in intro.js) */
#intro .crumb {
  fill: var(--text-strong); opacity: 0;
  animation: crumbfall 1.05s cubic-bezier(.4,.1,.7,1) forwards;
}
@keyframes crumbfall {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
  12%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--cx, 0px), 118px) rotate(var(--cr, 180deg)); }
}

#intro .skip {
  position: fixed; bottom: var(--space-3); left: 0; right: 0;
  text-align: center; opacity: 0;
  animation: titlein 0.6s ease 3.2s forwards;
}

/* ============ the page turn ============
   Replaced the ink-blot bloom (author call, 2026-08-02: "the animation
   transitioning from home page into a recipe is a bit cringe"). Two things
   were wrong with the blot: it painted the whole screen near-black, which is
   a heavy, dated effect on a book about paper, and it held you there for
   880ms before the page even started loading, so a click felt broken.

   This is the metaphor the site already lives in: it paginates like a book,
   with folios and "Vol. 1 · No. 19" at the foot. So a leaf of paper sweeps
   across, and the motion CONTINUES in the same direction on the next page
   and carries on off to the left. One gesture spanning the navigation, not
   two effects bolted together. The shadow along the leading edge is what
   makes it read as paper rather than a sliding panel; without it this is a
   generic app wipe. Keep it. */
#leaf, html.leaf-arriving::before {
  position: fixed; inset: -8%; z-index: 80; pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface) 88%, var(--leather)) 0,
      var(--surface) 0.6%,
      var(--bg) 4%,
      var(--bg) 100%);
  box-shadow: -26px 0 46px -12px rgba(36, 23, 8, 0.3),
              -4px 0 10px rgba(36, 23, 8, 0.14);
  will-change: transform;
}

/* leaving: the leaf comes over from the right. transitions.js navigates just
   before it lands, so the wait is spent watching paper move, not a blank hold. */
#leaf {
  transform: translate3d(100%, 0, 0) rotate(1.6deg);
  animation: leaf-in 0.42s cubic-bezier(.32, .06, .24, 1) forwards;
}
@keyframes leaf-in { to { transform: translate3d(0, 0, 0) rotate(0deg); } }

/* arriving: painted by an inline head script so the new page never flashes
   first, then the same leaf keeps going and clears to the left. */
html.leaf-arriving::before {
  content: "";
  animation: leaf-out 0.56s cubic-bezier(.22, .7, .24, 1) forwards;
}
@keyframes leaf-out {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-100%, 0, 0) rotate(-1.6deg); }
}

/* ============ the cutlery cursor (contents page, fine pointers only) ============ */
@media (hover: hover) and (pointer: fine) {
  body.forked .toc-row { cursor: none; }
  /* The fork hangs above the pointer with its tines AT it, so a click drives
     the tines into the row. It pivots on those tips, not on its middle, which
     is what makes the lean read as a hand carrying it. */
  #fork {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 20px; height: 45px; pointer-events: none;
    transform-origin: 50% 95%;
    opacity: 0; transition: opacity 0.18s ease;
    will-change: transform;
  }
  #fork.on { opacity: 1; }
  #fork.stab { animation: stab 0.22s cubic-bezier(.3,1.5,.5,1); }
  @keyframes stab {
    50% { translate: 0 7px; }
  }
}

/* the recipe components still position for the chef-mode overlay */
.component { position: relative; }

/* ============ chef mode ============ */
#chef {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg);
  display: none; grid-template-rows: auto 1fr auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
}
#chef.on { display: grid; }
body.chefing { overflow: hidden; }

.chef-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); border-bottom: 1px solid var(--line); padding-bottom: 0.5rem; }
.chef-top h2 { font-size: 1rem; }
.chef-where { color: var(--gold); }
.chef-x { background: none; border: none; font-family: var(--font-body); font-size: 1.5rem; line-height: 1; color: var(--text-soft); cursor: pointer; padding: 0 0.3rem; }
.chef-x:hover { color: var(--hot); }

.chef-stage {
  display: grid; grid-template-columns: 1fr minmax(240px, 22rem);
  gap: var(--space-4); align-content: start; overflow-y: auto;
  padding: var(--space-3) 0;
  max-width: 1180px; width: 100%; margin: 0 auto;
}
@media (max-width: 900px) { .chef-stage { grid-template-columns: 1fr; gap: var(--space-2); } }

.chef-n { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; }
.chef-title { font-size: clamp(1.4rem, 3.2vw, 2.1rem); margin: 0.2rem 0 var(--space-2); }
.chef-text { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.55; color: var(--text-strong); max-width: 34ch; }
.chef-cue { margin-top: var(--space-2); font-style: italic; color: var(--leather); font-size: 1.1rem; max-width: 40ch; }
.chef-cue .label { font-style: normal; }
.chef-danger { margin-top: var(--space-2); max-width: 46ch; }

.chef-side { border-left: 1px solid var(--line); padding-left: var(--space-3); }
@media (max-width: 900px) { .chef-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-2); } }
.chef-side h3 { font-size: 0.9rem; color: var(--gold); margin-bottom: var(--space-1); }
.chef-ings { list-style: none; font-size: 1rem; }
.chef-ings li { padding: 0.2rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--line) 60%, transparent); }
.chef-ings .a { color: var(--gold); font-variant-numeric: tabular-nums; }
/* the rail honors the reader's filters; a changed line says so rather than
   swapping silently, because at the stove a surprise is worse than a note */
.chef-ings .ing-swapped { border-left: 2px solid var(--link); padding-left: 0.5rem; }
.chef-ings .ing-upped { border-left: 2px solid var(--gold); padding-left: 0.5rem; }

/* the timer — a ring that empties as the wait runs down */
.chef-timer { margin-top: var(--space-3); text-align: center; }
.chef-ring { width: 132px; height: 132px; margin: 0 auto; position: relative; }
.chef-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.chef-ring circle { fill: none; stroke-width: 5; }
.chef-ring .track { stroke: var(--line); opacity: 0.5; }
.chef-ring .run { stroke: var(--link); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.chef-ring .read {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.chef-timer.ringing .chef-ring { animation: ringing 0.9s ease infinite; }
.chef-timer.ringing .run { stroke: var(--hot); }
@keyframes ringing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.chef-bottom { border-top: 1px solid var(--line); padding-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.chef-dots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.chef-dots i { width: 10px; height: 4px; background: var(--line); border-radius: 2px; }
.chef-dots i.done { background: var(--gold); }
.chef-dots i.here { background: var(--link); width: 22px; }
.chef-nav { display: flex; gap: var(--space-1); }
.chef-hint { color: var(--text-soft); font-size: 0.85rem; }
@media (max-width: 560px) { .chef-hint { display: none; } }

/* ============ the kill switch ============ */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  #leaf, html.leaf-arriving::before { display: none !important; }
  #fork { display: none !important; }
  .chef-ring .run { transition: none; }
  .chef-timer.ringing .chef-ring { animation: none; }
}