/* ============ AIOOS — delight pass (the places nobody thinks of) ============ */

/* ---------- 1) brand-tinted text selection ---------- */
::selection{background:rgba(0,132,255,.16); color:var(--ink)}

/* ---------- 2) glass scrollbar ---------- */
html{scrollbar-width:thin; scrollbar-color:rgba(45,108,246,.45) transparent}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#60B1FF,#2D6CF6); border-radius:8px; border:3px solid #fff}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#319AFF,#1E5BE6)}

/* ---------- 3) keyboard focus ring in the glass language ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid rgba(0,132,255,.65); outline-offset:3px; border-radius:10px}

/* ---------- 4) logo: wave lines draw themselves on hover ---------- */
@media (prefers-reduced-motion:no-preference){
  .brand:hover .mk path{stroke-dasharray:230; animation:logoDraw .9s cubic-bezier(.3,.6,.3,1) forwards}
  .brand:hover .mk path:nth-child(2){animation-delay:.05s}
  .brand:hover .mk path:nth-child(3){animation-delay:.1s}
  .brand:hover .mk path:nth-child(4){animation-delay:.15s}
  .brand:hover .mk path:nth-child(5){animation-delay:.2s}
  .brand:hover .mk path:nth-child(6){animation-delay:.25s}
}
@keyframes logoDraw{from{stroke-dashoffset:230}to{stroke-dashoffset:0}}

/* ---------- 5) magnetic primary CTA ---------- */
.cta{transform:translate(var(--mx,0px),var(--my,0px))}
.cta:hover{transform:translate(var(--mx,0px),var(--my,0px)) scale(1.03)}
.cta:active{transform:translate(var(--mx,0px),var(--my,0px)) scale(.96)}

/* ---------- 6) "Beliebt" badge: passing sheen ---------- */
.price.best .badge{position:relative; overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .price.best .badge::after{content:""; position:absolute; inset:-2px;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);
    transform:translateX(-130%) skewX(-16deg); animation:sheen 5.5s ease-in-out infinite}
}
@keyframes sheen{0%,72%{transform:translateX(-130%) skewX(-16deg)}88%,100%{transform:translateX(130%) skewX(-16deg)}}

/* ---------- 7) live-activity toast (glass notification) ---------- */
.ping-toast{position:fixed; left:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:12px; padding:12px 38px 12px 13px;
  border-radius:16px; max-width:330px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.5), 0 24px 52px -22px rgba(20,50,110,.5);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1)}
.ping-toast.on{opacity:1; transform:none; pointer-events:auto}
.ping-toast .pt-ic{width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ping-toast .pt-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.ping-toast .pt-tx b{font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--ink); font-family:var(--font-head)}
.ping-toast .pt-tx em{font-style:normal; font-size:11.5px; font-weight:600; color:#7E8EA6}
.ping-toast .pt-x{position:absolute; top:6px; right:8px; width:22px; height:22px; border:none; cursor:pointer;
  background:transparent; color:#9FB0C8; font-size:15px; line-height:1; border-radius:50%}
.ping-toast .pt-x:hover{color:var(--ink); background:rgba(20,50,110,.07)}
@media (max-width:860px){.ping-toast{display:none}}

/* ---------- 8) back-to-top glass pill (sits above the AIOOS widget launcher) ---------- */
.to-top{position:fixed; right:22px; bottom:96px; z-index:60; width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(0,0,0,.08); cursor:pointer;
  background:rgba(255,255,255,.7); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.6), 0 16px 36px -16px rgba(20,50,110,.45);
  display:grid; place-items:center; color:var(--ink);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.3,1), background .25s}
.to-top.on{opacity:1; transform:none; pointer-events:auto}
.to-top:hover{background:rgba(255,255,255,.95); transform:translateY(-2px)}
.to-top:active{transform:scale(.94)}

/* ---------- 9) easter egg: typing "aioos" makes the waves say hello ---------- */
@media (prefers-reduced-motion:no-preference){
  body.wavehello .glow{animation:helloGlow 1.6s cubic-bezier(.3,.6,.3,1)}
  body.wavehello .brand .mk path{stroke-dasharray:230; animation:logoDraw .9s cubic-bezier(.3,.6,.3,1) forwards}
  body.wavehello .brand .mk path:nth-child(2){animation-delay:.06s}
  body.wavehello .brand .mk path:nth-child(3){animation-delay:.12s}
  body.wavehello .brand .mk path:nth-child(4){animation-delay:.18s}
  body.wavehello .brand .mk path:nth-child(5){animation-delay:.24s}
  body.wavehello .brand .mk path:nth-child(6){animation-delay:.3s}
}
@keyframes helloGlow{0%,100%{opacity:.4}40%{opacity:.85; transform:scale(1.15)}}

/* ---------- 10) WhatsApp voice note: play/pause is real ---------- */
.wa-voice .play{cursor:pointer; transition:transform .2s}
.wa-voice .play:hover{transform:scale(1.12)}
.wa-voice.paused .wa-wave i{animation-play-state:paused}