/* ──────────────────────────────────────────────────────────────
   KATHA · coming soon — one screen in the same temple sanctum as
   the site. Motion uses transform / opacity only (GPU-cheap) and
   stops for "reduce motion".
   ────────────────────────────────────────────────────────────── */

:root {
  --gold: #c9a24a;
  --gold-light: #ecd189;
  --gold-pale: #f6e7b8;
  --bone: #ecdfbf;
  --bone-dim: #c4b38d;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f-carved: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --f-inscr: 'Cinzel', 'Tiro Devanagari Sanskrit', Georgia, serif;
  --f-script: 'IM Fell English', Georgia, serif;
  --f-deva: 'Tiro Devanagari Sanskrit', serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--bone);
  background: #0e0906;
  font-family: var(--f-script);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
p {
  margin: 0;
}
.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ── the sanctum ──────────────────────────────────────────── */
.sanctum {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem 1.25rem 7.5rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(255, 150, 60, 0.16), transparent 70%),
    url('cracks.webp'),
    url('stone.webp'),
    radial-gradient(ellipse at 50% 40%, #26190f, #0c0805 75%);
}
.wall {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* कथा, cut deep into the back wall */
.deva {
  font-family: var(--f-deva);
  font-size: clamp(14rem, 44vw, 42rem);
  line-height: 1;
  color: #1b130b;
  text-shadow:
    0 -3px 1px rgba(0, 0, 0, 0.95),
    0 2px 1px rgba(255, 214, 150, 0.08);
  translate: 0 4%;
  user-select: none;
}
.mandala {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;
  width: min(118vw, 860px);
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--gold);
  opacity: 0.3;
}
.mandala svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 260s linear infinite;
}
.mandala svg + svg {
  animation-duration: 190s;
  animation-direction: reverse;
}
.dark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle min(46vmax, 640px) at 50% 46%,
    rgba(255, 176, 90, 0.08) 0%,
    rgba(10, 6, 3, 0.22) 35%,
    rgba(6, 4, 2, 0.8) 75%,
    rgba(4, 2, 1, 0.94) 100%
  );
}

/* ── the words ────────────────────────────────────────────── */
.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 44rem;
}
.content > * {
  opacity: 0;
  animation: rise 1.6s var(--ease) forwards;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 1.6rem;
  font-family: var(--f-inscr);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  animation-delay: 1.9s !important;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 2.2em;
  height: 7px;
  flex: none;
  background: radial-gradient(circle, currentColor 0 1.6px, transparent 2px) 0 50% / 7px 7px repeat-x;
  opacity: 0.7;
}
.title {
  width: min(80vw, 29rem);
  animation-delay: 1.5s !important;
}
/* the wordmark is unveiled left to right — the artwork itself is untouched */
.logo {
  width: 100%;
  height: auto;
  clip-path: inset(0 100% 0 0);
  animation: unveil 2.2s var(--ease) 1.6s forwards;
}
@keyframes unveil {
  to {
    clip-path: inset(0 0 0 0);
  }
}
.tagline {
  margin-top: 0.9rem;
  font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.2;
  color: var(--gold-pale);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  animation-delay: 2.3s !important;
}
.lotus {
  width: 220px;
  height: auto;
  margin-top: 1.6rem;
  color: var(--gold);
  animation-delay: 2.5s !important;
}
/* gold leaf, in true capitals (the face's lowercase letters join in pairs) */
.soon {
  margin-top: 1.2rem;
  font-family: var(--f-carved);
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 5.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  font-variant-ligatures: none;
  background: linear-gradient(176deg, #fbeec0 0%, #e7c56c 28%, #b98a2c 52%, #f0d27d 70%, #a57a24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(214, 160, 60, 0.2));
  animation-delay: 2.7s !important;
}
.lines {
  margin-top: 1.4rem;
  font-family: var(--f-inscr);
  font-weight: 600;
  font-size: clamp(0.72rem, 1.6vw, 0.86rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone);
  animation-delay: 3s !important;
}
.lines span {
  margin-inline: 0.7em;
  font-family: var(--f-deva);
  letter-spacing: 0;
  color: var(--gold);
}
.invite {
  max-width: 28rem;
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: var(--bone-dim);
  animation-delay: 3.2s !important;
}

/* ── oil lamps ────────────────────────────────────────────── */
.diya {
  --s: 1.5;
  position: absolute;
  bottom: 10vh;
  z-index: 2;
  width: calc(58px * var(--s));
  height: calc(24px * var(--s));
  pointer-events: none;
}
.diya--l {
  left: clamp(1.2rem, 10vw, 10rem);
}
.diya--r {
  right: clamp(1.2rem, 10vw, 10rem);
  transform: scaleX(-1);
}
.diya svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.75));
}
.diya__flame {
  position: absolute;
  left: 87%;
  bottom: 78%;
  width: calc(11px * var(--s));
  height: calc(28px * var(--s));
  margin-left: calc(-5.5px * var(--s));
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse 50% 62% at 50% 78%, #fffbe8 0 22%, #ffe08a 38%, #ffa53a 62%, rgba(255, 110, 30, 0) 80%);
  transform-origin: 50% 100%;
  animation:
    flicker 1.7s ease-in-out infinite alternate,
    sway 3.3s ease-in-out infinite;
}
.diya__glow {
  position: absolute;
  left: 87%;
  bottom: 95%;
  width: calc(200px * var(--s));
  aspect-ratio: 1;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 186, 90, 0.42) 0%, rgba(255, 140, 40, 0.13) 36%, transparent 68%);
  animation: lampglow 2.4s ease-in-out infinite alternate;
}
@keyframes flicker {
  0% {
    scale: 1 1;
  }
  20% {
    scale: 0.92 1.08;
  }
  40% {
    scale: 1.05 0.94;
  }
  60% {
    scale: 0.95 1.1;
  }
  80% {
    scale: 1.03 0.96;
  }
  100% {
    scale: 0.96 1.04;
  }
}
@keyframes sway {
  0%,
  100% {
    rotate: -3deg;
  }
  50% {
    rotate: 4deg;
  }
}
@keyframes lampglow {
  from {
    opacity: 0.72;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1.05;
  }
}

/* ── falling parijat ──────────────────────────────────────── */
.petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.petals img {
  position: absolute;
  top: -8%;
  height: auto;
  opacity: 0;
  animation: fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.75;
  }
  100% {
    transform: translate3d(var(--drift), 118vh, 0) rotate(var(--spin));
    opacity: 0;
  }
}

.colophon {
  position: absolute;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  font-family: var(--f-inscr);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(196, 179, 141, 0.75);
}
.colophon__deva {
  font-family: var(--f-deva);
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #8a6a24;
}

/* ── the temple doors ─────────────────────────────────────── */
.doors {
  --frame: clamp(10px, 2vw, 22px);
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  perspective: 2000px;
  pointer-events: none;
  animation: gone 0.1s linear 2.8s forwards;
}
@keyframes gone {
  to {
    visibility: hidden;
  }
}
.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  background:
    radial-gradient(circle at 50% 50%, #ecd08a 0 2px, #b18832 2.5px 4px, #4a3010 4.5px, rgba(0, 0, 0, 0.45) 5.5px, transparent 7px) 34px 34px / 68px 68px,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 9px, rgba(255, 190, 120, 0.035) 9px 11px, transparent 11px 21px),
    linear-gradient(90deg, #1f1108, #3b2111 30%, #2d190c 70%, #1a0e06);
  box-shadow:
    inset 0 0 0 var(--frame) #160b05,
    inset 0 0 0 calc(var(--frame) + 2px) #9b7426,
    inset 0 0 0 calc(var(--frame) + 16px) #22130a,
    inset 0 0 0 calc(var(--frame) + 17px) rgba(155, 116, 38, 0.6),
    inset 0 0 160px rgba(0, 0, 0, 0.85);
  backface-visibility: hidden;
}
.door--l {
  left: 0;
  transform-origin: 0 50%;
  animation: open-l 2s cubic-bezier(0.65, 0, 0.25, 1) 0.6s forwards;
}
.door--r {
  right: 0;
  transform-origin: 100% 50%;
  animation: open-r 2s cubic-bezier(0.65, 0, 0.25, 1) 0.6s forwards;
}
@keyframes open-l {
  80% {
    opacity: 1;
  }
  to {
    transform: rotateY(88deg);
    opacity: 0;
  }
}
@keyframes open-r {
  80% {
    opacity: 1;
  }
  to {
    transform: rotateY(-88deg);
    opacity: 0;
  }
}
.door--l::after,
.door--r::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, #5b3f12, #e0bd68 50%, #5b3f12);
}
.door--l::after {
  right: 0;
}
.door--r::after {
  left: 0;
}
.ring {
  position: absolute;
  top: 50%;
  width: clamp(40px, 5vw, 60px);
  aspect-ratio: 1;
  margin-top: clamp(60px, 14vh, 140px);
  border-radius: 50%;
  border: 5px solid #b8913e;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}
.door--l .ring {
  right: 34px;
}
.door--r .ring {
  left: 34px;
}
.seam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, #ffd889 25%, #fff1c9 50%, #ffd889 75%, transparent);
  box-shadow: 0 0 36px 10px rgba(255, 190, 90, 0.5);
  animation: seam 1.8s ease 0.5s forwards;
}
@keyframes seam {
  to {
    transform: scaleX(80);
    opacity: 0;
  }
}

/* ── phones ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sanctum {
    padding-bottom: 9rem;
  }
  .diya {
    --s: 1;
    bottom: 4.5rem;
  }
  .eyebrow::before,
  .eyebrow::after {
    display: none;
  }
  /* tighter tracking so these stay on one line instead of orphaning a word */
  .eyebrow {
    letter-spacing: 0.2em;
  }
  .lines {
    letter-spacing: 0.16em;
  }
  .lines span {
    margin-inline: 0.45em;
  }
}

/* ── reduce motion: no doors, nothing moves, words simply appear ── */
@media (prefers-reduced-motion: reduce) {
  .doors,
  .petals {
    display: none;
  }
  .content > *,
  .logo {
    opacity: 1;
    clip-path: none;
    animation: none !important;
  }
  .mandala svg,
  .diya__flame,
  .diya__glow {
    animation: none;
  }
}