/* Cinematic states are progressive enhancement. Without JavaScript the site is visible. */
.brand-loader,
.pyramid-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #080b08;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.brand-loader {
  background: #000;
  display: grid;
  place-items: center;
  perspective: 900px;
  transition: opacity .65s ease, visibility .65s;
}
.cinematic-loading .brand-loader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: cinematic-loader-safety .35s 6s forwards;
}
.loader-logo {
  width: clamp(84px, 8vw, 112px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: cinematic-logo-turn 6s cubic-bezier(.45, 0, .55, 1) infinite;
  filter: drop-shadow(0 0 20px #c5a66c12);
}
.loader-logo img {
  mix-blend-mode: screen;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: cinematic-logo-light 5s ease-in-out infinite;
}
html.cinematic-loading,
html.cinematic-navigating { overflow: hidden; }
.cinematic-loading body,
.cinematic-navigating body { touch-action: none; }
.pyramid-transition {
  z-index: 1010;
  background: #080806;
}
.pyramid-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.transition-scene,
.transition-veil { position: absolute; inset: 0; }
.transition-scene { overflow: hidden; opacity: 0; }
.transition-scene img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
}
.transition-veil {
  background: #030403;
  opacity: 0;
  pointer-events: none;
}
.transition-caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: max(35px, env(safe-area-inset-bottom));
  font-size: 10px;
  line-height: 1.5;
  font-family: var(--sans, Arial, sans-serif);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  color: #f3efe5;
  opacity: 0;
  pointer-events: none;
}
.pyramid-portal { -webkit-user-drag: none; }
.cinematic-arrival body { animation: cinematic-arrival .6s ease-out both; }
@keyframes cinematic-arrival { from { opacity: 0; } to { opacity: 1; } }
@keyframes cinematic-logo-turn {
  0%, 100% { transform: rotateX(7deg) rotateY(-24deg) rotateZ(-1deg) translateZ(0); }
  50% { transform: rotateX(-7deg) rotateY(24deg) rotateZ(1deg) translateZ(10px); }
}
@keyframes cinematic-logo-light {
  0%, 100% { filter: brightness(.95); }
  50% { filter: brightness(1.17) drop-shadow(0 0 8px #c5a66c22); }
}
@keyframes cinematic-loader-safety {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader, .pyramid-transition { display: none !important; }
  html.cinematic-loading, html.cinematic-navigating { overflow: visible; }
  .cinematic-loading body, .cinematic-navigating body { touch-action: auto; }
  .cinematic-arrival body { animation: none; }
}