/* Live content above the painted 1916 x 821 street. */
:root { --sky: #f8eee2; --bird: #4a3a34; }
html, body.home { background: var(--sky); }
body.home { margin: 0; overflow-x: hidden; color: #171714; }
/* Keep the street at the viewport floor when the homepage content is short. */
body.home:not(.reference) { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto auto auto 1fr; }
body.home:not(.reference) > * { min-width: 0; }
body.home:not(.reference) > .street { align-self: end; }
.home-content { position: relative; z-index: 2; width: min(760px, calc(100% - 48px)); margin-left: max(24px, calc((100% - 1000px) / 2)); }
header.home-content { padding-top: 40px; }
.language-switch { position: absolute; right: 0; top: 28px; font-size: 14px; margin: 0; }
.language-switch a { font-size: inherit; }
.identity { display: flex; align-items: center; gap: 32px; }
.identity h1 { margin: 0; font-size: clamp(48px, 5.2vw, 76px); line-height: 1.04; font-weight: bold; letter-spacing: -2px; }
.intro-photo { width: 168px; height: 168px; flex: 0 0 168px; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.intro-copy { max-width: 730px; margin: 24px 0 12px; font-size: 20px; line-height: 1.4; }
.contacts p { font-size: 20px; line-height: 1.5; margin: 0; }
.projects { margin-top: 48px; }
.projects h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.2; font-weight: bold; }
.project-list { padding: 0; margin: 0; list-style: none; }
.project-list li { margin: 0 0 17px; }
.project-title { font-size: 20px; line-height: 1.3; font-weight: bold; }
.project-list p { font-size: 18px; line-height: 1.4; margin: 3px 0 0; color: #4b4a46; }
.publication-years a { white-space: nowrap; }
.sky { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bird { position: absolute; left: 0; top: 0; width: 22px; height: 10px; will-change: transform; }
.bird svg { display: block; width: 100%; height: 100%; fill: var(--bird); }
.bird .wing-down, .bird.flap .wing-up { display: none; }
.bird.flap .wing-down { display: inline; }
/* Overlap empty sky only; balloons start at 51% of image height. */
.street { --scene-width: max(100vw, 1500px); position: relative; z-index: 0; overflow: hidden; margin-top: calc(var(--scene-width) * -0.20); }
.street-inner { position: relative; width: var(--scene-width); margin-left: clamp(calc(100% - var(--scene-width)), calc(50% - var(--scene-width) * .35), 0px); }
.street-img { display: block; width: 100%; height: auto; max-width: none; mask-image: linear-gradient(transparent, #000 35%); -webkit-mask-image: linear-gradient(transparent, #000 35%); }
.arcade-hit { position: absolute; left: 30.5%; top: 68.5%; width: 7.4%; height: 23%; z-index: 2; border: 0 !important; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.arcade-hit:focus-visible { outline: 3px solid #0060a0; outline-offset: 4px; }
.arcade-lit { position: absolute; inset: 0; pointer-events: none; }
.arcade-machine { position: absolute; inset: 0; background: url('/assets/img/arcade-street-home.jpg?v=20261017') 0 0 / 100% 100% no-repeat; clip-path: polygon(32.25% 70.3%, 36.8% 70.3%, 37.5% 71.8%, 37.6% 90.7%, 31.8% 90.7%, 31.8% 81.3%, 32.3% 79.7%, 32.6% 74.2%); filter: brightness(1.28) saturate(1.12); opacity: 0; transition: opacity .2s ease; }
.arcade-screen { position: absolute; left: 32.72%; top: 74.9%; width: 3.65%; height: 5.1%; object-fit: contain; background: #08060a; clip-path: polygon(7% 0, 100% 0, 92% 100%, 0 100%); opacity: 0; filter: brightness(1.15) drop-shadow(0 0 5px #ffc96a); transition: opacity .2s ease; }
.arcade-hit:hover + .arcade-lit .arcade-machine, .arcade-hit:focus-visible + .arcade-lit .arcade-machine,
.arcade-hit:hover + .arcade-lit .arcade-screen, .arcade-hit:focus-visible + .arcade-lit .arcade-screen { opacity: 1; }
@media (hover: none), (pointer: coarse) { .arcade-screen { opacity: 1; } .arcade-machine { opacity: .65; } }
@media (max-width: 767px) {
 .home-content { width: calc(100% - 40px); margin-left: 20px; }
 header.home-content { padding-top: 32px; }
 .language-switch { top: 18px; }
 .identity { gap: 16px; }
 .identity h1 { font-size: clamp(31px, 7.6vw, 52px); letter-spacing: -1px; }
 .intro-photo { width: 80px; height: 80px; flex-basis: 80px; }
 .intro-copy, .contacts p { font-size: 18px; }
 .intro-copy { margin-top: 22px; }
 .projects { margin-top: 40px; }
 .projects h2 { font-size: 26px; }
 .project-title { font-size: 19px; }
 .project-list p { font-size: 17px; }
 .arcade-screen { opacity: 1; }
 .arcade-machine { opacity: .65; }
 .street { margin-top: calc(var(--scene-width) * -0.19); }
}
@media (prefers-reduced-motion: reduce) { .bird { display: none; } .arcade-machine, .arcade-screen { transition: none; } }

/* The projector and its projection are one continuous, keyboard-accessible link.
   Padding under the preview bridges the pointer's path from the projector. */
.cinema {
 position: absolute; left: 55%; bottom: 8.5%; width: 7.5%; height: 19%;
 z-index: 4; display: block; border: 0 !important; border-radius: 12px;
 cursor: pointer; touch-action: manipulation;
}
.cinema-projector {
 position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
 padding: 0; object-fit: contain; object-position: center bottom;
 filter: drop-shadow(3px 5px 3px #30201566);
 transition: filter .22s ease;
}
.cinema-preview {
 position: absolute; bottom: 100%; left: 18%; width: 370px;
 padding-bottom: 26px; opacity: 0; visibility: hidden;
 transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s;
 color: #fff1d8; text-align: center;
}
.cinema-frame {
 position: relative; display: block; padding: 5px; background: #312620;
 border: 1px solid #e3bd7a; border-radius: 4px;
 box-shadow: 0 0 22px #ffe0a966, 0 9px 26px #35201855;
}
.cinema-frame img { display: block; width: 100%; height: auto; padding: 0; border-radius: 1px; }
.cinema-play {
 position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%);
 width: 46px; height: 46px; line-height: 46px; border-radius: 50%;
 background: #18111dd9; color: #fff5db; font-size: 22px; padding-left: 3px;
 box-shadow: 0 0 0 1px #fff5db88;
}
.cinema-caption {
 display: inline-block; margin-top: 8px; padding: 4px 10px;
 border-radius: 3px; background: #332622; color: #fff1d8; font-size: 14px; line-height: 1.4;
}
.cinema-beam {
 position: absolute; left: 65%; bottom: 48%; width: 210px; height: 250px;
 pointer-events: none; opacity: 0; transform-origin: left bottom;
 clip-path: polygon(0 100%, 15% 0, 100% 0);
 background: linear-gradient(25deg, #fff2c56b, #fff2c508);
 transition: opacity .22s ease;
}
.cinema:hover .cinema-projector, .cinema:focus-visible .cinema-projector {
 filter: brightness(1.25) drop-shadow(0 0 8px #ffe2a8) drop-shadow(0 0 16px #ffd38288);
}
.cinema:hover .cinema-preview, .cinema:focus-visible .cinema-preview {
 opacity: 1; visibility: visible; transform: none;
}
.cinema:hover .cinema-beam, .cinema:focus-visible .cinema-beam { opacity: 1; }
.cinema:focus-visible { outline: 3px solid #0060a0; outline-offset: 5px; }
@media (min-width: 768px) and (max-width: 1100px) {
 .cinema { left: calc(35% + 65px); }
 .cinema-preview { left: auto; right: 0; }
 .street { margin-top: calc(var(--scene-width) * -0.115); }
}
@media (max-width: 767px) {
 .cinema { left: calc(35% + 65px); width: 95px; height: 125px; }
 .cinema-preview { left: auto; right: 16px; width: min(300px, calc(100vw - 40px)); }
 .cinema-beam { left: 15%; width: 130px; height: 210px; }
 .cinema-preview { opacity: 1; visibility: visible; transform: none; }
 .street { margin-top: calc(var(--scene-width) * -0.135); }
}
@media (hover: none), (pointer: coarse) {
 .cinema-preview { opacity: 1; visibility: visible; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
 .cinema-projector, .cinema-preview, .cinema-beam { transition: none; }
}