/* ==========================================================================
   Omni IPTV — effects layer
   Glow background, animated icons, WhatsApp CTA.
   Loaded after style.css. Remove the <link> in build.py to drop all of this.
   ========================================================================== */

/* ---------- Luminous background ---------- */
body::before{
  background:
    radial-gradient(820px 460px at 12% -8%,  rgba(0,180,216,.20), transparent 62%),
    radial-gradient(760px 500px at 88% 2%,   rgba(109,92,255,.22), transparent 64%),
    radial-gradient(900px 620px at 50% 108%, rgba(255,122,69,.11), transparent 70%);
}

/* Drifting aurora orbs — the "light" layer */
.aurora{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.aurora i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.5; will-change:transform;
}
.aurora i:nth-child(1){
  width:44vw; height:44vw; left:-10vw; top:-12vw;
  background:radial-gradient(circle, rgba(0,180,216,.55), transparent 68%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2){
  width:40vw; height:40vw; right:-8vw; top:-6vw;
  background:radial-gradient(circle, rgba(109,92,255,.55), transparent 68%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3){
  width:46vw; height:46vw; left:22vw; bottom:-20vw;
  background:radial-gradient(circle, rgba(177,88,255,.40), transparent 70%);
  animation:drift-c 38s ease-in-out infinite alternate;
}
.aurora i:nth-child(4){
  width:30vw; height:30vw; right:8vw; bottom:-8vw;
  background:radial-gradient(circle, rgba(255,122,69,.30), transparent 70%);
  animation:drift-b 30s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a{ to{ transform:translate3d(9vw, 7vh, 0) scale(1.18); } }
@keyframes drift-b{ to{ transform:translate3d(-8vw, 9vh, 0) scale(1.12); } }
@keyframes drift-c{ to{ transform:translate3d(6vw,-8vh, 0) scale(1.22); } }

/* Fine light grid for depth */
.aurora::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,170,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

/* ---------- Icons: glow + light sweep ---------- */
.ico{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg, rgba(0,180,216,.20), rgba(0,180,216,.05));
  border-color:rgba(0,180,216,.34);
  box-shadow:0 0 0 1px rgba(0,180,216,.10), 0 8px 24px -10px rgba(0,180,216,.55),
             inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .45s cubic-bezier(.2,.9,.25,1.15), box-shadow .45s, border-color .3s;
  animation:ico-float 6s ease-in-out infinite;
}
.ico--violet{
  background:linear-gradient(150deg, rgba(109,92,255,.24), rgba(109,92,255,.06));
  border-color:rgba(109,92,255,.38);
  box-shadow:0 0 0 1px rgba(109,92,255,.10), 0 8px 24px -10px rgba(109,92,255,.6),
             inset 0 1px 0 rgba(255,255,255,.14);
  animation-delay:-2s;
}
.ico--warm{
  background:linear-gradient(150deg, rgba(255,122,69,.22), rgba(255,122,69,.05));
  border-color:rgba(255,122,69,.36);
  box-shadow:0 0 0 1px rgba(255,122,69,.10), 0 8px 24px -10px rgba(255,122,69,.55),
             inset 0 1px 0 rgba(255,255,255,.14);
  animation-delay:-4s;
}
@keyframes ico-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}

/* the sweeping highlight */
.ico::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform:translateX(-120%);
  animation:ico-sweep 5.5s ease-in-out infinite;
}
.ico--violet::before{ animation-delay:-1.8s; }
.ico--warm::before{ animation-delay:-3.4s; }
@keyframes ico-sweep{
  0%, 62%  { transform:translateX(-120%); }
  78%,100% { transform:translateX(120%); }
}

.card:hover .ico{
  transform:translateY(-6px) scale(1.09) rotate(-4deg);
  box-shadow:0 0 0 1px rgba(0,180,216,.3), 0 18px 40px -12px rgba(0,180,216,.85),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.card:hover .ico--violet{
  box-shadow:0 0 0 1px rgba(109,92,255,.3), 0 18px 40px -12px rgba(109,92,255,.9),
             inset 0 1px 0 rgba(255,255,255,.22);
}
.card:hover .ico--warm{
  box-shadow:0 0 0 1px rgba(255,122,69,.3), 0 18px 40px -12px rgba(255,122,69,.85),
             inset 0 1px 0 rgba(255,255,255,.22);
}

/* Numbered steps get the same treatment */
.step-n{
  position:relative; overflow:hidden;
  box-shadow:0 8px 26px -10px rgba(0,180,216,.8), inset 0 1px 0 rgba(255,255,255,.3);
  animation:ico-float 6s ease-in-out infinite;
}
.step-n::before{
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-120%); animation:ico-sweep 5.5s ease-in-out infinite;
}

/* Cards glow on hover */
.card:hover{
  box-shadow:0 18px 50px -20px rgba(0,180,216,.55), 0 0 0 1px rgba(0,180,216,.18);
}

/* ---------- Three-plan grid ---------- */
.plans--3{
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  max-width:1040px; margin-inline:auto;
}
.plan{ overflow:hidden; }
.plan > *{ position:relative; z-index:1; }
.plan .btn + .btn{ margin-top:10px; }
.plan--best::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(130deg, rgba(0,180,216,.14), transparent 42%, rgba(177,88,255,.14));
}
.plan--best{ animation:plan-glow 4.5s ease-in-out infinite; }
@keyframes plan-glow{
  0%,100%{ box-shadow:0 0 0 1px rgba(0,180,216,.26), 0 22px 60px -26px rgba(0,180,216,.6); }
  50%    { box-shadow:0 0 0 1px rgba(0,180,216,.45), 0 26px 72px -22px rgba(0,180,216,.95); }
}

/* ---------- WhatsApp: inline buttons ---------- */
.btn-wa{
  background:linear-gradient(135deg,#25D366 0%,#1ebe5a 55%,#128C7E 100%);
  color:#04210f; font-weight:800;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 8px 24px -10px rgba(37,211,102,.65);
}
.btn-wa:hover,
.btn-wa:focus-visible{
  color:#04210f;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.9);
}
/* one light sweep, no pulsing — several of these on a page at once is noisy */
.btn-wa::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.5) 50%, transparent 64%);
  transform:translateX(-120%);
  animation:wa-shine 4.2s ease-in-out infinite;
}
@keyframes wa-shine{
  0%, 62%  { transform:translateX(-120%); }
  88%,100% { transform:translateX(120%); }
}

/* WhatsApp glyph — CSS mask so it inherits currentColor */
.wa-ico{
  width:19px; height:19px; flex:none; display:block;
  background:currentColor;
  -webkit-mask:var(--wa) center/contain no-repeat;
          mask:var(--wa) center/contain no-repeat;
}
/* If masking is unsupported, fall back to a filled dot rather than a square */
@supports not ((-webkit-mask: url("")) or (mask: url(""))){
  .wa-ico{ border-radius:50%; -webkit-mask:none; mask:none; }
}

/* ---------- Floating WhatsApp bubble ---------- */
.wa-float{
  position:fixed;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:95;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff; text-decoration:none !important;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.65), 0 4px 14px -4px rgba(37,211,102,.55);
  /* transform is reserved for hover; the pulse lives on ::before so they never fight */
  transition:transform .22s cubic-bezier(.2,.9,.25,1.2), box-shadow .22s;
}
.wa-float:hover,
.wa-float:focus-visible{
  transform:scale(1.09);
  box-shadow:0 14px 34px -8px rgba(0,0,0,.7), 0 6px 20px -4px rgba(37,211,102,.8);
}
.wa-float:active{ transform:scale(.96); }
.wa-float .wa-ico{ width:30px; height:30px; }

/* expanding ring, on its own layer so it cannot cause layout shift */
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:wa-ring 2.6s cubic-bezier(.25,.6,.35,1) infinite;
}
@keyframes wa-ring{
  0%   { box-shadow:0 0 0 0    rgba(37,211,102,.5); }
  70%  { box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow:0 0 0 0    rgba(37,211,102,0); }
}

/* hover label */
.wa-float .wa-label{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:var(--surface-2); color:var(--text); border:1px solid var(--line);
  padding:8px 14px; border-radius:999px; font-size:.84rem; font-weight:700;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.7);
  opacity:0; visibility:hidden;
  transition:opacity .2s, transform .2s, visibility .2s;
  pointer-events:none;
}
.wa-float:hover .wa-label,
.wa-float:focus-visible .wa-label{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0);
}

/* Sits above the sticky price bar on phones, and drops the label there */
@media (max-width:700px){
  .wa-float{
    width:54px; height:54px;
    right:max(14px, env(safe-area-inset-right));
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .wa-float .wa-ico{ width:27px; height:27px; }
  .wa-float .wa-label{ display:none; }
}

/* ---------- Buttons: a touch more light ---------- */
.btn-1{ position:relative; overflow:hidden; isolation:isolate; }
.btn-1::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform:translateX(-120%); animation:wa-shine 4.6s ease-in-out infinite;
}

/* Gradient headings pick up a soft halo */
.gt{ filter:drop-shadow(0 0 22px rgba(0,180,216,.28)); }

/* The WhatsApp mark */
:root{
  --wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.47-2.39-1.48-.89-.79-1.48-1.76-1.66-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.28-.2-.57-.34m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26c0-5.45 4.44-9.89 9.89-9.89 2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.43 9.89-9.88 9.89m8.41-18.3A11.82 11.82 0 0 0 12.05 0C5.5 0 .16 5.34.16 11.89c0 2.1.55 4.14 1.59 5.95L.06 24l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.89 0-3.18-1.24-6.17-3.48-8.42z'/%3E%3C/svg%3E");
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora i, .ico, .step-n, .plan--best, .wa-float::before{
    animation:none !important;
  }
  .ico::before, .step-n::before, .btn-wa::after, .btn-1::after{ display:none; }
  .wa-float, .wa-float:hover{ transform:none; }
}