:root {
  --blue: #001d47;
  --blue2: #0b2b5e;
  --gold: #ffbd2a;
  --neon: #7dd3fc;
  --glass: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
}

* {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at top, var(--blue2), var(--blue));
  position: relative;
}

/* decorative bg */
.bg-map {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background:
    linear-gradient(transparent 95%, rgba(255, 255, 255, 0.04) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 120px
    );
}

/* decorative lines */
.route-line {
  position: absolute;
  top: -140%;
  width: 2px;
  height: 140%;
  z-index: 1;
  opacity: 0.55;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(125, 211, 252, 0.95),
    transparent
  );
  animation: moveLine 5s linear infinite;
  filter:
    drop-shadow(0 0 5px rgba(125, 211, 252, 0.4))
    drop-shadow(0 0 14px rgba(125, 211, 252, 0.22));
}

.line-1 {
  left: 18%;
}

.line-2 {
  left: 54%;
  animation-delay: 1.5s;
}

.line-3 {
  left: 80%;
  animation-delay: 3s;
}

@keyframes moveLine {
  to {
    top: 140%;
  }
}

/* decorative dots */
.route-dots {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  animation: floatDot 6s linear infinite;
  box-shadow:
    0 0 6px rgba(125, 211, 252, 0.6),
    0 0 14px rgba(125, 211, 252, 0.25);
}

.dot-1 {
  left: 15%;
  top: 90%;
}

.dot-2 {
  left: 35%;
  top: 110%;
  animation-delay: 1.2s;
}

.dot-3 {
  left: 65%;
  top: 120%;
  animation-delay: 2.4s;
}

.dot-4 {
  left: 85%;
  top: 100%;
  animation-delay: 3.6s;
}

@keyframes floatDot {
  from {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  to {
    transform: translateY(-140vh);
    opacity: 0;
  }
}

/* screen system */
.screen {
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scene-bg,
.prmsu-behind-arc,
.prmsu-bg,
.arc-bg {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

/* scene wrapper */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* fullscreen bg images */
.scene-bg {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}

/* SCREEN 1 */
#s1,
#s2,
#s3 {
  cursor: pointer;
}

#s2,
#s2 .scene {
  pointer-events: auto;
}

#s2 .scene-bg,
#s2 .prmsu-bg,
#s2 .screen2-content,
#s2 .screen2-content * {
  pointer-events: none;
}

.scene img,
.scene-bg,
.arc-bg,
.prmsu-behind-arc,
.prmsu-bg {
  pointer-events: none;
}

.arc-bg {
  transform: scale(1.14) translateY(90px);
  transform-origin: center 75%;
}

.prmsu-behind-arc {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  object-position: center;
  transform: scale(1) translateY(120px);
  transform-origin: center 75%;
  z-index: 0;
  opacity: 0.45;
  filter: blur(6px);
  transition:
    transform 1200ms cubic-bezier(.12, .72, .18, 1),
    opacity 900ms ease,
    filter 900ms ease;
}

/* first screen change */
/* give screen 1 a perspective space */
#s1 .scene {
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* base state */
.arc-bg {
  transform: translateZ(120px) scale(1.14) translateY(90px);
  transform-origin: center 75%;
  z-index: 2;
}

.prmsu-behind-arc {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  object-position: center;
  transform: scale(0.78) translateY(170px);
  transform-origin: center 75%;
  z-index: 0;
  opacity: 0.35;
  filter: blur(7px);
  transition:
    transform 1600ms cubic-bezier(.16, .8, .2, 1),
    opacity 900ms ease,
    filter 900ms ease;
}

/* zoom animation */

#s1.zooming .prmsu-behind-arc {
  transform: scale(1) translateY(140px);
  opacity: 1;
  filter: blur(0px);
  transition:
    transform 3000ms cubic-bezier(.18,.75,.22,1),
    opacity 1400ms ease,
    filter 1400ms ease;
}

#s1.zooming .arc-bg {
  transform: translateZ(260px) scale(5.2) translateY(-40px);
  opacity: 1;
  transition: transform 3600ms cubic-bezier(.18,.75,.22,1);
}

/* logo */
.logo-center {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: clamp(260px, 28vw, 520px);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.2));
  animation: logoFloatCenter 4s ease-in-out infinite;
}

@keyframes logoFloatCenter {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

/* SCREEN 2 */
#s2 {
  cursor: pointer;
}

#s2.active .prmsu-bg {
  opacity: 1;
}

.prmsu-bg {
  z-index: 1;
  transform: scale(1) translateY(140px);
  transform-origin: center 75%;
  filter: none;
  pointer-events: none;
  transition: none;
}

.prmsu-bg.blurred-bg {
  filter: none;
}

.screen2-content {
  display: none !important;
}

.screen2-content.show {
  display: none !important;
}

#s2.zooming .prmsu-bg {
  transform: scale(1) translateY(140px);
  filter: none;
  transition: none;
}

#s2.zooming .screen2-content {
  opacity: 0;
  transform: none;
  transition: none;
}

/* screen 2 -> screen 3 merge transition */
#s2,
#s3 {
  transform: none;
}

#s2.merge-out {
  opacity: 0;
  transition: opacity 700ms ease;
}

#s3.prep-merge {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

#s3.merge-in {
  opacity: 1;
  transition: opacity 700ms ease;
}

/* hide removed screen 2 content */
#s2 h1,
#s2 .cards {
  display: none !important;
}

h1 {
  margin: 0 0 14px 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 4px;
  color: var(--gold);
  text-shadow: 0 0 4px rgba(255, 189, 42, 0.5);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 26px;
  max-width: 920px;
  width: 100%;
}

.card {
  padding: 24px;
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid rgba(245, 200, 107, 0.35);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease;
}

.card:hover {
  transform: translateY(-8px);
}

/* SCREEN 3 */
.scene-3 {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.building-bg {
  z-index: 1;
  transform: scale(1.2) translateY(20px);
  opacity: 0.85;
}

.screen3-ramon {
  position: absolute;
  right: 0%;
  bottom: -15%;
  height: 80%;
  width: auto;
  z-index: 3;
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.screen3-ramon.show {
  opacity: 1;
  transform: translateX(0);
}

.screen3-ui {
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  opacity: 0;
  transition: opacity 700ms ease;
}

.screen3-ui.show {
  opacity: 1;
}

.logo-left {
  width: clamp(400px, 32vw, 720px);
  filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.2));
  animation: logoFloat3 4s ease-in-out infinite;
}

@keyframes logoFloat3 {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.get-started-btn {
  padding: 18px 42px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #2a46d9, #2037a8);
  color: white;
  font-weight: 600;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.get-started-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(42, 70, 217, 0.35);
}

/* tap hint */
.tap-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: #fff;
  opacity: 0.7;
  animation: hintFade 2s ease-in-out infinite;
}

@keyframes hintFade {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.9;
  }
}

#s1.zooming .logo-center {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.9);
  transition: opacity 500ms ease, transform 500ms ease;
}

/* ================================================= */
/* ================= MOBILE VERSION ================= */
/* ================================================= */

@media (max-width: 768px) {

  /* force mobile to only use screen 3 */
  #s1,
  #s2 {
    display: none !important;
  }

  #s3 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #s3 .screen3-ui {
  opacity: 1 !important;
  visibility: visible !important;
}

#s3 .logo-left,
#s3 .get-started-btn {
  opacity: 1 !important;
  visibility: visible !important;
}

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 100vh;
  }

  /* stop decorative animations */
  .bg-map,
  .route-line,
  .dot,
  .logo-center,
  .logo-left {
    animation: none !important;
  }

  .route-line {
    opacity: 0.28;
  }

  .dot {
    opacity: 0.45;
  }

  /* reduce heavy transform feel on mobile */
  .scene-bg,
  .arc-bg,
  .prmsu-behind-arc,
  .prmsu-bg,
  .building-bg {
    will-change: auto !important;
  }

  /* SCREEN 1 */
  .arc-bg {
    transform: scale(1.08) translateY(40px) !important;
    object-fit: contain;
    object-position: center;
  }

  .prmsu-behind-arc {
    transform: scale(1) translateY(70px) !important;
    opacity: 1 !important;
    filter: none !important;
    object-fit: contain;
    object-position: center;
  }

  .logo-center {
    width: min(72vw, 360px);
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #s1.zooming .prmsu-behind-arc {
    transform: scale(1) translateY(70px) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  #s1.zooming .arc-bg {
    transform: scale(1.08) translateY(40px) !important;
    opacity: 1 !important;
    transition: none !important;
  }

  #s1.zooming .logo-center {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
    transition: opacity 350ms ease, transform 350ms ease !important;
  }

  /* SCREEN 2 */
  .prmsu-bg {
    transform: scale(1) translateY(70px) !important;
    filter: none !important;
    object-fit: contain;
    object-position: center;
    opacity: 1 !important;
  }

  .prmsu-bg.blurred-bg {
    filter: none !important;
  }

  .screen2-content,
  .screen2-content.show,
  #s2 h1,
  #s2 .cards {
    display: none !important;
  }

  #s2.zooming .prmsu-bg {
    transform: scale(1) translateY(70px) !important;
    filter: none !important;
    transition: none !important;
  }

  #s2.zooming .screen2-content {
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* merge transition on mobile */
  #s2,
  #s3 {
    transform: none !important;
  }

  #s2.merge-out {
    opacity: 0 !important;
    transition: opacity 700ms ease !important;
  }

  #s3.prep-merge {
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  #s3.merge-in {
    opacity: 1 !important;
    transition: opacity 700ms ease !important;
  }

  /* SCREEN 3 */
  .scene-3 {
    width: 100vw;
    height: 100vh;
  }

  .building-bg {
    transform: scale(1.05) translateY(10px) !important;
    opacity: 1;
    object-fit: cover;
    object-position: center;
  }

  .screen3-ramon {
    right: 50%;
    bottom: 0;
    height: 44%;
    max-height: 380px;
    transform: translateX(50%);
    opacity: 0;
    transition: opacity 500ms ease;
  }

  .screen3-ramon.show {
    opacity: 1;
    transform: translateX(50%);
  }

  .screen3-ui {
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    gap: 18px;
    text-align: center;
    align-items: center;
  }

  .screen3-ui.show {
    opacity: 1;
  }

  .logo-left {
    width: min(82vw, 360px);
    max-width: 360px;
  }

  .get-started-btn {
    padding: 15px 30px;
    font-size: 1rem;
    border-radius: 999px;
  }

  .tap-hint {
    bottom: 24px;
    font-size: 0.78rem;
    text-align: center;
    width: calc(100% - 32px);
  }
}

/* ================= END MOBILE ================= */