/* Nishat Dev — Animations */

/* Loader */
#loader { position:fixed; inset:0; background:var(--black); z-index:10000; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease }
#loader.gone { opacity:0; visibility:hidden; pointer-events:none }

/* Float pills — desktop only */
@media (min-width:769px) {
    .float-pill { position:absolute; background:var(--g2); border:1px solid var(--border); color:var(--white); padding:.6rem 1rem; border-radius:40px; font-size:.8rem; font-weight:500; display:flex; align-items:center; gap:.4rem; white-space:nowrap; z-index:3 }
    .pill-1 { top:2rem; right:-2rem; animation:bob 5s ease-in-out infinite }
    .pill-2 { bottom:8rem; right:-3rem; animation:bob 6s ease-in-out infinite reverse; animation-delay:1s }
}
@media (max-width:768px) {
    .float-pill { display:none }
    .hero-badge { display:none }
    .scroll-ind { display:none }
    .hero-grid { display:none }
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }

/* Mobile nav */
.mobile-nav { position:fixed; inset:0; background:var(--black); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.75rem; opacity:0; pointer-events:none; transition:opacity .3s }
.mobile-nav.open { opacity:1; pointer-events:all }
.mobile-nav a { font-family:var(--fd); font-size:1.9rem; font-weight:800; color:var(--white); transition:color .2s; text-decoration:none }
.mobile-nav a:hover { color:var(--accent) }
.mob-close { position:absolute; top:1.5rem; right:1.5rem; width:38px; height:38px; background:none; border:1px solid var(--border); border-radius:50%; color:var(--white); font-size:1rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s }
.mob-close:hover { background:var(--accent); color:var(--black); border-color:var(--accent) }
.mob-cta { background:var(--accent) !important; color:var(--black) !important; padding:.7rem 2rem !important; border-radius:40px !important; font-size:1.1rem !important; display:inline-block !important }
.mob-cart { font-size:1rem !important; color:var(--muted) !important }

/* Progress + cursor + back-top */
#progress { position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:9999; width:0; transition:width .1s linear }
#cursor { width:10px; height:10px; background:var(--accent); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference }
#cursor-f { width:32px; height:32px; border:1px solid rgba(200,240,74,.5); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:all .25s }
#cursor.big { transform:translate(-50%,-50%) scale(2.5) }
#cursor-f.big { transform:translate(-50%,-50%) scale(1.5); opacity:0 }
#back-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; background:var(--accent); color:var(--black); border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; opacity:0; transform:translateY(20px); transition:all .3s; z-index:500; text-decoration:none }
#back-top.show { opacity:1; transform:translateY(0) }
#back-top:hover { transform:translateY(-4px) }
@media (max-width:768px) { #cursor, #cursor-f { display:none !important } }

/* Mob right always visible on mobile */
.mob-right { display:none; align-items:center; gap:.75rem }
@media (max-width:768px) { .mob-right { display:flex } }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--white); transition:all .3s }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
@media (max-width:768px) { .hamburger { display:flex } .nav-links, .nav-right { display:none !important } }

/* Tilt card shine */
.card-shine { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; border-radius:inherit }