/* Scroll-led live-pooja reveal; the feed is a sample photograph, not a broadcast. */
.home-page .live-showcase {
  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: 78px;
  border-block: 1px solid #e4d5b9;
  background: radial-gradient(ellipse at 72% 58%, #fff9e9 0, transparent 50%),
    linear-gradient(125deg, #fbf6e9, #f3ead7 60%, #fbf8ee);
  color: #23463d;
}
.live-showcase * { box-sizing: border-box; }
.live-pin {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: auto;
  padding: clamp(32px, 3vw, 46px) clamp(16px, 4.5vw, 86px) 24px;
}
.live-heading { position: relative; z-index: 2; max-width: 1050px; margin: 0 auto; text-align: center; }
.live-heading .home-eyebrow { color: #a2783b; }
.home-page .live-heading h2 {
  margin: 8px 0 4px;
  color: #23463d;
  font-size: clamp(27px, 3vw, 46px);
  line-height: 1.48;
}
.home-page .live-heading h2 em { color: #a47535; }
.live-intro { margin: 8px auto 0 !important; max-width: 58ch; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.8; color: #746e62; }
.live-stage { position: relative; flex: 1; min-height: 490px; width: 100%; max-width: 1450px; margin: 0 auto; perspective: 1200px; }
.live-orbit { position: absolute; border: 1px solid rgba(166,126,69,.18); border-radius: 50%; pointer-events: none; }
.live-orbit-one { left: 15%; top: 8%; width: 39%; aspect-ratio: 1; }
.live-orbit-two { right: 2%; top: 0; width: 46%; aspect-ratio: 1; }
.live-journey-label {
  position: absolute; top: 10%; left: 51%; display: flex; align-items: center;
  gap: 17px; transform: translateX(-50%); color: #a67b45;
  font-size: 11px; font-weight: 800; letter-spacing: .11em;
  white-space: nowrap; opacity: .65;
}
.live-journey-arrow { color: #c0a06c; font-size: 28px; line-height: 1; }
.live-phone {
  position: absolute; left: 30%; top: 50%; z-index: 5;
  width: clamp(195px, min(21vw, 28vh), 280px);
  aspect-ratio: 9 / 18.5;
  transform: translate(-50%, -50%) rotate(-5deg);
  transform-origin: center;
  filter: drop-shadow(0 25px 35px rgba(26,47,37,.22));
  will-change: transform, opacity;
}
.live-phone-frame {
  position: relative; width: 100%; height: 100%;
  padding: 9px; border: 3px solid #898c83; border-radius: 39px;
  background: #172722;
  box-shadow: inset 0 0 0 2px #42564c, 0 2px 0 #b1ad9c;
}
.live-phone-speaker {
  position: absolute; z-index: 9; top: 16px; left: 50%;
  transform: translateX(-50%); width: 28%; height: 7px;
  border-radius: 100px; background: #0d1513;
}
.live-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: #14231e; color: #f8f6e9; }
.live-phone-appbar {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  height: 12%; display: flex; justify-content: space-between; align-items: end;
  gap: 5px; padding: 17px 15px 9px; background: #173a2c;
  color: #fbefcc; font-size: 13px;
}
.live-phone-appbar strong { font-family: Georgia, serif; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: -.01em; font-weight: 600; }
.live-phone-viewfinder {
  position: absolute; inset: 12% 0 17%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #345f4f, #111d18 64%);
}
.live-viewfinder-ring { width: 57%; aspect-ratio: 1; border: 1px solid #a9c7aa45; border-radius: 50%; box-shadow: 0 0 0 20px #e4d5b307; }
.live-camera-start { position: absolute; font-size: 32px; color: #e6c285; }
.live-phone-feed {
  position: absolute; z-index: 1; inset: 12% 0 17%;
  opacity: 1; overflow: hidden;
}
.live-phone-feed:after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #14251a99); }
.live-phone-feed img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; animation: live-preview-pan 9s ease-in-out infinite alternate; }
@keyframes live-preview-pan {
  from { transform: scale(1.09) translateX(1.5%); }
  to { transform: scale(1.18) translateX(-1.5%); }
}
.live-video-top {
  position: absolute; z-index: 3; top: 16%; left: 11px; right: 11px;
  display: flex; align-items: center; justify-content: space-between;
  font: 800 12px/1.25 'DM Sans', sans-serif;
}
.live-demo-badge { background: #b72d30; border-radius: 6px; padding: 6px 7px; color: #fff; }
.live-demo-badge small { margin-left: 2px; padding-left: 4px; border-left: 1px solid #ffffff99; font-size: 8px; letter-spacing: .05em; }
.live-hd { padding: 5px; border-radius: 5px; background: #08170f91; color: white; }
.live-video-bottom {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 17%;
  display: flex; align-items: center; gap: 12px; padding: 10px 15px;
  color: #fff; font-size: 15px; background: linear-gradient(transparent, #091b18aa);
}
.live-audio-line { height: 3px; flex: 1; background: linear-gradient(90deg, #eee9d8 70%, #eee9d866 70%); border-radius: 5px; }
.live-phone-details {
  position: absolute; bottom: 0; left: 0; right: 0;
  min-height: 17%; display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 1px; padding: 7px 14px; background: #fdf8ec;
  color: #274c3d; font-size: clamp(11px, 1.1vw, 14px); font-weight: 750; line-height: 1.5;
}
.live-phone-details small { color: #8a8374; font-size: 10px; font-weight: 500; }
.live-phone-homebar { position: absolute; z-index: 8; bottom: 15px; left: 50%; transform: translateX(-50%); width: 34%; height: 4px; border-radius: 10px; background: #c0bea9; }
.live-temple-scene {
  position: absolute; left: 73%; top: 50%; z-index: 4;
  width: min(41%, 490px); aspect-ratio: 1.22;
  transform: translate(-50%, -50%); transform-origin: center;
  border: 6px solid #fffdf5; border-radius: 23px; overflow: hidden;
  background: #624021; box-shadow: 0 25px 48px #70543b30;
  will-change: transform, opacity;
}
.live-temple-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.live-temple-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 70%, #ffc46532, transparent 60%); }
.live-temple-label { position: absolute; bottom: 12px; left: 14px; z-index: 2; padding: 5px 11px; border-radius: 50px; background: #fff8e9ef; color: #6b4e27; font-size: 12px; font-weight: 750; }
.live-reveal-copy {
  position: absolute; top: 50%; left: 58%; width: 38%; max-width: 500px;
  transform: translateY(-44%); z-index: 3; opacity: 1;
  color: #315044; text-align: left;
}
.live-reveal-icon { display: block; color: #b38b47; font-size: 34px; line-height: 1; margin-bottom: 18px; }
.home-page .live-reveal-copy h3 {
  margin: 13px 0 14px; font-family: 'Noto Serif Telugu', Georgia, serif;
  font-size: clamp(28px, 3vw, 48px); font-weight: 600; line-height: 1.35; color: #28483f;
}
.live-reveal-copy > p:not(.home-eyebrow) { max-width: 46ch; color: #667569; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.9; }
.live-reveal-copy .home-button { margin-top: 22px; padding: 11px 20px; border-color: #28594c; background: #28594c; font-size: 14px; }
.live-reveal-copy .home-button:hover { background: #1c3e35; }
.live-reveal-copy > small { display: block; margin-top: 12px; color: #847862; font-size: 11px; line-height: 1.7; }
.live-progress { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: -10px auto 0; color: #9a825f; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.live-progress-track { width: 154px; height: 3px; background: #ceb9968f; border-radius: 20px; overflow: hidden; }
.live-progress-fill { width: 100%; height: 100%; border-radius: inherit; background: #3c6b57; transform-origin: left center; }

/* The pinned animation is activated by JS only on suitable screens. */
.live-showcase.live-enhanced { height: 250vh; }
.live-showcase.live-enhanced .live-pin {
  position: sticky; top: 78px; height: calc(100svh - 78px);
  min-height: 0; overflow: hidden;
}
.live-showcase.live-enhanced .live-stage { min-height: 0; }
.live-showcase.live-enhanced .live-phone { opacity: 0; }
.live-showcase.live-enhanced .live-temple-scene { opacity: 0; }
.live-showcase.live-enhanced .live-phone-feed,
.live-showcase.live-enhanced .live-video-top,
.live-showcase.live-enhanced .live-video-bottom { opacity: 0; }
.live-showcase.live-enhanced .live-reveal-copy { opacity: 0; visibility: hidden; pointer-events: none; }
.live-showcase.live-enhanced .live-progress-fill { transform: scaleX(0); }

@media (min-width: 801px) and (max-height: 719px) {
  .live-showcase.live-enhanced .live-pin { padding: 12px clamp(18px, 4vw, 70px) 10px; }
  .home-page .live-showcase.live-enhanced .live-heading h2 {
    font-size: clamp(25px, 4vh, 34px);
    line-height: 1.3;
    margin: 2px 0;
  }
  .live-showcase.live-enhanced .live-intro { margin-top: 2px !important; line-height: 1.45; }
  .live-showcase.live-enhanced .live-phone { width: clamp(134px, 26vh, 188px); }
  .live-showcase.live-enhanced .live-stage { min-height: 0; }
  .live-showcase.live-enhanced .live-progress { margin-top: 0; gap: 5px; }
  .home-page .live-showcase.live-enhanced .live-reveal-copy h3 {
    font-size: clamp(24px, 4vh, 34px);
  }
}

@media (max-width: 1100px) {
  .live-stage { min-height: 440px; }
  .live-phone { width: clamp(184px, min(24vw, 28vh), 258px); }
  .live-reveal-copy { left: 56%; width: 42%; }
}
/* Width determines the mobile layout; a scaled desktop must stay desktop. */
@media (max-width: 800px) {
  .live-showcase, .live-showcase.live-enhanced { height: auto; overflow: hidden; }
  .live-pin, .live-showcase.live-enhanced .live-pin { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; padding: 38px 16px 36px; }
  .live-heading { max-width: 500px; }
  .live-heading h2 { font-size: clamp(26px, 5vw, 34px) !important; }
  .live-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; margin: 20px auto 0; gap: 0; }
  .live-phone, .live-showcase.live-enhanced .live-phone {
    position: relative; z-index: 4; top: auto; left: auto; flex-shrink: 0;
    width: min(56vw, 245px); aspect-ratio: 9/18.5; opacity: 1;
    transform: rotate(-3deg);
  }
  .live-orbit-one { top: 2%; left: 2%; width: 74%; }
  .live-orbit-two { top: 8%; right: 1%; width: 58%; }
  .live-journey-label, .live-temple-scene { display: none; }
  .live-reveal-copy, .live-showcase.live-enhanced .live-reveal-copy {
    position: relative; z-index: 2; top: auto; left: auto; width: min(100%, 530px);
    max-width: none; margin-top: 24px; padding: 24px 23px;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    border-radius: 16px; border: 1px solid #e3d5ba; background: #fffdf8e8;
  }
  .live-reveal-icon { display: none; }
  .live-reveal-copy h3 { font-size: 28px !important; }
  .live-reveal-copy > p:not(.home-eyebrow) { font-size: 14px; }
  .live-phone-feed, .live-video-top, .live-video-bottom { opacity: 1; }
  .live-progress { display: none; }
}

/* On phones, scrolling drives the same journey rather than showing a still mockup. */
@media (max-width: 800px) and (min-height: 620px) {
  .home-page .live-showcase.live-mobile-enhanced {
    height: auto;
    overflow: clip;
  }
  .live-showcase.live-mobile-enhanced .live-pin {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 12px 10px;
    overflow: visible;
  }
  .live-showcase.live-mobile-enhanced .live-heading h2 {
    margin: 4px 0 0;
    font-size: clamp(25px, 4vw, 31px) !important;
    line-height: 1.43;
  }
  .live-showcase.live-mobile-enhanced .live-intro {
    max-width: 48ch;
    margin-top: 4px !important;
    font-size: 12px;
    line-height: 1.6;
  }
  .live-showcase.live-mobile-enhanced .live-stage {
    position: relative;
    flex: none;
    display: block;
    height: clamp(260px, 74vw, 315px);
    min-height: 260px;
    margin: 4px auto 0;
    overflow: visible;
  }
  .live-showcase.live-mobile-enhanced .live-phone {
    position: absolute;
    left: 50%;
    top: 61%;
    z-index: 5;
    width: min(42vw, 205px);
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  .live-showcase.live-mobile-enhanced .live-temple-scene {
    position: absolute;
    display: block;
    top: 42%;
    left: 80%;
    z-index: 4;
    width: min(53vw, 250px);
    border-width: 4px;
    border-radius: 16px;
    opacity: 0;
  }
  .live-showcase.live-mobile-enhanced .live-temple-label { bottom: 7px; left: 7px; padding: 3px 7px; font-size: 10px; }
  .live-showcase.live-mobile-enhanced .live-phone-feed,
  .live-showcase.live-mobile-enhanced .live-video-top,
  .live-showcase.live-mobile-enhanced .live-video-bottom { opacity: 0; }
  .live-showcase.live-mobile-enhanced .live-reveal-copy {
    position: absolute;
    top: 49%;
    left: 39%;
    bottom: auto;
    width: 61%;
    max-width: none;
    margin: 0;
    padding: 3px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(-50% + 26px));
  }
  .live-showcase.live-mobile-enhanced .live-reveal-copy .home-eyebrow {
    font-size: 9px;
    line-height: 1.35;
    letter-spacing: .01em;
  }
  .live-showcase.live-mobile-enhanced .live-reveal-copy h3 {
    font-size: clamp(22px, 5.55vw, 28px) !important;
    line-height: 1.3;
    margin: 5px 0 7px;
  }
  .live-showcase.live-mobile-enhanced .live-reveal-copy > p:not(.home-eyebrow) {
    font-size: clamp(12px, 3.1vw, 14px);
    line-height: 1.55;
    color: #52665d;
  }
  .live-showcase.live-mobile-enhanced .live-reveal-copy .home-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-top: 9px;
    padding: 8px 5px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
  .live-showcase.live-mobile-enhanced .live-reveal-copy > small { margin-top: 7px; font-size: 10px; line-height: 1.4; }
  .live-showcase.live-mobile-enhanced .live-progress {
    display: flex;
    margin: 1px auto 0;
    gap: 3px;
    font-size: 8px;
  }
  .live-showcase.live-mobile-enhanced .live-progress-track { width: 104px; height: 2px; }
  .live-showcase.live-mobile-enhanced .live-progress-fill { transform: scaleX(0); }
}
@media (max-width: 700px) and (min-height: 620px) {
  .live-showcase.live-mobile-enhanced .live-heading h2 { font-size: clamp(23px, 6vw, 30px) !important; }
  .live-showcase.live-mobile-enhanced .live-phone { width: min(43vw, 175px); }
}
@media (max-width: 360px) and (min-height: 620px) {
  .live-showcase.live-mobile-enhanced .live-pin { padding-inline: 9px; }
  .live-showcase.live-mobile-enhanced .live-reveal-copy { left: 39%; width: 61%; padding: 2px; }
  .live-showcase.live-mobile-enhanced .live-reveal-copy h3 { font-size: 20px !important; }
  .live-showcase.live-mobile-enhanced .live-reveal-copy > p:not(.home-eyebrow) { font-size: 11px; line-height: 1.5; }
  .live-showcase.live-mobile-enhanced .live-reveal-copy .home-button { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-showcase, .live-showcase * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .live-showcase.live-enhanced { height: auto; }
}