/* ================= Skill2India — App Shell (PWA app-mode) ================= */

/* =====================================================================
   GLOBAL SMOOTHNESS & MOTION LAYER — loaded on every single page (this
   file is included everywhere already). Nothing here can ever hide or
   break existing content: every rule is purely additive (transform/
   opacity feedback, native browser smooth-scroll, native page-transition
   hints) — no element is ever set to a hidden/zero-opacity default state,
   so there's zero risk even if a script somewhere fails to run.
   ===================================================================== */

/* NOTE: an earlier version of this file added @view-transition{navigation:auto}
   and overscroll-behavior-y:contain here for extra native-feeling polish.
   Both got removed — they're new/still-experimental scroll-related browser
   behaviours and one of them broke scrolling entirely on this site, so they're
   gone rather than risk it again. Everything below is the plain,
   well-established stuff (scroll-behavior:smooth, momentum scrolling, tap
   feedback) that can't interfere with normal page scrolling. */

html{ scroll-behavior:smooth; }
body{
  -webkit-overflow-scrolling:touch;   /* real momentum scrolling on iOS */
  animation:s2iPageFade .32s cubic-bezier(.22,.9,.3,1) both; /* gentle fade-in on every page load */
}
@keyframes s2iPageFade{ from{ opacity:0; } to{ opacity:1; } }

*{ -webkit-tap-highlight-color:transparent; } /* kills the ugly grey flash on every tap on Android Chrome */

/* Every tappable element gets a soft, springy press-feedback by default.
   This only adds a :active transform — it never touches colour, layout,
   or opacity, and any more specific existing button/card style (there are
   plenty already, e.g. .install-app-btn:active) simply wins as normal via
   CSS specificity, so nothing already built gets overridden. */
button, a, .btn, [role="button"], input[type="submit"], input[type="button"]{
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
}
button:active, a:active, .btn:active, [role="button"]:active,
input[type="submit"]:active, input[type="button"]:active{
  transform:scale(0.96);
}

/* Thin, unobtrusive scrollbar on desktop only — touch devices are untouched */
@media(min-width:769px){
  html{ scrollbar-width:thin; scrollbar-color:rgba(11,20,56,0.22) transparent; }
  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:rgba(11,20,56,0.2); border-radius:8px; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(11,20,56,0.34); }
  ::-webkit-scrollbar-track{ background:transparent; }
}

/* Opt-in scroll-reveal utility — any page/element can add class="s2i-reveal"
   to fade + slide up the moment it scrolls into view (app-shell.js observes
   every .s2i-reveal element automatically, and now also auto-tags common
   card/section elements site-wide, so this runs on every page without
   needing per-page HTML changes). */
.s2i-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,.9,.3,1), transform .6s cubic-bezier(.22,.9,.3,1); }
.s2i-reveal.s2i-in{ opacity:1; transform:translateY(0); }

/* Gentle hover-lift on cards (desktop pointer devices only — on touch,
   :active press-feedback above already covers the "responsive" feeling).
   Kept broad but low-risk: transform/box-shadow only, never touches layout
   or existing colours, so nothing already styled gets overridden. */
@media (hover:hover) and (pointer:fine){
  .d-card, .earn-card, .stat-card, .hc-section, .poster-slide, .aff-stat, .lb-panel, .team-card, .testi-card{
    transition:transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s cubic-bezier(.22,.9,.3,1);
  }
  .d-card:hover, .earn-card:hover, .stat-card:hover, .hc-section:hover, .poster-slide:hover, .aff-stat:hover, .lb-panel:hover, .team-card:hover, .testi-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px -12px rgba(20,30,60,0.22);
  }
}

/* Images fade in softly once loaded instead of popping in abruptly. Uses a
   pure-CSS animation (not a JS-toggled class) so it's safe by construction:
   if this browser doesn't support CSS animations at all, the animation
   property is simply ignored and the image just shows normally — there's
   no "stuck invisible forever" failure mode possible. */
img[loading="lazy"]{ animation:s2iImgFadeIn .5s ease both; }
@keyframes s2iImgFadeIn{ from{ opacity:0; } to{ opacity:1; } }

@media(prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body{ animation:none; }
  .s2i-reveal{ opacity:1; transform:none; transition:none; }
  img[loading="lazy"]{ animation:none; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.s2i-hide{ display:none !important; }

/* ---- Demo Mode: banner + block popup ---- */
#s2iDemoBanner{
  position:fixed;left:0;right:0;bottom:0;z-index:99998;
  background:#1a2540;color:#fff;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;box-shadow:0 -4px 14px rgba(0,0,0,0.18);
}
#s2iDemoBanner span{ flex:1;min-width:0; }
#s2iDemoExitBtn{
  background:#fff;color:#1a2540;border:none;border-radius:9px;
  padding:7px 14px;font-weight:800;font-size:12px;flex:none;cursor:pointer;
}
#s2iDemoBlockOverlay{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:rgba(10,15,30,0.55);padding:20px;
  animation:s2iSplashIn .18s ease both;
}
.s2i-demo-modal{
  background:#fff;border-radius:20px;padding:28px 24px;max-width:320px;width:100%;
  text-align:center;box-shadow:0 20px 48px rgba(0,0,0,0.3);
}
.s2i-demo-modal-icon{ font-size:38px;margin-bottom:10px; }
.s2i-demo-modal-title{ font-size:18px;font-weight:800;color:#1a2540;margin-bottom:6px; }
.s2i-demo-modal-text{ font-size:13.5px;color:#5b6478;line-height:1.5;margin-bottom:18px; }
#s2iDemoModalClose{
  background:#2f6fe4;color:#fff;border:none;border-radius:12px;
  padding:11px 28px;font-weight:800;font-size:13.5px;cursor:pointer;
}

/* ---- Global "Enable Notifications" bell (injected into .d-top-right) ---- */
.s2i-notif-bell{
  width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,0.06);
  color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  margin-right:8px;flex:none;transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.s2i-notif-bell:active{ transform:scale(0.9); }
.s2i-notif-bell-on{ background:rgba(47,111,228,0.14); color:#2f6fe4; }

/* ---- Splash screen (standalone app launches only) ---- */
#s2iSplash{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0b1e3d 0%,#12b8dd 120%);
  animation:s2iSplashIn .25s ease both;
}
#s2iSplash img{ width:72px;height:72px;border-radius:20px;box-shadow:0 12px 30px rgba(0,0,0,0.3);animation:s2iSplashPulse 1.4s ease-in-out infinite; }
#s2iSplash.s2i-splash-out{ animation:s2iSplashOut .32s ease both; }
@keyframes s2iSplashIn{ from{opacity:0;} to{opacity:1;} }
@keyframes s2iSplashOut{ from{opacity:1;} to{opacity:0;} }
@keyframes s2iSplashPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

/* ---------- Install App button (used in nav / drawer / sidebar) ---------- */
.install-app-btn{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px;
  background:linear-gradient(135deg,#ffe066,#ffffff);
  color:var(--navy-900,#0b1e3d) !important; font-weight:700; font-size:14.5px;
  border:1.5px solid #ffd43b;
  box-shadow:0 10px 24px -10px rgba(230,168,0,0.55);
  text-decoration:none; width:100%; box-sizing:border-box;
  transition:transform .15s ease, box-shadow .15s ease;
}
.install-app-btn:active{ transform:scale(.97); }
.install-app-btn .iab-ico{
  width:30px; height:30px; border-radius:9px; background:rgba(11,20,56,0.08);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.install-app-btn .iab-ico svg{ width:17px; height:17px; stroke:var(--navy-900,#0b1e3d); }
.install-app-btn .iab-text{ display:flex; flex-direction:row; align-items:center; line-height:1.2; }

/* nav-bar (desktop/topbar) compact variant */
.install-app-btn.iab-compact{
  width:auto; padding:9px 14px; border-radius:999px; font-size:13.5px;
}
.install-app-btn.iab-compact .iab-text small{ display:none; }

/* ---------- iOS "Add to Home Screen" instruction sheet ---------- */
.s2i-install-sheet{
  position:fixed; inset:0; z-index:9999; background:rgba(11,20,56,0.55);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  backdrop-filter:blur(3px);
}
.s2i-install-sheet.open{ opacity:1; pointer-events:auto; }
.s2i-install-sheet-card{
  background:#fff; width:100%; max-width:460px; border-radius:22px 22px 0 0;
  padding:28px 24px calc(28px + env(safe-area-inset-bottom)); text-align:center;
  transform:translateY(16px); transition:transform .2s ease; position:relative;
  box-shadow:0 -10px 40px rgba(11,20,56,0.25);
}
.s2i-install-sheet.open .s2i-install-sheet-card{ transform:translateY(0); }
.s2i-install-sheet-icon{ width:64px; height:64px; border-radius:18px; margin-bottom:14px; }
.s2i-install-sheet-card h3{ font-size:18px; margin-bottom:8px; color:var(--navy-900,#0b1e3d); }
.s2i-install-sheet-card p{ font-size:14px; color:var(--muted,#5b6b8c); line-height:1.6; }
.s2i-ios-share-ico{ display:inline-block; }
.s2i-install-sheet-close{
  position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%;
  background:#f1f4fb; font-size:20px; color:#5b6b8c; line-height:1;
}

/* ================= App-mode (installed, standalone) ================= */

html.s2i-app-mode body{
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
html.s2i-app-mode.s2i-web-mode body{ padding-bottom:0; } /* never both */

/* Bottom tab bar */
.s2i-app-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  display:none; /* shown via JS only in app-mode */
  background:#fff; border-top:1px solid var(--line,#e7ebf5);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(11,20,56,0.08);
}
html.s2i-app-mode .s2i-app-tabbar{ display:flex; align-items:stretch; justify-content:space-around; }

.s2i-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; flex:1; padding:6px 2px; border-radius:14px; text-decoration:none;
  color:#8592ab; transition:color .15s ease;
}
.s2i-tab-ico{ width:23px; height:23px; display:flex; }
.s2i-tab-ico svg{ width:100%; height:100%; }
.s2i-tab-label{ font-size:11px; font-weight:700; }
.s2i-tab.active{ color:var(--blue-500,#2f6fe4); }
.s2i-tab.active .s2i-tab-ico{
  filter:drop-shadow(0 3px 6px rgba(47,111,228,0.35));
}
.s2i-tab:active{ transform:scale(.94); }

/* In app-mode: hide website-only marketing chrome so it feels like a real app */
html.s2i-app-mode footer,
html.s2i-app-mode .d-foot,
html.s2i-app-mode .foot-credit,
html.s2i-app-mode .promo-banner{ display:none !important; }

/* App-mode gets a flatter, app-style top header on inner pages */
html.s2i-app-mode .topbar,
html.s2i-app-mode .dash-topbar{
  box-shadow:0 1px 0 rgba(11,20,56,0.06);
}

@media(min-width:769px){
  .s2i-app-tabbar{ display:none !important; } /* tab bar is a phone-app pattern only */
  html.s2i-app-mode body{ padding-bottom:0; }
}

/* ---------- Global floating WhatsApp button (every page) ---------- */
.s2i-whatsapp-fab{
  position:fixed; right:16px; bottom:calc(90px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:50%; z-index:850; overflow:hidden;
  box-shadow:0 10px 26px -6px rgba(37,211,102,0.65); border:none; padding:0; background:#fff;
}
.s2i-whatsapp-fab img{ width:100%; height:100%; object-fit:cover; display:block; }
html.s2i-app-mode .s2i-whatsapp-fab{ bottom:calc(150px + env(safe-area-inset-bottom)); }
html.s2i-app-mode body[data-no-tabbar] .s2i-whatsapp-fab{ bottom:calc(90px + env(safe-area-inset-bottom)); }

/* ---------- Global floating Scroll-to-Top/Bottom button (sits just below
   the WhatsApp button, same right edge) ---------- */
.s2i-scroll-fab{
  position:fixed; right:16px; bottom:calc(24px + env(safe-area-inset-bottom));
  width:46px; height:46px; border-radius:50%; z-index:850; border:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#ffd23f,#f5a623);
  box-shadow:0 10px 22px -4px rgba(245,166,35,0.55), 0 2px 0 rgba(255,255,255,0.5) inset, 0 -2px 5px rgba(150,90,0,0.2) inset;
  opacity:0; pointer-events:none; transform:translateY(10px) scale(0.85);
  transition:opacity .25s ease, transform .25s ease, background .2s ease;
}
.s2i-scroll-fab.show{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.s2i-scroll-fab:active{ transform:scale(0.9); }
.s2i-scroll-fab svg{ width:20px; height:20px; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.s2i-scroll-fab.at-top svg{ transform:rotate(180deg); }
html.s2i-app-mode .s2i-scroll-fab{ bottom:calc(84px + env(safe-area-inset-bottom)); }
html.s2i-app-mode body[data-no-tabbar] .s2i-scroll-fab{ bottom:calc(24px + env(safe-area-inset-bottom)); }
@media(min-width:769px){
  .s2i-scroll-fab{ right:24px; bottom:16px; }
  html.s2i-app-mode .s2i-scroll-fab{ bottom:16px; }
}
@media(min-width:769px){
  .s2i-whatsapp-fab{ right:24px; bottom:40px; }
  html.s2i-app-mode .s2i-whatsapp-fab{ bottom:40px; }
}

/* ---- Course Player: extra-immersive in app-mode (edge-to-edge, no page scroll chrome) ---- */
html.s2i-app-mode .cp-topbar{
  padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:none;
}
html.s2i-app-mode .cp-video-zone{ border-radius:0; }

/* ---- Auth screens (login/signup): app-mode gets a cleaner, chrome-free card ---- */
html.s2i-app-mode body[data-no-tabbar] .site-footer{ display:none !important; }