/* effects.css — glass, mesh-градієнти, keyframes, тілт/магнет/marquee/анімовані бордери */

.glass{
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
}

/* mesh gradient, дихаюча пляма фону */
.mesh{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.mesh::before,.mesh::after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;
  animation:meshbreathe 14s ease-in-out infinite;
  will-change:transform,opacity;
}
.mesh::before{
  width:56vw;height:56vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle at 30% 30%, rgba(61,139,255,.55), rgba(61,139,255,0) 70%);
}
.mesh::after{
  width:48vw;height:48vw;right:-12vw;top:8vw;
  background:radial-gradient(circle at 60% 40%, rgba(255,176,32,.38), rgba(255,176,32,0) 70%);
  animation-delay:-7s;
}
@keyframes meshbreathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-3%,0) scale(1.12)}
}

.grain{position:absolute;inset:0;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* pulsing status dot */
.pulse-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.pulse-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ok);opacity:.6;animation:pulse-ring 2.2s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* animated gradient border on hover */
.grad-border{position:relative;isolation:isolate}
.grad-border::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,var(--accent),var(--amber),var(--accent));
  background-size:220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;z-index:1;pointer-events:none;
}
.grad-border:hover::before{opacity:1;animation:gradshift 4s linear infinite}
@keyframes gradshift{0%{background-position:0 50%}100%{background-position:220% 50%}}

/* reveal-on-scroll base state (GSAP animates from these) */
.reveal{opacity:0;transform:translateY(36px)}
.reveal-scale{opacity:0;transform:scale(.94)}
.no-js .reveal,.no-js .reveal-scale{opacity:1;transform:none}

/* 3D tilt card (desktop only, JS toggles .tilt-on) */
.tilt{transform-style:preserve-3d;transition:transform .25s ease}
.tilt-inner{transform:translateZ(30px)}

/* magnetic button wrapper */
.magnetic{display:inline-block;will-change:transform}

/* marquee */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* counters container just for consistency */
.counter{font-family:var(--ff-head);font-weight:800;font-variant-numeric:tabular-nums}

/* toast */
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:min(380px,88vw)}
.toast{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;
  background:rgba(18,22,34,.9);border:1px solid var(--border-strong);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);transform:translateY(20px) scale(.97);opacity:0;
  animation:toast-in .4s cubic-bezier(.2,.9,.25,1) forwards;
}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.92)}
.toast.is-leaving{animation:toast-out .3s ease forwards}
@keyframes toast-in{to{transform:translateY(0) scale(1);opacity:1}}
@keyframes toast-out{to{transform:translateY(10px) scale(.96);opacity:0}}
.toast-icon{width:20px;height:20px;flex:none;color:var(--ok)}
.toast.is-error .toast-icon{color:var(--danger)}
.toast-body{font-size:14px}
.toast-title{font-weight:700;font-family:var(--ff-head);margin-bottom:2px}
.toast-close{margin-left:auto;color:var(--text-dim);flex:none}

/* back to top */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:400;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{transform:translateY(-4px)}

@media (hover:hover) and (pointer:fine){
  .hoverable-lift{transition:transform .3s ease, box-shadow .3s ease}
  .hoverable-lift:hover{transform:translateY(-6px)}
}

@media (max-width:820px){
  .mesh::before,.mesh::after{filter:blur(50px)}
}