/* ============================================================
   Play Vision IPTV — Premium animation layer
   GSAP + ScrollTrigger driven. Pure CSS for hover states.
   ============================================================ */

/* ---------- Page load curtain ---------- */
.page-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--plum-deep);transition:opacity .6s ease,visibility .6s}
.page-loader.done{opacity:0;visibility:hidden}
.page-loader .loader-mark{width:64px;height:64px;border-radius:50%;border:3px solid oklch(1 0 0 / .18);border-top-color:var(--red);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Scroll reveal primitives (GSAP sets final state) ---------- */
[data-anim]{will-change:transform,opacity}
.js-anim [data-anim]{opacity:0}
.js-anim [data-anim="up"]{transform:translateY(46px)}
.js-anim [data-anim="down"]{transform:translateY(-40px)}
.js-anim [data-anim="left"]{transform:translateX(-56px)}
.js-anim [data-anim="right"]{transform:translateX(56px)}
.js-anim [data-anim="zoom"]{transform:scale(.88)}
.js-anim [data-anim="flip"]{transform:perspective(900px) rotateX(-28deg);transform-origin:top center}
.js-anim [data-anim="mask"]{clip-path:inset(0 100% 0 0)}

/* ---------- Sticky / shrinking header ---------- */
.site-header{transition:box-shadow .35s ease,background .35s ease,padding .35s ease,min-height .35s ease,border-radius .35s ease}
body.header-stuck .site-header{position:fixed;top:0;left:0;transform:none;width:100%;min-height:68px;border-radius:0;box-shadow:0 10px 30px oklch(0 0 0 / .16);background:oklch(1 0 0 / .96);backdrop-filter:blur(12px);padding-left:max(24px,calc((100vw - 1270px)/2));padding-right:max(16px,calc((100vw - 1270px)/2));animation:header-drop .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes header-drop{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
body.header-stuck .brand span{font-size:26px}

/* nav underline sweep */
.desktop-nav a{position:relative;padding-bottom:4px}
.desktop-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1);transform-origin:left}
.desktop-nav a.active{color:var(--red)}

/* header icon + button micro interactions */
.header-icon{border-radius:50%;transition:transform .3s,color .3s,background .3s}
.header-icon:hover{color:var(--red);transform:translateY(-2px) scale(1.12)}
.menu-control{transition:transform .3s,background .3s,color .3s}
.menu-control:hover{transform:rotate(90deg);background:var(--red);color:var(--primary-foreground)}

/* shine sweep on all solid CTAs */
.pill-cta,.primary-cta,.dark-cta,.outline-cta,.view-all,.plan-row>a{position:relative;overflow:hidden;isolation:isolate}
.pill-cta::before,.primary-cta::before,.dark-cta::before,.outline-cta::before,.view-all::before,.plan-row>a::before{content:"";position:absolute;z-index:-1;top:0;left:-130%;width:60%;height:100%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,oklch(1 0 0 / .45),transparent);transition:left .65s cubic-bezier(.2,.8,.2,1)}
.pill-cta:hover::before,.primary-cta:hover::before,.dark-cta:hover::before,.outline-cta:hover::before,.view-all:hover::before,.plan-row>a:hover::before{left:130%}
.pill-cta svg,.primary-cta svg,.dark-cta svg,.view-all svg,.plan-row>a svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pill-cta:hover svg,.primary-cta:hover svg,.dark-cta:hover svg,.view-all:hover svg,.plan-row>a:hover svg{transform:translateX(5px)}
.view-all:hover{background:var(--red);color:var(--primary-foreground);border-color:var(--red)}

/* ---------- Hero ---------- */
.hero-content{animation:none}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block}
.price-badge{cursor:default;transition:transform .4s}
.price-badge:hover{transform:rotate(0deg) scale(1.08)}
.hero-dots span{cursor:pointer;transition:transform .3s,background .3s,box-shadow .3s}
.hero-dots span:hover{transform:scale(1.4)}
.scroll-hint{position:absolute;z-index:6;right:max(32px,calc((100vw - 1230px)/2));bottom:36px;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:1.6px;color:oklch(1 0 0 / .8)}
.scroll-hint i{display:block;width:22px;height:36px;border:2px solid oklch(1 0 0 / .55);border-radius:14px;position:relative}
.scroll-hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--red);animation:mouse-drop 1.7s ease-in-out infinite}
@keyframes mouse-drop{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(12px);opacity:.2}}
@media(max-width:900px){.scroll-hint{display:none}}

/* ---------- Service cards ---------- */
.service-item{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.service-orbit{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.service-orbit::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,var(--red),var(--rose),var(--plum),var(--red));opacity:0;transition:opacity .45s;animation:orbit-spin 4s linear infinite;z-index:0}
.service-orbit img{position:relative;z-index:1}
.orbit-pip{z-index:3;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.service-item:hover .service-orbit::before{opacity:1}
.service-item:hover .service-orbit{transform:translateY(-14px) scale(1.03);box-shadow:0 28px 42px rgb(7 8 7 / .22)}
.service-item:hover .service-orbit img{transform:scale(1.14) rotate(2deg)}
.service-item:hover .orbit-pip{transform:scale(1.5)}
.service-item:hover h2{color:var(--red)}
.service-item h2{transition:color .35s}
.service-orbit::after{z-index:2}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

/* ---------- About ---------- */
.about-cloud img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.about-visual:hover .about-cloud img{transform:scale(1.07)}
.experience{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.about-visual:hover .experience{transform:translateY(-8px) rotate(-3deg)}
.fast-connected>svg{transition:transform .5s}
.fast-connected:hover>svg{transform:rotate(360deg) scale(1.1)}
.call>svg{transition:transform .4s}
.call:hover>svg{transform:rotate(-18deg) scale(1.1)}
.counter{display:inline-block}

/* ---------- Marquee ---------- */
.marquee{position:relative}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track i{display:inline-block;animation:star-spin 6s linear infinite}
@keyframes star-spin{to{transform:rotate(360deg)}}

/* ---------- Plan rows ---------- */
.plan-row{overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,color .45s}
.plan-row::before{content:"";position:absolute;inset:0;z-index:0;background:var(--plum);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.plan-row.featured::before{transform:scaleX(1)}
.plan-row > *{position:relative;z-index:1}
.plan-row:hover::before{transform:scaleX(1)}
.plan-row:hover{color:var(--primary-foreground);transform:translateY(-6px);box-shadow:0 26px 50px rgb(7 8 7 / .25)}
.plan-row:hover li svg{color:var(--rose)}
.plan-row li svg{transition:color .4s,transform .4s}
.plan-row:hover li{animation:plan-li .5s both}
.plan-row:hover li:nth-child(2){animation-delay:.05s}
.plan-row:hover li:nth-child(3){animation-delay:.1s}
.plan-row:hover li:nth-child(4){animation-delay:.15s}
@keyframes plan-li{from{transform:translateX(-10px);opacity:.4}to{transform:translateX(0);opacity:1}}
.plan-name img{transition:transform .6s cubic-bezier(.2,.8,.2,1),border-radius .5s}
.plan-row:hover .plan-name img{transform:scale(1.06) translateY(-4px);border-radius:16px}
.plan-price{transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .5s}
.plan-row:hover .plan-price{transform:scale(1.1) rotate(-4deg);box-shadow:0 14px 30px oklch(0 0 0 / .25)}
.plan-row:hover > a{background:var(--red);color:var(--primary-foreground);border-color:var(--red)}

/* ---------- Footer + back to top ---------- */
.footer-brand,.footer-call{transition:transform .35s,color .35s}
.footer-brand:hover{transform:translateY(-3px)}
.footer-call:hover{color:var(--rose);transform:translateX(4px)}
.to-top{position:fixed;right:22px;bottom:26px;z-index:60;width:52px;height:52px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--card);color:var(--red);box-shadow:0 12px 28px oklch(0 0 0 / .2);opacity:0;pointer-events:none;transform:translateY(20px) scale(.8);transition:opacity .4s,transform .4s}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.to-top:hover{transform:translateY(-4px) scale(1.06)}
.to-top svg{width:20px;position:relative;z-index:1}
.to-top .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p,0) * 1%),#d5d9ce 0);-webkit-mask:radial-gradient(circle,transparent 61%,#000 62%);mask:radial-gradient(circle,transparent 61%,#000 62%)}

@media(prefers-reduced-motion:reduce){
  .js-anim [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  .page-loader{display:none}
}

/* ============================================================
   Usability layer — added after QA pass
   ============================================================ */

/* Anchored sections must clear the sticky header */
#top,#about,#plans,#services,#contact,#plan-list{scroll-margin-top:110px}

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--red,#91f50f);outline-offset:3px;border-radius:8px}

/* Lock background scroll while the mobile menu is open */
body.nav-open{overflow:hidden}

/* Comfortable tap targets on touch devices */
@media (hover:none){
  .mobile-nav a{min-height:48px;display:flex;align-items:center}
  .header-icon,.menu-control{min-width:44px;min-height:44px}
  .plan-row a,.primary-cta,.outline-cta,.dark-cta,.pill-cta{min-height:46px}
}

/* Selected plan feedback */
.plan-row.is-selected{outline:2px solid var(--red,#91f50f);outline-offset:4px;border-radius:inherit}

/* Never let an animation layer hide content when scripts are off */
html:not(.js-anim) [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}

/* Final pricing hover treatment: electric green with maximum readability */
.plan-row::before{background:var(--primary)}
.plan-row.featured::before{transform:scaleX(0)}
.plan-row:hover::before,.plan-row:focus-within::before{transform:scaleX(1)}
.plan-row:hover,.plan-row:focus-within{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:0 26px 50px rgb(145 247 13 / .18)}
.plan-row:hover .plan-name strong,.plan-row:hover li,.plan-row:focus-within .plan-name strong,.plan-row:focus-within li{color:var(--primary-foreground)}
.plan-row:hover li svg,.plan-row:focus-within li svg{color:var(--primary-foreground)}
.plan-row:hover .plan-price,.plan-row:focus-within .plan-price{background:var(--plum-deep);color:var(--foreground);border-color:var(--plum-deep)}
.plan-row:hover .plan-price strong,.plan-row:focus-within .plan-price strong{color:var(--primary)}
.plan-row:hover>a,.plan-row:focus-within>a{background:var(--plum-deep);color:var(--primary);border-color:var(--plum-deep)}

/* ============================================================
   Requested visibility + electric-green hover update
   ============================================================ */
/* Keep the scrolled header identical to its original dark treatment. */
body.header-stuck .site-header{
  background:var(--card);
  color:var(--foreground);
  border-color:var(--border);
  box-shadow:0 10px 30px rgb(0 0 0 / .48);
}
body.header-stuck .brand small{color:var(--muted-foreground)}
body.header-stuck .desktop-nav a,
body.header-stuck .header-icon{color:var(--foreground)}
body.header-stuck .desktop-nav a:hover,
body.header-stuck .desktop-nav a.active,
body.header-stuck .header-icon:hover{color:var(--primary)}

/* Extend the pricing-card green hover language to key content blocks. */
.showcase-stats div,
.fast-connected,
.call,
.showcase-gallery figure,
.community-portrait{
  transition:transform .4s cubic-bezier(.2,.8,.2,1),background .4s,color .4s,border-color .4s,box-shadow .4s;
}
.showcase-stats div{position:relative;padding-inline:24px}
@media(hover:hover){
  .showcase-stats div:hover{
    z-index:1;
    background:var(--primary);
    color:var(--primary-foreground);
    border-color:var(--primary);
    transform:translateY(-6px);
    box-shadow:0 22px 42px rgb(145 247 13 / .18);
  }
  .showcase-stats div:hover strong,
  .showcase-stats div:hover span{color:var(--primary-foreground)}
  .fast-connected:hover,
  .call:hover{
    background:var(--primary);
    color:var(--primary-foreground);
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgb(145 247 13 / .16);
  }
  .fast-connected:hover{padding:18px;margin:-18px;border-radius:8px}
  .fast-connected:hover p,
  .call:hover small,
  .call:hover b,
  .fast-connected:hover>svg{color:var(--primary-foreground)}
  .call:hover{padding:10px 14px;margin:-10px -14px;border-radius:8px}
  .showcase-gallery figure:hover,
  .community-portrait:hover{
    border-color:var(--primary);
    transform:translateY(-7px);
    box-shadow:0 22px 42px rgb(145 247 13 / .2);
  }
}
.showcase-stats div:focus-within{background:var(--primary);color:var(--primary-foreground)}
@media(max-width:620px){.showcase-stats div{padding-inline:8px}}