/* ============================================================================
   MUDIT COMPUTERS — PAGE THEMES + FX v2 (theme.css)
   ----------------------------------------------------------------------------
   head.ejs <body data-page-theme="..."> set karta hai (page.url se).
   Har theme sirf 4 tokens badalta hai:
     --pt-a     : main accent (buttons, links)   — white text ke saath >= 4.5:1
     --pt-b     : glow / highlight (gradients, eyebrows on dark)
     --pt-deep  : dark hero background (page-hero, CTA bands)
     --pt-tint  : halka background tint (light sections)
   Baaki poora design system (fonts, spacing, logo, cards) same rehta hai.
   NAYA PAGE THEME: neeche ek block copy karo, naam badlo, head.ejs themeMap me
   URL -> naam jodo (ya route me page.theme: 'naam' bhejo). Bas.
   ========================================================================= */

body[data-page-theme] {
  --pt-a: #1E6BFF; --pt-b: #22D3EE; --pt-deep: #0F2A47; --pt-tint: #EEF5FF;
}
body[data-page-theme="home"]      { --pt-a: #1E6BFF; --pt-b: #22D3EE; --pt-deep: #0B2240; --pt-tint: #EEF5FF; }
body[data-page-theme="company"]   { --pt-a: #3B4FD8; --pt-b: #FBBF24; --pt-deep: #17153F; --pt-tint: #F3F2FF; }
body[data-page-theme="products"]  { --pt-a: #B0239F; --pt-b: #F472B6; --pt-deep: #2B0C33; --pt-tint: #FDF2FB; }
body[data-page-theme="rma"]       { --pt-a: #6D28D9; --pt-b: #A78BFA; --pt-deep: #1C1045; --pt-tint: #F4F0FF; }
body[data-page-theme="warranty"]  { --pt-a: #0F766E; --pt-b: #34D399; --pt-deep: #06302C; --pt-tint: #ECFDF7; }
body[data-page-theme="reviews"]   { --pt-a: #B45309; --pt-b: #FBBF24; --pt-deep: #2A1706; --pt-tint: #FFF8EB; }
body[data-page-theme="contact"]   { --pt-a: #D9304F; --pt-b: #FB923C; --pt-deep: #3A0D1C; --pt-tint: #FFF3F1; }
body[data-page-theme="canon"]     { --pt-a: #CC0000; --pt-b: #FF7A7A; --pt-deep: #2A0707; --pt-tint: #FFF2F2; }
body[data-page-theme="expertise"] { --pt-a: #0E7490; --pt-b: #A3E635; --pt-deep: #062A33; --pt-tint: #EEFBFD; }

/* Shared components already read --accent/--highlight — hum unhe yahin re-point karte hain.
   (Derived tokens dobara declare, kyunki :root wale root ke accent se resolve ho chuke hote.) */
body[data-page-theme] {
  --accent: var(--pt-a);
  --highlight: var(--pt-b);
  --accent-soft: color-mix(in srgb, var(--pt-a) 10%, white);
  --accent-ring: color-mix(in srgb, var(--pt-a) 30%, transparent);
  --glow: 0 0 0 1px color-mix(in srgb, var(--pt-a) 24%, transparent),
          0 12px 32px -6px color-mix(in srgb, var(--pt-a) 42%, transparent);
}
/* Dark mode: accent thoda roshan taaki dark bg par text padh sake */
[data-theme="dark"] body[data-page-theme] {
  --accent: color-mix(in srgb, var(--pt-a) 72%, white);
  --accent-soft: color-mix(in srgb, var(--pt-a) 20%, #0A1220);
  --pt-tint: color-mix(in srgb, var(--pt-a) 7%, #0A1220);
}
/* Dark mode me primary button pe white text: original (gehra) accent use karo */
[data-theme="dark"] body[data-page-theme] .btn-primary { background-image: linear-gradient(135deg, var(--pt-a), color-mix(in srgb, var(--pt-a) 78%, var(--pt-b))); }

/* ── Hero backgrounds: har page ka mood ────────────────────────── */
body[data-page-theme] .page-hero {
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(760px 380px at 85% -5%, color-mix(in srgb, var(--pt-b) 30%, transparent), transparent 62%),
    radial-gradient(620px 340px at 5% 110%, color-mix(in srgb, var(--pt-a) 45%, transparent), transparent 60%),
    linear-gradient(135deg, var(--pt-deep), color-mix(in srgb, var(--pt-deep) 70%, var(--pt-a)));
}
.page-hero::before { /* fine tech grid */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 75%);
}
.page-hero::after { /* bottom accent line */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pt-b), var(--pt-a), transparent);
  background-size: 200% 100%; animation: pt-flow 6s linear infinite; opacity: .9;
}
@keyframes pt-flow { to { background-position: -200% 0; } }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { animation: pt-rise .8s var(--ease-out) both .05s; }
.page-hero .lead, .page-hero p { animation: pt-rise .8s var(--ease-out) both .2s; }
.page-hero .eyebrow { animation: pt-rise .7s var(--ease-out) both; }
@keyframes pt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Theme-specific hero motifs (sirf decoration, text par asar nahi) */
.pt-motif { position: absolute; z-index: -1; pointer-events: none; right: max(2vw, 16px); top: 50%; width: min(34vw, 360px);
  aspect-ratio: 1; transform: translateY(-50%); opacity: .22; color: var(--pt-b); }
.pt-motif svg { width: 100%; height: 100%; }
.pt-motif .spin { transform-origin: 50% 50%; animation: pt-spin 40s linear infinite; }
.pt-motif .spin-r { transform-origin: 50% 50%; animation: pt-spin 60s linear infinite reverse; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .pt-motif { opacity: .12; width: 60vw; right: -12vw; } }

/* Home hero picks up theme too (light) */
body[data-page-theme="home"] .hero { background:
  radial-gradient(1100px 520px at 82% -10%, color-mix(in srgb, var(--pt-b) 20%, transparent), transparent 62%),
  radial-gradient(900px 460px at 8% 105%, color-mix(in srgb, var(--pt-a) 16%, transparent), transparent 60%),
  var(--bg-soft); }

/* ── Section mood morph: light sections halka theme-tint lete hain,
   scroll par JS --pt-mix (0..1) set karta hai -> smooth gradient shift ── */
body[data-page-theme] #main > section.section:nth-of-type(even):not(.page-hero):not(.hero):not(.section-brand) {
  background-image: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pt-tint) calc(var(--pt-mix, 0) * 100%), transparent));
}
body[data-page-theme] #main { position: relative; }
body[data-page-theme] .eyebrow { color: var(--accent); }
body[data-page-theme] .page-hero .eyebrow { color: var(--pt-b); }

/* ── Intro sequence (first load per session, ~0.9s, click/key skips) ── */
.pt-intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pt-a) 55%, var(--pt-deep)), var(--pt-deep) 70%);
  transition: opacity .45s var(--ease-out), visibility .45s; }
.pt-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.pt-intro .pt-mark { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #fff;
  font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.pt-intro .pt-mark span { opacity: 0; transform: translateY(10px); animation: pt-rise .6s var(--ease-out) forwards .1s; }
.pt-intro .pt-bar { width: 140px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.15); }
.pt-intro .pt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pt-b), #fff);
  transform: scaleX(0); transform-origin: left; animation: pt-load .8s var(--ease-out) forwards .1s; }
@keyframes pt-load { to { transform: scaleX(1); } }

/* ── Scroll progress refined: theme gradient + glowing head ───── */
.fx-scrollbar { height: 3px; background: linear-gradient(90deg, var(--pt-a), var(--pt-b)); }
.fx-scrollbar::after { content: ''; position: absolute; right: 0; top: -2px; width: 14px; height: 7px; border-radius: 50%;
  background: var(--pt-b); filter: blur(4px); opacity: .9; }
.fx-progress { background: linear-gradient(90deg, var(--pt-a), var(--pt-b)); }

/* ── Nav: animated underline + active pill ────────────────────── */
.nav-link::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--highlight)); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out); }
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:hover::after { transform-origin: left; }
.nav-link.active { color: var(--accent); }

/* ── Focus-visible: clear, themed, keyboard only ──────────────── */
body[data-page-theme] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
  box-shadow: 0 0 0 6px var(--accent-ring); }
body[data-page-theme] .btn:focus-visible { outline-offset: 3px; }
body[data-page-theme] input:focus-visible, body[data-page-theme] select:focus-visible, body[data-page-theme] textarea:focus-visible { outline-offset: 1px; }

/* ── Buttons v2: animated gradient border, magnetic (JS), icon micro-motion ── */
.btn-primary { background-size: 180% 180%; transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), background-position .6s var(--ease-out); }
.btn-primary:hover { background-position: 100% 50%; }
.btn-outline::after, .btn-secondary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--pt-ang, 0deg), var(--pt-a), var(--pt-b), var(--pt-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .3s;
}
/* perf: conic spin sirf hover par (pehle har button par hamesha chalta tha = har frame repaint) */
.btn-outline:hover::after, .btn-secondary:hover::after { opacity: 1; animation: pt-ang 3s linear infinite; }
@property --pt-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pt-ang { to { --pt-ang: 360deg; } }
.fx-mag, .fx-mag:hover { transform: translate3d(var(--mgx, 0), var(--mgy, 0), 0); transition: transform .35s var(--ease-out), box-shadow .3s var(--ease-out); }
.fx-mag:active, .btn.fx-mag:active { transform: translate3d(var(--mgx, 0), var(--mgy, 0), 0) scale(.97); }
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-wa:hover svg, .wa-float:hover svg { animation: pt-wiggle .6s var(--ease-out); transform: none; }
@keyframes pt-wiggle { 25% { transform: rotate(-12deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } }
.icon-box svg { transition: transform .5s var(--ease-out); }
.card-hover:hover .icon-box svg { animation: pt-pop .6s var(--ease-out); }
@keyframes pt-pop { 40% { transform: scale(1.18) rotate(-8deg); } 70% { transform: scale(.96) rotate(3deg); } }
.icon-box { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }

/* Card gradient border on hover */
.card-hover::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, var(--pt-a), transparent 40%, transparent 60%, var(--pt-b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .35s;
}
.card-hover:hover::before { opacity: 1; }

/* Particle burst (primary CTA click) */
.fx-burst { position: fixed; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 9997;
  background: var(--c, var(--pt-b)); animation: fx-burst .7s var(--ease-out) forwards; }
@keyframes fx-burst { from { transform: translate3d(var(--x0), var(--y0), 0) scale(1); opacity: 1; }
  to { transform: translate3d(var(--x1), var(--y1), 0) scale(.2); opacity: 0; } }

/* WhatsApp float: breathing halo */
.wa-float::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45); animation: pt-halo 3.2s ease-out 6 2s; } /* perf: ~20s attention pulse, phir shaant (was infinite) */
@keyframes pt-halo { 70%, 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
.wa-float:hover { transform: translateY(-3px) scale(1.05); }

/* Form fields: themed focus glow */
body[data-page-theme] input:focus, body[data-page-theme] select:focus, body[data-page-theme] textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); transition: box-shadow .25s, border-color .25s; }

/* Brand bands (stats, CTA strips) take the page's deep mood */
body[data-page-theme] .section-brand {
  background:
    radial-gradient(700px 300px at 90% 0%, color-mix(in srgb, var(--pt-b) 22%, transparent), transparent 60%),
    linear-gradient(135deg, var(--pt-deep), color-mix(in srgb, var(--pt-deep) 75%, var(--pt-a)));
}


/* Sound toggle: themed ring when ON */
.sound-toggle[aria-pressed="true"] { background: var(--accent-soft); }
.sound-toggle[aria-pressed="true"] .snd-on { animation: pt-pop .5s var(--ease-out); }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-hero::after, .pt-motif .spin, .pt-motif .spin-r, .btn-outline::after, .btn-secondary::after, .wa-float::after { animation: none !important; }
  .page-hero h1, .page-hero .lead, .page-hero p, .page-hero .eyebrow { animation: none !important; }
  .pt-intro, .fx-burst { display: none !important; }
  .fx-mag { transform: none !important; }
  .btn:hover svg, .card-hover:hover .icon-box svg { animation: none !important; transform: none !important; }

}
@media print { .pt-intro, .pt-motif, .fx-burst { display: none !important; } }