/* V4 polish on V3 — translucent paper, readable letters, everything else preserved.
   Never apply a corruption filter/transform to .name-art or its wing image. */
@font-face { font-family:'Jacy Script'; src:url('assets/fonts/Z003-MediumItalic.otf') format('opentype'); font-display:swap; font-weight:400; font-style:normal; }
@font-face { font-family:'Jacy Italic'; src:url('assets/fonts/lmroman10-italic.otf') format('opentype'); font-display:swap; font-weight:400; font-style:normal; }
@font-face { font-family:'Jacy Display'; src:url('assets/fonts/lmromandunh10-regular.otf') format('opentype'); font-display:swap; font-weight:400; font-style:normal; }
@font-face { font-family:'Jacy Book'; src:url('assets/fonts/URWBookman-LightItalic.otf') format('opentype'); font-display:swap; font-weight:400; font-style:normal; }

/* Freeze the current frame first; crossfade it beneath V1's pink paper.
   Visibility stays enabled during opacity fades. No black intermediate state. */
.living-background { background:#f7e8ee; }
#background-video,body.video-playing #background-video { visibility:visible; opacity:0; transition:opacity 650ms ease; }
body.video-playing #background-video { opacity:1; }
.background-poster,.background-veil { transition:opacity 650ms ease; }
.background-poster { opacity:0; }
.video-playing .background-poster { opacity:1; }
.background-veil { opacity:0; }
.video-playing .background-veil { opacity:1; }
.pink-background { position:absolute; inset:0; opacity:1; transition:opacity 650ms ease; background-color:#f7e8ee; background-image:radial-gradient(ellipse at 48% 45%,#fff8fb 0,transparent 64%),radial-gradient(#c88ca635 .75px,transparent .9px),repeating-linear-gradient(0deg,transparent 0 49px,#fff4 49px 50px),repeating-linear-gradient(90deg,transparent 0 49px,#fff4 49px 50px); background-size:auto,8px 8px,50px 50px,50px 50px; }
.video-playing .pink-background { opacity:0; }
.safe-background .pink-background { opacity:1; }
/* No darkening or filtering while fading the poster: the still layer is opaque. */
.safe-background .background-poster { filter:blur(26px) saturate(.75) contrast(.7) brightness(1.15); }
.safe-background .background-veil { background-color:#f4c4d65c; }

/* Separate little pieces of stationery, with the sky visible between them. */
.site-header { display:grid; grid-template-columns:auto minmax(125px,1fr) auto; align-items:center; gap:8px 18px; padding:18px 28px 18px; background:none; }
.wordmark { border:0; padding:4px 10px 9px; background:#fff7fb; box-shadow:2px 2px #82516a38; border-radius:3px 1px 16px 2px; transform:rotate(-8deg); }
.wordmark::after { content:''; position:absolute; left:6px; right:6px; bottom:5px; border-bottom:1px dotted #a5758a; }
.header-note { justify-self:start; padding:8px 14px 9px 11px; background:#fff2edf5; color:#623448; line-height:1.65; transform:rotate(1.5deg); clip-path:polygon(2% 0,97% 3%,100% 89%,89% 96%,4% 100%,0 14%); }
.header-note i { font-size:15px; }
.global-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; max-width:670px; gap:8px 13px; align-items:center; }
.safety-button { border:0; border-bottom:1px dashed #9c6581; border-radius:14px 3px 2px 10px; padding:11px 13px; color:#633249; background:#fff4f8; box-shadow:2px 3px #68344e24; transform:rotate(-.7deg); }
#reset-room { padding:8px 10px; background:#f8e9f0; border:0; border-bottom:1px dotted #85516b; color:#633249; transform:rotate(2deg); clip-path:polygon(3% 0,100% 5%,97% 100%,0 94%); }
.background-status { position:static; grid-column:3; justify-self:end; max-width:450px; background:#fff2f6f5; color:#66334c; font-size:9px; line-height:1.65; padding:4px 14px 7px; margin:0 7px 0 0; transform:rotate(.6deg); clip-path:polygon(1% 6%,97% 0,100% 91%,70% 100%,0 85%); }
.angel-switch { display:flex; align-items:center; gap:9px; min-height:43px; border:1px solid #b68a9c; border-radius:2px 14px 3px 2px; padding:9px 12px 10px; background:#ecd8e6; color:#643247; box-shadow:2px 3px #68344e24; font:10px/1.5 var(--mono); transform:rotate(1.4deg); }
.switch-track { display:block; width:31px; height:16px; padding:2px; flex:none; background:#fff2f7; border:1px solid #a16b83; box-shadow:inset 1px 1px #c49aae; }
.switch-track span { display:block; width:10px; height:10px; background:#b17c97; box-shadow:1px 1px #8f5672; transition:transform .2s ease,background-color .2s; }
.angel-switch[aria-checked=true] .switch-track span { transform:translateX(14px); background:#95354f; }
[data-angel-state=attempted_restore] .angel-switch { color:#823b54; background:#f4e7eb; border-bottom-style:dashed; }
.angel-farewell { position:fixed; inset:0; z-index:250; pointer-events:none; background:#a3324f; opacity:0; transition:opacity 800ms ease; }
.angel-farewell-visible .angel-farewell { opacity:.075; }

/* The enclosing rectangle becomes two loose, curved lace margins. */
.room-border { inset:18px 21px 35px; border:0; background:none; opacity:1; transform:none; }
.room-border::before,.room-border::after { content:''; top:0; bottom:0; background:transparent; padding:0; width:90px; border:1px dashed #c493a780; pointer-events:none; }
.room-border::before { left:0; border-right:0; border-radius:70px 0 0 130px / 130px 0 0 80px; transform:rotate(-1.1deg); background:url('assets/lace.svg') 4px 90px / 15px 36px repeat-y; mask-image:linear-gradient(transparent,#000 10%,#000 76%,transparent); }
.room-border::after { left:auto; right:0; top:70px; bottom:90px; width:58px; border-left:0; border-radius:0 72px 110px 0 / 0 110px 65px 0; transform:rotate(1.4deg); background:url('assets/lace.svg') right 55px / 13px 36px repeat-y; mask-image:linear-gradient(transparent,#000 15%,#000 87%,transparent); }
.rest-card { border-radius:3px 9px 38px 2px; }
.rest-card::before { border-radius:2px 6px 28px 1px; }
.notes-window { border-radius:2px 2px 17px 2px; }
.notepad-body { border-radius:0 0 13px 0; }
.desktop-scribble { background:#fff1f0d9; padding:5px 9px; border-radius:51% 10% 35% 7%; text-shadow:1px 1px #fff; }
.margin-note { background:#fff3f7e8; color:#6f3b54; padding:7px 4px; border-radius:9px 2px; }

/* A stable footprint contains every typographic variation. */
.name-art { isolation:isolate; }
.name-art img { z-index:0; pointer-events:none; }
.big-name.name-collage { --name-size:99px; position:relative; z-index:2; display:block; width:255px; height:149px; max-width:78%; padding:0; margin:31px 0 0; border:0; background:none; text-shadow:none; letter-spacing:0; transform:none; font-size:var(--name-size); line-height:1; cursor:pointer; overflow:visible; }
.name-collage:focus-visible { outline:1px dashed #9b536f; outline-offset:7px; border-radius:40% 15% 32% 8%; }
.name-letter { position:absolute; display:block; width:.66em; height:1.1em; font-family:var(--face); font-size:calc(var(--name-size) * var(--size)); font-weight:400; font-style:normal; color:var(--color); line-height:1; text-align:center; left:var(--left); top:var(--top); transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scaleX(var(--width,1)); transform-origin:50% 72%; text-shadow:1px 1px #fff5f9,-1px -1px #fff5f9; z-index:var(--layer,1); }
/* Paper alone fades: existing 65–66% paper colors × .4 = about 26% opacity. */
.name-letter::before { opacity:.4; content:''; position:absolute; inset:14% 1% 5%; z-index:-1; background:var(--paper,transparent); transform:rotate(-3deg); clip-path:polygon(4% 0,100% 3%,96% 90%,79% 100%,0 95%); }
.letter-j { --face:'Jacy Script'; --size:1.2936; --left:0%; --top:3%; --dx:-3px; --dy:0px; --angle:-12deg; --color:#a04b70; --width:1; --layer:3; }
.letter-a { --face:'Jacy Display'; --size:1.04; --left:22%; --top:19%; --dx:0px; --dy:-2px; --angle:8deg; --color:#804257; --paper:#e8cad9a6; --layer:2; }
.letter-c { --face:'Jacy Book'; --size:.96; --left:45%; --top:20%; --dx:2px; --dy:10px; --angle:-9deg; --color:#b35c83; --layer:4; }
.letter-y { --face:'Jacy Italic'; --size:1.144; --left:65%; --top:6%; --dx:4px; --dy:-1px; --angle:10deg; --color:#6f3454; --paper:#fff0e7a8; --layer:2; }
.name-hint { position:relative; z-index:2; font:8px/1.5 var(--mono); margin:-1px -4px 6px; color:#805067; }
.name-collage[data-look="1"] .letter-j { --face:"Jacy Italic"; --size:1.24; --angle:-8deg; --dx:2px; --dy:8px; --color:#82405c; }
.name-collage[data-look="1"] .letter-a { --face:"Jacy Script"; --size:1.3288; --angle:12deg; --dx:-5px; --dy:-17px; --color:#b05b81; }
.name-collage[data-look="1"] .letter-c { --face:"Jacy Display"; --size:1.03; --angle:-16deg; --dx:3px; --dy:5px; --color:#6d344b; }
.name-collage[data-look="1"] .letter-y { --face:"Jacy Book"; --size:1.1; --angle:5deg; --dx:0px; --dy:12px; --color:#a65e7e; }
.name-collage[data-look="2"] .letter-j { --face:"Jacy Display"; --size:1.2; --angle:6deg; --dx:2px; --dy:-8px; --color:#a15b79; }
.name-collage[data-look="2"] .letter-a { --face:"Jacy Book"; --size:0.92; --angle:-12deg; --dx:-4px; --dy:13px; --color:#76324d; }
.name-collage[data-look="2"] .letter-c { --face:"Jacy Script"; --size:1.364; --angle:9deg; --dx:-8px; --dy:-22px; --color:#a84d73; }
.name-collage[data-look="2"] .letter-y { --face:"Jacy Italic"; --size:1.19; --angle:-10deg; --dx:2px; --dy:9px; --color:#75475f; }
.name-collage[data-look="3"] .letter-j { --face:"Jacy Script"; --size:1.408; --angle:-18deg; --dx:-1px; --dy:-12px; --color:#8e4668; }
.name-collage[data-look="3"] .letter-a { --face:"Jacy Italic"; --size:1.02; --angle:14deg; --dx:1px; --dy:6px; --color:#b45d85; }
.name-collage[data-look="3"] .letter-c { --face:"Jacy Book"; --size:1.09; --angle:-5deg; --dx:-3px; --dy:-5px; --color:#633149; }
.name-collage[data-look="3"] .letter-y { --face:"Jacy Display"; --size:1.2; --angle:15deg; --dx:1px; --dy:11px; --color:#a15a7d; }
.name-collage[data-look="4"] .letter-j { --face:"Jacy Book"; --size:1.16; --angle:-6deg; --dx:-3px; --dy:8px; --color:#a3577a; }
.name-collage[data-look="4"] .letter-a { --face:"Jacy Display"; --size:1.144; --angle:-13deg; --dx:-8px; --dy:-10px; --color:#65354d; }
.name-collage[data-look="4"] .letter-c { --face:"Jacy Italic"; --size:0.88; --angle:16deg; --dx:2px; --dy:15px; --color:#a75477; }
.name-collage[data-look="4"] .letter-y { --face:"Jacy Script"; --size:1.4432; --angle:5deg; --dx:-5px; --dy:-23px; --color:#814360; }
.name-collage[data-look="5"] .letter-j { --face:"Jacy Italic"; --size:1.232; --angle:10deg; --dx:3px; --dy:-9px; --color:#76364d; }
.name-collage[data-look="5"] .letter-a { --face:"Jacy Script"; --size:1.29; --angle:-10deg; --dx:-2px; --dy:6px; --color:#b25e85; }
.name-collage[data-look="5"] .letter-c { --face:"Jacy Display"; --size:1.13; --angle:6deg; --dx:-3px; --dy:-8px; --color:#85475f; }
.name-collage[data-look="5"] .letter-y { --face:"Jacy Book"; --size:1.12; --angle:-13deg; --dx:3px; --dy:9px; --color:#a45e7e; }
.name-collage[data-look="6"] .letter-j { --face:"Jacy Display"; --size:1.11; --angle:-14deg; --dx:0px; --dy:9px; --color:#a15b7c; }
.name-collage[data-look="6"] .letter-a { --face:"Jacy Italic"; --size:1.1616; --angle:7deg; --dx:-5px; --dy:-12px; --color:#7e3a5c; }
.name-collage[data-look="6"] .letter-c { --face:"Jacy Script"; --size:1.2056; --angle:-4deg; --dx:0px; --dy:7px; --color:#aa5476; }
.name-collage[data-look="6"] .letter-y { --face:"Jacy Book"; --size:1.26; --angle:14deg; --dx:-4px; --dy:-5px; --color:#72324b; }

/* Fragmentation belongs to a surface, not a whole window. The wings and name
   are siblings of the affected text; no ancestor filter or displacement. */
.damage-surface { position:relative; --tear-x:0px; --tear-y:0px; --slice-a:23%; --slice-b:44%; }
.distort-line { position:relative; display:inline-block; }
.text-echo { display:none; position:absolute; inset:0; pointer-events:none; white-space:nowrap; color:#b52f59; text-shadow:2px 0 #cd719455; clip-path:polygon(0 var(--slice-a),100% var(--slice-a),100% var(--slice-b),0 var(--slice-b)); transform:translate(var(--tear-x),var(--tear-y)); }
.tear-field { position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; z-index:1; }
.tear-field i { position:absolute; display:block; left:6%; width:78%; height:2px; background:#a83d635c; transform:translateX(var(--tear-x)); }
.tear-field i:nth-child(1) { top:22%; width:64%; box-shadow:17px 4px #9a2b4d25; }
.tear-field i:nth-child(2) { top:66%; left:19%; height:7px; width:45%; background:repeating-linear-gradient(90deg,#8f31534a 0 3px,transparent 3px 7px); }
.tear-field i:nth-child(3) { top:82%; width:82%; border-top:1px dashed #ad4564; background:transparent; }
.corrupt-code { position:absolute; bottom:8px; right:7px; font:7px/1.2 var(--mono); letter-spacing:1px; color:#ba6983; }
.damage-surface[data-phase="1"] .text-echo,.damage-surface[data-phase="2"] .text-echo,.damage-surface[data-phase="3"] .text-echo { display:block; }
.damage-surface[data-phase="1"] .tear-field { opacity:.3; }
.damage-surface[data-phase="2"] .tear-field { opacity:.65; }
.damage-surface[data-phase="3"] .tear-field { opacity:1; }
.damage-surface[data-cut="1"] { --tear-x:5px; --tear-y:-2px; --slice-a:20%; --slice-b:42%; }
.damage-surface[data-cut="2"] { --tear-x:-7px; --tear-y:2px; --slice-a:48%; --slice-b:69%; }
.damage-surface[data-cut="3"] { --tear-x:10px; --tear-y:0px; --slice-a:65%; --slice-b:83%; }
.damage-surface[data-cut="4"] { --tear-x:-4px; --tear-y:-3px; --slice-a:33%; --slice-b:54%; }
/* Intro artifacts are only above/below the wing zone, never across the image. */
.intro-body .tear-field i:nth-child(1) { top:13px; width:29%; left:5%; }
.intro-body .tear-field i:nth-child(2) { top:auto; bottom:85px; left:7%; width:31%; }
.intro-body .tear-field i:nth-child(3) { top:auto; bottom:45px; width:85%; }
.intro-body .corrupt-code { bottom:5px; left:10px; right:auto; }
.intro-body[data-phase="1"] .little-stamp { text-shadow:3px 0 #a73b6544; }
.intro-body[data-phase="2"] .little-stamp,.intro-body[data-phase="3"] .little-stamp { color:#a33a5b; transform:translateX(var(--tear-x)) rotate(-12deg); text-decoration:line-through; }
.intro-body[data-phase="2"] .intro-rule,.intro-body[data-phase="3"] .intro-rule { border-top:2px dashed #b55475; transform:translateX(var(--tear-x)); }
.intro-body[data-phase="3"] .introduction .distort-line { color:#923954; }
.introduction .text-echo { color:#b52f59; }
.intro-body[data-phase="3"] .intro-footer { color:#8c3454; text-shadow:3px 1px #ad567a33; letter-spacing:.4px; transform:translateX(calc(var(--tear-x) / 3)); }
.intro-body[data-phase="3"] .intro-rule::after { content:''; position:absolute; height:9px; background:#fff5f9; width:25%; left:55%; top:-5px; }
/* DNI palette changes abruptly at a stage boundary; the uneven strip positions
   continue to change, rather than looping light/dark or flashing opacity. */
.boundaries-body,.dni-content { transition:none; }
.boundaries-body[data-phase="1"] .dni-caption { transform:translateX(3px); letter-spacing:.7px; }
.boundaries-body[data-phase="2"],.boundaries-body[data-phase="3"],.dni-content[data-phase="2"],.dni-content[data-phase="3"] { color:#f59bad; background-color:#25111e; background-image:repeating-linear-gradient(0deg,transparent 0 5px,#a9416426 5px 6px); }
.boundaries-body[data-phase="2"] .tiny-halo,.boundaries-body[data-phase="3"] .tiny-halo { border-color:#c76685; border-radius:0; border-left-color:transparent; transform:rotate(-17deg) translateX(4px)!important; }
.boundaries-body[data-phase="3"] .dni-label { font:52px/.95 var(--mono); letter-spacing:-5px; color:#ef8da6; text-shadow:-2px 0 #953958; }
.boundaries-body[data-phase="3"] .dni-caption { font-family:var(--mono); text-decoration:line-through; transform:translateX(calc(var(--tear-x) / 2)); }
.boundaries-body[data-phase="2"] .whisper-normal,.boundaries-body[data-phase="3"] .whisper-normal { opacity:0!important; }
.boundaries-body[data-phase="2"] .whisper-secret,.boundaries-body[data-phase="3"] .whisper-secret { color:#f59bad; opacity:1!important; }
.damage-surface[data-phase="3"] .document-artifact { opacity:1; color:#db8a9e; }
.dni-content[data-phase="3"] .document-file { letter-spacing:2px; text-decoration:line-through; transform:translateX(var(--tear-x)); }
.dni-content[data-phase="3"] .document-heart { color:#e07a9a; transform:rotate(-17deg); }
.dni-content .dni-rule { font-size:13px; z-index:2; }
.dni-content .retro-button,.dni-content #restore-dni { position:relative; z-index:2; }
.dni-content .text-echo { color:#db4b72; }
/* Override V1's automatic hover effects: the state machine exclusively owns
   corruption, so no stale :hover rule can resurrect it after the kill switch. */
.boundaries-body:hover .whisper-normal,.boundaries-body:focus-within .whisper-normal { opacity:1; }
.boundaries-body:hover .whisper-secret,.boundaries-body:focus-within .whisper-secret { opacity:0; }
.boundaries-body:hover .tiny-halo,.boundaries-body:focus-within .tiny-halo { transform:rotate(-13deg); border-color:#b8879c; }
body:not([data-angel-state="alive"]) .text-echo { display:none!important; }
body:not([data-angel-state="alive"]) .tear-field { opacity:0!important; }

@media(min-width:761px) and (max-width:1050px) {
  .site-header { grid-template-columns:auto 1fr; gap:10px 20px; }
  .global-controls { grid-column:1 / -1; justify-content:flex-end; max-width:none; }
  .background-status { grid-column:1 / -1; }
}
@media(max-width:760px) {
  .site-header { grid-template-columns:auto 1fr; padding:16px 18px 19px; gap:12px; }
  .header-note { font-size:10px; justify-self:start; }
  .global-controls { grid-column:1 / -1; flex-direction:row; align-items:flex-start; justify-content:flex-start; width:100%; gap:10px 8px; }
  .global-controls .safety-button { font-size:10px; min-height:44px; padding:10px 12px; }
  .angel-switch { min-height:44px; font-size:10px; max-width:100%; text-align:left; }
  .background-status { grid-column:1 / -1; justify-self:start; margin:0; max-width:100%; left:auto; right:auto; }
  .big-name.name-collage { --name-size:85px; width:222px; height:134px; max-width:83%; margin-top:24px; }
  .name-hint { font-size:8px; margin:1px -5px 9px; }
  .room-border { inset:8px 9px 14px; }
  .room-border::before { width:40px; border-radius:70px 0 0 80px; background-size:9px 30px; }
  .room-border::after { width:30px; background-size:9px 30px; }
  .desktop-scribble { top:4px; }
  .intro-body .tear-field i:nth-child(2) { bottom:85px; }
}
@media(max-width:350px) { .big-name.name-collage { --name-size:73px; width:194px; height:119px; } .name-hint { font-size:7px; } }
@media(prefers-reduced-motion:reduce) {
  .pink-background,#background-video,.background-poster,.background-veil,.angel-farewell { transition:none!important; }
  .angel-farewell { display:none; }
}