:root { color-scheme: dark; --ease-out: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #000; color: #fff; font-family: Arial, sans-serif; }
.scene { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
.opening, .final-art { position: absolute; inset: 0; }
.opening { display: none; }
.wall { position: absolute; inset: 0; z-index: 1; background: url("assets/muro-vazio.png?v=3") left center / cover no-repeat; opacity: 0; transform: translateX(-3vw); transition: opacity 1.05s ease, transform 1.2s var(--ease-out); }
.scene.is-running .wall { opacity: 1; transform: translateX(0); }
.paint { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.panito { --frame: 0%; --x: 3vw; --y: 4vh; --rot: 0deg; --scale: .92; position: absolute; z-index: 5; left: 0; top: 0; width: clamp(210px, 25vw, 430px); aspect-ratio: 1 / 2; background-image: url("assets/panito-sprites.png?v=3"); background-repeat: no-repeat; background-size: 600% 100%; background-position: var(--frame) 0; filter: drop-shadow(0 24px 20px rgba(0, 0, 0, .72)); transform: translate3d(var(--x), var(--y), 0) rotate(var(--rot)) scale(var(--scale)); transform-origin: 50% 82%; will-change: transform, background-position; }
.spray-beam { position: absolute; z-index: 4; left: 38vw; top: 27vh; width: min(18vw, 310px); height: min(7vw, 100px); opacity: 0; transform: rotate(2deg) scaleX(.55); transform-origin: left center; background: radial-gradient(ellipse at left, rgba(255, 41, 215, .78), rgba(118, 57, 255, .3) 46%, transparent 74%); filter: blur(5px); pointer-events: none; transition: opacity .18s ease; }
.scene.is-painting .spray-beam { opacity: .78; animation: spray-pulse .22s ease-in-out infinite alternate; }
.final-art { z-index: 6; display: block; margin: 0; opacity: 1; pointer-events: none; }
.art-layer { position: absolute; display: block; margin: 0; overflow: visible; }
.art-layer img { display: block; width: 100%; height: auto; max-width: none; }
.panito-layer { z-index: 1; left: 0; bottom: 0; width: min(65vw, 130svh); top: auto; transform: none; }
.message-layer { z-index: 2; left: 50%; top: 50%; width: min(42vw, 130svh); transform: translate(-50%, -50%); }
.spray-layer { z-index: 3; left: 0; bottom: 0; width: min(65vw, 130svh); top: auto; transform: none; clip-path: polygon(45% 20%, 53% 18%, 68% 9%, 85% 7%, 100% 10%, 100% 55%, 88% 52%, 72% 47%, 58% 40%, 48% 33%, 44% 27%); }
.scene.is-finished .final-art { opacity: 1; transform: scale(1); animation: living-frame 8s ease-in-out 1.2s infinite alternate; }
.scene.is-finished .opening { opacity: 0; filter: blur(2px); }
.replay { display: none; }
.scene.is-finished .replay { opacity: 1; transform: translateY(0); }
.replay:hover { color: #fff; border-color: #fff; }
.replay:focus-visible { outline: 2px solid #16d9ff; outline-offset: 5px; }
.replay-icon { font-size: 1.15em; }
.contact-footer { position: absolute; z-index: 8; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; width: max-content; max-width: min(96vw, 1000px); transform: translateX(-50%); pointer-events: none; }
.contact-sticker { --sticker: #16d9ff; position: relative; display: flex; min-height: 70px; max-width: min(48vw, 250px); align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--sticker) 35%, transparent); border-radius: 12px 9px 13px 8px; background: rgba(0, 0, 0, .24); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; pointer-events: auto; transition: transform .18s ease, filter .18s ease; }
.contact-sticker:nth-child(2) { transform: rotate(1deg); }
.contact-sticker:nth-child(3) { transform: rotate(-1deg); }
.contact-sticker:nth-child(4) { transform: rotate(.7deg); }
.sticker-instagram { --sticker: #ff42d0; transform: rotate(-.8deg); }
.sticker-gallery { --sticker: #a881ff; }
.sticker-whatsapp { --sticker: #b8f542; }
.sticker-maps { --sticker: #16d9ff; }
.contact-sticker > img { flex: 0 0 72px; width: 72px; height: 72px; object-fit: contain; }
.contact-sticker > span { display: block; }
.contact-sticker > span small { white-space: nowrap; }
.contact-sticker small { display: block; margin-top: 2px; color: rgba(255,255,255,.82); font-size: 10px; font-weight: 500; line-height: 1.3; }
.contact-sticker:hover { z-index: 1; transform: translateY(-3px) rotate(0); filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sticker) 65%, transparent)); }
.contact-sticker:focus-visible { z-index: 2; outline: 3px solid #fff; outline-offset: 3px; }
.developer-credit { display: flex; justify-content: center; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 1px; color: rgba(255,255,255,.76); font-size: 11px; }
.developer-credit a { display: inline-flex; padding: 3px; }
.developer-credit img { display: block; width: 108px; height: auto; }
.developer-credit a:focus-visible { outline: 2px solid #16d9ff; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.no-script-art { z-index: 20; }
@keyframes spray-pulse { from { transform: rotate(1deg) scaleX(.78) scaleY(.88); opacity: .55; } to { transform: rotate(3deg) scaleX(1.04) scaleY(1.08); opacity: .88; } }
@keyframes living-frame { from { transform: scale(1); } to { transform: scale(1.006); } }
@media (orientation: portrait) and (max-width: 900px) {
  .wall { width: 150%; background-position: 4% center; transform-origin: left center; }
  .panito { width: clamp(190px, 62vw, 350px); --x: -6vw; --y: 3vh; --scale: .9; }
  .panito-layer { bottom: 0; top: auto; width: min(94vw, 47svh); transform: none; }
  .message-layer { top: 50%; width: min(70vw, 47svh); transform: translate(-50%, -50%); }
  .spray-layer { bottom: 0; top: auto; width: min(94vw, 47svh); transform: none; clip-path: polygon(57% 27%, 64% 25%, 73% 32%, 84% 49%, 95% 69%, 100% 84%, 100% 100%, 92% 100%, 82% 90%, 73% 80%, 66% 68%, 60% 54%, 56% 39%); }
  .contact-footer { bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(calc(100vw - 20px), 440px); max-width: none; }
  .contact-sticker { width: 100%; max-width: none; min-height: 58px; padding: 4px 4px; gap: 4px; font-size: 10px; }
  .contact-sticker > img { flex-basis: 50px; width: 50px; height: 50px; }
  .contact-sticker small { font-size: 9px; }
  .sticker-maps { min-height: 58px; }
  .sticker-maps small { font-size: 8px; }
  .developer-credit { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 7px; padding-top: 1px; color: rgba(255,255,255,.76); font-size: 10px; }
  .developer-credit img { display: block; width: 92px; height: auto; }
  .spray-beam { left: 47vw; top: 27vh; width: 42vw; height: 16vw; transform: rotate(48deg) scaleX(.55); }
  .scene.is-painting .spray-beam { animation-name: spray-pulse-mobile; }
  .replay { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
}
@keyframes spray-pulse-mobile { from { transform: rotate(48deg) scaleX(.78) scaleY(.88); opacity: .55; } to { transform: rotate(50deg) scaleX(1.04) scaleY(1.08); opacity: .88; } }
@media (prefers-reduced-motion: reduce) {
  .opening { display: none; }
  .final-art { opacity: 1; transform: none; transition: none; }
  .scene.is-finished .final-art { animation: none; }
  .replay { display: none; }
}