/* =========================================================
   SONALIKA — PREMIUM CINEMATIC LAYER  (v1)
   Additive only. Loaded AFTER home.css + site.css + redesign.css.
   Adds: unified motion tokens · scroll-progress · 3D card tilt +
   cursor glow + animated border · blur-to-clear reveals ·
   Apple-style sticky storytelling showcase · refined details.
   Nothing here changes existing content or layout structure.
   ========================================================= */

:root{
  /* unified premium motion + surface system */
  --pr-ease:      cubic-bezier(.16,1,.3,1);
  --pr-ease-soft: cubic-bezier(.22,.61,.36,1);
  --pr-dur:       .7s;
  --pr-radius:    22px;
  --pr-shadow:     0 30px 70px -44px rgba(20,30,70,.30);
  --pr-shadow-hov: 0 48px 100px -42px rgba(20,30,70,.42);
  --pr-glow:      rgba(244,180,0,.55);   /* gold accent glow */
}

/* honour reduced motion for the heavy stuff */
@media (prefers-reduced-motion:reduce){
  .show-feat{ opacity:1 !important; filter:none !important; transform:none !important; }
}

/* =========================================================
   1 · SCROLL PROGRESS  (top hairline, gold)
   ========================================================= */
.pr-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9000; pointer-events:none;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold), var(--gold-2) 60%, #fff);
  box-shadow:0 0 14px -2px rgba(244,180,0,.7); will-change:transform; }

/* =========================================================
   2 · BLUR-TO-CLEAR — upgrade every existing .fx reveal
   (adds a subtle de-focus that resolves as it enters view)
   ========================================================= */
.fx{ filter:blur(7px);
  transition:opacity 1s var(--pr-ease), transform 1.1s var(--pr-ease), filter 1s var(--pr-ease); }
.fx.in{ filter:blur(0); }
@media (prefers-reduced-motion:reduce){ .fx{ filter:none; } }

/* directional reveal utilities (used by premium.js auto-tagging) */
.pr-rl{ opacity:0; transform:translateX(-46px); filter:blur(6px);
  transition:opacity 1s var(--pr-ease), transform 1.1s var(--pr-ease), filter 1s var(--pr-ease); }
.pr-rr{ opacity:0; transform:translateX(46px); filter:blur(6px);
  transition:opacity 1s var(--pr-ease), transform 1.1s var(--pr-ease), filter 1s var(--pr-ease); }
.pr-rl.in,.pr-rr.in{ opacity:1; transform:none; filter:blur(0); }

/* =========================================================
   3 · UNIVERSAL CARD SYSTEM — 3D tilt + cursor glow + border
   Applied by premium.js to: .part · .why2-card · .step · .cf-card.is-active
   ========================================================= */
.pr-card{ position:relative; transform-style:preserve-3d; will-change:transform;
  transition:transform .55s var(--pr-ease), box-shadow .55s var(--pr-ease), border-color .4s; }
.pr-card.pr-live{ transition:box-shadow .3s var(--pr-ease), border-color .4s; } /* while pointer-driven */

/* cursor-following sheen */
.pr-sheen{ position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .45s var(--pr-ease);
  background:radial-gradient(340px 340px at var(--mx,50%) var(--my,30%), rgba(244,180,0,.16), transparent 62%); }
.pr-card:hover .pr-sheen{ opacity:1; }

/* animated gold border-glow that tracks the cursor (masked ring) */
.pr-ring{ position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none; padding:1.4px;
  opacity:0; transition:opacity .45s var(--pr-ease);
  background:radial-gradient(260px 260px at var(--mx,50%) var(--my,30%), var(--pr-glow), rgba(244,180,0,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.pr-card:hover .pr-ring{ opacity:1; }

/* dark-section cards (steps) get a cooler glow that still reads on navy */
.step.pr-card .pr-sheen{ background:radial-gradient(340px 340px at var(--mx,50%) var(--my,30%), rgba(255,206,92,.18), transparent 62%); }

/* let the inner photo of a part push forward in 3D on hover */
.part.pr-card .part-top{ transition:transform .6s var(--pr-ease); transform:translateZ(0); }
.part.pr-card:hover .part-top{ transform:translateZ(34px) scale(1.012); }
.part.pr-card .part-top image-slot,.part.pr-card .part-top img{ transition:transform .9s var(--pr-ease); }
.part.pr-card:hover .part-top image-slot,.part.pr-card:hover .part-top img{ transform:scale(1.08); }
.part.pr-card .part-body{ transform:translateZ(18px); }

/* keep the coverflow active card from clipping its glow */
.cf-card.pr-card .ph{ position:relative; }

/* =========================================================
   4 · APPLE-STYLE STICKY STORYTELLING SHOWCASE
   ========================================================= */
.show{ position:relative; background:linear-gradient(180deg,#0e1633 0%, #16224d 55%, #0f1838 100%); color:#fff;
  overflow:clip; }
.show .show-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E"); }
.show-aura{ position:absolute; left:-10%; top:20%; width:60%; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(64,110,220,.30), transparent 60%); filter:blur(50px); }

/* tall track that drives the scroll; inner panel pins via sticky */
.show-track{ position:relative; z-index:1; }
.show-sticky{ position:sticky; top:0; min-height:100vh; display:grid;
  grid-template-columns:1.06fr .94fr; align-items:center; gap:clamp(28px,5vw,74px);
  max-width:var(--maxw); margin:0 auto; padding:clamp(80px,11vh,128px) var(--gut); }

/* --- left: pinned tractor stage --- */
.show-stage{ position:relative; aspect-ratio:4/3.2; border-radius:28px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 70px 130px -50px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.05);
  background:radial-gradient(120% 90% at 50% 8%, #2c3c7a, #131e44); }
.show-stage image-slot,.show-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:60% 55%; transition:transform .9s var(--pr-ease); will-change:transform; }
.show-stage::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, transparent 40%, rgba(11,18,42,.62)); }
.show-stage .show-floor{ position:absolute; left:8%; right:8%; bottom:9%; height:34px; z-index:1; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); filter:blur(6px); }
.show-hp{ position:absolute; left:24px; bottom:22px; z-index:3; }
.show-hp b{ display:block; font-family:var(--display); font-weight:900; font-size:clamp(44px,5vw,62px); color:#fff; line-height:.82; }
.show-hp b i{ font-style:normal; font-size:.36em; color:var(--gold-2); margin-left:4px; }
.show-hp span{ display:block; margin-top:8px; color:rgba(255,255,255,.82); font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.04em; }
.show-tag{ position:absolute; right:20px; top:20px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-family:var(--display); font-weight:700; font-size:12.5px; padding:9px 14px; border-radius:100px; }
.show-tag .d{ width:7px; height:7px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 10px rgba(255,206,92,.9); }

/* --- right: copy + illuminating features --- */
.show-copy{ position:relative; }
.show-copy .eyebrow{ color:var(--gold-2); }
.show-copy .eyebrow::before{ background:var(--gold); }
.show-h{ font-family:var(--display); font-weight:900; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(32px,4.4vw,58px); color:#fff; margin:16px 0 4px; }
.show-h .serif-y{ color:var(--gold-2); }
.show-lead{ color:rgba(255,255,255,.66); font-size:clamp(15px,1.5vw,17px); max-width:44ch; margin-top:12px; }

.show-feats{ margin-top:clamp(22px,3vw,36px); display:flex; flex-direction:column; }
.show-feat{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  padding:20px 4px; border-top:1px solid rgba(255,255,255,.12);
  opacity:.34; filter:blur(.6px); transform:translateY(6px);
  transition:opacity .55s var(--pr-ease), filter .55s var(--pr-ease), transform .55s var(--pr-ease); }
.show-feat:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.show-feat.on{ opacity:1; filter:none; transform:none; }
.show-feat .fnum{ font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:.06em;
  color:rgba(255,255,255,.4); transition:color .5s; min-width:30px; }
.show-feat.on .fnum{ color:var(--gold-2); }
.show-feat .fic{ position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px; background:var(--gold);
  transform:scaleY(0); transform-origin:50% 0; transition:transform .6s var(--pr-ease); }
.show-feat.on .fic{ transform:scaleY(1); }
.show-feat .fbody h3{ font-family:var(--display); font-weight:800; font-size:clamp(18px,2vw,22px); color:#fff; }
.show-feat .fbody p{ color:rgba(255,255,255,.6); font-size:14px; margin-top:4px; max-width:38ch;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--pr-ease), opacity .5s, margin .4s; }
.show-feat.on .fbody p{ max-height:80px; opacity:1; }
.show-feat .fval{ font-family:var(--display); font-weight:900; font-size:clamp(22px,2.6vw,32px); color:#fff;
  line-height:.9; text-align:right; white-space:nowrap; }
.show-feat .fval i{ font-style:normal; font-size:.5em; color:var(--gold-2); display:block; font-weight:700;
  letter-spacing:.04em; margin-top:5px; text-align:right; }

/* vertical progress rail beside the features */
.show-rail{ position:absolute; left:-26px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:rgba(255,255,255,.12); overflow:hidden; }
.show-rail i{ position:absolute; left:0; top:0; width:100%; height:0;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)); border-radius:2px;
  box-shadow:0 0 10px rgba(244,180,0,.6); transition:height .2s linear; }

.show-cta{ margin-top:clamp(24px,3vw,34px); display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:960px){
  .show-sticky{ position:relative; min-height:auto; grid-template-columns:1fr; gap:34px;
    padding-top:clamp(64px,10vw,96px); padding-bottom:clamp(64px,10vw,96px); }
  .show-track{ height:auto !important; }
  .show-rail{ display:none; }
  .show-feat{ opacity:1; filter:none; transform:none; }       /* on mobile show all, no pin */
  .show-feat .fbody p{ max-height:80px; opacity:1; }
}

/* =========================================================
   5 · REFINED DETAILS
   ========================================================= */
/* animated underline on text/footer/nav links */
.hnav-links a, .foot-col a{ position:relative; }
.hnav-links a::after{ content:""; position:absolute; left:0; right:auto; bottom:-5px; height:2px; width:0;
  background:var(--gold); border-radius:2px; transition:width .4s var(--pr-ease); }
.hnav-links a:hover::after{ width:100%; }

/* magnetic buttons: add a soft glow lift baseline */
.btn-gold{ transition:transform .5s var(--pr-ease), background .3s, box-shadow .45s var(--pr-ease); }

/* coverflow active card — premium ring base (works with pr-card glow) */
.cf-card.is-active .ph{ transition:box-shadow .5s var(--pr-ease); }

/* parts / cards: unify resting + hover shadow with the token system */
.part.pr-card{ box-shadow:var(--pr-shadow); }
.part.pr-card:hover{ box-shadow:var(--pr-shadow-hov); border-color:var(--gold-bd); }
.why2-card.pr-card:hover{ box-shadow:0 40px 80px -34px rgba(0,0,0,.55); }

/* section seam divider — faint gold hairline between bands */
.section + .section::before,
.show + .section::before, .section + .show::before{ content:""; }

/* nicer focus rings for keyboard users on the new section */
.show a:focus-visible,.show button:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:8px; }