/*
 * intro-screen.css
 * Intro screens.
 *
 * Current intro flow:
 * - intro.welcome: cover screen with logo and "Започни приключението" button.
 * - intro.start: story/start screen with text box and "Започни играта" button.
 *
 * Both intro screens now use the room background system through:
 * - config/media.php -> screenBackgrounds
 * - assets/images/rooms/intro-room.png
 *
 * The old gradient/orb styles are kept for backward compatibility, but the
 * current router renders intro.welcome and intro.start as room-based screens.
 */

.intro-screen {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-bg-deep);
}

.intro-screen .screen-scroll,
.intro-welcome-screen .screen-scroll,
.intro-start-screen .screen-scroll {
  position: relative;
  z-index: 2;
}

.intro-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 157, 79, 0.22), transparent 34%),
    radial-gradient(circle at 78% 74%, rgba(139, 45, 24, 0.34), transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(55, 8, 8, 0.72), transparent 42%),
    linear-gradient(135deg, #050202 0%, #1a0605 34%, #4f120b 62%, #070202 100%);
  background-size: 180% 180%;
  animation: introGradientShift 12s var(--ease-standard) infinite alternate;
}

.intro-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  opacity: 0.35;
}

.intro-orb {
  position: absolute;
  width: clamp(90px, 32vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 137, 0.4), rgba(255, 111, 58, 0.14) 42%, transparent 73%);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0.76;
  transform: translate3d(0, 0, 0);
  animation: introOrbFloat 10s var(--ease-standard) infinite alternate;
}

.intro-orb--one {
  top: 8%;
  left: -18%;
  animation-duration: 9s;
}

.intro-orb--two {
  right: -20%;
  top: 18%;
  width: clamp(140px, 44vw, 340px);
  animation-duration: 13s;
  animation-delay: -3s;
}

.intro-orb--three {
  left: 18%;
  bottom: -14%;
  width: clamp(130px, 40vw, 320px);
  opacity: 0.58;
  animation-duration: 11s;
  animation-delay: -5s;
}

.intro-orb--four {
  right: 18%;
  bottom: 20%;
  width: clamp(60px, 20vw, 160px);
  opacity: 0.48;
  animation-duration: 7s;
  animation-delay: -2s;
}

.intro-screen .screen-inner,
.intro-start-screen .screen-inner {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

/*
 * intro.welcome cover screen.
 * Logo stays near the top of the visible room image.
 * CTA button stays near the bottom.
 */
.intro-welcome-screen .screen-inner--intro-welcome {
  min-height: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: start;
  justify-items: center;
  gap: clamp(16px, calc(var(--room-stage-height, 720px) * 0.035), 34px);
  text-align: center;
  padding-top: clamp(22px, calc(var(--room-stage-height, 720px) * 0.07), 68px);
  padding-bottom: clamp(30px, calc(var(--room-stage-height, 720px) * 0.105), 96px);
}

.intro-welcome-logo-wrap {
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: min(330px, 82vw);
  max-width: 100%;
  margin-inline: auto;
}

.intro-welcome-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 82vw);
  max-width: 100%;
  border-radius: 14px;
  outline: none;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--duration-base) var(--ease-bounce-soft),
    filter var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.intro-welcome-logo-link:hover,
.intro-welcome-logo-link:focus-visible {
  transform: translate3d(0, -2px, 0) scale(1.01);
  filter: drop-shadow(0 0 22px rgba(255, 220, 160, 0.22));
}

.intro-welcome-logo-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 218, 155, 0.34);
}

.intro-welcome-logo-image {
  display: block;
  width: min(330px, 82vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 330 / 84;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 16px rgba(255, 220, 160, 0.12));
}

.intro-welcome-actions {
  grid-row: 3;
  align-self: end;
  width: min(420px, 100%);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
}

.intro-welcome-button {
  width: min(100%, 360px);
}

.intro-title {
  max-width: 11em;
  margin-inline: auto;
  font-size: var(--font-size-xxl);
  color: #fff4df;
}

.intro-card {
  width: min(92vw, 620px);
  max-width: 100%;
}

/*
 * ui.createBasicMessageScreen() adds .intro-card directly to the .text-box.
 * Therefore the selector must target the same element, not a child .text-box.
 */
.intro-card.text-box {
  box-shadow: var(--shadow-strong), var(--shadow-glow);
}

.intro-actions {
  width: min(420px, 100%);
  margin-inline: auto;
}

@keyframes introGradientShift {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg) saturate(1);
  }

  50% {
    background-position: 100% 42%;
    filter: hue-rotate(-7deg) saturate(1.12);
  }

  100% {
    background-position: 44% 100%;
    filter: hue-rotate(8deg) saturate(1.06);
  }
}

@keyframes introOrbFloat {
  0% {
    transform: translate3d(-10%, -4%, 0) scale(0.94);
  }

  100% {
    transform: translate3d(12%, 9%, 0) scale(1.08);
  }
}

@media (max-width: 420px) {
  .intro-welcome-screen .screen-inner--intro-welcome {
    padding-top: clamp(18px, calc(var(--room-stage-height, 640px) * 0.055), 48px);
    padding-bottom: clamp(24px, calc(var(--room-stage-height, 640px) * 0.08), 70px);
  }

  .intro-welcome-logo-wrap,
  .intro-welcome-logo-link,
  .intro-welcome-logo-image {
    width: min(300px, 82vw);
  }

  .intro-welcome-button {
    width: min(100%, 330px);
  }
}

@media (max-height: 680px) {
  .intro-welcome-screen .screen-inner--intro-welcome {
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 28px;
  }

  .intro-welcome-logo-wrap,
  .intro-welcome-logo-link,
  .intro-welcome-logo-image {
    width: min(290px, 78vw);
  }
}

@supports not (height: 100dvh) {
  .intro-screen,
  .intro-screen .screen-inner,
  .intro-start-screen .screen-inner {
    min-height: 100vh;
  }
}