/* =========================================================
   SNK IT Institute — shared premium layer
   (banner • animations • install button • social row)
========================================================= */

:root{ --snk-lime:#b7ff00; }

/* ---------- PAGE LOAD ---------- */
html.snk-anim body{ animation:snkPageIn .6s cubic-bezier(.2,.7,.2,1) backwards; }
html.snk-leaving body{ opacity:0; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease; }
@keyframes snkPageIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- SCROLL PROGRESS ---------- */
#snk-progress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,#b7ff00,#5cff9d,#b7ff00);
  z-index:100000; pointer-events:none;
  box-shadow:0 0 12px rgba(183,255,0,.6);
}

/* ---------- ANNOUNCEMENT BANNER ---------- */
#snk-banner{
  position:relative; z-index:10001;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:9px 44px 9px 16px; text-align:center;
  font:700 13px/1.5 Arial,Helvetica,sans-serif;
  background:linear-gradient(90deg,#b7ff00,#8dff00,#b7ff00); background-size:200% 100%;
  color:#050505; animation:snkBannerShine 6s linear infinite;
}
#snk-banner.dark{ background:#111; color:#fff; border-bottom:1px solid #2a2a2a; animation:none; }
#snk-banner.red{ background:linear-gradient(90deg,#ff5c5c,#ff9d5c); color:#fff; }
#snk-banner a{ text-decoration:underline; font-weight:900; white-space:nowrap; }
#snk-banner .snk-banner-x{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; border-radius:50%;
  background:rgba(0,0,0,.15); color:inherit; font-size:14px; cursor:pointer;
}
@keyframes snkBannerShine{ 0%{ background-position:0 0; } 100%{ background-position:200% 0; } }

/* ---------- HEADER ON SCROLL ---------- */
.snk-scrolled{ box-shadow:0 12px 40px rgba(0,0,0,.28) !important; }

/* ---------- SCROLL REVEAL ---------- */
html.snk-anim .snk-reveal{
  opacity:0; transform:translateY(34px) scale(.985);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--snk-d,0ms);
  will-change:opacity,transform;
}
html.snk-anim .snk-reveal.snk-left{ transform:translateX(-40px); }
html.snk-anim .snk-reveal.snk-right{ transform:translateX(40px); }
html.snk-anim .snk-reveal.snk-in{ opacity:1; transform:none; }

/* ---------- RIPPLE ---------- */
.lh-btn,.btn-primary,.signup-btn,.login-button,.login-btn,.course-button,.primary-btn,.btn{
  position:relative; overflow:hidden;
}
.snk-ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.45); transform:scale(0);
  animation:snkRipple .65s ease-out forwards;
}
@keyframes snkRipple{ to{ transform:scale(1); opacity:0; } }

/* ---------- FLOATING HERO IMAGE ---------- */
html.snk-anim .lh-hero-main-image{ animation:snkFloat 6s ease-in-out infinite; }
@keyframes snkFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* ---------- GLOWING ACCENT TEXT ---------- */
html.snk-anim .lh-hero-title span:last-child,
html.snk-anim .page-hero h1 span{
  text-shadow:0 0 28px rgba(183,255,0,.28);
  animation:snkGlow 3.5s ease-in-out infinite;
}
@keyframes snkGlow{ 0%,100%{ text-shadow:0 0 18px rgba(183,255,0,.15); } 50%{ text-shadow:0 0 38px rgba(183,255,0,.45); } }

/* ---------- BADGE DOT PULSE ---------- */
html.snk-anim .lh-badge-dot{ animation:snkPulse 1.8s ease-in-out infinite; }
@keyframes snkPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.6); opacity:.5; } }

/* ---------- PARTICLE CANVAS ---------- */
.snk-particles{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.85;
}
.lh-hero > .container,
.page-hero > .container,
.hero > .container{ position:relative; z-index:1; }

/* ---------- CURSOR GLOW ---------- */
#snk-glow{
  position:fixed; left:0; top:0; width:420px; height:420px; margin:-210px 0 0 -210px;
  border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,rgba(183,255,0,.10),transparent 65%);
  transition:opacity .3s ease; opacity:0; will-change:transform;
}

/* ---------- CARD TILT SHINE ---------- */
.snk-tilt{ transform-style:preserve-3d; transition:transform .25s ease, box-shadow .3s ease, border-color .3s ease; }

/* ---------- INSTALL APP BUTTON ---------- */
#snk-install{
  position:fixed; left:16px; bottom:18px; z-index:9990;
  display:none; align-items:center; gap:9px;
  padding:11px 16px 11px 13px; border:1px solid rgba(183,255,0,.45); border-radius:50px;
  background:rgba(8,8,8,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font:800 12.5px Arial,Helvetica,sans-serif; cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(183,255,0,.5);
  animation:snkInstallIn .6s cubic-bezier(.2,.7,.2,1) both, snkInstallPulse 2.6s 1s infinite;
}
#snk-install.show{ display:inline-flex; }
#snk-install b{ color:#b7ff00; }
#snk-install .snk-install-x{
  margin-left:4px; padding:0 4px; border:0; background:none; color:#888; font-size:15px; cursor:pointer;
}
@keyframes snkInstallIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes snkInstallPulse{ 0%{ box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 0 rgba(183,255,0,.5); } 70%,100%{ box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 14px rgba(183,255,0,0); } }

#snk-ios{
  position:fixed; inset:0; z-index:100001; display:none; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.7); padding:16px;
}
#snk-ios.show{ display:flex; }
#snk-ios div{
  width:min(420px,100%); background:#0b0b0b; border:1px solid #2a2a2a; border-radius:18px;
  padding:22px; color:#fff; font:14px/1.7 Arial,Helvetica,sans-serif; text-align:center;
}
#snk-ios button{
  margin-top:14px; padding:11px 22px; border:0; border-radius:9px;
  background:#b7ff00; color:#050505; font-weight:900; cursor:pointer;
}

/* ---------- FOOTER SOCIAL / CONTACT ROW ---------- */
.snk-contact-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 18px;
  padding:18px 0 4px; font-size:12px; color:#8a8a8a;
}
.snk-contact-row a{ color:inherit; }
.snk-contact-row a:hover{ color:#b7ff00; }
.snk-social{ display:flex; gap:8px; }
.snk-social a{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14); border-radius:50%; font-size:12px; font-weight:800;
  color:#cfcfcf; transition:.25s ease;
}
.snk-social a:hover{ border-color:#b7ff00; color:#b7ff00; transform:translateY(-3px); }

@media (max-width:600px){
  #snk-banner{ font-size:12px; padding-right:40px; flex-wrap:wrap; }
  #snk-install{ bottom:14px; left:12px; padding:10px 13px 10px 11px; }
  #snk-glow{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html.snk-anim body{ animation:none; }
  .snk-reveal,.snk-reveal.snk-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .snk-particles,#snk-glow,#snk-progress{ display:none !important; }
  #snk-banner,#snk-install,.lh-hero-main-image{ animation:none !important; }
}