/* One viewport for the brand film and the opening text. The gallery photo is underneath. */
html[data-opening-boot],
html[data-opening-boot] body,
body:is([data-opening-phase], [data-opening-handoff]) {
  background: #000;
}

html[data-opening-boot] :is(#experience, .localized-gallery-header, #rodape, .skip),
body:is([data-opening-phase], [data-opening-handoff]) :is(.localized-gallery-header, #experience .copy, #navigation, .skip) {
  visibility: hidden;
  opacity: 0;
}

body:is([data-opening-phase], [data-opening-handoff]) #rodape,
body:is([data-opening-phase], [data-opening-handoff])[data-current="entrada"] #experience .shade::after {
  display: none;
}

#brand-opening {
  position: fixed;
  inset: 0;
  z-index: 120;
  isolation: isolate;
  color: #fff;
  --opening-side: clamp(20px, 5vw, 72px);
  --opening-screen: 100vh;
  --opening-screen: 100dvh;
  --opening-top: max(58px, calc(env(safe-area-inset-top, 0px) + 44px));
  --opening-bottom: max(54px, calc(env(safe-area-inset-bottom, 0px) + 44px));
  --opening-reading-height: max(0px, calc(var(--opening-screen) - var(--opening-top) - var(--opening-bottom)));
}

#brand-opening[hidden],
#brand-opening [hidden] {
  display: none;
}

.opening-darkness,
.opening-film,
.opening-reading {
  position: absolute;
  inset: 0;
}

.opening-darkness {
  background: #000;
  pointer-events: none;
}

#brand-opening[data-revealing] .opening-darkness {
  background: radial-gradient(
    ellipse var(--opening-light-width) var(--opening-light-height) at
    var(--opening-light-x) var(--opening-light-y),
    rgb(0 0 0 / var(--opening-light-center)) 0%,
    rgb(0 0 0 / var(--opening-light-shoulder)) 36%,
    #000 100%
  );
  opacity: var(--opening-darkness, 1);
}

#brand-opening[data-revealing] .opening-darkness::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: max(0px, calc(var(--bh-footer, 0px) - 1px));
  height: clamp(38px, 10vh, 82px);
  background: linear-gradient(transparent, #000);
}

.opening-film {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}

.opening-reading,
.opening-type-probe {
  inset-block: var(--opening-top) var(--opening-bottom);
}

.opening-reading {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color-scheme: dark;
  touch-action: pinch-zoom;
}

.opening-reading[data-overflow] { touch-action: pan-y pinch-zoom; }

.opening-beat {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-block-size: var(--opening-reading-height);
  padding: 18px var(--opening-side);
  text-align: center;
}

.opening-beat :is(h1, p) {
  max-inline-size: min(100%, 25ch);
  margin: 0;
  font: 400 clamp(40px, 6.5vw, 92px) / 1.06 Cormorant, Georgia, serif;
  letter-spacing: -.034em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.opening-beat .opening-prose {
  max-inline-size: min(100%, 690px);
  font-size: clamp(24px, 3.05vw, 41px);
  font-weight: 500;
  line-height: 1.21;
  letter-spacing: -.014em;
  text-wrap: pretty;
}

.opening-beat .opening-statement { font-size: clamp(32px, 5.4vw, 77px); }

.opening-beat .opening-brand {
  white-space: nowrap;
  overflow-wrap: normal;
}

.opening-beat [data-opening-gold] {
  color: #efbe6a;
  font-weight: 700;
}

.opening-beat .opening-greeting > span,
.opening-beat .opening-signature > * {
  display: block;
}

.opening-beat .opening-signature {
  opacity: var(--opening-closing-opacity, 1);
  text-shadow: 0 2px 22px #000b;
}

.opening-signature > :first-child { font-size: 1.23em; }
.opening-signature > :nth-child(2) { font-size: .55em; line-height: 1.21; }
.opening-signature > :last-child { font-size: .77em; }

.opening-particle-layer,
.opening-particle-layer canvas,
.opening-type-probe {
  position: absolute;
  inset-inline: 0;
  width: 100%;
  pointer-events: none;
}

.opening-particle-layer,
.opening-particle-layer canvas {
  inset-block: 0;
  height: 100%;
}

.opening-type-probe { visibility: hidden; overflow: clip; }

#brand-opening[data-lettering="active"] .opening-reading .opening-beat :is(h1, p),
#brand-opening[data-lettering="loading"][data-opening-hold] .opening-reading .opening-beat :is(h1, p) {
  opacity: 0;
}

.opening-actions {
  position: absolute;
  inset-block-start: max(12px, env(safe-area-inset-top, 0px));
  inset-inline-end: max(var(--opening-side), env(safe-area-inset-right, 0px));
  display: flex;
  gap: 14px;
  align-items: center;
}

.opening-actions :is(a, button),
.opening-next,
.opening-tilt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  border: 0;
  padding: 0 5px;
  background: transparent;
  color: #f2eee8;
  font: 500 12px / 1.25 Manrope, Arial, sans-serif;
  text-shadow: 0 1px 6px #000;
}

.opening-actions :is(a, button):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.opening-next {
  position: absolute;
  inset-block-end: max(10px, env(safe-area-inset-bottom, 0px));
  inset-inline-start: calc(50% - 22px);
  filter: drop-shadow(0 1px 4px #000);
}

.opening-tilt {
  position: absolute;
  inset-block-end: max(10px, env(safe-area-inset-bottom, 0px));
  inset-inline-start: max(var(--opening-side), env(safe-area-inset-left, 0px));
}

.opening-tilt[aria-pressed="true"] {
  color: #efbe6a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.opening-tilt-status {
  position: absolute;
  inset-block-end: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 44px);
  inset-inline-start: max(var(--opening-side), env(safe-area-inset-left, 0px));
  max-inline-size: min(75vw, 28rem);
  margin: 0;
  padding: 4px 5px;
  background: #000;
  color: #f2eee8;
  font: 500 12px / 1.25 Manrope, Arial, sans-serif;
}

.opening-next svg {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

#brand-opening :is(a, button):focus-visible {
  outline: 2px solid #f2ddba;
  outline-offset: 3px;
}

#brand-opening:focus,
.opening-reading:focus {
  outline: none;
}

.opening-reading:focus-visible:not([data-initial-focus]) {
  outline: 1px solid #f2ddba7a;
  outline-offset: -3px;
}

@media (max-height: 500px) {
  .opening-beat { padding-block: 12px; }
  .opening-beat :is(h1, p) { font-size: clamp(27px, 9.5vh, 51px); }
  .opening-beat .opening-prose { font-size: clamp(17px, 5.25vh, 24px); }
}