/* ==========================================================
   TYLOS — index-modern.css
   Load AFTER the inline <style> block in index.php so these
   rules override it. Palette/tokens come from tylos.css.
   ========================================================== */

/* ── Global: smooth anchors, cross-page fade, animatable <details> ── */
:root { interpolate-size: allow-keywords; }
html { scroll-padding-top: 84px; }               /* sticky header ke neeche section na chhupe */

@view-transition { navigation: auto; }           /* page-to-page smooth crossfade (Chrome/Edge/Safari) */
::view-transition-old(root) { animation: .25s ease both vt-out; }
::view-transition-new(root) { animation: .35s ease both vt-in; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

/* ── Scroll progress bar (JS creates the element) ── */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
    background: linear-gradient(90deg, var(--signal), var(--amber));
    transform-origin: left; transform: scaleX(var(--p, 0));
    pointer-events: none;
}

/* ── Header: shrink + blur once scrolled ── */
.site-header { backdrop-filter: saturate(160%) blur(12px); background: rgba(255,255,255,.88); }
.site-header .header__inner { transition: padding .25s ease; }
.site-header.is-scrolled .header__inner { padding: 10px 0; }

/* ══════════ HERO ══════════ */
/* One orchestrated entrance: each block rises in, in order */
.hero__content { animation: none; }
.hero__content > * { opacity: 0; animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__content > :nth-child(1) { animation-delay: .10s; }
.hero__content > :nth-child(2) { animation-delay: .22s; animation-name: heroTitleIn; animation-duration: 1.1s; }
.hero__content > :nth-child(3) { animation-delay: .45s; }
.hero__content > :nth-child(4) { animation-delay: .58s; }
.hero__content > :nth-child(5) { animation-delay: .72s; }
@keyframes heroIn      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroTitleIn { from { opacity: 0; transform: translateY(40px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }

.hero__video { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.08); }

/* Hero stats panel → glass, since it now sits on top of the video */
.hero__panel {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 24px 60px rgba(20,36,70,.35), inset 0 1px 0 rgba(255,255,255,.25);
    animation: heroIn 1s .5s cubic-bezier(.2,.7,.2,1) both;       /* floaty hata diya — less distraction */
}
.hero__panel-title { color: rgba(255,255,255,.75); }
.hero__stats { background: rgba(255,255,255,.18); }
.hero__stat { background: rgba(20,36,70,.28); transition: background .25s ease, transform .25s ease; }
.hero__stat:hover { background: rgba(255,90,31,.45); }
.hero__stat-value { color: #fff; }
.hero__stat-label { color: rgba(255,255,255,.8); }

/* ══════════ ANNOUNCE BAR ══════════ */
.announce-bar__link { position: relative; }
.announce-bar__link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.announce-bar__link:hover::after { transform: scaleX(1); }

/* ══════════ SPOTLIGHT (AI Fire Detection) ══════════ */
.spotlight__visual { overflow: hidden; backdrop-filter: blur(6px); animation: none; }
/* scanning line = "live detection" feel */
.spotlight__visual::before {
    content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 0; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(255,90,31,.9), transparent);
    box-shadow: 0 0 18px 3px rgba(255,90,31,.45);
    animation: scan 4.5s ease-in-out infinite;
}
@keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* alert card pops in each scan cycle */
.spotlight__visual-alert { animation: alertPop 4.5s cubic-bezier(.2,.7,.2,1) infinite; }
@keyframes alertPop {
    0%, 55% { opacity: 0; transform: translateY(14px) scale(.96); }
    65%, 92% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-6px); }
}
.spotlight__feature { transition: transform .25s ease, color .25s ease; }
.spotlight__feature:hover { transform: translateX(6px); color: #fff; }

/* ══════════ PRODUCTS — bento layout + cursor glow ══════════ */
/* FIX: stagger-reveal delays were also delaying hover. Done-class removes them after the reveal */
[data-reveal="stagger"].is-visible > *:nth-child(7) { transition-delay: .47s; }
[data-reveal="stagger"].is-done > * { transition-delay: 0s !important; }

.products-grid { gap: 18px; }
.product-card, .process-step, .testimonial-card {
    transition: opacity .6s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.products-grid .product-card:first-child { grid-column: span 2; }
.products-grid .product-card:last-child  { grid-column: span 2; }

/* Cursor-follow glow (JS sets --mx / --my) */
.product-card::after, .process-step::after, .testimonial-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,31,.13), transparent 60%);
    transition: opacity .3s ease;
}
.product-card:hover::after, .process-step:hover::after, .testimonial-card:hover::after { opacity: 1; }
.testimonial-card { position: relative; overflow: hidden; }

/* Featured (first) card — the AI product — dark, to stand apart */
.products-grid .product-card:first-child {
    background: linear-gradient(135deg, var(--ink), var(--ink-2));
    border-color: var(--ink);
    display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px;
}
.products-grid .product-card:first-child .product-card__title { color: #fff; font-size: 28px; }
.products-grid .product-card:first-child .product-card__desc  { color: rgba(255,255,255,.72); max-width: 460px; }
.products-grid .product-card:first-child .product-card__link  { color: var(--amber); }
.products-grid .product-card:first-child::after {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,31,.28), transparent 60%);
}

/* Arrow in "Learn more" glides */
.product-card__link { position: relative; }

/* ══════════ ANATOMY ══════════ */
.anatomy__visual { animation: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.anatomy__visual:hover { transform: scale(1.04) rotate(-2deg); }
.anatomy__part { border-left: 2px solid transparent; padding-left: 14px; transition: transform .25s ease, border-color .25s ease; }
.anatomy__part:hover { border-left-color: var(--signal); }

/* ══════════ PROCESS ══════════ */
.process-step::before {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--signal), var(--amber));
    transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.process-step:hover::before { transform: scaleX(1); }

/* ══════════ STATS BAND ══════════ */
.stats-band__value { font-variant-numeric: tabular-nums; }

/* ══════════ FAQ — smooth open/close ══════════ */
.faq-item::details-content {
    height: 0; overflow: hidden;
    transition: height .35s ease, content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content { height: auto; }
.faq-item[open] { border-color: rgba(255,90,31,.45); }
.faq-item summary::after { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }

/* ══════════ QUOTE FORM ══════════ */
.form-light .form-group { transition: transform .2s ease; }
.form-light .form-group:focus-within { transform: translateX(3px); }
.form-light .form-group:focus-within label { color: var(--signal); }
.form-group label { transition: color .2s ease; }
.quote-form { transition: box-shadow .3s ease, transform .3s ease; }
.quote-form:hover { box-shadow: 0 24px 56px rgba(20,36,70,.2); }

/* ══════════ Responsive ══════════ */
@media (max-width: 1024px) {
    .products-grid .product-card:first-child,
    .products-grid .product-card:last-child { grid-column: span 2; }
}
@media (max-width: 768px) {
    .products-grid .product-card:first-child,
    .products-grid .product-card:last-child { grid-column: auto; }
    .products-grid .product-card:first-child { min-height: 0; }
    .hero__video { transform: scale(1.04); }       /* mobile pe parallax off */
}

/* ══════════ Reduced motion ══════════ */
@media (prefers-reduced-motion: reduce) {
    .hero__content > *, .hero__panel { opacity: 1 !important; animation: none !important; }
    .spotlight__visual::before { display: none; }
    .spotlight__visual-alert { animation: none; opacity: 1; }
    .hero__video { transform: none; }
}