/* =====================================================================
   Shamna IPTV — UI Polish Layer (v1.0)
   Professional micro-interactions, accessibility, typography & motion
   Designer-grade refinements on top of /assets/style.css
   ===================================================================== */

/* ---------- 1. CSS TOKENS (scoped, non-breaking) ---------- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms var(--ease-smooth);
  --transition-slow: 400ms var(--ease-out-expo);
  --focus-ring: 3px solid #fbbf24;
  --focus-offset: 3px;
  --android-green-1: #3ddc84;
  --android-green-2: #1a7d4d;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.38);
  --shadow-glow-purple: 0 10px 40px rgba(124, 58, 237, .35);
  --shadow-glow-gold: 0 10px 40px rgba(251, 191, 36, .25);
}

/* ---------- 2. TYPOGRAPHY POLISH ---------- */
html {
  font-feature-settings: "liga" 1, "calt" 1, "ss01" 1, "tnum" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { line-height: 1.6; }
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
}
h1 { letter-spacing: -0.035em; }
p, li { text-wrap: pretty; }
.tabular-nums, .price, .stat-num, .proof-num,
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}

/* ---------- 3. MICRO-INTERACTIONS (buttons + cards + links) ---------- */
a, button,
.btn-wa, .btn-primary, .btn-outline, .btn-secondary,
.app-card, .app-action,
article, .card, .tier-card, .feature-card, .proof-item, .pricing-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
  will-change: transform;
}

/* Card lift */
.app-card:hover,
.feature-card:hover,
.tier-card:hover,
.pricing-card:hover,
.proof-item:hover {
  transform: translateY(-4px);
  border-color: var(--purple-light, #a78bfa) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow-purple);
}

/* Button scale + glow */
.btn-wa:hover, .btn-primary:hover, .btn-outline:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: var(--shadow-glow-gold);
}
.btn-wa:active, .btn-primary:active, .btn-outline:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 90ms;
}

/* Link underline polish */
nav a, .footer-col a {
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple-light, #a78bfa), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms var(--ease-smooth);
}
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }

/* ---------- 4. FOCUS STATES — WCAG 2.2 AA ---------- */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.app-card:focus-visible,
.btn-wa:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, .2);
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  right: 1rem;
  z-index: 10000;
  background: #fbbf24;
  color: #111827;
  padding: .85rem 1.4rem;
  font-weight: 900;
  font-size: .95rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 10px 40px rgba(251, 191, 36, .6);
  transition: top 180ms var(--ease-smooth);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid #111827;
  outline-offset: 3px;
}

/* ---------- 5. ANIMATIONS ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.5), 0 20px 48px rgba(124,58,237,.35); }
  50% { box-shadow: 0 0 0 14px rgba(251,191,36,0), 0 24px 56px rgba(124,58,237,.5); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@keyframes bgNoise {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-1%); }
  75% { transform: translate(-1%,2%); }
  100% { transform: translate(0,0); }
}

/* Staggered entrance */
.stagger > * { animation: fadeInUp 520ms var(--ease-out-expo) both; }
.stagger > *:nth-child(1) { animation-delay: 80ms; }
.stagger > *:nth-child(2) { animation-delay: 180ms; }
.stagger > *:nth-child(3) { animation-delay: 280ms; }
.stagger > *:nth-child(4) { animation-delay: 380ms; }
.stagger > *:nth-child(5) { animation-delay: 480ms; }
.stagger > *:nth-child(6) { animation-delay: 580ms; }
.stagger > *:nth-child(7) { animation-delay: 680ms; }
.stagger > *:nth-child(8) { animation-delay: 780ms; }
.stagger > *:nth-child(9) { animation-delay: 880ms; }

/* Shimmer on prices */
.price-shimmer, .shimmer {
  background: linear-gradient(
    90deg,
    #fbbf24 0%, #ffe08a 40%, #fff8dc 50%, #ffe08a 60%, #fbbf24 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

/* Most popular glow */
.glow-pulse, .popular-glow, .tier-card.popular {
  animation: glowPulse 2.8s var(--ease-smooth) infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 6. DARK BACKDROP REFINEMENTS ---------- */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(217,119,6,.05), transparent 55%);
  animation: bgNoise 22s ease-in-out infinite alternate;
  opacity: .9;
}
body > * { position: relative; z-index: 1; }

/* Glassmorphism refinement */
.glass, .app-card, .feature-card, .tier-card, .pricing-card,
article[style*="var(--glass-bg)"] {
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* ---------- 7. ANDROID BADGES ---------- */
.android-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: linear-gradient(135deg, #3ddc84, #1a7d4d);
  color: #fff;
  padding: .25rem .7rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(61, 220, 132, .35);
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  white-space: nowrap;
}
.android-badge::before {
  content: "★";
  font-size: .85em;
  line-height: 1;
}

.android-primary-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #111827;
  padding: .3rem .85rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(251, 191, 36, .45);
  border: 1px solid rgba(255, 255, 255, .35);
}

/* Android hero pill */
.hero-android-note {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #fbbf24;
  font-size: .85rem;
  font-weight: 800;
  margin-top: .75rem;
  letter-spacing: .02em;
}
.hero-android-note::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: rgba(251, 191, 36, .18);
  color: #fbbf24;
  border-radius: 50%;
  font-weight: 900;
  font-size: .75rem;
}

/* Ensure cards are positioning contexts for absolute badges */
.app-card, article { position: relative; }

/* Android highlighted card */
.app-card.is-android,
article.is-android {
  position: relative;
  border-color: rgba(61, 220, 132, .45) !important;
  background: linear-gradient(
    180deg,
    rgba(61, 220, 132, .08),
    rgba(124, 58, 237, .05) 50%,
    rgba(17, 24, 39, .2)
  ) !important;
}
.app-card.is-android::before,
article.is-android::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #3ddc84, transparent 50%, #fbbf24);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
}

/* Android primary hero block */
.android-primary-hero {
  background: linear-gradient(135deg,
    rgba(61, 220, 132, .12),
    rgba(26, 125, 77, .08) 50%,
    rgba(124, 58, 237, .08));
  border: 1px solid rgba(61, 220, 132, .3);
  border-radius: 24px;
  padding: 2rem 1.75rem;
  margin: 0 auto 2rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(61, 220, 132, .15);
  position: relative;
  overflow: hidden;
}
.android-primary-hero::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  top: -80px; left: -80px;
  background: radial-gradient(circle, rgba(61, 220, 132, .25), transparent 65%);
  pointer-events: none;
  border-radius: 50%;
}
.android-primary-hero h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  margin-bottom: .8rem;
  background: linear-gradient(135deg, #3ddc84, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.android-primary-hero p {
  color: var(--text-secondary, #cbd5e1);
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto 1.2rem;
}
.android-primary-hero .btn-android {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, #3ddc84, #1a7d4d);
  color: #fff;
  font-weight: 900;
  padding: .9rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(61, 220, 132, .45);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.android-primary-hero .btn-android:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 36px rgba(61, 220, 132, .6);
}

/* Platform note block */
.platform-note {
  background: rgba(124, 58, 237, .08);
  border-right: 4px solid #a78bfa;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0 auto 2rem;
  max-width: 960px;
  color: var(--text-secondary, #cbd5e1);
  font-size: .95rem;
  line-height: 1.8;
}
.platform-note strong { color: #fbbf24; }

/* ---------- 8. CHANNEL / BRAND MARQUEE ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-weight: 800;
  color: var(--text-muted, #94a3b8);
  opacity: .85;
  font-size: 1rem;
  letter-spacing: .02em;
}

/* ---------- 9. TRUST BAR ---------- */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem 1.4rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  max-width: 880px;
  margin: 1.5rem auto;
}
.trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-secondary, #cbd5e1);
}
.trust-bar span::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #3ddc84, #1a7d4d);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 900;
}

/* ---------- 10. RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 640px) {
  .android-primary-hero { padding: 1.4rem 1rem; border-radius: 18px; }
  .trust-bar { gap: .5rem .9rem; padding: .8rem; }
  .hero-android-note { font-size: .8rem; }
}
@media (min-width: 641px) and (max-width: 768px) {
  .android-primary-hero { padding: 1.7rem 1.3rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .apps-grid, .pricing-grid { gap: 1.1rem; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  .container { max-width: 1180px; }
}
@media (min-width: 1281px) and (max-width: 1536px) {
  .container { max-width: 1340px; }
}
@media (min-width: 1537px) {
  .container { max-width: 1440px; }
  h1 { letter-spacing: -0.04em; }
}

/* ---------- 11. PRINT STYLES ---------- */
@media print {
  #announcement-bar, .wa-float, .skip-link, nav, header, footer,
  .marquee, .btn-wa, .btn-primary, .btn-outline, .hero-ctas {
    display: none !important;
  }
  body, body::before {
    background: #fff !important;
    color: #000 !important;
    animation: none !important;
  }
  * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555 !important; }
  .android-badge, .android-primary-badge {
    border: 1px solid #000;
    color: #000 !important;
    background: #fff !important;
  }
}

/* ---------- 12. UTILITY HELPERS ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }