/* ==========================================================================
   Neta India — premium hero (hero.php, used by index.php and wiki.php)
   Light surface, animated saffron/blue/green glow, floating clipart, shimmer
   heading, count-up stats. Every animation is disabled under
   prefers-reduced-motion and paused while the hero is off-screen.
   ========================================================================== */

body.home-modern #famous {
    scroll-margin-top: 84px;   /* keeps "Explore Profiles" clear of the sticky header */
}

/* ---------- Header + hero as one block ----------
   On the hero pages the (sticky) header is pulled over the top of the hero: it is transparent
   while the page is at the top and turns into the usual white bar once scrolled (.is-scrolled
   is toggled by the small script at the end of hero.php). --hdr is the header height. */
body.home-modern:has(.hero-premium) { --hdr: 78px; }
@media (max-width: 800px) {
    body.home-modern:has(.hero-premium) { --hdr: 66px; }
}
body.home-modern:has(.hero-premium) #header {
    margin-bottom: calc(var(--hdr) * -1);
    transition: background .3s ease, box-shadow .3s ease;
}
body.home-modern:has(.hero-premium) #header:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* an open mobile menu needs a solid bar behind the logo and toggle */
body.home-modern:has(.hero-premium) #header:has(.menu.open) {
    background: rgba(255, 255, 255, 0.97);
}

/* ---------- Section ---------- */
body.home-modern .hero-premium {
    clear: both;             /* header is float-left; without this the flex box can squeeze beside it */
    width: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: max(60vh, 480px);   /* about 60% of the screen height */
    /* header + bunting zone on top, panel overlap at the bottom; spacing scales with the screen height
       so the hero stays near 60% of the viewport on 800-1100px tall windows */
    padding: calc(clamp(28px, 4.6vh, 48px) + var(--hdr, 78px)) 0 clamp(26px, 4vh, 42px);
    text-align: center;
    background: linear-gradient(180deg, #f6f9ff 0%, #fbfcff 55%, #fff6ec 100%);
    border-bottom: 1px solid rgba(255, 153, 51, 0.15);
}
body.home-modern .hero-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(rgba(36, 81, 183, 0.22) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.28;
    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
}

/* ---------- Animated backdrop ---------- */
.hero-premium .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-premium .blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.hero-premium .blob-saffron {
    width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
    right: -10%; top: -32%;
    background: radial-gradient(circle, rgba(255, 153, 51, 0.5) 0%, rgba(255, 153, 51, 0) 68%);
    animation: hpDriftA 18s ease-in-out infinite alternate;
}
.hero-premium .blob-blue {
    width: 52vw; height: 52vw; max-width: 800px; max-height: 800px;
    left: -14%; top: -28%;
    background: radial-gradient(circle, rgba(36, 81, 183, 0.36) 0%, rgba(36, 81, 183, 0) 68%);
    animation: hpDriftB 23s ease-in-out infinite alternate;
}
.hero-premium .blob-green {
    width: 38vw; height: 38vw; max-width: 600px; max-height: 600px;
    left: 34%; bottom: -46%;
    background: radial-gradient(circle, rgba(19, 136, 8, 0.28) 0%, rgba(19, 136, 8, 0) 68%);
    animation: hpDriftC 20s ease-in-out infinite alternate;
}
/* two slowly counter-rotating dashed rings, each carrying one orbiting dot */
.hero-premium .ring {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--hdr, 78px) / 2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.hero-premium .ring::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
}
.hero-premium .ring-1 {
    width: 560px; height: 560px;
    border: 1px dashed rgba(36, 81, 183, 0.22);
    animation: hpSpin 60s linear infinite;
}
.hero-premium .ring-1::after { background: #ff9933; box-shadow: 0 0 14px rgba(255, 153, 51, 0.8); }
.hero-premium .ring-2 {
    width: 860px; height: 860px;
    border: 1px dotted rgba(255, 153, 51, 0.4);
    animation: hpSpin 90s linear infinite reverse;
}
.hero-premium .ring-2::after { background: #138808; box-shadow: 0 0 14px rgba(19, 136, 8, 0.7); }

/* ---------- Bunting garland ---------- */
.hero-premium .hero-bunting {
    position: absolute;
    left: 0;
    top: var(--hdr, 78px);
    z-index: 1;
    pointer-events: none;
    transform-origin: 50% 0;
    animation: hpSway 7s ease-in-out infinite alternate;
    filter: drop-shadow(0 4px 4px rgba(11, 31, 75, 0.12));
}

/* ---------- Floating clipart ---------- */
.hero-premium .hero-art {
    position: absolute;
    inset: var(--hdr, 78px) 0 0;
    z-index: 1;
    pointer-events: none;
}
.hero-premium .art {
    position: absolute;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);   /* pointer parallax (js/hero.js) */
    animation: hpFade .9s ease both;
}
.hero-premium .art-float {
    animation: hpFloat 7s ease-in-out infinite;
}
.hero-premium .art-float-b { animation: hpFloatB 8.5s ease-in-out infinite; }
.hero-premium .art-float-c { animation: hpFloatC 9.5s ease-in-out infinite; }
.hero-premium .art svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 18px 22px rgba(11, 31, 75, 0.18));
}
.hero-premium .art-book   { left: 9vw;    top: 30%; width: clamp(75px, 6.5vw, 120px); animation-delay: .2s; }
.hero-premium .art-quote  { left: 15vw;   top: 16%; width: clamp(46px, 4.2vw, 73px);  animation-delay: .5s; }
.hero-premium .art-card-l { left: 5vw;    bottom: 12%; width: clamp(90px, 7vw, 125px); animation-delay: .7s; }
.hero-premium .art-mega   { right: 9vw;   top: 22%; width: clamp(85px, 7.5vw, 135px); animation-delay: .3s; }
.hero-premium .art-badge  { right: 19vw;  bottom: 12%; width: clamp(39px, 3.4vw, 60px); animation-delay: .8s; }
.hero-premium .art-card-r { right: 5vw;   bottom: 24%; width: clamp(90px, 7vw, 125px); animation-delay: .6s; }
/* clipart is half its original size; the glass cards keep px-based insides, so zoom them with the box */
.hero-premium .art-card .mini-card { zoom: .5; }
@supports not (zoom: 1) { .hero-premium .art-card { display: none; } }

/* the top page of the open book turns over, rests, then fades and repeats */
.hero-premium .flip {
    transform-origin: 110px 110px;
    animation: hpFlip 6s ease-in-out infinite;
}
.hero-premium .tw {
    transform-box: fill-box;
    transform-origin: center;
    animation: hpTwinkle 3.2s ease-in-out infinite;
}
.hero-premium .tw2 { animation-delay: -1.4s; }
/* sound waves pulse outward */
.hero-premium .wave { animation: hpWave 2.4s ease-in-out infinite; }
.hero-premium .w2 { animation-delay: .25s; }
.hero-premium .w3 { animation-delay: .5s; }
/* light sweeping across the rosette */
.hero-premium .shine { animation: hpShine 4.2s ease-in-out infinite; }

/* glass profile cards */
.hero-premium .mini-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "av body" "tag tag";
    gap: 10px 12px;
    align-items: center;
    padding: 14px;
    text-align: left;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(11, 31, 75, 0.14), inset 0 0 0 1px rgba(11, 31, 75, 0.04);
}
.hero-premium .art-card-l .mini-card { transform: rotate(-5deg); }
.hero-premium .art-card-r .mini-card { transform: rotate(4deg); }
.hero-premium .mc-avatar {
    grid-area: av;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2451b7, #ff9933);
    box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(11, 31, 75, 0.2);
    overflow: hidden;
}
.hero-premium .mc-avatar::before {           /* head */
    content: "";
    position: absolute;
    left: 50%; top: 9px;
    width: 15px; height: 15px;
    margin-left: -7.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
}
.hero-premium .mc-avatar::after {            /* shoulders */
    content: "";
    position: absolute;
    left: 50%; top: 27px;
    width: 30px; height: 24px;
    margin-left: -15px;
    border-radius: 15px 15px 0 0;
    background: rgba(255, 255, 255, 0.95);
}
.hero-premium .mc-check {
    position: absolute;
    right: -1px; bottom: -1px;
    z-index: 2;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #138808;
    box-shadow: 0 0 0 2px #fff;
}
.hero-premium .mc-check::after {
    content: "";
    position: absolute;
    left: 5px; top: 3px;
    width: 3px; height: 6px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}
.hero-premium .mc-body { grid-area: body; display: block; }
.hero-premium .mc-line { display: block; height: 8px; border-radius: 4px; background: #c9d3ea; }
.hero-premium .mc-l1 { width: 86%; background: #0b1f4b; opacity: 0.85; margin-bottom: 8px; }
.hero-premium .mc-l2 { width: 58%; }
.hero-premium .mc-tag {
    grid-area: tag;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 9px;
    border-radius: 20px;
    background: rgba(255, 153, 51, 0.16);
    border: 1px solid rgba(255, 153, 51, 0.4);
    color: #a14d00;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}
.hero-premium .mc-tag i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ff9933;
    animation: hpPulse 1.8s ease-in-out infinite;
}
.hero-premium .mini-card-alt .mc-avatar { background: linear-gradient(135deg, #138808, #2451b7); }
.hero-premium .mini-card-alt .mc-tag {
    background: rgba(36, 81, 183, 0.1);
    border-color: rgba(36, 81, 183, 0.32);
    color: #2451b7;
}
.hero-premium .mini-card-alt .mc-tag i { background: #2451b7; }

/* twinkling four-point stars */
.hero-premium .spark {
    position: absolute;
    height: auto;
    animation: hpTwinkle 3.4s ease-in-out infinite;
}
.hero-premium .spark path { fill: currentColor; }
.hero-premium .s-saffron { color: #ff9933; }
.hero-premium .s-blue    { color: #2451b7; }
.hero-premium .s-green   { color: #138808; }

/* ---------- Copy ---------- */
body.home-modern .hero-premium .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1000px;   /* wide enough for the one-line heading; the paragraph keeps its own narrower max-width */
    margin: 0 auto;
    padding: 0 20px;
}
body.home-modern .hero-premium .hero-inner > * {
    animation: hpUp .85s cubic-bezier(.2, .7, .2, 1) both;
}
body.home-modern .hero-premium .hero-eyebrow {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: clamp(12px, 2.2vh, 22px);
    padding: 7px 20px 7px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 153, 51, 0.45);
    box-shadow: 0 8px 22px rgba(255, 153, 51, 0.16);
    color: #a14d00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation-delay: .05s;
}
body.home-modern .hero-premium .hero-eyebrow::after {     /* light sweep */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: skewX(-20deg);
    animation: hpSweep 5s ease-in-out 1.2s infinite;
}
.hero-premium .hero-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #138808;
    box-shadow: 0 0 0 0 rgba(19, 136, 8, 0.5);
    animation: hpRipple 2s ease-out infinite;
}
body.home-modern .hero-premium h1 {
    font-family: 'Lora', serif;
    /* one line: the size is capped by the screen height and by the width (the heading is ~16.4em wide) */
    font-size: clamp(18px, min(4.6vh, calc((100vw - 40px) / 17)), 54px);
    white-space: nowrap;
    line-height: 1.18;
    font-weight: 600;
    margin: 0 0 clamp(10px, 2vh, 20px);
    background: linear-gradient(100deg, #0b1f4b 8%, #0b1f4b 30%, #e07b12 48%, #2451b7 68%, #0b1f4b 90%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hpUp .85s cubic-bezier(.2, .7, .2, 1) .15s both, hpGradient 9s ease-in-out 1s infinite alternate;
}
body.home-modern .hero-premium p {
    max-width: 620px;
    margin: 0 auto;
    color: #56617c;
    font-size: clamp(14px, 1.65vh, 16.5px);
    line-height: 1.75;
    animation-delay: .3s;
}
.hero-premium .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(14px, 2.6vh, 28px);
    animation-delay: .45s;
}
.hero-premium .hero-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.hero-premium .hero-btn-primary {
    background: linear-gradient(120deg, #ffb457, #ff9933);
    color: #0b1f4b;
    box-shadow: 0 12px 28px rgba(255, 153, 51, 0.42);
}
.hero-premium .hero-btn-primary::after {                   /* shine */
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -70%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    animation: hpSweep 4.5s ease-in-out 2s infinite;
}
.hero-premium .hero-btn-primary i { animation: hpNudge 1.6s ease-in-out infinite; }
.hero-premium .hero-btn-primary:hover {
    color: #0b1f4b;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(255, 153, 51, 0.55);
}
.hero-premium .hero-btn-ghost {
    background: rgba(255, 255, 255, 0.78);
    color: #0b1f4b;
    border: 1px solid rgba(11, 31, 75, 0.14);
    box-shadow: 0 8px 22px rgba(11, 31, 75, 0.08);
}
.hero-premium .hero-btn-ghost:hover {
    color: #a14d00;
    border-color: #ff9933;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(255, 153, 51, 0.22);
}
.hero-premium .hero-stats {
    display: inline-flex;
    margin-top: clamp(14px, 3vh, 32px);
    padding: clamp(8px, 1.5vh, 16px) 12px;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(11, 31, 75, 0.07);
    border-radius: 22px;
    box-shadow: 0 16px 44px rgba(11, 31, 75, 0.09);
    animation-delay: .6s;
}
.hero-premium .hero-stats > div {
    padding: 0 32px;
    text-align: center;
}
.hero-premium .hero-stats > div + div { border-left: 1px solid #e3e9f5; }
.hero-premium .hero-stats b {
    display: block;
    font-family: 'Lora', serif;
    font-size: clamp(24px, 3vh, 32px);
    font-weight: 600;
    line-height: 1.1;
    color: #0b1f4b;
    font-variant-numeric: tabular-nums;
}
.hero-premium .hero-stats b[data-suffix]::after { content: attr(data-suffix); color: #ff9933; }
.hero-premium .hero-stats span {
    display: block;
    margin-top: 4px;
    color: #66708c;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* ---------- Keyframes ---------- */
@keyframes hpUp      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hpFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpFloat   { 0%, 100% { transform: translateY(0) rotate(0deg); }  50% { transform: translateY(-16px) rotate(1.5deg); } }
@keyframes hpFloatB  { 0%, 100% { transform: translateY(0) rotate(0deg); }  50% { transform: translateY(14px) rotate(-2deg); } }
@keyframes hpFloatC  { 0%, 100% { transform: translate(0, 0); }             50% { transform: translate(8px, -12px); } }
@keyframes hpDriftA  { from { transform: translate(0, 0) scale(1); }        to { transform: translate(-70px, 60px) scale(1.15); } }
@keyframes hpDriftB  { from { transform: translate(0, 0) scale(1.05); }     to { transform: translate(90px, 40px) scale(.92); } }
@keyframes hpDriftC  { from { transform: translate(0, 0) scale(1); }        to { transform: translate(-80px, -40px) scale(1.2); } }
@keyframes hpSpin    { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hpSway    { from { transform: skewX(-.7deg); } to { transform: skewX(.7deg); } }
@keyframes hpTwinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes hpFlip    {
    0%, 10%   { transform: scaleX(1);  opacity: 1; }
    38%       { transform: scaleX(-1); opacity: 1; }
    58%       { transform: scaleX(-1); opacity: 1; }
    66%       { transform: scaleX(-1); opacity: 0; }
    67%       { transform: scaleX(1);  opacity: 0; }
    78%, 100% { transform: scaleX(1);  opacity: 1; }
}
@keyframes hpWave    { 0%, 100% { opacity: .25; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes hpShine   { 0%, 55% { transform: translateX(-30px); } 100% { transform: translateX(170px); } }
@keyframes hpSweep   { 0%, 55% { left: -60%; } 100% { left: 160%; } }
@keyframes hpGradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes hpNudge   { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes hpPulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
@keyframes hpRipple  { 0% { box-shadow: 0 0 0 0 rgba(19, 136, 8, 0.5); } 100% { box-shadow: 0 0 0 10px rgba(19, 136, 8, 0); } }

/* stop animating while the hero is scrolled out of view (js/hero.js toggles .in-view) */
.hero-premium.js-ready:not(.in-view) *,
.hero-premium.js-ready:not(.in-view) *::before,
.hero-premium.js-ready:not(.in-view) *::after {
    animation-play-state: paused !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
    .hero-premium .art-card,
    .hero-premium .art-quote { display: none; }
    /* narrower screens: tuck the two big pieces against the edges so they never touch the heading */
    .hero-premium .art-book   { left: 2vw; top: 32%; width: 70px; }
    .hero-premium .art-mega   { right: 2vw; top: 20%; width: 80px; }
    .hero-premium .art-badge  { right: 6vw; }
}
@media (max-width: 991px) {
    body.home-modern .hero-premium { min-height: 0; padding: calc(64px + var(--hdr, 78px)) 0 64px; }
    .hero-premium .art-badge { display: none; }
    .hero-premium .art-book   { left: 2vw; top: auto; bottom: 8%; width: 65px; opacity: .8; }
    .hero-premium .art-mega   { right: 2vw; top: 14%; width: 75px; opacity: .8; }
    .hero-premium .ring-2 { display: none; }
}
@media (max-width: 767px) {
    body.home-modern .hero-premium { padding: calc(52px + var(--hdr, 66px)) 0 56px; }
    .hero-premium .art { display: none; }
    /* keep only the sparkles that sit clear of the text */
    .hero-premium .spark:nth-of-type(1),
    .hero-premium .spark:nth-of-type(2),
    .hero-premium .spark:nth-of-type(4),
    .hero-premium .spark:nth-of-type(5),
    .hero-premium .spark:nth-of-type(8) { display: none; }
    .hero-premium .ring-1 { width: 420px; height: 420px; }
    body.home-modern .hero-premium p { font-size: 15px; line-height: 1.8; }
    .hero-premium .hero-btn { padding: 13px 24px; }
    .hero-premium .hero-stats > div { padding: 0 20px; }
    .hero-premium .hero-stats b { font-size: 26px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-premium *,
    .hero-premium *::before,
    .hero-premium *::after {
        animation: none !important;
        transition: none !important;
    }
}