/* ============================================================
   cRyPtO sMaRt — PREMIUM LANDING ANIMATION (index page only)
   Loads ONLY on index.html. Does NOT touch core.min.css.
   transform/opacity/filter only -> no CLS. Off under reduced-motion.
   If you EDIT this file, bump premium-hero.css?v=1 -> ?v=2 on index.html.
   ============================================================ */

/* hero text entrance already comes from core.min.css; this layers on top */
/* ===== cRyPtO sMaRt — PREMIUM LANDING ANIMATION (index-only, scoped) =====
   transform / opacity / filter only -> zero layout shift (no CLS).
   Disabled entirely under prefers-reduced-motion. Lighter on mobile. */
@media (prefers-reduced-motion: no-preference){

  /* Hero image: slow ken-burns; .hero-media reserved for JS parallax */
  body.anim-premium .hero-media{ will-change: transform; }
  body.anim-premium .hero-media img{
    transform: scale(1.14); transform-origin: 55% 40%;
    animation: csp-kenburns 20s ease-out forwards;
  }
  @keyframes csp-kenburns{ from{transform:scale(1.20)} to{transform:scale(1.14)} }

  /* ===== SIGNATURE: "The Indian way." — per-letter IGNITE + underline draw ===== */
  body.anim-premium .hero-headline .accent{ display:inline-block; position:relative; color:var(--brand); }
  body.anim-premium .hero-headline .accent .csp-char{
    display:inline-block; white-space:pre;
    opacity:.12; color:#0d2659;
    transform: translateY(.30em) rotateX(48deg) scale(.95);
    transform-origin: 50% 100%;
    animation: csp-ignite .72s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay: calc(1.35s + var(--i,0) * .045s);
    will-change: transform, opacity;
  }
  @keyframes csp-ignite{
    0%  { opacity:.12; color:#0d2659; transform:translateY(.30em) rotateX(48deg) scale(.95); }
    55% { opacity:1;   color:#36c9ff; transform:translateY(-.05em) rotateX(0deg) scale(1.07); filter:brightness(1.7); }
    100%{ opacity:1;   color:#1c69d4; transform:none; filter:brightness(1); }
  }
  /* underline draws itself once the last letter lands */
  body.anim-premium .hero-headline .accent::after{
    content:""; position:absolute; left:0; bottom:-.04em; height:3px; width:100%;
    background: linear-gradient(90deg,#1c69d4,#36c9ff);
    border-radius:2px; transform: scaleX(0); transform-origin:left;
    box-shadow: 0 0 14px rgba(54,201,255,.45);
    animation: csp-underline .85s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(1.35s + var(--n,8) * .045s + .30s);
  }
  @keyframes csp-underline{ to{ transform: scaleX(1); } }

  /* ----- always-on signature: subtle breathing glow + hover brighten ----- */
  body.anim-premium .hero-headline .accent{ z-index:0; isolation:isolate; }
  body.anim-premium .hero-headline .accent::before{
    content:""; position:absolute; left:-7%; right:-7%; top:-22%; bottom:-22%;
    z-index:-1; pointer-events:none; border-radius:44%;
    background: radial-gradient(58% 125% at 50% 50%, rgba(54,201,255,.42), rgba(28,105,212,.18) 51%, transparent 75%);
    filter: blur(14px); opacity:0;
    transition: filter .3s ease;
  }
  /* breathing turns on only AFTER the entry settles (JS adds .csp-lit) */
  body.anim-premium .hero-headline .accent.csp-lit::before{
    animation: csp-breathe 6s ease-in-out .2s infinite;
  }
  @keyframes csp-breathe{ 0%,100%{opacity:.42} 50%{opacity:.8} }
  /* freeze the loop while the hero is scrolled out of view → no idle cost */
  body.anim-premium .hero-headline .accent.csp-paused::before{ animation-play-state: paused; }
  /* once lit, letters hold static so hover can take over cleanly */
  body.anim-premium .hero-headline .accent.csp-lit .csp-char{
    animation:none; opacity:1; color:#1c69d4; transform:none;
    text-shadow: 0 0 13px rgba(54,201,255,.34), 0 0 4px rgba(54,201,255,.22);
    transition: color .3s ease, filter .3s ease, text-shadow .3s ease;
  }
  /* hover / tap to brighten — interactive, nothing animating when idle */
  body.anim-premium .hero-headline .accent.csp-lit:hover .csp-char{ color:#36c9ff; filter:brightness(1.35); text-shadow:0 0 20px rgba(54,201,255,.6), 0 0 7px rgba(54,201,255,.4); }
  body.anim-premium .hero-headline .accent.csp-lit:hover::before{ filter: blur(15px) brightness(1.5); }

  /* Cinematic reveal upgrade: rise + settle + focus-in */
  body.anim-premium [data-reveal]{
    transform: translateY(34px) scale(.985); filter: blur(6px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1),
                transform .9s cubic-bezier(.22,.61,.36,1),
                filter .9s cubic-bezier(.22,.61,.36,1);
  }
  body.anim-premium [data-reveal].revealed{ transform:none; filter:blur(0); }
  body.anim-premium [data-reveal-stagger] > *{
    transform: translateY(26px) scale(.99); filter: blur(5px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                transform .8s cubic-bezier(.22,.61,.36,1),
                filter .8s cubic-bezier(.22,.61,.36,1);
  }
  body.anim-premium [data-reveal-stagger].revealed > *{ transform:none; filter:blur(0); }

  /* Cards: cursor-follow glow + deeper lift */
  body.anim-premium .card-hover{ position:relative; }
  body.anim-premium .card-hover::after{
    content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
    border-radius:inherit; opacity:0; transition:opacity .4s ease;
    background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
                rgba(54,201,255,.20), transparent 62%);
  }
  body.anim-premium .card-hover:hover::after{ opacity:1; }
  body.anim-premium .card-hover:hover{
    transform: translateY(-6px);
    box-shadow: 0 34px 80px -28px rgba(28,105,212,.50);
  }

  /* Primary CTA: hover sheen + magnetic transition */
  body.anim-premium .btn-primary{ position:relative; overflow:hidden; }
  body.anim-premium .btn-primary.btn-lg{ transition: transform .25s ease; }
  body.anim-premium .btn-primary::after{
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-20deg); transition: left .6s ease; pointer-events:none;
  }
  body.anim-premium .btn-primary:hover::after{ left:130%; }

  /* Ambient depth glow behind soft sections */
  body.anim-premium .theme-soft{ position:relative; overflow:hidden; }
  body.anim-premium .theme-soft::before{
    content:""; position:absolute; width:60vw; height:60vw; right:-16vw; top:-22vw;
    background: radial-gradient(circle, rgba(28,105,212,.10), transparent 60%);
    pointer-events:none; z-index:0;
    animation: csp-drift 18s ease-in-out infinite alternate;
  }
  @keyframes csp-drift{ from{transform:translate(0,0)} to{transform:translate(-4vw,3vw)} }
  body.anim-premium .theme-soft .shell{ position:relative; z-index:1; }
}

/* Mobile: shed the heavy effects, keep the tasteful reveals */
@media (max-width:767px){
  body.anim-premium .hero-media img{ animation-duration:26s; transform:scale(1.07); }
  body.anim-premium .theme-soft::before{ display:none; }
}