/* ============================================================================
   Homepage hero + scroll motion (2026-11-02)

   The hero is a blue story card (left) beside the doctor's photo in an arch on
   a soft blob (right). On phones the card comes FIRST so the H1 and the
   booking button are on the first screen, and the photo follows, smaller.

   Scroll reveals and count-ups are driven by js/gj-home-motion.js. Nothing is
   hidden unless that script has put .gj-motion on <html>, so the page reads
   fine with JS off and to search engines.
   ========================================================================== */

/* ---------- hero layout ---------------------------------------------------- */
.gj-hero.hero {
    min-height: 0;
    padding: 108px 0 56px;
}
.gj-hero .hero-container {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
}
.gj-hero .scroll-indicator { display: none; }
/* styles.css moves .hero-image first below 1024px; the card stays first here */
.gj-hero .hero-image { order: 0; }

/* ---------- story card ----------------------------------------------------- */
.gj-hero-card {
    position: relative;
    overflow: hidden;
    padding: 44px 44px 36px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,.16) 0, transparent 38%),
        radial-gradient(circle at 8% 100%, rgba(56,189,248,.35) 0, transparent 45%),
        linear-gradient(140deg, #0b2f7a 0%, #1747b8 52%, #2563eb 100%);
    box-shadow: 0 30px 60px -20px rgba(11,47,122,.55);
}
/* faint dot grid, fading out from the top right */
.gj-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .14;
    pointer-events: none;
    background-image: radial-gradient(#fff 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask: radial-gradient(circle at 80% 20%, #000 0, transparent 70%);
            mask: radial-gradient(circle at 80% 20%, #000 0, transparent 70%);
}
.gj-hero-card::after {
    content: '';
    position: absolute;
    right: -90px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.12);
    box-shadow: 0 0 0 28px rgba(255,255,255,.04), 0 0 0 56px rgba(255,255,255,.03);
    pointer-events: none;
}
.gj-hero-card > * { position: relative; z-index: 1; }

/* rotating question + answer */
.gj-story {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 18px;
    font-size: 1.05rem;
    font-weight: 500;
}
.gj-story-q {
    position: relative;
    display: inline-grid;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fbbf24;
    color: #3b2302;
    font-weight: 700;
    perspective: 400px;
    overflow: hidden;
}
.gj-story-word {
    grid-area: 1 / 1;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    transform: rotateX(-90deg) translateY(10px);
    transform-origin: 50% 50% -10px;
    transition: transform .55s cubic-bezier(.2,1.2,.4,1), opacity .35s ease;
}
.gj-story-word.is-on { opacity: 1; transform: none; }
.gj-story-word.is-out { opacity: 0; transform: rotateX(90deg) translateY(-10px); }
.gj-story-a { color: rgba(255,255,255,.92); }

.gj-hero .hero-title {
    font-size: clamp(2.1rem, 3.6vw, 3.3rem);
    line-height: 1.12;
    margin-bottom: 16px;
}
html[data-lang="hi"] .gj-hero .hero-title { line-height: 1.32; }
.gj-hero .title-line-1 { color: #fff; }
.gj-hero .title-line-2 {
    background: linear-gradient(90deg, #7dd3fc, #fff 50%, #7dd3fc);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gjHeroGlint 5s linear infinite;
}
@keyframes gjHeroGlint { to { background-position: 200% center; } }
.gj-hero .hero-subtitle {
    color: rgba(255,255,255,.82);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 26px;
}

.gj-hero .hero-buttons { margin-bottom: 30px; }
.gj-hero .hero-buttons .btn-primary {
    background: #fff;
    color: #1747b8;
    box-shadow: 0 12px 26px -8px rgba(0,0,0,.45);
    position: relative;
    overflow: hidden;
}
.gj-hero .hero-buttons .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(37,99,235,.18), transparent);
    transform: skewX(-18deg);
    animation: gjHeroShine 3.6s ease-in-out 2s infinite;
}
@keyframes gjHeroShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
.gj-hero .hero-buttons .btn-secondary {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.55);
}
.gj-hero .hero-buttons .btn-secondary:hover { background: rgba(255,255,255,.12); }
.gj-hero .hero-buttons .btn-secondary i { transition: transform .25s ease; }
.gj-hero .hero-buttons .btn-secondary:hover i { transform: translateX(4px); }

.gj-hero .hero-stats {
    margin: 0;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.18);
}
.gj-hero .stat-item {
    padding: 4px 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.gj-hero .stat-item:hover { transform: none; box-shadow: none; }
.gj-hero .stat-number { color: #fff; font-size: 2.1rem; line-height: 1.1; }
.gj-hero .stat-label { color: rgba(255,255,255,.75); }

/* ---------- photo in an arch on a blob -------------------------------------- */
.gj-hero-photo {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 24px 20px 10px;
}
.gj-blob {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(440px, 96%);
    aspect-ratio: 1 / 1.05;
    transform: translateX(-50%);
    background: linear-gradient(150deg, #93c5fd, #2563eb 70%, #1747b8);
    border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%;
    opacity: .9;
    animation: gjMorph 12s ease-in-out infinite;
}
@keyframes gjMorph {
    0%, 100% { border-radius: 58% 42% 46% 54% / 52% 48% 52% 48%; }
    33%      { border-radius: 44% 56% 58% 42% / 46% 58% 42% 54%; }
    66%      { border-radius: 52% 48% 40% 60% / 58% 44% 56% 42%; }
}
.gj-arch {
    position: relative;
    z-index: 2;
    width: min(380px, 86%);
    border-radius: 999px 999px 28px 28px;
    overflow: hidden;
    background: #fff;
    border: 6px solid #fff;
    box-shadow: 0 30px 60px -18px rgba(11,47,122,.5);
}
.gj-hero .gj-arch .doctor-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}
.gj-hero .gj-chip {
    position: absolute;
    left: auto;
    bottom: auto;
    z-index: 3;
    padding: 10px 16px;
    gap: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 16px 34px -10px rgba(15,23,42,.35);
    animation: gjChipFloat 5s ease-in-out infinite;
}
.gj-hero .gj-chip i { font-size: 1.3rem; }
.gj-hero .gj-chip p { font-size: .9rem; line-height: 1.25; max-width: 150px; }
.gj-hero .gj-chip-1 { left: 0; bottom: 22%; }
.gj-hero .gj-chip-2 { right: 0; top: 14%; }
.gj-hero .gj-chip-2 i { color: #f59e0b; }
.gj-hero .gj-chip-3 { right: 4%; bottom: 4%; }
.gj-hero .gj-chip-3 i { color: #2563eb; }
@keyframes gjChipFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ---------- hero entrance --------------------------------------------------- */
.gj-motion .gj-hero-card { animation: gjRise .8s cubic-bezier(.2,.9,.3,1) both; }
.gj-motion .gj-hero-card > * { animation: gjRise .7s cubic-bezier(.2,.9,.3,1) both; }
.gj-motion .gj-hero-card > :nth-child(1) { animation-delay: .15s; }
.gj-motion .gj-hero-card > :nth-child(2) { animation-delay: .25s; }
.gj-motion .gj-hero-card > :nth-child(3) { animation-delay: .35s; }
.gj-motion .gj-hero-card > :nth-child(4) { animation-delay: .45s; }
.gj-motion .gj-hero-card > :nth-child(5) { animation-delay: .55s; }
.gj-motion .gj-blob { animation: gjBlobIn 1s cubic-bezier(.2,1.2,.4,1) .2s both, gjMorph 12s ease-in-out 1.2s infinite; }
.gj-motion .gj-arch { animation: gjRise .9s cubic-bezier(.2,.9,.3,1) .35s both; }
.gj-motion .gj-hero .gj-chip { animation: gjPop .6s cubic-bezier(.2,1.5,.4,1) both, gjChipFloat 5s ease-in-out infinite; }
.gj-motion .gj-hero .gj-chip-1 { animation-delay: .9s, 1.5s; }
.gj-motion .gj-hero .gj-chip-2 { animation-delay: 1.05s, 0s; }
.gj-motion .gj-hero .gj-chip-3 { animation-delay: 1.2s, .8s; }
@keyframes gjRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes gjBlobIn { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: .9; transform: translateX(-50%) scale(1); } }
@keyframes gjPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ---------- scroll reveals -------------------------------------------------- */
/* The old "[data-aos] {… !important}" shim in index.html would pin these
   visible, so the script strips data-aos from every element it takes over. */
.gj-motion .gj-rv {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.9,.3,1);
    transition-delay: var(--gj-d, 0s);
}
.gj-motion .gj-rv.gj-rv-left  { transform: translateX(-40px); }
.gj-motion .gj-rv.gj-rv-right { transform: translateX(40px); }
.gj-motion .gj-rv.gj-rv-zoom  { transform: scale(.88); }
.gj-motion .gj-rv.gj-in { opacity: 1; transform: none; }
/* An element waiting 40px off to the side widened the page on phones, so
   there everything rises instead, and nothing may push the page sideways. */
html.gj-motion { overflow-x: clip; }
@media (max-width: 960px) {
    .gj-motion .gj-rv.gj-rv-left,
    .gj-motion .gj-rv.gj-rv-right { transform: translateY(34px); }
    .gj-motion .gj-rv.gj-in { transform: none; }
}

/* ---------- section rhythm --------------------------------------------------- */
/* After About, light sections alternate white and a faint cool tint and open
   with a hairline that fades out at both ends. Videos, Blog and Appointment
   are full-colour bands with wave edges instead (below). Before this, five
   white sections ran together, then four grey ones. */
.conditions-section#conditions,
.testimonials-section#testimonials,
.appointment-section#appointment,
.ortho-info#orthopedic-doctor-indore,
.locations-section#contact {
    background: #fff;
}
.resources-section#resources,
.faq-section#faq {
    background: linear-gradient(180deg, #f4f8fe 0%, #f8fafd 100%);
}
#conditions, #videos, #testimonials, #blog, #appointment,
#resources, #orthopedic-doctor-indore, #faq, #contact {
    position: relative;
}
#testimonials::after, #resources::after, #orthopedic-doctor-indore::after, #faq::after, #contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: min(880px, 86%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.22) 30%, rgba(37,99,235,.22) 70%, transparent);
    pointer-events: none;
}

/* ---------- colour bands ------------------------------------------------- */
/* Videos: night blue, like a cinema. Blog: warm cream. Appointment: sky to mint.
   Their ::before / ::after are the wave edges, not the hairline. */
.video-section#videos {
    /* the glow sits below the top edge so the edge matches the wave exactly */
    background: radial-gradient(ellipse at 20% 35%, rgba(59,130,246,.22), transparent 50%),
                linear-gradient(180deg, #0f1b3d 0%, #13234d 100%);
}
#videos .section-subtitle { color: #93c5fd; }
#videos .section-title { color: #fff; }
.blog-section#blog {
    background: radial-gradient(ellipse at 85% 40%, rgba(251,191,36,.16), transparent 45%), #fbf3e6;
}
#blog .section-subtitle { color: #b45309; }
#blog .section-title::after { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.appointment-section#appointment {
    background: linear-gradient(180deg, #e0f2fe 0%, #e6f7f3 60%, #ccfbf1 100%);
}
/* ---------- curved, drifting edges --------------------------------------- */
/* A wave in the band's own colour sits just outside its top and bottom edges,
   over the neighbouring section's padding, and drifts sideways very slowly. */
#videos,
#blog,
#appointment { z-index: 2; overflow: visible; }
#videos::before,
#blog::before,
#appointment::before,
#videos::after,
#blog::after,
#appointment::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    height: 46px;
    transform: none;
    background-repeat: repeat-x;
    background-size: 1200px 46px;
    pointer-events: none;
    animation: gjWaveDrift 40s linear infinite;
}
#videos::before,
#blog::before,
#appointment::before { bottom: calc(100% - 1px); top: auto; }   /* 1px overlap: no hairline seam */
#videos::after,
#blog::after,
#appointment::after { top: calc(100% - 1px); animation-direction: reverse; }
@keyframes gjWaveDrift { to { background-position-x: 1200px; } }

/* wave shapes: top edge rises into the section above, bottom edge hangs below */
#videos::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V22C150 4 300 4 450 18S750 44 900 30 1100 6 1200 22V46Z' fill='%230f1b3d'/%3E%3C/svg%3E");
}
#videos::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0V20C200 42 400 42 600 24S1000 2 1200 20V0Z' fill='%2313234d'/%3E%3C/svg%3E");
}
#blog::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V26C200 6 400 6 600 24S1000 42 1200 26V46Z' fill='%23fbf3e6'/%3E%3C/svg%3E");
}
#blog::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0V18C150 40 300 40 450 26S750 2 900 16 1100 40 1200 18V0Z' fill='%23fbf3e6'/%3E%3C/svg%3E");
}
#appointment::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V24C150 6 300 6 450 20S750 42 900 28 1100 6 1200 24V46Z' fill='%23e0f2fe'/%3E%3C/svg%3E");
}
#appointment::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0V20C200 42 400 42 600 24S1000 2 1200 20V0Z' fill='%23ccfbf1'/%3E%3C/svg%3E");
}

/* ---------- chapter headings --------------------------------------------- */
.section-header { position: relative; isolation: isolate; }
.gj-chap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font: 600 .8rem/1 'Poppins', system-ui, sans-serif;
    letter-spacing: .2em;
    color: #2563eb;
}
.gj-chap::before,
.gj-chap::after {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.gj-ghost {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    font: 700 clamp(4.5rem, 13vw, 11rem)/1 'Playfair Display', Georgia, serif;
    letter-spacing: -.02em;
    /* colour alpha, not opacity: the appointment section forces opacity:1
       on everything inside it */
    color: rgba(37, 99, 235, .06);
    /* JS puts `top` at the heading's bottom edge; -92% lifts the word so its
       baseline sits there. It rises behind the label and heading and never
       reaches a description below (none of the words has a descender). */
    transform: translate(calc(-50% + var(--gj-x, 0px)), -92%);
    will-change: transform;
}
.section-header > :not(.gj-ghost) { position: relative; z-index: 1; }
#videos .gj-chap { color: #93c5fd; }
#videos .gj-ghost { color: rgba(255, 255, 255, .06); }
#blog .gj-chap { color: #b45309; }
#blog .gj-ghost { color: rgba(180, 83, 9, .07); }
#about .gj-ghost { color: rgba(255, 255, 255, .05); }
#about .gj-chap { color: #93c5fd; }

@media (max-width: 600px) {
    #videos::before,
    #blog::before,
    #appointment::before,
    #videos::after,
    #blog::after,
    #appointment::after { height: 26px; background-size: 700px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    #videos::before, #blog::before, #appointment::before,
    #videos::after, #blog::after, #appointment::after { animation: none; }
    .gj-ghost { transform: translate(-50%, -92%); }
}

/* ---------- phones and tablets ---------------------------------------------- */
@media (max-width: 960px) {
    .gj-hero.hero { padding: 88px 0 36px; }
    .gj-hero .hero-container { grid-template-columns: 1fr; gap: 26px; }
    .gj-hero-card { padding: 30px 22px 26px; border-radius: 22px; }
    .gj-arch { width: min(300px, 74%); }
    .gj-blob { width: min(340px, 90%); }
}
@media (max-width: 768px) {
    .gj-hero .hero-stats { grid-template-columns: repeat(3, 1fr); }
    .gj-hero .stat-number { font-size: 1.6rem; }
    .gj-hero .stat-label { font-size: .78rem; }
    .gj-hero .hero-buttons { flex-direction: column; }
    .gj-hero .gj-chip { padding: 8px 12px; }
    .gj-hero .gj-chip p { font-size: .8rem; max-width: 120px; }
    .gj-hero .gj-chip i { font-size: 1.1rem; }
}
@media (max-width: 480px) {
    /* the About photo's "15+ years" badge hung 6px off the right edge */
    .about-section .about-experience { right: 8px; }
    .gj-story { font-size: .95rem; }
    .gj-hero .hero-title { font-size: 1.9rem; }
    .gj-hero .gj-chip-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gj-hero *, .gj-hero *::after { animation: none !important; }
    .gj-motion .gj-rv { opacity: 1; transform: none; transition: none; }
    .gj-story-word { transition: none; }
}