/* ===================================================================== Attic (attic) */

/* ---------- scene: ambient ---------- */
.attic-deco { pointer-events: none; }
.attic-bulb { animation: attic-twinkle 2.6s ease-in-out infinite; }
@keyframes attic-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
.attic-star { animation: attic-twinkle 3.4s ease-in-out infinite; }
.attic-lit { animation: attic-citylight 7s ease-in-out infinite; }
@keyframes attic-citylight { 0%, 100% { opacity: 1; } 40% { opacity: .9; } 46% { opacity: .25; } 58% { opacity: .95; } }
.attic-blink { animation: attic-blink 1.8s steps(1) infinite; }
@keyframes attic-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.attic-glint { animation: attic-glint 3.2s ease-in-out infinite; }
@keyframes attic-glint { 0%, 100% { opacity: .15; transform: translateX(0); } 50% { opacity: .8; transform: translateX(3px); } }
.attic-masglass { animation: attic-mas 5s ease-in-out infinite; opacity: .5; }
@keyframes attic-mas { 50% { opacity: .85; } }
.attic-moon { animation: attic-moon 6s ease-in-out infinite; }
@keyframes attic-moon { 50% { filter: brightness(1.08); } }
.attic-cloud { animation: attic-cloud 38s linear infinite; }
.attic-cloud2 { animation-duration: 52s; animation-delay: -20s; }
@keyframes attic-cloud { from { transform: translateX(-90px); } to { transform: translateX(330px); } }
.attic-dust { animation: attic-float 7s ease-in-out infinite; opacity: 0; }
@keyframes attic-float {
  0% { transform: translate(0, 0); opacity: 0; }
  25% { opacity: .8; }
  75% { opacity: .5; }
  100% { transform: translate(-14px, -40px); opacity: 0; }
}
.attic-moonbeam { mix-blend-mode: screen; animation: attic-beam 8s ease-in-out infinite; }
@keyframes attic-beam { 50% { opacity: .75; } }
.attic-candle { animation: attic-candle 2.2s ease-in-out infinite; }
@keyframes attic-candle { 0%, 100% { opacity: .3; } 30% { opacity: .42; } 55% { opacity: .24; } 80% { opacity: .38; } }
.attic-sway { transform-box: fill-box; transform-origin: 50% 0%; animation: attic-sway 4.5s ease-in-out infinite; }
@keyframes attic-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.attic-gone { opacity: 0 !important; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .attic-gone { transition: opacity .4s !important; } }

/* terminal */
.attic-tcursor { animation: attic-cur 1s steps(1) infinite; }
@keyframes attic-cur { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.attic-tscreen { animation: attic-flicker 5s infinite; }
@keyframes attic-flicker { 0%, 46%, 50%, 100% { opacity: 1; } 47% { opacity: .78; } 48% { opacity: .96; } 49% { opacity: .84; } 80% { opacity: .93; } }
.attic-troll { animation: attic-troll 3.4s linear infinite; }
@keyframes attic-troll { from { transform: translateY(0); } to { transform: translateY(62px); } }
.attic-lamp { animation: attic-twinkle 1.7s ease-in-out infinite; }

/* locker */
.attic-amber { animation: attic-twinkle 1.4s ease-in-out infinite; }
.attic-podoor { transform-box: fill-box; transform-origin: 0% 50%; transition: transform 1s cubic-bezier(.3, 1.2, .4, 1) .25s, filter 1s .25s; }
.attic-open .attic-podoor { transform: scaleX(-.3); filter: brightness(.65); }
.attic-open .attic-grn { fill: #5dff8a; }
.attic-puff { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.attic-fogging .attic-puff { animation: attic-fog 2.8s ease-out forwards; }
@keyframes attic-fog {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translate(-6px, -60px) scale(2.4); }
}
.attic-mist { opacity: 0; transition: opacity 1.5s .5s; }
.attic-open .attic-mist { opacity: .35; animation: attic-mist 5s ease-in-out infinite; }
@keyframes attic-mist { 50% { opacity: .18; transform: translateX(4px); } }

/* window, sill, parcel */
.attic-sceneparcel { opacity: 0; pointer-events: none; }
.attic-sceneparcel.attic-show { opacity: 1; pointer-events: auto; }

/* oven + tray */
.attic-ovenled { animation: attic-twinkle 2.2s ease-in-out infinite; }
.attic-sgloss { opacity: 0; transition: opacity .8s; }
.attic-glossy .attic-sgloss { opacity: .9; }
.attic-glossy { filter: saturate(1.15); }

/* broom */
.attic-broomin { transform-box: fill-box; transform-origin: 20% 100%; animation: attic-broomidle 9s ease-in-out infinite; }
@keyframes attic-broomidle { 0%, 88%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-1.6deg); } 92% { transform: rotate(1.2deg); } 94% { transform: rotate(-.6deg); } }
.attic-broomin.attic-twitch { animation: attic-twitch .7s ease-in-out; }
@keyframes attic-twitch { 20% { transform: rotate(-3deg) translateY(-3px); } 45% { transform: rotate(2.5deg) translateY(-5px); } 70% { transform: rotate(-1deg); } }

/* clothesline: the new print */
.attic-newprint { opacity: 0; transition: opacity .6s; }
.attic-newprint.attic-show { opacity: 1; }

/* ---------- close-ups: shared ---------- */
.attic-z { color: var(--ink); }
.attic-z .hs { cursor: pointer; transition: filter .2s; }
.attic-z .hs:hover, .attic-z .hs:focus-visible { filter: drop-shadow(0 0 6px rgba(255, 216, 77, .95)); outline: none; }
body.using .attic-z .hs { cursor: crosshair; }
.attic-cap { text-align: center; margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

/* ---------- MU-TH-UR 6000 ---------- */
.attic-motherz { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center; }
.attic-crt {
  flex: 1 1 400px; max-width: 640px; min-width: 0;
  background: linear-gradient(#e4dcc6, #bdb39a); border-radius: 28px 28px 18px 18px; padding: 16px 16px 10px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .6), 0 12px 26px rgba(0, 0, 0, .3);
}
.attic-crt-screen {
  position: relative; height: 300px; border-radius: 22px / 30px; overflow: hidden; cursor: text;
  background: radial-gradient(ellipse at center, #07230f 0%, #021007 72%, #010803 100%);
  box-shadow: inset 0 0 0 7px #1d1d18, inset 0 0 60px rgba(0, 0, 0, .85);
  padding: 18px 20px 14px; display: flex; flex-direction: column;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.45;
  color: #6dff95; text-shadow: 0 0 6px rgba(80, 255, 130, .6);
}
.attic-crt-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px); animation: attic-flicker 5s infinite; }
.attic-crt-screen::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; z-index: 2; background: linear-gradient(transparent, rgba(109, 255, 149, .07), transparent); animation: attic-rollbar 4s linear infinite; }
@keyframes attic-rollbar { to { transform: translateY(440%); } }
.attic-crt-screen.shake { animation: shake .45s; }
.attic-mlog { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; white-space: pre-wrap; word-break: break-word; }
.attic-mlog::-webkit-scrollbar { display: none; }
.attic-mline { min-height: 1.45em; }
.attic-mline.hd { color: #b6ffc8; }
.attic-mline.me { color: #3fcf6a; opacity: .85; }
.attic-mline.big { font-size: 1.05rem; letter-spacing: .08em; }
.attic-mline.err { animation: attic-errblink .3s steps(2) 3; }
@keyframes attic-errblink { 50% { opacity: 0; } }
.attic-granted .attic-mline.ok:last-child, .attic-mline.ok { color: #d9ffe3; }
.attic-mform { position: relative; display: flex; align-items: center; gap: 6px; margin: 6px 0 0; min-height: 1.6em; }
.attic-prompt { opacity: .8; }
.attic-mtyped { white-space: pre; overflow: hidden; }
.attic-cursor { display: inline-block; width: .62em; height: 1.1em; background: #6dff95; box-shadow: 0 0 6px #6dff95; animation: attic-cur 1s steps(1) infinite; opacity: .6; }
.attic-focus .attic-cursor { opacity: 1; }
.attic-minput { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; background: transparent; color: transparent; caret-color: transparent; }
.attic-crt-foot { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; font-size: .62rem; font-weight: 800; letter-spacing: .14em; color: #6f664f; }
.attic-crt-foot b { margin-right: auto; }
.attic-lmp { width: 8px; height: 8px; border-radius: 50%; }
.attic-lr { background: #ff5a4a; box-shadow: 0 0 6px #ff5a4a; animation: attic-twinkle 1.6s infinite; }
.attic-la { background: #ffb13b; box-shadow: 0 0 6px #ffb13b; animation: attic-twinkle 2.3s infinite; }
.attic-lg { background: #5dff8a; box-shadow: 0 0 6px #5dff8a; }
.attic-enter { border: 0; border-radius: 8px; padding: 8px 12px; min-height: 36px; cursor: pointer; font: 800 .75rem ui-monospace, Menlo, monospace; letter-spacing: .08em; background: #2a2a24; color: #6dff95; box-shadow: 0 3px 0 #11110e; }
.attic-enter:active { transform: translateY(2px); box-shadow: 0 1px 0 #11110e; }
.attic-sticky { flex: 0 1 170px; transform: rotate(3deg); text-align: center; font-size: 1.5rem; }
.attic-sticky small { font-size: 1.05rem; color: #6b5a1d; }

/* ---------- the Jones drawing ---------- */
.attic-jonesz svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; }

/* ---------- linoprint ---------- */
.attic-linoz { display: flex; flex-direction: column; gap: 12px; }
.attic-linoz .attic-cap { margin: 0; }
.attic-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.attic-block { position: relative; background: #efe4d0; border-radius: 10px; padding: 8px 6px 6px; box-shadow: 0 3px 0 var(--line); transition: transform .2s, box-shadow .2s; }
.attic-block svg { display: block; width: 100%; height: auto; border-radius: 4px; }
.attic-block.attic-on { box-shadow: 0 0 0 3px var(--cherry), 0 3px 0 var(--line); transform: translateY(-3px); }
.attic-bn { position: absolute; top: -8px; left: -4px; min-width: 30px; text-align: center; background: var(--paper); border-radius: 999px; padding: 0 6px; font-family: "Fraunces", serif; font-weight: 800; font-size: .85rem; box-shadow: inset 0 0 0 2px var(--line); }
.attic-bench { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.attic-pressz { flex: 1 1 280px; max-width: 440px; display: block; overflow: visible; }
.attic-out { flex: 0 1 230px; text-align: center; }
.attic-sheet { width: 100%; max-width: 240px; aspect-ratio: 160 / 100; margin: 0 auto; border-radius: 3px; border: 2px dashed var(--line); background: rgba(255, 250, 242, .5); }
.attic-sheet.attic-show { border: 0; background: #fbf6ea; box-shadow: 0 8px 18px rgba(58, 42, 35, .22); transform: rotate(-1.5deg); }
.attic-sheet svg { display: block; width: 100%; height: 100%; }
.attic-peel { animation: attic-peel .8s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes attic-peel { from { transform: translateY(-46px) rotate(-8deg) scale(.7); opacity: 0; } }
.attic-verdict { margin: 8px 0 0; min-height: 1.4em; }
.attic-onbed.attic-drop { animation: attic-drop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes attic-drop { from { transform: translateY(-24px); opacity: 0; } }
.attic-roller { opacity: 0; pointer-events: none; }
.attic-rolling { animation: attic-rollx 1.5s ease-in-out; }
@keyframes attic-rollx {
  0% { opacity: 0; transform: translateX(-12px); }
  8% { opacity: 1; transform: translateX(-4px); }
  32% { transform: translateX(84px); }
  56% { transform: translateX(-2px); }
  82% { opacity: 1; transform: translateX(84px); }
  100% { opacity: 0; transform: translateX(110px) translateY(-10px); }
}
.attic-paper { opacity: 0; transition: opacity .25s; pointer-events: none; }
.attic-paper.attic-paper-on { opacity: 1; }
.attic-platen { transition: transform .38s cubic-bezier(.6, 0, .4, 1); }
.attic-pressing .attic-platen { transform: translateY(16px); }

/* ---------- Fimo oven ---------- */
.attic-ovenz { display: flex; flex-direction: column; gap: 10px; }
.attic-ovensvg { display: block; width: 100%; max-width: 520px; margin: 0 auto; overflow: visible; }
.attic-tray { transition: transform .8s cubic-bezier(.5, 0, .3, 1); }
.attic-tray.attic-in { transform: translate(-194px, -22px); }
.attic-odoor { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.4, 1.3, .5, 1); }
.attic-dooropen .attic-odoor { transform: scaleY(-.22); }
.attic-knob { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.attic-heat { opacity: 0; transition: opacity .6s; }
.attic-on .attic-heat { opacity: 1; animation: attic-heat 1.2s ease-in-out infinite; }
@keyframes attic-heat { 50% { opacity: .75; } }
.attic-elem { transition: stroke .6s, filter .6s; }
.attic-on .attic-elem { stroke: #ff7a2a; filter: drop-shadow(0 0 3px #ff7a2a); }
.attic-oled { transition: fill .3s; }
.attic-on .attic-oled { fill: #ff7a2a; filter: drop-shadow(0 0 3px #ff7a2a); }
.attic-figs { transition: filter 1.2s; }
.attic-gloss { opacity: 0; transition: opacity .8s .3s; }
.attic-done .attic-gloss { opacity: .85; }
.attic-done .attic-figs { filter: saturate(1.18) brightness(1.04); }
.attic-burnt .attic-figs { filter: brightness(.2) saturate(.2); }
.attic-brown .attic-figs { filter: sepia(.8) brightness(.62) saturate(1.3); }
.attic-fig { transform-box: fill-box; transform-origin: 50% 100%; }
.attic-squishy .attic-fig { animation: attic-squish .9s ease-in-out 2; }
@keyframes attic-squish { 30% { transform: scale(1.12, .82); } 60% { transform: scale(.94, 1.06); } }
.attic-fhand.attic-ready { animation: attic-ready 1.6s ease-in-out infinite; }
@keyframes attic-ready { 50% { filter: drop-shadow(0 0 5px #ffd84d); } }
.attic-smoke circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.attic-burnt .attic-smoke circle, .attic-brown .attic-smoke circle { animation: attic-smoke 2.4s ease-out forwards; }
.attic-brown .attic-smoke circle { fill: #a89a8a; }
.attic-smoke circle:nth-child(2) { animation-delay: .25s !important; }
.attic-smoke circle:nth-child(3) { animation-delay: .5s !important; }
.attic-smoke circle:nth-child(5) { animation-delay: .35s !important; }
@keyframes attic-smoke { 0% { opacity: 0; transform: translateY(10px) scale(.5); } 25% { opacity: .75; } 100% { opacity: 0; transform: translateY(-40px) scale(1.8); } }
.attic-ctrls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px 16px; }
.attic-ctrl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.attic-cl { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.attic-step { display: flex; align-items: center; gap: 6px; background: var(--paper); border-radius: 999px; padding: 4px; box-shadow: inset 0 0 0 2px var(--line); }
.attic-step button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #d9b98b; box-shadow: 0 3px 0 #a88453; font-weight: 800; font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.attic-step button:active { transform: translateY(2px); box-shadow: 0 1px 0 #a88453; }
.attic-step button:disabled { opacity: .45; cursor: default; }
.attic-step output { min-width: 78px; text-align: center; font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ---------- window / Brabo / Kiki ---------- */
.attic-winwrap { text-align: center; }
.attic-winz { display: block; width: 100%; max-width: 560px; margin: 0 auto; border-radius: 12px; }
.attic-z .attic-zsky.hs:hover, .attic-z .attic-zsky.hs:focus-visible { filter: brightness(1.12); }
.attic-plaque { display: inline-block; margin-top: 8px; padding: 6px 16px; border-radius: 4px; background: linear-gradient(#e3c65a, #b8932a); color: #3a2a10; font-family: "Fraunces", serif; font-weight: 800; font-size: .8rem; letter-spacing: .16em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 8px rgba(0, 0, 0, .25); }
.attic-held { opacity: 0; transition: opacity .25s; }
.attic-held.attic-show { opacity: 1; }
.attic-ring, .attic-drops { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.attic-splashing .attic-ring { animation: attic-ring 1.3s ease-out forwards; }
.attic-splashing .attic-ring2 { animation-delay: .25s; }
.attic-splashing .attic-drops { animation: attic-drops .8s ease-out forwards; transform-origin: 50% 100%; }
@keyframes attic-ring { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(6); } }
@keyframes attic-drops { 0% { opacity: 1; transform: translateY(0) scale(1); } 50% { opacity: 1; transform: translateY(-9px) scale(1.4, 1.6); } 100% { opacity: 0; transform: translateY(2px) scale(.8); } }
.attic-zparcel { opacity: 0; pointer-events: none; }
.attic-zparcel.attic-show { opacity: 1; pointer-events: auto; }
.attic-bnc { transform-box: fill-box; transform-origin: 50% 100%; }
.attic-bounce .attic-bnc { animation: attic-bounce .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes attic-bounce { 0% { transform: scale(1.1, .8); } 40% { transform: scale(.94, 1.08) translateY(-6px); } }
.attic-kiki, .attic-fallparcel, .attic-flyhand { pointer-events: none; }

/* ---------- the parcel ---------- */
.attic-parcelz { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.attic-pbox { display: block; width: 100%; max-width: 440px; overflow: visible; }
.attic-string { transition: opacity .6s .15s, transform .8s cubic-bezier(.5, 0, .7, .3); }
.attic-opened .attic-string { opacity: 0; transform: translateY(40px); pointer-events: none; }
.attic-ptop { transition: opacity .35s .4s; }
.attic-opened .attic-ptop { opacity: 0; }
.attic-pflap { opacity: 0; transition: opacity .35s .4s; }
.attic-opened .attic-pflap { opacity: 1; }
.attic-prec-in { transform: translateY(62px); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1) .75s; }
.attic-opened .attic-prec-in { transform: none; }
.attic-prec { pointer-events: none; }
.attic-opened .attic-prec { pointer-events: auto; }
.attic-pnote { margin: 0; }

@media (max-width: 600px) {
  .attic-blocks { grid-template-columns: repeat(2, 1fr); }
  .attic-crt { padding: 12px 10px 8px; border-radius: 22px 22px 14px 14px; }
  .attic-crt-screen { height: 270px; padding: 14px 14px 10px; font-size: .74rem; }
  .attic-mline.big { font-size: .9rem; }
  .attic-sticky { flex-basis: 100%; max-width: 220px; font-size: 1.3rem; }
  .attic-step output { min-width: 66px; font-size: 1rem; }
}