/* Cinematic 3D Mahakal hero — parallax depth + auto-orbit
   ============================================================
   Five layers, ordered by Z-depth (back → front):
     L1 sky         (gradient + stars)
     L2 ghats       (distant silhouette, slowest motion)
     L3 temple      (shikhara, mid motion)
     L4 embers      (floating particles, fast motion)
     L5 ui          (title/form, locked but tilts subtly)
   Each layer reads --mx/--my (mouse delta in -1..1) from JS and
   --auto (sin-wave time) so motion never fully stops.
*/

.cine-stage {
  position: relative;
  min-height: 100vh;
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: hidden;
  background: #050608;
  isolation: isolate;
  /* mouse + autopan vars (JS sets these) */
  --mx: 0;
  --my: 0;
  --auto-x: 0;
  --auto-y: 0;
}

.cine-layer {
  position: absolute;
  inset: -8%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

/* L1 — sky */
.cine-sky {
  background:
    radial-gradient(ellipse at 50% 75%, rgba(255,153,51,0.15), transparent 50%),
    radial-gradient(ellipse at 30% 30%, rgba(76,29,149,0.18), transparent 60%),
    linear-gradient(180deg, #0b0610 0%, #1a0a04 50%, #2c0f02 100%);
  transform: translate3d(
      calc(var(--mx) * -8px + var(--auto-x) * -6px),
      calc(var(--my) * -6px + var(--auto-y) * -4px),
      -300px
    ) scale(1.18);
}

/* stars on sky */
.cine-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 18%, #ffe28a 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 22% 12%, #fbbf24 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 22%, #ffd27a 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 52% 8%, #ffe28a 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 22%, #fbbf24 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 78% 14%, #ffe28a 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 26%, #ffd27a 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 8%, #fbbf24 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 32%, #ffe28a 50%, transparent 51%);
  opacity: 0.85;
  animation: cine-twinkle 6s ease-in-out infinite alternate;
}
@keyframes cine-twinkle {
  0%   { opacity: 0.5; }
  100% { opacity: 0.95; }
}

/* aarti sun glow */
.cine-sun {
  position: absolute;
  left: 50%; top: 60%;
  width: 720px; height: 720px;
  margin-left: -360px; margin-top: -360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,178,74,0.55), rgba(255,122,24,0.25) 35%, transparent 65%);
  filter: blur(8px);
  transform: translate3d(
      calc(var(--mx) * -16px + var(--auto-x) * -10px),
      calc(var(--my) * -8px),
      -250px
    );
  animation: cine-sun-pulse 5s ease-in-out infinite alternate;
}
@keyframes cine-sun-pulse {
  0%   { opacity: 0.7; transform: translate3d(calc(var(--mx) * -16px + var(--auto-x) * -10px), calc(var(--my) * -8px), -250px) scale(1); }
  100% { opacity: 1;   transform: translate3d(calc(var(--mx) * -16px + var(--auto-x) * -10px), calc(var(--my) * -8px), -250px) scale(1.05); }
}

/* L2 — distant ghats */
.cine-ghats {
  bottom: 0; top: auto;
  height: 36vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(15,17,21,0.6) 70%, #0f1115 100%),
    url("/static/images/shikhara.svg");
  background-size: cover, 200% auto;
  background-position: center, 30% bottom;
  filter: blur(1.5px) brightness(0.55) saturate(0.9);
  opacity: 0.85;
  transform: translate3d(
      calc(var(--mx) * -22px + var(--auto-x) * -14px),
      calc(var(--my) * -10px),
      -180px
    );
}

/* L3 — main temple */
.cine-temple {
  bottom: 0; top: auto;
  height: 80vh;
  background:
    linear-gradient(180deg, transparent 30%, rgba(15,17,21,0.4) 75%, rgba(15,17,21,0.95) 100%),
    image-set(
      url("/static/images/temple-hero.jpg") 1x
    ),
    url("/static/images/shikhara.svg");
  background-color: transparent;
  background-size: cover, cover, cover;
  background-position: center, center, center bottom;
  filter: saturate(1.05);
  transform: translate3d(
      calc(var(--mx) * -38px + var(--auto-x) * -22px),
      calc(var(--my) * -16px),
      -80px
    ) scale(1.05);
}

/* warm haze in front of temple */
.cine-haze {
  position: absolute;
  inset: auto 0 0 0;
  height: 50vh;
  background: linear-gradient(180deg, transparent, rgba(255,153,51,0.12) 60%, rgba(255,122,24,0.18));
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateZ(-40px);
}

/* L4 — floating embers */
.cine-embers {
  inset: 0;
  pointer-events: none;
  transform: translate3d(
      calc(var(--mx) * -60px + var(--auto-x) * -30px),
      calc(var(--my) * -28px),
      40px
    );
}
.cine-embers .ember {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe28a, #ff9933 60%, transparent);
  box-shadow: 0 0 12px rgba(255,178,74,0.9);
  opacity: 0.7;
  animation: cine-rise var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  bottom: -20px;
  left: var(--x, 50%);
}
@keyframes cine-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 40px)); opacity: 0; }
}

/* L5 — UI panel (login form lives here) */
.cine-ui {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 100vh;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--mx) * 1.4deg)) rotateX(calc(var(--my) * -1.2deg));
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cine-copy {
  padding: clamp(36px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateZ(40px);
}
.cine-copy .eyebrow {
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.cine-copy .deva {
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.05;
  background: linear-gradient(180deg, #ffe28a, #ff9933 55%, #c2410c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 30px rgba(255,153,51,0.35));
  letter-spacing: 0.005em;
}
.cine-copy h1 {
  font-size: clamp(26px, 2.6vw, 38px);
  margin: 4px 0 2px;
  color: #fff;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.cine-copy .lede {
  color: #d8dfe8;
  font-size: 15px;
  max-width: 520px;
  line-height: 1.65;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.cine-copy .chant {
  margin-top: 18px;
  color: #ff9933;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-shadow: 0 0 16px rgba(255,153,51,0.5);
}

.cine-form {
  padding: clamp(24px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(60px);
}
.cine-form .card {
  margin: 0;
  width: 100%;
  max-width: 380px;
  background: rgba(13, 16, 22, 0.62);
  border: 1px solid rgba(255,153,51,0.22);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 30px 90px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 80px -20px rgba(255,153,51,0.18);
  position: relative;
  overflow: hidden;
}
/* shimmering top edge */
.cine-form .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,153,51,0.7), transparent);
  animation: cine-shimmer 4s linear infinite;
}
@keyframes cine-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.cine-form .card h2 {
  margin: 0 0 14px;
  font-size: 13px;
  color: #ff9933;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cine-form .lock-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
}
.cine-form .lock-row .ic {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(160deg, #ff9933, #b45309);
  display: grid; place-items: center; font-size: 18px;
  color: #1a0e00;
  box-shadow: 0 6px 20px -6px rgba(255,153,51,0.6);
}
.cine-form .lock-row .ttl { font-size: 18px; font-weight: 700; color: #fff; }
.cine-form .lock-row .sub { font-size: 11px; color: #94a3b8; letter-spacing: 0.08em; text-transform: uppercase; }

.cine-form input { background: rgba(255,255,255,0.04); }
.cine-form button { transition: filter 0.15s, transform 0.1s, box-shadow 0.2s; }
.cine-form button:hover { box-shadow: 0 12px 30px -10px rgba(255,153,51,0.65); }

@media (max-width: 900px) {
  .cine-ui { grid-template-columns: 1fr; }
  .cine-copy { padding: 80px 22px 20px; }
  .cine-form { padding: 20px 22px 60px; }
  .cine-temple { height: 60vh; opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-stage * { animation: none !important; transition: none !important; }
  .cine-sky, .cine-ghats, .cine-temple, .cine-embers, .cine-ui, .cine-sun {
    transform: none !important;
  }
}