/* The Recipe — block 4 «Work», rooms (approved 2026-09-15). Timings: sheet .95s; card 1s; parts ride in .09s apart after .55s. */
@property --ink{syntax:"<color>";inherits:true;initial-value:#12302A}
:root{transition:--ink .55s ease}

.work{background:transparent;padding-block:18vh 0}
.work-ground{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.work-ground .sheet{position:absolute;inset:0;clip-path:inset(0 0 0 100%);animation:sheet-in .95s cubic-bezier(.7,0,.15,1) forwards;will-change:clip-path}
.work-ground .sheet.from-left{clip-path:inset(0 100% 0 0)}
.work-ground .sheet.paper{background:var(--paper)}
.work-ground .sheet.now{animation:none;clip-path:none}
@keyframes sheet-in{to{clip-path:inset(0 0 0 0)}}
.work{overflow-x:clip}
@media (min-width:821px){html{scroll-snap-type:y proximity}.room{scroll-snap-align:start}}

.rooms{--edge:max(var(--gutter),calc((100vw - 1200px) / 2))}
.room{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(28px,5vw,88px);
  padding-block:max(72px,8vh) max(88px,10vh);padding-inline:var(--edge);color:var(--room-ink)}
.room-text{min-width:0;display:grid;gap:clamp(12px,2.3vh,24px);align-content:center;justify-items:start}
.room-id{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px)}
.room-logo{flex:none;display:grid;place-items:center;width:clamp(64px,min(7.4vw,11vh),112px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 14px 34px -14px rgba(0,0,0,.45)}
.room-logo img{width:100%;height:100%;object-fit:contain;display:block}
.room-where{font:700 13px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase}
.room-name{margin:0;display:grid;width:100%;font-size:clamp(40px,min(7.6vw,11.5vh),128px);text-wrap:nowrap}
.room-name .ln{display:block;overflow:hidden;padding-block:.06em .12em;margin-block:-.06em -.12em;padding-inline:.02em .06em;margin-inline:-.02em -.06em}
.room-name .lt{display:inline-block;white-space:nowrap}
.room-what{margin:0;max-width:42ch;font:400 clamp(16px,min(1.3vw,2.1vh),19px)/1.45 var(--text);text-wrap:pretty}
.room-result{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:2px;max-width:100%}
.room-result b{font:800 clamp(26px,min(2.7vw,4.2vh),42px)/1.05 var(--display);letter-spacing:-.03em}
.room-result span{font:600 clamp(15px,min(1.3vw,2vh),19px)/1.2 var(--text)}
.room-card{justify-self:end}
.room-card .case-tile{width:min(405px,calc((100svh - 150px) * 9 / 16));min-width:260px}
.room-card .case-tile:hover{transform:translateY(-4px)}

/* THE RECIPE button: «See [THE Recipe] →» — our mark inside their room */
.rbtn{--bh:clamp(60px,min(6.6vw,10vh),100px);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:calc(var(--bh) * .17);height:var(--bh);margin-top:calc(var(--bh) * .08);
  padding:0 calc(var(--bh) * .11) 0 calc(var(--bh) * .32);border:0;border-radius:999px;background:#EEF0EA;color:#12302A;cursor:pointer;
  font:800 calc(var(--bh) * .5)/1 var(--display);letter-spacing:-.02em;box-shadow:0 2px 0 rgba(0,0,0,.08),0 22px 44px -18px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.rbtn:hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(0,0,0,.08),0 30px 56px -18px rgba(0,0,0,.6)}
.rbtn:active{transform:translateY(0) scale(.985)}
.rbtn:focus-visible{outline:3px solid var(--room-ink);outline-offset:4px}
.rb-fill{position:absolute;inset:0;z-index:-1;background:var(--acc);clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.15,1)}
.rbtn:hover .rb-fill,.rbtn:focus-visible .rb-fill{clip-path:inset(0 0 0 0)}
.rb-see{transform:translateY(.04em);transition:color .25s .12s}
.rb-markbox{display:block;height:calc(var(--bh) * .46)}
.rb-mark{display:block;height:100%;width:auto;overflow:visible}
.rb-mark path{fill:#12302A;transition:fill .25s .12s}
.rbtn:hover .rb-see,.rbtn:focus-visible .rb-see{color:var(--on-acc)}
.rbtn:hover .rb-mark path,.rbtn:focus-visible .rb-mark path{fill:var(--on-acc)}
.rb-go{transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .25s .12s,color .25s .12s}
.rbtn:hover .rb-go,.rbtn:focus-visible .rb-go{background:var(--on-acc);color:var(--acc)}
.rb-go{display:grid;place-items:center;width:calc(var(--bh) * .78);aspect-ratio:1;border-radius:50%;background:#12302A;color:#EEF0EA;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.rb-go svg{width:44%;height:44%}
.rbtn:hover .rb-go{transform:translateX(3px)}
.room.on .rb-go svg{animation:rb-nudge 1.8s ease-in-out 2.2s infinite}
@keyframes rb-nudge{0%,55%,100%{transform:none}28%{transform:translateX(18%)}}

/* arrival — the card brings the world */
.room:not(.on) .r-part,.room:not(.on) .room-card{opacity:0}
.room.on .room-card{animation:room-fly 1s cubic-bezier(.7,0,.15,1) both}
@keyframes room-fly{0%{opacity:1;transform:translateX(var(--fly)) rotate(calc(var(--dir) * 9deg))}72%{transform:translateX(calc(var(--dir) * -14px)) rotate(calc(var(--dir) * -1.2deg))}100%{opacity:1;transform:none}}
.room.on .r-part{animation:room-ride .8s cubic-bezier(.2,.9,.2,1) calc(.55s + var(--o) * .09s) both}
@keyframes room-ride{from{opacity:0;transform:translateX(calc(var(--dir) * 32vw)) skewX(calc(var(--dir) * -7deg))}to{opacity:1;transform:none}}
.room.on .room-logo{animation:room-roll .85s cubic-bezier(.2,.9,.2,1) .5s both}
@keyframes room-roll{from{transform:translateX(calc(var(--dir) * 12vw)) rotate(calc(var(--dir) * 300deg))}to{transform:none}}
/* the name rides inside its line masks, so it slides in without spilling over the line below */
.room.on .lt{animation-name:room-ride-line}
@keyframes room-ride-line{from{opacity:0;transform:translateX(calc(var(--dir) * 40%))}to{opacity:1;transform:none}}

@media (max-width:820px){
  .room{grid-template-columns:1fr;row-gap:clamp(28px,6vw,44px);align-content:center;padding-block:96px 112px}
  .room-card{justify-self:center}
  .room-card .case-tile{width:min(78vw,340px);min-width:0}
  .room-name{font-size:clamp(34px,11vw,56px)}
}
@media (prefers-reduced-motion:reduce){
  :root{transition:none}
  .room .r-part,.room .room-card,.room .room-logo,.room .lt{animation:none!important;opacity:1!important;transform:none!important}
  .work-ground .sheet{animation:none;clip-path:none}
  .rb-go svg{animation:none!important}
}