/* Cenografia exclusiva da abertura: esboço genérico, luz e linhas de perspectiva. */
body.gateway {
  position: relative;
  isolation: isolate;
  background: #20161e;
}
.gateway-scenography {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 86% 2%, #79434c 0%, transparent 48%),
    radial-gradient(ellipse at 6% 87%, #582432 0%, transparent 56%),
    #20161e;
}
.scenography-sketch {
  position: absolute;
  top: -4vh;
  right: -3vw;
  width: 103vw;
  max-width: none;
  height: 112vh;
  object-fit: cover;
  object-position: right top;
  opacity: .48;
  filter: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 2%, #000 44%);
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) scale(1.035);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1);
  animation: sketch-arrival 2.2s cubic-bezier(.16, 1, .3, 1) both;
}
.scenography-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #221720e8, #281a2460 42%, #20161e12 76%, #20161e35),
    linear-gradient(0deg, #20161ef2, #20161e90 22%, transparent 66%, #20161e25);
}
.scenography-grid {
  position: absolute;
  left: 36%;
  top: -24%;
  width: 105%;
  height: 125%;
  opacity: .35;
  background-image:
    linear-gradient(#e8b7c017 1px, transparent 1px),
    linear-gradient(90deg, #e8b7c020 1px, transparent 1px);
  background-size: 114px 114px;
  transform: perspective(950px) rotateX(55deg) rotateZ(-27deg) translateY(-2%);
  transform-origin: center top;
  mask-image: radial-gradient(ellipse at 48% 35%, #000, transparent 68%);
}
.scenography-light {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse at 80% 9%, #e9b5a519, transparent 31%),
    radial-gradient(ellipse at 14% 68%, #b8556214, transparent 38%);
  animation: architectural-light 17s ease-in-out infinite alternate;
}
.scenography-light::before,
.scenography-light::after {
  content: '';
  position: absolute;
  width: 95%;
  height: 1px;
  left: 25%;
  top: 24%;
  background: linear-gradient(90deg, transparent, #e3b5b541, #ffffff0c, transparent);
  transform: rotate(-24deg);
  transform-origin: left center;
}
.scenography-light::after {
  top: 51%;
  left: 61%;
  width: 60%;
  opacity: .65;
  transform: rotate(65deg);
}
.gateway-header { border-bottom-color: #e3c2cc30; }
.gateway-intro p { color: #d3c3ca; }
.gateway .destination {
  box-shadow: 0 24px 64px #0d091a33, 0 0 0 1px #edd5df16;
}
.gateway .destination:hover,
.gateway .destination:focus-visible {
  box-shadow: 0 30px 80px #0d091a4a, 0 0 0 1px #edd5df38;
}
@keyframes sketch-arrival {
  from { opacity: 0; transform: translate3d(25px, 15px, 0) scale(1.085); }
  to { opacity: .48; transform: translate3d(0, 0, 0) scale(1.035); }
}
@keyframes architectural-light {
  from { opacity: .65; transform: translate3d(-1%, 0, 0); }
  to { opacity: 1; transform: translate3d(1%, -1%, 0); }
}
@media (max-width: 700px) {
  .scenography-sketch {
    top: 0;
    right: -45vw;
    width: 175vw;
    height: 105svh;
    object-position: right top;
    opacity: .42;
    mask-image: linear-gradient(90deg, transparent, #000 35%);
    animation: none;
    transform: none;
  }
  .scenography-veil {
    background:
      linear-gradient(90deg, #20161ecc, #20161e30 80%),
      linear-gradient(0deg, #20161ee6, transparent 70%);
  }
  .scenography-grid {
    left: 20%;
    width: 190%;
    opacity: .2;
    background-size: 90px 90px;
  }
  .scenography-light { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scenography-sketch { animation: none; transition: none; transform: none; }
  .scenography-light { animation: none; }
}