.opening[open] {
  --opening-ink: #f1e8d3;
  --opening-muted: #bdb19a;
  --opening-line: #554831;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 4dvh, 48px);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(22px, env(safe-area-inset-top)) max(clamp(20px, 5vw, 74px), env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(clamp(20px, 5vw, 74px), env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: radial-gradient(ellipse at 53% 45%, #251e12 0%, #100e0a 36%, #090806 80%);
  color: var(--opening-ink);
  font-family: var(--sans);
}
.opening::backdrop { background: transparent; }

.opening-sponsor {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.opening-ministry {
  display: block;
  width: auto;
  max-width: min(100%, 184px);
  height: 40px;
  object-fit: contain;
}
.opening-grant {
  margin: 0;
  color: var(--opening-muted);
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.45;
}
.opening-grant span { display: block; }

.opening-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  width: min(100%, 1260px);
  margin: auto;
}
.opening-title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(30px, 4.25vw, 64px);
  line-height: 1.04;
  letter-spacing: -.054em;
  font-weight: 400;
  text-wrap: balance;
}
.opening-title:focus { outline: 0; }
.opening-title span {
  display: block;
  margin-bottom: .75rem;
  color: var(--opening-muted);
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 500;
  letter-spacing: .015em;
}
.opening-title strong { font-weight: 600; }

.opening-cube-scene {
  --cube-size: clamp(68px, 10.5vw, 150px);
  --cube-half: calc(var(--cube-size) / 2);
  display: grid;
  place-items: center;
  width: calc(var(--cube-size) * 1.56);
  aspect-ratio: 1;
  perspective: calc(var(--cube-size) * 3.6);
  pointer-events: none;
}
.opening-cube-follow,
.opening-cube {
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
}
.opening-cube-follow {
  transform: translate3d(var(--cube-follow-x, 0px), var(--cube-follow-y, 0px), 0)
    rotateX(var(--cube-look-x, 0deg)) rotateY(var(--cube-look-y, 0deg));
  transition: transform .46s cubic-bezier(.19, .65, .29, 1);
}
.opening-cube {
  position: relative;
  transform: rotateX(-15deg) rotateY(28deg) rotateZ(-4deg);
}
.opening-edge {
  --edge-x: 0;
  --edge-y: 0;
  --edge-z: 0;
  position: absolute;
  top: calc(50% - .75px);
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #f4d99de8;
  box-shadow: 0 0 5px #f4d99d42;
  translate: calc(var(--cube-half) * var(--edge-x)) calc(var(--cube-half) * var(--edge-y)) calc(var(--cube-half) * var(--edge-z));
  animation: opening-breath var(--cube-breath-time, 12s) ease-in-out infinite;
}
.opening-edge-x { --edge-y: var(--edge-side-y, 1); --edge-z: var(--edge-side-z, 1); }
.opening-edge-y { --edge-x: var(--edge-side-x, 1); --edge-z: var(--edge-side-z, 1); rotate: z 90deg; }
.opening-edge-z { --edge-x: var(--edge-side-x, 1); --edge-y: var(--edge-side-y, 1); rotate: y 90deg; }
.edge-negative-x { --edge-side-x: -1; }
.edge-negative-y { --edge-side-y: -1; }
.edge-negative-z { --edge-side-z: -1; }
@keyframes opening-breath {
  42%, 51% {
    translate: calc(var(--cube-size) * .60 * var(--edge-x)) calc(var(--cube-size) * .60 * var(--edge-y)) calc(var(--cube-size) * .60 * var(--edge-z));
    scale: .88 1;
  }
}

.opening-quote {
  max-width: 32ch;
  margin: 0;
  padding-inline-start: clamp(13px, 2vw, 25px);
  border-inline-start: 1px solid var(--opening-line);
}
.opening-quote blockquote {
  margin: 0;
  color: var(--opening-ink);
  font-size: clamp(15px, 1.65vw, 23px);
  line-height: 1.38;
  text-wrap: pretty;
}
.opening-quote figcaption {
  margin-top: .75rem;
  color: var(--opening-muted);
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.4;
}

.opening-actions {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--opening-muted);
}
.opening-status { margin: 0; font-size: 11px; }
.opening-progress {
  width: 124px;
  height: 2px;
  margin-bottom: 4px;
  border: none;
  background: var(--opening-line);
  color: #ecd18f;
  accent-color: #ecd18f;
}
.opening-progress::-webkit-progress-bar { background: var(--opening-line); }
.opening-progress::-webkit-progress-value { background: #ecd18f; }
.opening-progress::-moz-progress-bar { background: #ecd18f; }
.opening-dismiss {
  display: none;
  min-height: 34px;
  padding: 3px 9px;
  color: var(--opening-muted);
  font-size: 11px;
}
.opening-dismiss:hover { color: var(--opening-ink); }
.opening-actions button:focus-visible { outline: 2px solid #f5d995; outline-offset: 3px; }
.opening-review { cursor: pointer; }
.opening-review .opening-actions > :not(.opening-dismiss) { display: none; }
.opening-review .opening-dismiss { display: block; }

.footer-actions { column-gap: clamp(7px, 1.1vw, 14px); }
.intro-button {
  min-height: 36px;
  padding-inline: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.intro-button:hover, .intro-button:focus-visible { color: var(--paper); }

.opening-brands,
.opening-project-brands {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.opening-brands img { display: block; height: 40px; object-fit: contain; }
.opening-arde { width: 42px; filter: brightness(0) invert(1); }
.opening-fragua {
  width: 84px;
  mask: url('media/fraguar-logo.png') center / contain no-repeat;
  mask-mode: luminance;
}
.opening-cotero { width: 40px; }

.masthead .sound-header-actions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.sound-header-actions .sound-listen { position: static; }
.sound-reload-indicator {
  position: fixed;
  z-index: 8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 12px #000);
}
.sound-reload-indicator .opening-cube-scene { --cube-size: clamp(38px, 6vw, 64px); }

@media (max-width: 700px) {
  .opening-body {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(12px, 3dvh, 23px) 13px;
    max-width: 460px;
  }
  .opening-title { font-size: clamp(27px, 7vw, 43px); }
  .opening-title span { margin-bottom: .45rem; }
  .opening-quote { grid-column: 1 / -1; max-width: 42ch; }
  .opening-quote blockquote { font-size: clamp(15px, 4vw, 20px); }
  .opening-quote figcaption { margin-top: .45rem; }
  .opening-cube-scene { --cube-size: clamp(56px, 13vw, 80px); }
}
@media (max-width: 650px) {
  .masthead .sound-header-actions { top: calc(100% - 2px); gap: 5px; }
}
@media (max-width: 360px) {
  .footer-actions #pause-button > span { display: inline; }
}
@media (max-height: 530px) {
  .opening[open] { gap: 13px; padding-block: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-bottom)); }
  .opening-body { gap: 12px; }
  .opening-sponsor { gap: 5px; }
  .opening-cube-scene { --cube-size: clamp(52px, 12dvh, 80px); }
  .opening-actions { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-edge { animation: none; }
  .opening-cube-follow { transform: none; transition: none; }
}