/* Monetor opening: one promise, one product, a single plane of light. */
.opening {
  --device-width: clamp(320px, 40svh, 410px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  padding: calc(118px + env(safe-area-inset-top)) 0 30px;
  background: #1f1f1f;
  color: #fff;
}

.opening__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--gutter);
  text-align: center;
  animation: opening-copy-in 800ms cubic-bezier(.2,.7,.2,1) both;
}

.opening__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(72px, 7.8vw, 120px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.opening__break,
.opening__mobile-break { display: none; }

.opening__lead {
  margin: 22px auto 0;
  max-width: 620px;
  color: #bdbdbd;
  font-size: 17px;
  line-height: 1.5;
  text-wrap: balance;
}

.opening__cta.btn {
  justify-content: center;
  gap: 18px;
  min-height: 52px;
  margin-top: 26px;
  padding: 13px 23px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: -.01em;
  transition: background 180ms ease, box-shadow 180ms ease;
}

.opening__cta svg { transition: transform 220ms var(--ease); }
.opening__cta:hover {
  box-shadow: 0 0 28px rgba(214,255,99,.12);
}
.opening__cta:hover svg { transform: translateX(3px); }

.opening__fine {
  margin: 12px 0 0;
  color: #9a9a9a;
  font-size: 12px;
  line-height: 1.5;
}

.opening__stage {
  position: relative;
  flex: none;
  width: 100%;
  height: calc(var(--device-width) * 1.62);
  margin: 27px 0 0;
  display: grid;
  place-items: start center;
  /* Light extends beyond the stage to keep the background continuous. */
}

.opening__light {
  position: absolute;
  z-index: -1;
  top: -15%;
  left: 50%;
  width: min(1300px, 150vw);
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side at 50% 50%, #3b3d33 0%, rgba(47,48,42,.6) 38%, transparent 100%);
  pointer-events: none;
}

.opening__device {
  position: relative;
  width: var(--device-width);
  -webkit-mask-image: linear-gradient(#000 0%, #000 68%, transparent 84%);
  mask-image: linear-gradient(#000 0%, #000 68%, transparent 84%);
  transform: perspective(1500px) rotateX(9deg) rotateZ(-7deg);
  transform-origin: 50% 25%;
  filter: drop-shadow(20px 28px 26px rgba(0,0,0,.4));
  animation: opening-device-in 1100ms cubic-bezier(.2,.7,.2,1) 120ms both;
}

.opening__shot { width: 100%; height: auto; }

.opening__more {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: -24px;
  padding: 12px;
  color: #bdbdbd;
  font-size: 13px;
  line-height: 1.5;
  transition: color 180ms ease;
}
.opening__more svg {
  transform: rotate(90deg);
  transition: transform 220ms var(--ease);
}
.opening__more:hover { color: #fff; }
.opening__more:hover svg { transform: translateY(3px) rotate(90deg); }
.opening__more:focus-visible {
  outline: 2px solid #d6ff63;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Keep the existing navigation clear of the composition at intermediate widths. */
body:has(.opening) .nav__cta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
@media (min-width: 841px) and (max-width: 1100px) {
  body:has(.opening) .nav__cta { display: none; }
  body:has(.opening) .nav__links { gap: 22px; }
}

@keyframes opening-copy-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes opening-device-in {
  from { opacity: 0; transform: perspective(1500px) translateY(34px) rotateX(15deg) rotateZ(-10deg); }
  to { opacity: 1; transform: perspective(1500px) translateY(0) rotateX(9deg) rotateZ(-7deg); }
}

@media (min-width: 861px) and (max-height: 820px) {
  .opening { padding-top: 102px; --device-width: clamp(260px, 37svh, 310px); }
  .opening__title { font-size: clamp(70px, 7vw, 96px); }
  .opening__lead { margin-top: 16px; }
  .opening__cta.btn { margin-top: 20px; min-height: 48px; }
  .opening__stage { margin-top: 20px; }
}

@media (max-width: 860px) {
  .opening {
    --device-width: 340px;
    padding-top: calc(105px + env(safe-area-inset-top));
    padding-bottom: 20px;
  }
  .opening__title { font-size: clamp(60px, 8.9vw, 76px); }
  .opening__lead { max-width: 470px; font-size: 16px; }
  .opening__stage { margin-top: 28px; }
}

@media (max-width: 600px) {
  .opening {
    --device-width: clamp(270px, 78vw, 335px);
    padding-top: calc(92px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .opening__copy { padding-inline: 20px; }
  .opening__title {
    font-size: clamp(52px, 14.4vw, 64px);
    line-height: .98;
    letter-spacing: -.06em;
  }
  .opening__break,
  .opening__mobile-break { display: block; }
  .opening__lead {
    max-width: 340px;
    margin-top: 19px;
    font-size: 15px;
    line-height: 1.5;
  }
  .opening__cta.btn { margin-top: 22px; min-height: 50px; }
  .opening__fine { margin-top: 11px; }
  .opening__stage { margin-top: 24px; height: calc(var(--device-width) * 1.62); }
  .opening__device { transform: perspective(1500px) rotateX(9deg) rotateZ(-7deg); }
  .opening__more { margin-top: -10px; }
}

@media (max-width: 360px), (max-width: 600px) and (max-height: 700px) {
  .opening { --device-width: 244px; padding-top: calc(80px + env(safe-area-inset-top)); }
  .opening__title { font-size: 48px; }
  .opening__lead { margin-top: 15px; font-size: 14px; max-width: 290px; }
  .opening__cta.btn { margin-top: 18px; min-height: 48px; }
  .opening__fine { margin-top: 10px; }
  .opening__stage { margin-top: 18px; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .opening { --device-width: 228px; padding-top: calc(76px + env(safe-area-inset-top)); }
  .opening__title { font-size: 44px; }
  .opening__lead { margin-top: 12px; font-size: 13px; }
  .opening__cta.btn { margin-top: 16px; }
  .opening__stage { margin-top: 12px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .opening { padding-top: 92px; --device-width: 280px; }
  .opening__title { font-size: 60px; }
  .opening__break { display: none; }
  .opening__lead { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening__copy,
  .opening__device { animation: none; }
  .opening__cta.btn,
  .opening__cta svg,
  .opening__more,
  .opening__more svg { transition: none; }
}