/* Batch 7: the last Process and Work items (tracker PRC-05, PRC-06, PRC-07, WRK-02, WRK-03, WRK-04).
   Loaded last on process.html and work.html. */

/* ---------- PRC-05: the three stages arrive together and at full strength ---------- */
body.process-page .plate figure { transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
body.process-page .plate figure:nth-child(2) { transition-delay: .12s; }
body.process-page .plate figure:nth-child(3) { transition-delay: .24s; }
body.process-page .open .lc { opacity: 1; background: #000c; }

/* ---------- PRC-06: no empty stretch after the raking-light comparison ---------- */
body.process-page .light .fig { padding-bottom: clamp(56px, 9svh, 110px); }
body.process-page .close .paper { padding-top: clamp(64px, 11svh, 130px); }

/* ---------- PRC-07: the long passages at the size the page was designed for ---------- */
html[data-theme] body.process-page main .intro p { font-size: clamp(21px, 1.7vw, 27px) !important; line-height: 1.55 !important; color: #f2f2f2; }
html[data-theme] body.process-page main .story .col p { font-size: clamp(20px, 1.5vw, 24px) !important; line-height: 1.65 !important; }
html[data-theme] body.process-page main .close .body { font-size: clamp(20px, 1.5vw, 24px) !important; line-height: 1.65 !important; }
html[data-theme="light"] body.process-page main .close .body { color: #000; }
html[data-theme="dark"] body.process-page main .close .body { color: #fff; }
html[data-theme] body.process-page main .plate .txt { font-size: clamp(17px, 1.15vw, 19px) !important; line-height: 1.65 !important; color: #d0d0d0; }

/* ---------- WRK-03: the Work page opens with its title ---------- */
.wk-open { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; padding: clamp(48px, 7vw, 110px) clamp(16px, 4vw, 64px) clamp(24px, 3.5vw, 48px); }
.wk-open h1 { margin: 0; }
.wk-open p { margin: 0; font: 12px/1.5 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
html[data-theme] body main .wk-open p { font-size: 12px !important; line-height: 1.5 !important; font-family: Arial, Helvetica, sans-serif !important; }
html[data-theme="light"] body.work-page { background: #fff; color: #000; }
html[data-theme="dark"] body.work-page { background: #000; color: #fff; }
html[data-theme="light"] body.work-page main { background: #fff; color: #000; }

/* ---------- WRK-04: every tile says it opens ---------- */
.doors > .door .go { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font: 14px/1.2 Arial, Helvetica, sans-serif; color: #fff; align-self: flex-start; }
.doors > .door .go i { font-style: normal; display: inline-block; transition: transform .5s cubic-bezier(.19,1,.22,1); }
.doors > .door:hover .go i, .doors > .door:focus-visible .go i { transform: translateX(6px); }

/* ---------- WRK-02: Urban Decay's title sits on its own shade, clear of the lettering; no pink on Scribbles ---------- */
body:not(.home-01) .doors > .door.d2::after { height: 75% !important; background: radial-gradient(95% 80% at 0% 100%, rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.45) 68%, rgba(0,0,0,0) 88%) !important; }
.doors > .door.d4 h2 span { background: none !important; padding: 0 !important; color: inherit !important; }