/* ==========================================================================
   Abhi's Clinic — Polish layer
   Layered on top of main.css. Focuses on richness, motion and detail.
   ========================================================================== */

/* ---------- Selection + scrollbar ---------- */
::selection { background: var(--derma-200); color: var(--derma-900); }
html { scrollbar-color: var(--derma-300) var(--bg-alt); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--bg-alt); }
html::-webkit-scrollbar-thumb { background: linear-gradient(var(--derma-700), var(--rheum-900)); border-radius: 999px; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; z-index: 200;
    width: 0%;
    background: linear-gradient(90deg, var(--derma-700), var(--rheum-900));
    box-shadow: 0 0 12px rgba(192, 108, 132, .5);
    transition: width .05s linear;
    will-change: width;
}

/* ---------- Subtle noise texture (body overlay) ---------- */
body::after {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: .035; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Staggered reveal (extends .reveal) ---------- */
.reveal-up   { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-right{ opacity: 0; transform: translateX(28px);  transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-scale{ opacity: 0; transform: scale(.94);        transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-up.is-visible, .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible { opacity: 1; transform: none; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

/* ---------- Split-hero: layered ornaments ---------- */
.split-hero { isolation: isolate; }
.split-hero .ornament {
    position: absolute; border-radius: 50%; filter: blur(60px);
    opacity: .55; pointer-events: none; z-index: 0;
    will-change: transform;
    transition: transform 1s var(--ease);
}
.split-hero .orn-1 { top: 12%; left: 8%;  width: 280px; height: 280px; background: radial-gradient(circle, #fff, transparent); }
.split-hero .orn-2 { bottom: 10%; left: 30%; width: 340px; height: 340px; background: radial-gradient(circle, var(--derma-300), transparent); opacity: .35; }
.split-hero .orn-3 { top: 18%; right: 12%; width: 360px; height: 360px; background: radial-gradient(circle, var(--rheum-200), transparent); opacity: .4; }

.split-pane .split-grid-overlay {
    position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%);
}

.split-pane h2 { overflow: hidden; }
.split-pane h2 span { display: inline-block; }
.split-pane h2 span.word {
    opacity: 0; transform: translateY(110%) rotate(4deg);
    animation: riseIn .9s var(--ease) forwards;
}
.split-pane h2 span.word:nth-child(2) { animation-delay: .12s; }
.split-pane h2 span.word:nth-child(3) { animation-delay: .24s; }
.split-pane h2 span.word:nth-child(4) { animation-delay: .36s; }
@keyframes riseIn {
    to { opacity: 1; transform: none; }
}

/* Scroll cue under hero */
.split-hero .scroll-cue {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: #fff; opacity: .8; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: .25em; text-transform: uppercase;
    animation: bob 2.4s var(--ease) infinite;
}
.split-hero .scroll-cue::before {
    content: ""; width: 1px; height: 30px; background: currentColor; opacity: .5;
    animation: line 2.4s var(--ease) infinite;
}
@keyframes bob  { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@keyframes line { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.4); transform-origin: bottom; } }

/* Split panes — shine sweep on hover */
@media (min-width: 961px) {
    .split-pane { position: relative; }
    .split-pane .sheen {
        position: absolute; inset: 0; pointer-events: none; z-index: 1;
        background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
        transform: translateX(-120%); transition: transform .9s var(--ease);
    }
    .split-pane:hover .sheen { transform: translateX(120%); }
}

/* ---------- Magnetic buttons / CTAs ---------- */
.btn, .abhis-btn { position: relative; overflow: hidden; }
.btn::before, .abhis-btn::before {
    content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    transform: translateX(-150%); transition: transform .8s var(--ease);
    pointer-events: none;
}
.btn:hover::before, .abhis-btn:hover::before { transform: translateX(150%); }

/* ---------- Cards: tilt + gradient aura ---------- */
.card { transform-style: preserve-3d; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease); }
.card[data-tilt] { will-change: transform; }
.card::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    padding: 1px; background: linear-gradient(135deg, transparent, rgba(192,108,132,.4), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .5s var(--ease);
    pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card.rheum::before { background: linear-gradient(135deg, transparent, rgba(31,58,95,.4), transparent); }

.card .card-icon { transition: transform .5s var(--ease), background .4s var(--ease); }
.card:hover .card-icon { transform: rotate(-8deg) scale(1.08); }

/* ---------- Section dividers (wave + ticker) ---------- */
.section-divider {
    position: relative; height: 80px; overflow: hidden;
    margin-top: -1px;
}
.section-divider svg { width: 100%; height: 100%; display: block; }
.section-divider--wave path { fill: var(--bg-alt); }
.section-divider--inverse path { fill: var(--bg); }

/* ---------- Stats band ---------- */
.stats-band {
    background: linear-gradient(135deg, var(--ink) 0%, #2a2638 45%, var(--rheum-900) 100%);
    color: #fff; padding: clamp(56px, 7vw, 96px) 0;
    position: relative; overflow: hidden;
}
.stats-band::before {
    content: ""; position: absolute; inset: 0; opacity: .3;
    background: radial-gradient(600px 300px at 20% 20%, var(--derma-500), transparent 60%),
                radial-gradient(600px 300px at 80% 80%, var(--rheum-500), transparent 60%);
}
.stats-band .container { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { text-align: center; }
.stat-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 600; line-height: 1;
    background: linear-gradient(135deg, #fff, var(--derma-200));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    display: block;
}
.stat-label { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: rgba(255,255,255,.65); margin-top: 12px; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; } }

/* ---------- Testimonials marquee ---------- */
.testimonials { overflow: hidden; position: relative; padding: clamp(56px, 7vw, 96px) 0; background: var(--bg-alt); }
.marquee {
    display: flex; gap: 20px; width: max-content;
    animation: marquee 48s linear infinite;
}
.testimonials:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.testimonial-card {
    flex: 0 0 380px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 28px; display: flex; flex-direction: column; gap: 14px;
    box-shadow: var(--shadow-sm);
}
.testimonial-card .stars { color: #f0a63c; letter-spacing: 2px; font-size: 14px; }
.testimonial-card blockquote {
    margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; line-height: 1.5; color: var(--ink);
    font-style: italic;
}
.testimonial-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testimonial-card .who-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--derma-200), var(--derma-peach));
    display: grid; place-items: center; font-weight: 600; color: var(--derma-900);
}
.testimonial-card.rheum .who-avatar { background: linear-gradient(135deg, var(--rheum-100), var(--rheum-grey)); color: var(--rheum-900); }
.testimonial-card .who-meta { font-size: 13px; color: var(--muted); }
.testimonial-card .who-meta strong { display: block; color: var(--ink); font-size: 14.5px; }

/* Fade edges on the marquee */
.testimonials::before, .testimonials::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.testimonials::before { left: 0;  background: linear-gradient(90deg, var(--bg-alt), transparent); }
.testimonials::after  { right: 0; background: linear-gradient(-90deg, var(--bg-alt), transparent); }

/* ---------- Process / "How it works" strip ---------- */
.process { counter-reset: step; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.process-grid::before {
    content: ""; position: absolute; top: 28px; left: 5%; right: 5%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), var(--line), transparent);
    z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.process-step .step-num {
    counter-increment: step;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--white); border: 1.5px solid var(--line); color: var(--ink);
    display: grid; place-items: center; margin: 0 auto 18px;
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600;
    transition: all .4s var(--ease);
}
.process-step .step-num::before { content: counter(step); }
.process-step:hover .step-num { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-4px); }
.process-step h3 { font-size: 18px; margin-bottom: 6px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -.005em; }
.process-step p  { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .process-grid::before { display: none; } }

/* ---------- Doctor photo — gradient ring ---------- */
.doctor-photo {
    box-shadow: 0 0 0 1px rgba(0,0,0,.04), var(--shadow-lg);
    position: relative;
}
.doctor-photo::before {
    content: ""; position: absolute; inset: -6px; border-radius: calc(var(--radius-lg) + 6px);
    background: conic-gradient(from 0deg, var(--derma-200), var(--derma-peach), var(--derma-100), var(--derma-200));
    z-index: -1; opacity: .6;
    filter: blur(4px);
    animation: ringspin 14s linear infinite;
}
.doctor.rheum .doctor-photo::before { background: conic-gradient(from 0deg, var(--rheum-100), var(--rheum-grey), var(--rheum-green), var(--rheum-100)); }
@keyframes ringspin { to { transform: rotate(360deg); } }

/* ---------- Floating labels (theme-level, in case content uses raw forms) ---------- */
.float-field { position: relative; }
.float-field input, .float-field textarea, .float-field select {
    padding-top: 22px !important; padding-bottom: 10px !important;
}
.float-field label {
    position: absolute; left: 16px; top: 18px;
    color: var(--muted); pointer-events: none;
    transition: all .2s var(--ease);
    font-size: 15px; background: transparent; padding: 0;
}
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label,
.float-field textarea:focus + label,
.float-field textarea:not(:placeholder-shown) + label,
.float-field select:focus + label,
.float-field.has-value label {
    top: 6px; left: 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--derma-700); font-weight: 600;
}

/* ---------- Eyebrow accent bar ---------- */
.eyebrow { position: relative; }
.eyebrow::before {
    content: ""; display: inline-block; width: 24px; height: 2px;
    background: currentColor; opacity: .5; vertical-align: middle;
    margin-right: 10px; border-radius: 2px;
}

/* ---------- Section title: inline accent ---------- */
.section-title .accent {
    background: linear-gradient(135deg, var(--derma-700), var(--rheum-900));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Feature stripe icon glow ---------- */
.feature-stripe .item .abhis-icon {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--derma-50), var(--rheum-50));
    color: var(--ink);
}
.feature-stripe .item .abhis-icon svg { width: 22px; height: 22px; }

/* Nav underline removed — active state handled in main.css via a subtle dot. */

/* ---------- CTA band: animated gradient ---------- */
.cta-band { background-size: 200% 200%; animation: gradDrift 12s var(--ease) infinite; }
@keyframes gradDrift { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }

/* ---------- Image zoom on hover for gallery ---------- */
.gallery-item::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
    opacity: 0; transition: opacity .4s var(--ease);
}
.gallery-item:hover::after { opacity: 1; }

/* ---------- Page hero — animated gradient orbs ---------- */
.page-hero { position: relative; }
.page-hero .orb {
    position: absolute; border-radius: 50%; filter: blur(70px);
    pointer-events: none; z-index: -1; opacity: .55;
    animation: orb 16s var(--ease) infinite alternate;
}
.page-hero .orb-1 { top: -40px; left: 10%;  width: 320px; height: 320px; background: var(--derma-200); }
.page-hero .orb-2 { top: 20px;  right: 10%; width: 280px; height: 280px; background: var(--derma-peach); animation-delay: -6s; }
.page-hero.rheum .orb-1 { background: var(--rheum-200); }
.page-hero.rheum .orb-2 { background: var(--rheum-grey); opacity: .3; }
@keyframes orb {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -20px) scale(1.1); }
}

/* ---------- WP content typography rhythm ---------- */
.wp-content { max-width: 68ch; margin: 0 auto; font-size: 17px; line-height: 1.75; }
.wp-content > *:first-child::first-letter {
    /* drop cap only on editorial pages is visually noisy — keep subtle */
}
.wp-content h2 { margin-top: 1.6em; }
.wp-content > p { color: var(--ink-soft); }
.wp-content a:hover { color: var(--derma-900); }

/* ---------- Logo image sizing fix ---------- */
.brand img { object-fit: contain; }

/* ---------- Tweaks to existing doctor block ---------- */
.doctor-body h2 { background: linear-gradient(135deg, var(--ink), var(--derma-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.doctor.rheum .doctor-body h2 { background: linear-gradient(135deg, var(--ink), var(--rheum-900)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- Homepage info block (under split-hero) ---------- */
.home-info {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--bg);
    position: relative;
}
.home-info::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.home-info-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}
.home-info-lead h2 {
    font-size: clamp(32px, 4.6vw, 52px);
    margin: 12px 0 20px;
    line-height: 1.12;
}
.home-info-lead p {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 52ch;
    line-height: 1.7;
    margin: 0;
}
.home-info-lead a {
    color: var(--ink);
    border-bottom: 1px solid var(--derma-300);
    transition: border-color .25s var(--ease);
}
.home-info-lead a:hover { border-bottom-color: var(--ink); }

.home-info-facts {
    list-style: none;
    padding: 0; margin: 0;
    display: grid; gap: 0;
    border-top: 1px solid var(--line);
}
.home-info-facts li {
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto;
    gap: 0 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.fact-label {
    grid-row: 1 / 3; align-self: start;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 4px;
}
.fact-value {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.fact-meta {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin-top: 4px;
}

@media (max-width: 860px) {
    .home-info-grid { grid-template-columns: 1fr; }
    .home-info-facts li { grid-template-columns: 110px 1fr; }
}

/* ---------- Solid buttons: lock in white text across states ---------- */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:visited,
.btn-derma,   .btn-derma:hover,   .btn-derma:focus,   .btn-derma:active,   .btn-derma:visited,
.btn-rheum,   .btn-rheum:hover,   .btn-rheum:focus,   .btn-rheum:active,   .btn-rheum:visited,
.btn-book,    .btn-book:hover,    .btn-book:focus,    .btn-book:active,    .btn-book:visited {
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.btn-outline:hover { color: #fff; -webkit-text-fill-color: #fff; }
.cta-band .btn-primary { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.cta-band .btn-primary:hover { color: #fff; -webkit-text-fill-color: #fff; }

/* ---------- Reduce motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}