/* Page, theme, menu and dive transitions in the 2026 style (swarm stream: transitions, 20 Oct 2026). Loaded last on every page.
   One field of small 1-bit cells for every hand-off (js/block-wipe.js); everything happens inside the frame's window,
   under the frame and its tabs (z 44 in the body; the frame is 45, the header 50). */

/* The page wipe's arrival sheet (js/portfolio-prepaint.js paints it before the first paint, ink with a white name).
   It takes the page's ground (paper by day, ink by night) inside a band of the frame's colour, so the first frames
   already look like the window in its frame; js/block-wipe.js moves it under the frame and opens it in cells. */
.block-wipe-arrival{z-index:44!important;background:var(--frame-ink,#000000)!important}
.block-wipe-arrival::before{content:'';position:absolute;inset:var(--frame,12px);border-radius:var(--frame-r,20px);background:#ffffff}
html[data-theme=dark] .block-wipe-arrival::before{background:#000000}
.block-wipe-arrival.is-open{background:transparent!important}
.block-wipe-arrival.is-open::before{display:none}
.block-wipe-arrival .block-wipe__name{color:#000000!important;font-variation-settings:'wght' 400,'wdth' 98;transition:none}
html[data-theme=dark] .block-wipe-arrival .block-wipe__name{color:#ffffff!important}

/* The project hand-off (js/project-portal.js): the page no longer fades round the lifted cover; the cells close it
   from the cover outwards, and on the case page they open from where the cover lands (js/block-wipe.js) */
html.bw-leaving body>:is(main,footer),html.bw-held body>:is(main,footer){opacity:1!important;transition:none!important}

/* The theme switch through a View Transition: no cross-fade; the new theme shows through the field's cells */
html.bw-vt::view-transition-group(root),html.bw-vt::view-transition-old(root),html.bw-vt::view-transition-new(root){animation:none!important}
html.bw-vt::view-transition-new(root){mix-blend-mode:normal}

/* The back link in the brand's tab (20 Oct 2026, the owner: nothing stands above the case title; js/site-frame.js).
   «All work» on the cases and «About Dmytro» on the CV move into the frame's top left tab, right after the brand: a copy
   in the frame's own type (14 px in the frame's text colour, the tab's height and padding, like the nav's links); the
   original above the title hides. On phones the tab has no room: the copy hides and the original stays. When the tab
   would run into the nav's tab, the frame sets .frame-back-aside and the original comes back the same way */
html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v){position:fixed!important;z-index:51;
 top:calc(var(--frame) + var(--frame-pad))!important;left:calc(var(--frame) + var(--frame-pad) + var(--frame-ctl) + var(--frame-gap))!important;
 right:auto!important;bottom:auto!important;width:auto!important;height:var(--frame-ctl)!important;min-height:0!important;margin:0!important;padding:0 14px!important;
 display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;font-size:14px!important;line-height:1!important;
 color:var(--frame-on)!important;opacity:1;border-radius:999px!important;background:transparent!important;transform:none!important;pointer-events:auto;
 transition:background .25s cubic-bezier(.16,1,.3,1)!important}
html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v)::before{color:var(--frame-on)}
@media (hover:hover) and (pointer:fine){
 html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v):hover{background:color-mix(in srgb,var(--frame-on) 16%,transparent)!important;transform:none!important}
}
html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v):active{transform:none!important}
html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v):focus-visible{outline:2px solid var(--frame-on);outline-offset:2px}
html.frame-back-aside body .site-header a.frame-back:not(#_u):not(#_v){visibility:hidden!important}
@media (max-width:700px){html body .site-header a.frame-back:not(#_u):not(#_v){display:none!important}}
@media not all and (max-width:700px){
 html.has-frame-back:not(.frame-back-aside) body .case-back:not(.frame-back):not(#_u){display:none!important}
}
@media print{html body .site-header a.frame-back:not(#_u):not(#_v){display:none!important}}
/* phones: the frame's back link stays hidden on every page (21 Oct, cv-cases-report.md diff a: the hide rule above lost to
   :29 on specificity, so «← About Dmytro» and «← All work» showed white over the page) */
@media (max-width:700px){html.has-frame body .site-header a.frame-back.case-back:not(#_u):not(#_v):not(#_w){display:none!important}}