@charset "UTF-8";
/* Atmosfera fixa: a "Cinema" da prévia aprovada (luz 38, sombra 62, grão 28). */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080808;color:#e8e5df;--base-brightness:.426;--light-opacity:.399;--vignette:.56;--light-x:42%;--light-y:42%;--grain-opacity:.032}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid #e4d4b4;outline-offset:5px}
[hidden]{display:none!important}
::selection{background:#bda37a;color:#080808}

#experience{height:100svh;min-height:420px;position:relative;isolation:isolate;overflow:hidden;background:#080808}
.scene{position:absolute;inset:0;z-index:-1;overflow:hidden}
.art-window{position:absolute;inset:0;overflow:hidden}
.paper{position:absolute;inset:0;transform:scale(1.008);transform-origin:46% 53%;will-change:transform}
.paper-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:44% 50%;user-select:none;-webkit-user-select:none;pointer-events:none}
.base{filter:brightness(var(--base-brightness))}
.reveal{opacity:var(--light-opacity);filter:brightness(.94);mask-image:radial-gradient(ellipse 27% 64% at var(--light-x) var(--light-y),#000 0%,rgba(0,0,0,.78) 32%,rgba(0,0,0,.3) 64%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 27% 64% at var(--light-x) var(--light-y),#000 0%,rgba(0,0,0,.78) 32%,rgba(0,0,0,.3) 64%,transparent 100%)}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 45% 47%,transparent 18%,rgba(0,0,0,.15) 52%,rgba(0,0,0,.85) 100%);opacity:var(--vignette)}
#grain{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:soft-light;opacity:var(--grain-opacity);pointer-events:none}
.edge-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.46),transparent 27%,transparent 69%,rgba(0,0,0,.66))}

.entrar{position:absolute;top:36px;right:40px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:rgba(10,10,10,.26);border:1px solid #ffffff20;border-radius:3px;color:#e8e5df;font-size:12px;letter-spacing:.06em;text-decoration:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s,border-color .2s}
.entrar:hover{background:#ffffff12;border-color:#ffffff40}

.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}
.load-error{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#111;z-index:5}
.load-error p{font-size:14px}
.load-error button{padding:12px;background:transparent;border:1px solid #888}

@media(min-aspect-ratio:2/1){.paper-image{object-fit:contain}}

@media(max-width:700px){
  .entrar{top:23px;right:23px}
  .art-window{top:46%;bottom:auto;height:min(62svh,115vw);transform:translateY(-50%);mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 87%,transparent)}
  .paper-image{object-fit:cover;object-position:40% 50%}
  .edge-fade{background:linear-gradient(180deg,#080808 3%,transparent 27%,transparent 56%,#080808 84%)}
  .vignette{background:radial-gradient(ellipse at 48% 45%,transparent 25%,rgba(0,0,0,.3) 68%,#000 100%)}
}

@media(max-height:580px) and (min-width:701px){.entrar{top:22px;right:27px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.paper{will-change:auto}}