.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  isolation: isolate;
  color: #fffdf9;
  background: #205d7f;
  font-family: var(--body, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif);
  transform: translate3d(0, 0, 0);
  opacity: 1;
  touch-action: none;
  overscroll-behavior: contain;
}

.intro-overlay[hidden] { display: none !important; }

.intro-media,
.intro-canvas,
.intro-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro-media { overflow: hidden; }

.intro-image {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center 66%;
  pointer-events: none;
  user-select: none;
}

.intro-canvas { display: block; opacity: 0; pointer-events: none; }
.intro-has-ripples .intro-canvas { opacity: 1; }
.intro-fallback .intro-media { animation: intro-camera 4.2s cubic-bezier(.16, 1, .3, 1) both; }

.intro-shade {
  pointer-events: none;
  background: linear-gradient(180deg, rgb(7 35 57 / .07), rgb(7 35 57 / .05) 30%, rgb(5 29 48 / .35) 64%, rgb(5 29 48 / .1));
}

.intro-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  padding: 32px;
  text-align: center;
  pointer-events: none;
}

.intro-name {
  margin: 0;
  font-family: var(--display, "Bodoni Moda", Georgia, serif);
  font-size: clamp(72px, 10vw, 144px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
  text-shadow: 0 5px 30px rgb(5 29 48 / .17);
  animation: intro-name-in 1.1s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-line {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.9;
  letter-spacing: .12em;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgb(5 29 48 / .4);
  animation: intro-line-in 1.15s .15s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-skip {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  right: max(var(--page-gutter, 32px), env(safe-area-inset-right));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(255 253 249 / .42);
  border-radius: 0;
  background: rgb(5 29 48 / .36);
  color: #fffdf9;
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}

.intro-skip:hover { background: rgb(5 29 48 / .58); border-color: #fffdf9; }
.intro-skip:active { background: rgb(5 29 48 / .72); }
.intro-skip:focus { outline: none; }
.intro-skip:focus-visible { outline: 2px solid #fffdf9; outline-offset: 5px; }
.intro-overlay::selection { color: #073451; background: #fffdf9; }

.intro-overlay[data-state="leaving"] {
  will-change: transform, opacity;
  animation: intro-curtain-up var(--intro-exit-duration, 800ms) cubic-bezier(.76, 0, .24, 1) both;
}

.intro-overlay[data-state="leaving"] .intro-copy {
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.intro-overlay[data-state="leaving"] .intro-skip { opacity: 0; pointer-events: none; }
.intro-is-paused, .intro-is-paused * { animation-play-state: paused !important; }

@keyframes intro-camera {
  from { transform: scale(1.025) translate3d(0, .3%, 0); }
  to { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes intro-name-in {
  from { opacity: .15; transform: translate3d(0, 12px, 0); clip-path: inset(0 0 24%); }
  to { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0); }
}

@keyframes intro-line-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-curtain-up {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: translate3d(0, -101%, 0); opacity: 0; }
}

@media (max-width: 700px) {
  .intro-copy { gap: 24px; padding-inline: 30px; }
  .intro-name { font-size: clamp(70px, 20vw, 112px); }
  .intro-line { max-width: 23ch; font-size: 12px; line-height: 2; }
  .intro-skip { top: max(18px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none !important; }
  .intro-overlay, .intro-overlay * { animation: none !important; transition: none !important; }
}