/* =========================================================
   SONALIKA — SHARED CHROME (loader + scrolled nav)
   Loaded LAST on every page (after home/site/redesign/premium).
   Logo-only cinematic loader · refined frosted navbar.
   ========================================================= */

/* =========================================================
   1 · PREMIUM LOADER — Sonalika gold ring centred
   ========================================================= */

/* ---- page overlay ---- */
#loader.ldr{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(130% 120% at 50% 30%, #1d2d60 0%, #111d44 40%, #09102a 100%);
  transition:opacity .75s cubic-bezier(.4,0,.2,1), visibility .75s;
}
#loader.ldr.done{ opacity:0; visibility:hidden; pointer-events:none; }

/* grain texture */
#loader.ldr::before{
  content:""; position:absolute; inset:0; opacity:.18; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ambient gold glow in center of page */
#loader.ldr::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 55% at 50% 50%, rgba(244,180,0,.12), transparent 70%);
}

/* ---- wrapper ---- */
.ldr-in{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:32px;
  animation:ldrIn .9s cubic-bezier(.16,1,.3,1) both;
}

/* ---- ring stage ---- */
.ldr-stage{
  position:relative; display:grid; place-items:center;
  width:200px; height:200px;
}

/* outer faint track */
.ldr-stage::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
}

/* main spinning gold arc — thick, with glow shadow */
.ldr-stage::after{
  content:""; position:absolute;
  inset:-8px;                         /* sits outside the track ring */
  border-radius:50%;
  border:5px solid transparent;
  border-top-color:#ffce5c;
  border-right-color:rgba(255,206,92,.55);
  border-bottom-color:rgba(255,206,92,.15);
  border-left-color:transparent;
  filter:
    drop-shadow(0 0 8px rgba(255,206,92,.9))
    drop-shadow(0 0 22px rgba(244,180,0,.5));
  animation:ldrSpin 1.1s cubic-bezier(.4,0,.6,1) infinite;
}

/* ---- ambient glow sphere (pulsing) ---- */
.ldr-glow{
  position:absolute; width:148px; height:148px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(244,180,0,.28)  0%,
    rgba(100,140,255,.12) 55%,
    transparent 72%);
  filter:blur(24px);
  animation:ldrPulse 2.4s ease-in-out infinite;
}

/* second slow counter-rotating dashed ring via logo's sibling */
.ldr-logo::before{
  content:""; position:absolute; inset:-26px; border-radius:50%; z-index:-1;
  border:1.5px dashed rgba(255,206,92,.18);
  animation:ldrCounterSpin 5s linear infinite;
}

/* ---- logo card — frosted glass ---- */
.ldr-logo{
  position:relative; z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,206,92,.12),
    0 20px 50px -20px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden; isolation:isolate;
  animation:ldrLogoIn 1s cubic-bezier(.16,1,.3,1) .15s both;
}
.ldr-logo img{
  height:28px; width:auto; display:block;
  filter:brightness(0) invert(1); opacity:.96;
}

/* gold shimmer sweep across the logo */
.ldr-logo::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-160%);
  background:linear-gradient(105deg,
    transparent 36%,
    rgba(255,206,92,.95) 50%,
    transparent 64%);
  mix-blend-mode:screen;
  animation:ldrSweep 2.2s cubic-bezier(.5,0,.2,1) .6s infinite;
}

/* ---- bottom label + animated dots ---- */
.ldr-line{
  display:flex; align-items:center; gap:0;
  font-family:var(--display,sans-serif); font-weight:700;
  font-size:11px; letter-spacing:.36em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
  animation:ldrIn 1s cubic-bezier(.16,1,.3,1) .25s both;
}
.ldr-line::before{ content:"Sonalika"; }
.ldr-line::after{
  content:"";
  display:inline-block; width:0; overflow:hidden;
  vertical-align:bottom; margin-left:2px;
  animation:ldrDots 1.5s steps(3,end) infinite;
}

/* ---- thin gold progress bar at bottom of loader ---- */
#loader.ldr .ldr-in::after{
  content:""; position:absolute; bottom:-48px; left:50%;
  transform:translateX(-50%);
  width:120px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.08);
  box-shadow:none;
}
/* gold fill bar */
#loader.ldr .ldr-in::before{
  content:""; position:absolute; bottom:-48px; left:50%;
  transform:translateX(-50%);
  width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #f4b400, #ffce5c);
  box-shadow:0 0 10px rgba(255,206,92,.7);
  animation:ldrBar 2s cubic-bezier(.4,0,.2,1) infinite;
  z-index:1;
}

/* ===== keyframes ===== */
@keyframes ldrIn{
  from{ opacity:0; transform:translateY(18px) scale(.95); }
  to  { opacity:1; transform:none; }
}
@keyframes ldrLogoIn{
  from{ opacity:0; transform:scale(.8); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes ldrPulse{
  0%,100%{ transform:scale(.78); opacity:.5; }
  50%    { transform:scale(1.08); opacity:1; }
}
@keyframes ldrSpin{
  to{ transform:rotate(360deg); }
}
@keyframes ldrCounterSpin{
  to{ transform:rotate(-360deg); }
}
@keyframes ldrSweep{
  0%        { transform:translateX(-160%); }
  55%,100%  { transform:translateX(160%); }
}
@keyframes ldrDots{
  0%  { width:0;    content:""; }
  33% { width:.6em; content:"."; }
  66% { width:1.1em;content:".."; }
  100%{ width:1.6em;content:"..."; }
}
@keyframes ldrBar{
  0%  { width:0;    opacity:1; }
  70% { width:120px;opacity:1; }
  88%,100%{ width:120px;opacity:0; }
}

@media (prefers-reduced-motion:reduce){
  .ldr-stage::after,.ldr-logo::before,
  .ldr-logo::after,.ldr-glow,
  #loader.ldr .ldr-in::before{ animation:none; }
  .ldr-stage::after{ border-top-color:#ffce5c; }
  .ldr-line::after { content:"..."; }
}

/* =========================================================
   2 · REFINED FROSTED NAVBAR
   ========================================================= */
/* legibility scrim while transparent over a hero — fades on scroll */
.hnav::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:1;
  background:linear-gradient(180deg, rgba(11,18,48,.55) 0%, rgba(11,18,48,.12) 60%, transparent 100%);
  transition:opacity .5s var(--ease,ease); }
.hnav.scrolled::before{ opacity:0; }

/* dark navy glass — always applied on scroll (all pages) */
.hnav.scrolled{
  background:             rgba(8,15,42,.88);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
          backdrop-filter: blur(22px) saturate(165%);
  padding-block:          10px;
  box-shadow:             0 1px 0 rgba(255,255,255,.06),
                          0 16px 40px -20px rgba(0,0,0,.5);
  border-bottom:          1px solid rgba(255,255,255,.07);
}
/* links stay white on dark nav */
.hnav.scrolled .hnav-links a       { color: rgba(255,255,255,.82); }
.hnav.scrolled .hnav-links a:hover { color: #fff; }
.hnav.scrolled .hnav-links a.active{ color: var(--gold-2); }
.hnav.scrolled .hbrand .badge img  { filter: brightness(0) invert(1); }
/* both burger variants stay white */
.hnav.scrolled .hburger span,
.hnav.scrolled .lburger span       { background: #fff; }
.hnav.scrolled .cart-btn {
  background:   rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color:        #fff;
}

/* links: roomier hit area + persistent active underline */
.hnav-links a{ padding:7px 2px; }
.hnav-links a::after{ bottom:0; height:2.5px; border-radius:3px; }
.hnav-links a.active::after{ width:100%; background:var(--gold); }
.hnav .hnav-links a.active{ color:#fff; }

/* brand mark gets a hair more presence + smooth scale on scroll */
.hbrand .badge img{ height:32px; transition:height .45s var(--ease-out,ease), filter .35s; }
.hnav.scrolled .hbrand .badge img{ height:28px; }

/* the gold CTA: subtle lift so it reads as the primary action in either state */
.hnav .hnav-cta .btn-gold{ box-shadow:0 14px 30px -16px rgba(244,180,0,.85); }

/* =========================================================
   3 · LISTING CARDS — About-style gold accent wipe on hover
   (transform-free so it never fights premium.js 3D tilt)
   ========================================================= */
.tcard::after, #grid .pcard::after{ content:""; position:absolute; left:0; top:0; z-index:6;
  height:3px; width:100%; pointer-events:none; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--blue), var(--gold));
  transition:transform .55s var(--pr-ease, cubic-bezier(.16,1,.3,1)); }
.tcard:hover::after, #grid .pcard:hover::after{ transform:scaleX(1); }

/* =========================================================
   4 · PREMIUM ANIMATIONS — applied site-wide
   ========================================================= */

/* Stagger helpers — add to sibling lists for cascade effect */
.stagger-1{ transition-delay:.06s !important; }
.stagger-2{ transition-delay:.12s !important; }
.stagger-3{ transition-delay:.18s !important; }
.stagger-4{ transition-delay:.24s !important; }
.stagger-5{ transition-delay:.30s !important; }
.stagger-6{ transition-delay:.36s !important; }

/* Gold top-border wipe on any dark section card */
.why2-card::before, .sp-acccard::before, .sp-catcard::before,
.tt-why::before, .parts-fresh .part::before {
  content:""; position:absolute; left:0; top:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-2), transparent);
  transform:scaleX(0); transform-origin:0 50%; border-radius:2px;
  transition:transform .6s cubic-bezier(.16,1,.3,1); z-index:4;
}
.why2-card:hover::before, .sp-acccard:hover::before, .sp-catcard:hover::before,
.tt-why:hover::before, .parts-fresh .part:hover::before { transform:scaleX(1); }

/* Smooth count-up for data-count spans (enhanced) */
[data-count]{ display:inline-block; }

/* Floating glow on gold buttons */
.btn-gold, .phero-btn.primary, .parts-viewall, .tt-btn-view, .pp-enq {
  position:relative; overflow:hidden;
}
.btn-gold::after, .phero-btn.primary::after, .parts-viewall::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform:translateX(-130%); transition:transform .6s cubic-bezier(.5,0,.2,1);
}
.btn-gold:hover::after, .phero-btn.primary:hover::after, .parts-viewall:hover::after {
  transform:translateX(130%);
}

/* Section entrance — used on sec-head, stats, trust items */
@keyframes slideUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.94) translateY(16px); }
  to   { opacity:1; transform:none; }
}

/* Card media zoom-in on page load (one-shot) */
.tt-card.in .tt-card-media img,
.sp-acccard.in .sp-acc-photo img {
  animation:fadeIn .8s cubic-bezier(.16,1,.3,1) both;
}

/* Pulse ring on stats numbers */
@keyframes statPop {
  0%  { transform:scale(1); }
  40% { transform:scale(1.06); }
  70% { transform:scale(.97); }
  100%{ transform:scale(1); }
}
.fx.in .n [data-count],
.fx.in .phero-stat .tx b { animation:statPop .65s cubic-bezier(.16,1,.3,1) .3s both; }

/* Scroll progress bar (gold, top of page) */
.scroll-prog {
  position:fixed; top:0; left:0; height:3px; z-index:9999; pointer-events:none;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:0 0 12px -2px rgba(244,180,0,.7);
  width:0%; transition:width .1s linear;
}

/* Section grain overlay enhancement */
.section.soil .grain,
.section.soil-deep .grain,
.ahero .grain,
.parts-fresh .grain { animation:grainShift 8s steps(2) infinite; }
@keyframes grainShift {
  0%   { transform:translate(0,0); }
  25%  { transform:translate(-1%,-1%); }
  50%  { transform:translate(1%,0); }
  75%  { transform:translate(0,1%); }
  100% { transform:translate(-1%,0); }
}

/* Magnetic button spring feedback */
.magnetic { display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1); }

/* Tractor card entrance stagger (tractors page) */
.tt-card:nth-child(1){ --card-delay:.0s; }
.tt-card:nth-child(2){ --card-delay:.07s; }
.tt-card:nth-child(3){ --card-delay:.14s; }
.tt-card:nth-child(4){ --card-delay:.21s; }
.tt-card:nth-child(5){ --card-delay:.28s; }
.tt-card:nth-child(6){ --card-delay:.35s; }
.tt-card.in{ transition-delay:var(--card-delay, 0s) !important; }

/* Part card entrance stagger (home parts section) */
.parts-fresh .part:nth-child(1){ transition-delay:.04s; }
.parts-fresh .part:nth-child(2){ transition-delay:.10s; }
.parts-fresh .part:nth-child(3){ transition-delay:.16s; }
.parts-fresh .part:nth-child(4){ transition-delay:.22s; }
.parts-fresh .part:nth-child(5){ transition-delay:.28s; }
.parts-fresh .part:nth-child(6){ transition-delay:.34s; }

/* Why-card entrance stagger */
.why2-card:nth-child(1){ transition-delay:.05s; }
.why2-card:nth-child(2){ transition-delay:.13s; }
.why2-card:nth-child(3){ transition-delay:.21s; }
.why2-card:nth-child(4){ transition-delay:.29s; }

/* Spare parts product card stagger */
.pp-card:nth-child(1){ transition-delay:.03s; }
.pp-card:nth-child(2){ transition-delay:.08s; }
.pp-card:nth-child(3){ transition-delay:.13s; }
.pp-card:nth-child(4){ transition-delay:.18s; }
.pp-card:nth-child(5){ transition-delay:.23s; }
.pp-card:nth-child(6){ transition-delay:.28s; }

/* Accessories card stagger */
.sp-acccard:nth-child(1){ transition-delay:.04s; }
.sp-acccard:nth-child(2){ transition-delay:.10s; }
.sp-acccard:nth-child(3){ transition-delay:.16s; }
.sp-acccard:nth-child(4){ transition-delay:.22s; }

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion:reduce) {
  .why2-card::before, .sp-acccard::before, .sp-catcard::before,
  .tt-why::before, .parts-fresh .part::before,
  .btn-gold::after, .phero-btn.primary::after, .parts-viewall::after,
  .section.soil .grain, .section.soil-deep .grain { animation:none; transition:none; }
  .tt-card.in, .pp-card { transition-delay:0s !important; }
}