/* =====================================================================
   ANIMATIONS — motion layer for the whole site.
   Everything is disabled for visitors who ask for reduced motion.
   ===================================================================== */
@property --ring { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Scroll progress bar ---------- */
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--green),#fff);pointer-events:none}

/* ---------- Header: shrink + shadow after scrolling ---------- */
.nav{transition:background .3s,box-shadow .3s}
.nav-inner{transition:height .3s}
.nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.45)}
.nav.scrolled .nav-inner{height:62px}
@media (max-width:1280px){.nav.scrolled .nav-links{top:62px}}

/* ---------- Flag stripe flows ---------- */
[data-theme="greek"] .nav::after{animation:stripe 6s linear infinite}
@keyframes stripe{to{background-position:160px 0}}

/* ---------- Hero entrance ---------- */
.hero h1>span,.hero p,.hero .btn-lg,.hero .mail-alt,.hero-devices li,.page-hero h1,.page-hero p,.page-hero .crumbs{
  animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.hero h1>span:nth-of-type(1){animation-delay:.05s}
.hero h1>span:nth-of-type(2){animation-delay:.2s}
.hero p{animation-delay:.35s}
.hero .btn-lg{animation-delay:.5s}
.hero .mail-alt{animation-delay:.6s}
.hero-devices li:nth-child(1){animation-delay:.65s}.hero-devices li:nth-child(2){animation-delay:.72s}
.hero-devices li:nth-child(3){animation-delay:.79s}.hero-devices li:nth-child(4){animation-delay:.86s}
.hero-devices li:nth-child(5){animation-delay:.93s}
.page-hero .crumbs{animation-delay:0s}.page-hero h1{animation-delay:.1s}.page-hero p{animation-delay:.25s}
.hero-visual{animation:slideIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(60px) scale(.96)}to{opacity:1;transform:none}}

/* Headline shimmer */
.hero h1 .green{background:linear-gradient(100deg,var(--green) 0%,var(--green) 40%,#fff 50%,var(--green) 60%,var(--green) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fadeUp .8s .05s both,shimmer 5s 1.2s ease-in-out infinite}
@keyframes shimmer{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}

/* TV photo floats + tilts with the mouse */
.hero-visual img{animation:float 6s ease-in-out infinite;transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .2s ease-out}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- Rings ripple outward ---------- */
.waves{animation:ripple 4s linear infinite, breathe 8s ease-in-out infinite}
.waves-right{animation-delay:-2s,-4s}
.waves{background:repeating-radial-gradient(circle at center,transparent calc(0px + var(--ring)),transparent calc(26px + var(--ring)),var(--green) calc(26px + var(--ring)),var(--green) calc(28px + var(--ring)),transparent calc(28px + var(--ring)),transparent calc(28px + var(--ring)))}
[data-theme="greek"] .waves{background:repeating-radial-gradient(circle at center,
  transparent calc(0px + var(--ring)),transparent calc(22px + var(--ring)),
  rgba(90,169,255,.9) calc(22px + var(--ring)),rgba(90,169,255,.9) calc(24px + var(--ring)),
  transparent calc(24px + var(--ring)),transparent calc(46px + var(--ring)),
  rgba(255,255,255,.55) calc(46px + var(--ring)),rgba(255,255,255,.55) calc(48px + var(--ring)),
  transparent calc(48px + var(--ring)),transparent calc(48px + var(--ring)))}
@keyframes ripple{from{--ring:0px}to{--ring:48px}}
[data-theme]:not([data-theme="greek"]) .waves,:root:not([data-theme]) .waves{animation-name:rippleLime,breathe}
@keyframes rippleLime{from{--ring:0px}to{--ring:28px}}
@keyframes breathe{0%,100%{opacity:.9;scale:1}50%{opacity:.6;scale:1.05}}

/* ---------- Scroll reveal ---------- */
.js-anim .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-anim .reveal.zoom{transform:scale(.92)}
.js-anim .reveal.left{transform:translateX(-40px)}
.js-anim .reveal.in{opacity:1;transform:none}

/* ---------- Buttons: light sweep ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover::after{transform:translateX(120%);transition:transform .7s ease}
.hero .btn-lg::after{animation:sweep 4s 2s ease-in-out infinite}
@keyframes sweep{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn:active{transform:scale(.97)}

/* ---------- Cards: mouse spotlight + lift ---------- */
.box,.plan,.cat-card,.contact-card,.badge-dev,.guide details{position:relative}
.box::before,.plan::before,.contact-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(90,169,255,.18),transparent 60%)}
.box:hover::before,.plan:hover::before,.contact-card:hover::before{opacity:1}
.box,.plan,.contact-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.box:hover,.plan:hover,.contact-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.box>i{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.box:hover>i{transform:translateY(-4px) scale(1.2) rotate(-6deg)}
.badge-dev{transition:transform .3s,box-shadow .3s}
.badge-dev:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(13,94,175,.35)}

/* Featured plan glows */
.plan.featured{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(90,169,255,0)}50%{box-shadow:0 0 40px 4px rgba(90,169,255,.35)}}
.plan.featured:hover{animation:none}

/* Prices pop whenever the plans are re-drawn (device toggle) */
.plan .price{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- Stats ---------- */
.stat.in b{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both}

/* ---------- World pins drop and bob ---------- */
.pin{animation:bob 2.6s ease-in-out infinite}
.pin:nth-of-type(2){animation-delay:-.5s}.pin:nth-of-type(3){animation-delay:-1s}
.pin:nth-of-type(4){animation-delay:-1.5s}.pin:nth-of-type(5){animation-delay:-2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Posters & reviews ---------- */
.poster{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.poster:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 20px 40px rgba(0,0,0,.5);z-index:1}
.review{transition:transform .4s}
.review:hover{transform:translateY(-6px) rotate(-1deg)}

/* ---------- WhatsApp button pulses ---------- */
.wa-float::before,.wa-float::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#25d366;z-index:-1;animation:pulse 2.4s ease-out infinite}
.wa-float::after{animation-delay:1.2s}
@keyframes pulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.9);opacity:0}}
.contact-wa i{display:inline-block;animation:wiggle 3s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}

/* ---------- FAQ answers slide ---------- */
.faq-item{transition:background .3s}
.faq-item:hover{background:#15284d}
.faq-item.open .faq-a p{animation:fadeUp .4s both}

/* ---------- Setup guide ---------- */
.guide details[open] .body{animation:fadeUp .45s both}
.guide details summary{transition:background .3s}
.guide details summary:hover{background:rgba(90,169,255,.07)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-anim .reveal{opacity:1;transform:none}
  .hero h1 .green{color:var(--green);background:none}
}

/* Photo posters: slow zoom on hover */
.poster.photo{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}


/* ---------- World map: arcs pulse, Greece beacon, pins bob ---------- */
.world-glow{animation:arcs 4s ease-in-out infinite}
@keyframes arcs{0%,100%{opacity:0}50%{opacity:.55}}
.world-img .hub::before,.world-img .hub::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #5aa9ff;animation:beacon 2.4s ease-out infinite}
.world-img .hub::after{animation-delay:1.2s}
@keyframes beacon{from{transform:scale(1);opacity:.9}to{transform:scale(6);opacity:0}}
.world-img .pin{animation:bob 2.6s ease-in-out infinite}
.world-img .pin:nth-of-type(2){animation-delay:-.5s}.world-img .pin:nth-of-type(3){animation-delay:-1s}
.world-img .pin:nth-of-type(4){animation-delay:-1.5s}.world-img .pin:nth-of-type(5){animation-delay:-2s}
.stat.in>i{animation:pop .6s .15s cubic-bezier(.3,1.6,.5,1) both}
.stat:hover>i{animation:spinIn .6s ease}
@keyframes spinIn{from{transform:rotate(-20deg) scale(.9)}to{transform:none}}
.ci i{display:inline-block;animation:wiggle 3s ease-in-out infinite}
.ci-mail i{animation-delay:1.5s}
.offer-overlay.open .offer-pct{animation:pop .6s .25s cubic-bezier(.3,1.6,.5,1) both}
.offer-overlay.open .offer-cta::after{animation:sweep 3s 1s ease-in-out infinite}