/* =========================
   Base / Reset
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: #0b1220;
  background: #cfe8ff;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* =========================
   Sky Intro Screen
========================= */
.sky {
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 50% 10%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #8fd3ff 0%, #cfe8ff 40%, #eaf6ff 100%);
}
.sky__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(closest-side at 50% 20%, rgba(255,255,255,0.75), rgba(255,255,255,0) 65%);
  filter: blur(2px);
  pointer-events: none;
}

/* Scroll indicator */
.scroll-indicator {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  user-select: none;
  padding: 14px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.scroll-indicator__text {
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.scroll-indicator__mouse {
  width: 26px;
  height: 40px;
  border-radius: 14px;
  border: 2px solid rgba(11,18,32,0.35);
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.scroll-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(11,18,32,0.55);
  animation: dotMove 1.4s infinite ease-in-out;
}
@keyframes dotMove {
  0%   { transform: translateY(0); opacity: 0.8; }
  60%  { transform: translateY(16px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 0.8; }
}

/* =========================
   Scene + Sticky Stage
========================= */
.scene {
  position: relative;
  height: 320vh;
  background:
    radial-gradient(900px 450px at 50% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #cfe8ff 0%, #f3fbff 45%, #ffffff 100%);
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* =========================
   Temple positioning
========================= */
.temple-wrap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  transform: translateY(42vh);
  will-change: transform;
  pointer-events: none;
}
.temple {
  width: 100vw;
  height: auto;
  object-fit: cover;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.18));
  user-select: none;

  /* Divine subtle glow */
  animation: subtleGlow 6s ease-in-out infinite alternate;
}
@keyframes subtleGlow {
  from { filter: drop-shadow(0 18px 35px rgba(0,0,0,0.18)); }
  to   { filter: drop-shadow(0 25px 55px rgba(255,215,0,0.22)); }
}

.ground-shadow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 62%;
  height: 26px;
  background: radial-gradient(closest-side, rgba(0,0,0,0.22), rgba(0,0,0,0));
  filter: blur(6px);
  opacity: 0;
  transition: opacity 400ms ease;
}

/* =========================
   Text Cards
========================= */
.info {
  position: absolute;
  top: clamp(14vh, 18vh, 22vh);
  width: min(42vw, 360px);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 12px 34px rgba(0,0,0,0.10);
  opacity: 1;
}


.info--left { left: clamp(12px, 6vw, 64px); }
.info--right { right: clamp(12px, 6vw, 64px); }

/* We will override translate via JS */
.info {
  will-change: transform, opacity;
}


.info__label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 8px;
}

.info__value {
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.12;
  font-weight: 800;
}

/* 👑 Gold typography */
.gold {
  background: linear-gradient(90deg, #b8860b, #ffd700, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   Text Animations (center split for first slide)
========================= */
.info.exit {
  animation: fadeOut 280ms ease forwards;
}

.info.enter-fade {
  animation: fadeUp 520ms cubic-bezier(.22,1,.36,1) forwards;
}

.info--left.enter-from-center {
  animation: slideLeftFromCenter 900ms cubic-bezier(.22,1,.36,1) forwards;
}
.info--right.enter-from-center {
  animation: slideRightFromCenter 900ms cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes slideLeftFromCenter {
  from { opacity: 0; transform: translateX(0) translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-40px) translateY(0) scale(1); }
}
@keyframes slideRightFromCenter {
  from { opacity: 0; transform: translateX(0) translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateX(40px) translateY(0) scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* =========================
   Floating golden particles
========================= */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,215,0,0.9), rgba(255,215,0,0));
  opacity: 0.75;
  filter: blur(0.2px);
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  from { transform: translateY(20vh); opacity: 0; }
  10% { opacity: 0.8; }
  to   { transform: translateY(-120vh); opacity: 0; }
}

/* =========================
   Petal falling effect
========================= */
.petal {
  position: absolute;
  width: 8px; 
  height: 8px;
  border-radius: 50%;
  /* Keep the gold background here, we will remove the JS override */
  background: radial-gradient(circle at 30% 30%, #fff9e6, #ffcc00);
  box-shadow: 
      0 0 10px #ffcc00, 
      0 0 20px #ffa500,
      0 0 5px #ffffff;
  /* Start hidden, animation will handle showing it */
  opacity: 0;
  pointer-events: none;
  filter: blur(0.5px);
  animation: petalFall linear forwards;
}

@keyframes petalFall {
  0%   { 
    transform: translateY(-10vh) translateX(0); 
    opacity: 0; 
  }
  10%  { 
    opacity: 1; 
  }
  90%  {
    opacity: 1;
  }
  100% { 
    /* Uses the --drift variable from JS for horizontal magic movement */
    transform: translateY(110vh) translateX(var(--drift)); 
    opacity: 0; 
  }
}

/* =========================
   Footer + endpad
========================= */
.footer-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  user-select: none;
}

.endpad {
  height: 60vh;
  background: #ffffff;
}

/* =========================
   Music toggle button
========================= */
.music-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  font-size: 16px;
  user-select: none;
}
.music-toggle:active { transform: scale(0.98); }

/* =========================
   Mobile tweaks
========================= */
@media (max-width: 720px) {
  .info {
    top: 12vh;
    width: min(44vw, 220px);
    padding: 12px 12px;
    border-radius: 16px;
  }
  .info__value { font-size: 16px; }
  .temple{
    height:100vh;
    }
}


@media (max-width: 420px) {
  .info { width: 46vw; }
  .info__label { font-size: 11px; }
  .info__value { font-size: 15px; }
  .temple{
    height:100vh;
  }
}