/* ============================================================
   SHIV SRISHTI HOLIDAYS — Divine Shiva Extensions
   divine.css — Lord Shiva visual center, sacred temple design,
                Devanagari fonts, and animated devotional assets
   ============================================================ */

/* ── GOOGLE FONTS INTEGRATION ────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* ── SELF-HOSTED FONTS ──────────────────────────────────────── */
@font-face {
    font-family: 'Samarkan';
    src: url('../fonts/samarkan/SAMAN___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── FONT OVERRIDES ─────────────────────────────────────────── */
body {
    font-family: 'Source Serif 4', 'Raleway', sans-serif !important;
    background-color: var(--shiva-black) !important;
    color: var(--bhasma-white) !important;
}

h1, h2, h3, h4, h5, h6, .eyebrow, .nav-logo, .footer-logo-name {
    font-family: 'Cinzel', 'Noto Serif Devanagari', serif !important;
}

/* Devanagari script utility */
.devanagari {
    font-family: 'Noto Serif Devanagari', serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes diya-flicker {
    0%, 100% {
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 4px #FF6B35) drop-shadow(0 0 10px #FFD54F);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.08) rotate(1deg);
        filter: drop-shadow(0 0 8px #FF6B35) drop-shadow(0 0 15px #FF8F00);
        opacity: 1;
    }
}

@keyframes smoke-drift {
    0% {
        transform: translateY(10%) translateX(0) scale(0.9);
        opacity: 0;
    }
    10% {
        opacity: 0.15;
    }
    50% {
        transform: translateY(-40%) translateX(15px) scale(1.05);
        opacity: 0.1;
    }
    100% {
        transform: translateY(-90%) translateX(-10px) scale(1.2);
        opacity: 0;
    }
}

@keyframes trishul-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(212, 168, 67, 0.4));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.7));
        transform: scale(1.04);
    }
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes spin-clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── SACRED WATERMARKS & DECORATIONS ─────────────────────────── */

/* Nataraja watermarks */
.nataraja-bg {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 320px;
    height: 380px;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A843' stroke-width='0.7'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3Cpath d='M12 6v12M9 9l6 6M15 9l-6 6'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

/* ── DIYA FLAME COMPONENT ─────────────────────────────────────── */
.diya-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.diya-flame {
    width: 14px;
    height: 22px;
    background: linear-gradient(to top, #C62828 0%, #FF6B35 45%, #FFD54F 85%, #FFFFFF 100%);
    border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
    animation: diya-flicker 1.5s ease-in-out infinite;
    transform-origin: center bottom;
}

.diya-base {
    width: 28px;
    height: 10px;
    background: linear-gradient(to bottom, var(--gold), var(--rudra-brown));
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(212, 168, 67, 0.4);
    margin-top: -1px;
}

/* ── ASH SMOKE EFFECTS ───────────────────────────────────────── */
.ash-smoke-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.ash-wisp {
    position: absolute;
    width: 120px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(220, 220, 220, 0.06) 0%, transparent 70%);
    filter: blur(12px);
    animation: smoke-drift 9s ease-in-out infinite;
    bottom: -100px;
}

.ash-wisp.w2 {
    left: 25%;
    animation-duration: 12s;
    animation-delay: -3s;
}

.ash-wisp.w3 {
    right: 30%;
    animation-duration: 14s;
    animation-delay: -6s;
}

.ash-wisp.w4 {
    right: 10%;
    animation-duration: 10s;
    animation-delay: -1s;
}

/* ── TEMPLE GOPURAM CARD STYLE ───────────────────────────────── */
.gopuram-cap {
    position: relative;
    border-top: 2px solid var(--gold) !important;
}

/* Pointed temple arch top overlay for cards */
.gopuram-card {
    border: 1px solid rgba(212, 168, 67, 0.22) !important;
    background: var(--ash-grey) !important;
    position: relative;
    overflow: visible !important;
}

.gopuram-card .tc-header::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 16px;
    background: var(--ash-grey);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-bottom: none;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    z-index: 5;
}

.gopuram-card .tc-header::after {
    content: '▲';
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: var(--gold);
    text-shadow: 0 0 6px var(--sacred-saffron);
    z-index: 6;
}

/* Ensure ample vertical spacing between card rows to prevent Gopuram arches from overlapping the cards above them */
.trump-cards-grid {
    row-gap: 54px !important;
}

@media (max-width: 900px) {
    .trump-cards-grid {
        row-gap: 48px !important;
    }
}

/* ── TILAK DOUBLE BORDERS ─────────────────────────────────────── */
.tilak-border {
    position: relative;
    border: 1px solid var(--gold) !important;
}

.tilak-border::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--vermilion);
    pointer-events: none;
    border-radius: inherit;
    transform: none !important;
}

/* ── MANTRA SCROLL DEVOTIONAL BOX ────────────────────────────── */
.mantra-scroll {
    background: linear-gradient(135deg, rgba(46, 26, 14, 0.95), rgba(28, 28, 46, 0.98)) !important;
    border: 1px solid rgba(212, 168, 67, 0.35) !important;
    box-shadow: 0 0 35px rgba(255, 107, 53, 0.15) !important;
    position: relative;
    padding: 32px !important;
    border-radius: var(--radius-md) !important;
}

.mantra-scroll::before,
.mantra-scroll::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.mantra-scroll::before { top: 8px; }
.mantra-scroll::after { bottom: 8px; }

/* ── MALA RING BEADED FRAME ───────────────────────────────────── */
.mala-ring {
    position: relative;
    border-radius: 50%;
}

.mala-ring::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 50%;
    border: 4px dotted var(--rudra-brown);
    opacity: 0.75;
    pointer-events: none;
}

/* ── TRISHUL DIVIDERS ────────────────────────────────────────── */
.trishul-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    overflow: visible;
    padding: 32px 0;
    pointer-events: none;
}

.trishul-divider::before,
.trishul-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold) 60%, var(--vermilion) 90%, transparent);
}

.trishul-divider::after {
    background: linear-gradient(to left, transparent, var(--gold) 60%, var(--vermilion) 90%, transparent);
}

.trishul-center-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.trishul-center-icon svg {
    width: 100%;
    height: 100%;
    animation: trishul-pulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6));
}

/* ── SAFFRON FIRE ACCENTS ───────────────────────────────────── */
.saffron-badge {
    background: linear-gradient(135deg, var(--sacred-saffron), var(--vermilion)) !important;
    border: 1px solid var(--gold) !important;
    color: #FFFFFF !important;
    font-family: 'Cinzel', 'Noto Serif Devanagari', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 16px;
    border-radius: 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

/* Active navigation link indicator */
.nav-links a.active::before {
    content: '☽ ' !important;
    color: var(--sacred-saffron) !important;
    font-weight: bold;
}

/* Primary CTA modifications */
.btn-primary, .search-btn {
    background: linear-gradient(135deg, var(--sacred-saffron) 0%, var(--vermilion) 100%) !important;
    border: 1px solid var(--gold) !important;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover, .search-btn:hover {
    box-shadow: 0 0 35px rgba(255, 107, 53, 0.8) !important;
    transform: translateY(-2px);
}

/* Epic/Mahakal Badge */
.tc-header--epic .tc-rare-badge,
.tc-rare-badge.epic-mahakal {
    background: linear-gradient(135deg, var(--vermilion), #7f0000) !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    font-family: 'Noto Serif Devanagari', serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 12px var(--vermilion) !important;
}

/* Saptarishi Constellation background styling */
.saptarishi-constellation {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='white' stroke-width='0.5'%3E%3C!-- Ursa Major (Saptarishi) --%3E%3Ccircle cx='200' cy='200' r='1.5' fill='white'/%3E%3Ccircle cx='250' cy='220' r='1.5' fill='white'/%3E%3Ccircle cx='310' cy='250' r='1.5' fill='white'/%3E%3Ccircle cx='340' cy='310' r='2' fill='%23D4A843'/%3E%3Ccircle cx='390' cy='320' r='1.5' fill='white'/%3E%3Ccircle cx='410' cy='380' r='1.5' fill='white'/%3E%3Ccircle cx='350' cy='390' r='1.5' fill='white'/%3E%3Cpath d='M200 200l50 20 60 30 30 60 50 10 20 60-60 10z' stroke-dasharray='2 2' stroke='rgba(255,255,255,0.2)'/%3E%3C!-- Pole Star (Dhruva) --%3E%3Ccircle cx='180' cy='80' r='3' fill='%23FFD54F' filter='drop-shadow(0 0 4px %23FFD54F)'/%3E%3C/svg%3E");
    background-size: cover;
}

/* ── HERO CENTERED LAYOUT ────────────────────────────────────── */
.hero-center-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.hero-trishul-wrap {
    width: 90px;
    height: auto;
    margin: 0 auto 16px auto;
    position: relative;
    animation: float-gentle 4s ease-in-out infinite;
    filter: drop-shadow(0 0 25px rgba(255, 107, 53, 0.55));
}

.hero-trishul-svg {
    width: 100%;
    height: auto;
}

/* Vignette Overlay to showcase centered Shiva with glowing thunder and lights */
.stitch-hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(10, 10, 20, 0.15) 0%, rgba(10, 10, 20, 0.65) 60%, rgba(5, 5, 15, 0.95) 100%) !important;
    z-index: 10;
}

/* Staggered entrance animations for majestic celestial build-up */
.stitch-hero-badge {
    animation: fadeSlideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stitch-hero-title {
    animation: fadeSlideDown 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 107, 53, 0.25) !important;
    font-family: 'Samarkan', 'Noto Serif Devanagari', serif !important;
    font-weight: 400 !important; /* Samarkan is a single-weight display font */
    letter-spacing: 0.02em !important;
    line-height: 1.15 !important;
}

/* Gold accent word — color differentiates without Western italic slant */
.stitch-hero-title span {
    font-style: normal !important;
    color: var(--gold) !important;
    text-shadow: 0 0 30px rgba(212, 168, 67, 0.5) !important;
}

.stitch-hero-desc {
    max-width: 620px !important;
    margin-inline: auto !important;
    animation: fadeSlideDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.search-widget {
    animation: fadeSlideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
    border: 1px solid rgba(212, 168, 67, 0.35) !important;
    background: rgba(10, 10, 25, 0.45) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 168, 67, 0.1) !important;
}

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) {
    .stitch-hero-content {
        max-width: var(--container-max) !important;
        width: 100% !important;
        padding: 0 var(--container-pad) !important;
    }
}

/* ── EMBER/SPARK RAIN ANIMATION ────────────────────────────── */
.ember-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 11;
}

.ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFFDE7 0%, var(--gold) 40%, var(--sacred-saffron) 100%);
    box-shadow: 0 0 8px var(--sacred-saffron), 0 0 16px var(--gold);
    opacity: 0;
    animation: ember-rise 7s linear infinite;
}

@keyframes ember-rise {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-105vh) translateX(var(--drift, 40px)) scale(1.2);
        opacity: 0;
    }
}

/* ── RADIAL DIAL FLAME COUNTER GLOW ─────────────────────────── */
.stat-item {
    position: relative;
}
.stat-item::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.15) 0%, rgba(212, 168, 67, 0.05) 50%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse-diya-flame 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}

@keyframes pulse-diya-flame {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* ── FLOATING QUOTE MARKS ───────────────────────────────────── */
.testimonial-card {
    position: relative;
    overflow: hidden;
}
.testimonial-card .quote-mark {
    animation: quote-float 4s ease-in-out infinite;
    display: inline-block;
}

@keyframes quote-float {
    0%, 100% { transform: translateY(0); opacity: 0.15; }
    50% { transform: translateY(-8px); opacity: 0.35; text-shadow: 0 0 10px rgba(212, 168, 67, 0.4); }
}

/* ── CTA BANNER SACRED SHIMMER & CORNER ARCH ORNAMENTS ─────── */
.cta-banner {
    position: relative;
    background: linear-gradient(135deg, rgba(8, 8, 16, 0.95), rgba(46, 26, 14, 0.98), rgba(28, 28, 46, 0.95)) !important;
    background-size: 200% 200% !important;
    animation: cta-sacred-shimmer 8s ease infinite !important;
    border: 1px solid rgba(212, 168, 67, 0.3) !important;
    box-shadow: 0 20px 50px rgba(8, 8, 16, 0.8), 0 0 30px rgba(255, 107, 53, 0.15) !important;
    overflow: hidden;
}

@keyframes cta-sacred-shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Add subtle corner temple arch accents using CSS vectors inside CTA */
.cta-banner::before, .cta-banner::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(212, 168, 67, 0.12);
    pointer-events: none;
    z-index: 1;
}
.cta-banner::before {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
    border-radius: 12px 0 0 0;
}
.cta-banner::after {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 12px 0;
}

/* ── WA-FLOAT PULSE RING ─────────────────────────────────────── */
/* Note: position:fixed is set in global.css — do NOT override it here */
.wa-float::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.5);
    animation: wa-float-pulse 2s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes wa-float-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── CARD KEN BURNS IMAGE ZOOM ─────────────────────────────── */
.stitch-card-img-wrap, .tc-img-wrap {
    overflow: hidden !important;
}
.stitch-card-img, .tc-img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.stitch-card:hover .stitch-card-img, .trump-card:hover .tc-img {
    transform: scale(1.08) !important;
}

/* ── HOLOGRAPHIC CARD SHIMMER GLINT ─────────────────────────── */
.tc-holographic {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
    background-size: 250% 100%;
    background-position: -150% 0;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
    transition: background-position 0.8s ease;
}
.trump-card:hover .tc-holographic {
    background-position: 150% 0;
    transition: background-position 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── BACK TO TOP FLOATING BUTTON PULSE ────────────────────────── */
/* Sits at bottom-RIGHT corner — do NOT move with 'right: 96px' */
#back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99;
    width: 44px;
    height: 44px;
    background: rgba(10, 10, 20, 0.8);
    border: 1px solid rgba(212, 168, 67, 0.4);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(8px);
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
#back-to-top:hover {
    background: var(--gold);
    color: var(--cosmic-black);
    box-shadow: 0 0 15px var(--gold);
    transform: translateY(-4px);
}

/* ── ADDITIONAL POLISH & MICRO-ANIMATIONS ─────────────────────── */
.petal-rule .petal.accent i {
    animation: spin-clockwise 12s linear infinite;
    display: inline-block;
}

.nav-logo:hover .logo-icon {
    box-shadow: 0 0 25px rgba(212, 168, 67, 0.6), 0 0 50px rgba(255, 107, 53, 0.3) !important;
    transition: box-shadow 0.4s ease !important;
}

.nav-logo:hover .om-symbol {
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.9)) !important;
}

/* ── WHY CHOOSE US — MOUSE-TRACKING ILLUMINATION ──────────────── */
.why-section {
    position: relative;
    background: linear-gradient(160deg, rgba(6, 6, 15, 0.85) 0%, rgba(10, 10, 26, 0.85) 50%, rgba(7, 7, 14, 0.85) 100%) !important;
    border-top: 1px solid rgba(212, 168, 67, 0.15) !important;
    border-bottom: 1px solid rgba(212, 168, 67, 0.15) !important;
    overflow: hidden;
    z-index: 1;
}

/* Spinning mandala watermark preserved via a separate pseudo-element */
.why-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23D4A843' stroke-width='0.12' stroke-opacity='0.07'%3E%3Ccircle cx='50' cy='50' r='45'/%3E%3Ccircle cx='50' cy='50' r='35'/%3E%3Ccircle cx='50' cy='50' r='25'/%3E%3Cpath d='M50 5 L50 95 M5 50 L95 50 M18 18 L82 82 M18 82 L82 18'/%3E%3Cpath d='M50 5 L60 25 L50 45 L40 25 Z'/%3E%3Cpath d='M50 95 L60 75 L50 55 L40 75 Z'/%3E%3Cpath d='M5 50 L25 60 L45 50 L25 40 Z'/%3E%3Cpath d='M95 50 L75 60 L55 50 L75 40 Z'/%3E%3C/svg%3E") no-repeat center/contain;
    animation: spin-clockwise 60s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.why-section > * {
    position: relative;
    z-index: 2;
}

/* Global mouse-tracking orbs container that sits behind all content */
.global-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Individual global orbs — huge, extremely translucent gradient blobs */
.global-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transition:
        left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        top  0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 1.2s ease;
    will-change: left, top;
    pointer-events: none;
}

/* Orb 1 — warm saffron/gold, follows cursor closely */
.global-orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle at center,
        rgba(255, 160, 60, 0.09) 0%,
        rgba(212, 168, 67, 0.05) 40%,
        transparent 70%);
}

/* Orb 2 — cool indigo, lags behind cursor */
.global-orb-2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at center,
        rgba(120, 80, 220, 0.07) 0%,
        rgba(60, 40, 140, 0.04) 40%,
        transparent 70%);
    transition-duration: 1.6s, 1.6s, 1.2s;
}

/* Orb 3 — deep vermilion accent, slow drift */
.global-orb-3 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center,
        rgba(200, 60, 30, 0.06) 0%,
        rgba(180, 40, 20, 0.03) 40%,
        transparent 70%);
    transition-duration: 2.2s, 2.2s, 1.2s;
}

/* Performance optimization: Disable orbs on touch-only or non-hover devices */
@media (hover: none), (pointer: coarse) {
    .global-orbs {
        display: none !important;
    }
}

/* ── PLANNER SECTION PARALLAX BACKGROUND ───────────────────── */
.planner-section-outer {
    position: relative;
    background: 
        linear-gradient(rgba(8, 8, 16, 0.93), rgba(8, 8, 16, 0.93)),
        url('../images/destination/Mansarovar-Lake.webp') center/cover no-repeat fixed !important;
    border-top: 1px solid rgba(212, 168, 67, 0.15) !important;
    border-bottom: 1px solid rgba(212, 168, 67, 0.15) !important;
    overflow: hidden;
    z-index: 1;
}

.planner-section-outer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23D4A843' stroke-width='0.1' stroke-opacity='0.1'%3E%3Ccircle cx='60' cy='60' r='55'/%3E%3Ccircle cx='60' cy='60' r='45'/%3E%3Ccircle cx='60' cy='60' r='35'/%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3Cpath d='M60 5 L60 115 M5 60 L115 60 M21 21 L99 99 M21 99 L99 21'/%3E%3C/svg%3E") no-repeat center/contain;
    animation: spin-clockwise 90s linear infinite reverse;
    pointer-events: none;
    z-index: 0;
}

.planner-section-outer > * {
    position: relative;
    z-index: 2;
}

/* ── MOUNTAIN RIDGE SILHOUETTE DIVIDERS ───────────────────── */
.mountain-divider {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: -30px;
    margin-bottom: -30px;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.mountain-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mountain-divider svg path {
    fill: var(--shiva-black);
    stroke: rgba(212, 168, 67, 0.25);
    stroke-width: 0.5px;
}

/* ── FOOTER PETALS RISE ANIMATION ──────────────────────────── */
.footer-petal-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.footer-petal {
    position: absolute;
    bottom: -20px;
    font-size: 14px;
    color: rgba(212, 168, 67, 0.18);
    animation: footer-petal-rise 8s linear infinite;
    pointer-events: none;
}

@keyframes footer-petal-rise {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-240px) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

/* ── INNER PAGE SPECIFFIC HEROS ───────────────────────────────── */
.hero-chardham {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Badrinath_new.jpg') center/cover no-repeat !important;
}
.hero-kailash {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Mount-Kailash_new.jpg') center/cover no-repeat !important;
}
.hero-amarnath {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Amarnath.webp') center/cover no-repeat !important;
}
.hero-ayodhya {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Kashi-Vishwanath.jpg') center/cover no-repeat !important;
}
.hero-adiparvat {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Om-Parvat_new.jpg') center/cover no-repeat !important;
}
.hero-dodham {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Kedarnath_new.jpg') center/cover no-repeat !important;
}
.hero-pashupatinath {
    background: linear-gradient(to bottom, rgba(10, 10, 20, 0.4) 0%, rgba(10, 10, 20, 0.95) 100%), 
                url('../images/destination/Nepal.webp') center/cover no-repeat !important;
}

/* ── MOBILE & iOS — planner parallax only (why-section no longer uses fixed) ─ */
@media (pointer: coarse), (max-width: 1024px) {
    .planner-section-outer {
        background-attachment: scroll !important;
    }
    /* Reduce orb size on smaller screens */
    .global-orb-1 { width: 400px; height: 400px; }
    .global-orb-2 { width: 450px; height: 450px; }
    .global-orb-3 { width: 350px; height: 350px; }
}

@supports (-webkit-touch-callout: none) {
    .planner-section-outer {
        background-attachment: scroll !important;
    }
}