/* ============================================================================
   enhance.css — GLOBAL MOTION & AESTHETIC LAYER (additive, isolated, reversible)
   Consuleria.org — Sistema Visivo & Motion v1
   Re-skins the whole site to the signature duotone (cyan #22d3ee -> viola #7c3aed)
   without touching index.html. Pure CSS, GPU-friendly, AA-contrast, reduced-motion safe.
   Rollback: remove this <link>. Nothing here is required for the page to function.
   ============================================================================ */

/* ---- 1) Signature accent override (re-skins links/focus/progress/brand) ---- */
:root{
  --brand:#22d3ee;                 /* cyan elettrico (override del vecchio #60a5fa) */
  --brand2:#7c3aed;                /* viola */
  --accent-grad:linear-gradient(135deg,#22d3ee 0%, #7c3aed 100%);
  --glow:0 0 0 1px rgba(34,211,238,.25), 0 8px 40px -12px rgba(124,58,237,.35);
  /* base dark (#0b0b0b) and --fg stay exactly as the site defines them */
}

/* Accessible, visible focus ring in the signature accent (keyboard users) */
a:focus-visible,button:focus-visible,
.btn:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid rgba(34,211,238,.9);
  outline-offset:2px;
  border-radius:10px;
}

/* ---- 2) Refined HERO treatment (behind .hero content, pointer-events:none) --- */
/* The hero is position:relative; its .container children are static, so a z-0
   pseudo layer sits behind them. We lift the inner content to z-1 to be safe. */
.hero{isolation:isolate}
.hero > .container{position:relative;z-index:1}

/* Animated gradient-mesh + soft vignette */
.hero::before{
  content:"";
  position:absolute;
  inset:-10% -5%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(46% 60% at 18% 22%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(50% 64% at 82% 30%, rgba(124,58,237,.22), transparent 62%),
    radial-gradient(60% 70% at 50% 100%, rgba(34,211,238,.10), transparent 70%),
    radial-gradient(120% 120% at 50% 0%, transparent 58%, rgba(0,0,0,.55) 100%); /* vignette */
  background-repeat:no-repeat;
  filter:saturate(120%);
  opacity:.9;
  animation:fxMeshDrift 22s ease-in-out infinite alternate;
  will-change:transform,background-position;
}
/* Fine grain / noise overlay (SVG fractal noise, data-URI, no network) */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><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>");
  background-size:160px 160px;
  animation:fxGrain .9s steps(3) infinite;
  will-change:transform;
}
@keyframes fxMeshDrift{
  0%  {transform:translate3d(0,0,0) scale(1);     filter:saturate(115%) hue-rotate(0deg)}
  50% {transform:translate3d(1.5%,-1%,0) scale(1.04); filter:saturate(135%) hue-rotate(-8deg)}
  100%{transform:translate3d(-1%,1.5%,0) scale(1.02); filter:saturate(120%) hue-rotate(6deg)}
}
@keyframes fxGrain{
  0%{transform:translate3d(0,0,0)}      25%{transform:translate3d(-4%,2%,0)}
  50%{transform:translate3d(3%,-3%,0)}  75%{transform:translate3d(-2%,4%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---- 3) Card polish: lift, accent border glow, diagonal sheen --------------- */
.card{position:relative;overflow:hidden}
.card:hover{
  transform:translateY(-4px);
  outline:1px solid rgba(34,211,238,.45);
  box-shadow:0 18px 48px rgba(0,0,0,.4), var(--glow);
}
/* Diagonal sheen sweep on hover (decorative, behind content) */
.card::after{
  content:"";
  position:absolute;
  inset:-40% -10%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,transparent 40%,rgba(34,211,238,.10) 50%,rgba(124,58,237,.12) 55%,transparent 66%,transparent 100%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  mix-blend-mode:screen;
}
.card:hover::after{transform:translateX(120%)}
/* Keep real card content above the sheen */
.card > *{position:relative;z-index:1}

/* ---- 4) Primary CTA: accent gradient fill + glow ---------------------------- */
.btn--primary{
  border-color:rgba(34,211,238,.55);
  background:var(--accent-grad);
  color:#06121a;                                /* dark text on bright fill = AA */
  font-weight:600;
  box-shadow:0 10px 30px -8px rgba(124,58,237,.5), 0 0 0 1px rgba(34,211,238,.2) inset;
}
.btn--primary:hover{
  box-shadow:0 16px 50px -8px rgba(34,211,238,.55), 0 0 0 1px rgba(34,211,238,.35) inset;
  filter:brightness(1.05) saturate(1.05);
}
.btn--primary .cta-icon{width:18px;height:18px;vertical-align:middle}

/* ---- 5) Badge accent dot ---------------------------------------------------- */
.badge{border-color:rgba(34,211,238,.22)}
.badge::before{
  content:"";
  width:6px;height:6px;border-radius:999px;
  background:var(--accent-grad);
  box-shadow:0 0 8px rgba(34,211,238,.7);
  flex:0 0 auto;
}

/* ---- 6) Section eyebrow label (small uppercase + scanline cursor) ----------- */
.fx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#9fe9f4;
  font-family:var(--brandFont,inherit),var(--font);
}
.fx-eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--accent-grad);
}
.fx-eyebrow::after{
  content:"_";
  margin-left:-2px;
  color:#22d3ee;
  animation:fxBlink 1.1s steps(2,start) infinite;
}
@keyframes fxBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---- 7) Scroll-reveal (.reveal / .reveal.in) with stagger via --i ----------- */
/* NOTE: the page already ships a .reveal/.reveal.on system for .card elements.
   We honor BOTH .in (this layer) and .on (legacy) so nothing is ever left hidden. */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:calc(var(--i, 0) * 60ms);
  will-change:opacity,transform;
}
.reveal.in,
.reveal.on{
  opacity:1;
  transform:none;
}

/* ---- 8) Reduced-motion + mobile safety ------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none}
  .hero::after{animation:none;opacity:.05}
  .card::after{display:none}
  .card:hover{transform:none}
  .fx-eyebrow::after{animation:none}
  .reveal{transition:none;transition-delay:0s;opacity:1;transform:none}
  .btn--primary:hover{filter:none}
}

/* Coarse pointers (touch): no sticky hover sheen artifacts */
@media (pointer:coarse){
  .card::after{display:none}
}

/* Very small screens: soften the mesh so text stays readable (AA) */
@media (max-width:600px){
  .hero::before{opacity:.7;inset:-6% -3%}
  .hero::after{opacity:.05}
}