:root{
  --bg:#050505;
  --gold:#d8aa67;
  --soft:#f2d5a4;
  --muted:#b8a891;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#050505;
  color:white;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
.cover-link{
  display:block;
  width:100vw;
  height:100vh;
  background:#000;
  cursor:pointer;
}
.cover-link img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.cinema{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,170,103,.18), transparent 36rem),
    linear-gradient(180deg,#090706,#050505 45%,#120d0a);
}
.scene{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:8vh 4vw;
  position:relative;
  overflow:hidden;
}
.scene:before{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 50%,transparent 20%,rgba(0,0,0,.68) 72%);
  pointer-events:none;
  z-index:2;
}
.scene img{
  position:relative;
  z-index:1;
  max-width:min(92vw,1150px);
  max-height:86vh;
  object-fit:contain;
  border-radius:26px;
  box-shadow:0 45px 120px rgba(0,0,0,.65);
  border:1px solid rgba(216,170,103,.25);
  transform:translateY(60px) scale(.94);
  opacity:.25;
  filter:saturate(.85) contrast(1.05);
  transition:transform .9s cubic-bezier(.2,.7,.1,1), opacity .9s, filter .9s;
}
.scene.visible img{
  transform:translateY(0) scale(1);
  opacity:1;
  filter:saturate(1.08) contrast(1.08);
}
.title-card{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9vh 5vw;
  position:relative;
  overflow:hidden;
}
.title-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(216,170,103,.22),transparent 35rem),
    linear-gradient(135deg,rgba(255,255,255,.04),transparent);
  opacity:.9;
}
.title-card .inner{
  position:relative;
  z-index:2;
  max-width:1100px;
}
.line{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,7vw,112px);
  line-height:1.03;
  color:var(--soft);
  margin:22px 0;
  letter-spacing:.01em;
  text-shadow:0 24px 80px rgba(0,0,0,.75);
}
.code{
  display:inline-block;
  color:var(--gold);
  border:1px solid rgba(216,170,103,.5);
  border-radius:999px;
  padding:12px 20px;
  margin:10px;
  letter-spacing:.22em;
  font-size:clamp(15px,2vw,24px);
}
.gallery{
  padding:8vh 4vw 12vh;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.card{
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(216,170,103,.25);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
  transform:translateY(40px);
  opacity:.35;
  transition:transform .8s, opacity .8s;
}
.card.visible{
  transform:translateY(0);
  opacity:1;
}
.card img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  display:block;
}
.final{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10vh 5vw;
  background:
    radial-gradient(circle at 50% 50%, rgba(216,170,103,.24), transparent 35rem),
    #040303;
}
.final .line{font-size:clamp(48px,8vw,128px)}
.back{
  position:fixed;
  left:18px;
  top:18px;
  z-index:20;
  color:rgba(255,255,255,.75);
  text-decoration:none;
  border:1px solid rgba(216,170,103,.35);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
}
@media(max-width:850px){
  .gallery{grid-template-columns:1fr; padding-left:16px; padding-right:16px}
  .card,.card img{min-height:520px}
  .scene{padding-left:12px;padding-right:12px}
  .scene img{max-width:96vw}
}