/* =====================================================================
   iLoveTender — MOTION  (sirf homepage)
   ---------------------------------------------------------------------
   Halka, tez aur phone-friendly. Sirf transform aur opacity chalte hain
   — GPU par, isliye sasta Android bhi nahi atakta.

   JS na chale to kuch chhupta nahi: sab tabhi chhupta hai jab
   motion.js <html> par "m-ready" laga de.
   "Reduce motion" wale phone / computer par koi animation nahi.
   ===================================================================== */

@property --m-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------------- 1. Headline — shabd-shabd upar aata hai ---------------- */
.m-ready .m-word{
  display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(6px);
  animation:m-word .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms);
}
@keyframes m-word{to{opacity:1;transform:none;filter:blur(0)}}

/* Aakhri line — sone jaisi chamak, har kuch second me ek baar */
.m-gold{
  background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold) 30%,#fff3cf 46%,var(--gold-hi) 54%,var(--gold) 70%,var(--gold-lo) 100%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.m-ready .m-gold{animation:m-word .8s cubic-bezier(.2,.7,.2,1) forwards,m-shine 5.5s ease-in-out 1.6s infinite;
  animation-delay:var(--d,0ms),calc(var(--d,0ms) + 900ms)}
@keyframes m-shine{0%,62%{background-position:100% 0}100%{background-position:-60% 0}}

/* ---------------- 2. Baaki hero — neeche se halka sa ---------------- */
.m-ready .m-up{opacity:0;transform:translateY(14px);
  animation:m-up .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes m-up{to{opacity:1;transform:none}}

/* ---------------- 3. Login panel ---------------- */
.is-home .panel{position:relative;isolation:isolate}
.m-ready.is-home-root .panel{opacity:0;transform:translateY(18px) scale(.985);
  animation:m-panel .9s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes m-panel{to{opacity:1;transform:none}}

/* Kinare par ghoomti sone ki patli lakeer */
.is-home .panel::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--m-ang),transparent 0 68%,rgba(240,205,122,.0) 70%,
             rgba(240,205,122,.95) 82%,rgba(212,164,55,.0) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:m-spin 7s linear infinite;
}
@keyframes m-spin{to{--m-ang:360deg}}

/* Mouse ke saath halki roshni — sirf mouse wale screen par */
@media (hover:hover) and (pointer:fine){
  .is-home .panel::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(212,164,55,.10),transparent 60%);
    opacity:0;transition:opacity .35s ease;
  }
  .is-home .panel:hover::after{opacity:1}
  .is-home .panel > *{position:relative;z-index:1}
}

/* ---------------- 4. Sone ke button par chamak ---------------- */
.is-home .btn-gold{position:relative;overflow:hidden}
.is-home .btn-gold::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:none;
}
@media (hover:hover){.is-home .btn-gold:hover::after{left:120%;transition:left .75s ease}}

/* ---------------- 5. Peeche ke crystals — mouse ke saath halka sa ---------------- */
.is-home .crystals svg{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .6s ease-out}

/* ---------------- 6. Scroll par dikhna (data-reveal) ---------------- */
.m-ready [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.m-ready [data-reveal].is-in{opacity:1;transform:none}

/* ---------------- Reduce motion — sab band ---------------- */
@media (prefers-reduced-motion:reduce){
  .m-ready .m-word,.m-ready .m-up,.m-ready .m-gold,.m-ready.is-home-root .panel,.m-ready [data-reveal]{
    animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .is-home .panel::before{animation:none}
  .is-home .crystals svg{transform:none}
}