/* Efectos que no conviene expresar como utilidades de Tailwind.
   Los tokens de diseño viven en el bloque @theme de index.php. */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body { background: #04070f; overflow-x: clip; }

/* ---------- Fondo: grano ---------- */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Texto "ON" encendido ---------- */
.text-on-glow {
  color: #e9fdff;
  text-shadow: 0 0 12px rgba(62, 230, 255, .75), 0 0 42px rgba(62, 230, 255, .45), 0 0 90px rgba(47, 107, 255, .45);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .55; }
}

/* ---------- Borde cónico animado ---------- */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.border-beam { position: relative; isolation: isolate; }
.border-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle), transparent 0 70%, #3ee6ff 82%, #2f6bff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin-angle 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- Spotlight que sigue al cursor ---------- */
.spotlight { --x: 50%; --y: 50%; }
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  background: radial-gradient(420px circle at var(--x) var(--y), rgba(62, 230, 255, .12), transparent 45%);
}
.spotlight:hover::after { opacity: 1; }

/* ---------- Reveal al hacer scroll (solo si hay JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s;
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Marquee ---------- */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Palabras rotativas ---------- */
.rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; }
.rotator > span {
  grid-area: 1 / 1;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s;
}
.rotator > span.is-active { transform: none; opacity: 1; }
.rotator > span.is-leaving { transform: translateY(-105%); opacity: 0; }
html:not(.js) .rotator > span:first-child { transform: none; opacity: 1; }

/* ---------- Intro: encendido ---------- */
@property --hole { syntax: "<length>"; initial-value: 0px; inherits: false; }
.power-intro {
  --hole: 0px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #02040a;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 80px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 80px));
  transition: --hole 1.2s cubic-bezier(.7, 0, .2, 1), opacity .3s 1.1s;
}
.power-intro.is-on { --hole: 150vmax; opacity: 0; pointer-events: none; }
.power-intro.is-on .power-intro__btn, .power-intro.is-on p { opacity: 0; transition: opacity .2s; }
.power-intro__btn { transition: transform .25s, filter .4s, color .4s; }
.power-intro__btn:active { transform: scale(.94); }
.power-intro.is-pressing .power-intro__btn {
  color: #3ee6ff;
  filter: drop-shadow(0 0 18px rgba(62, 230, 255, .9)) drop-shadow(0 0 60px rgba(47, 107, 255, .7));
}
.power-intro__ring { animation: ring 2.4s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes ring {
  from { transform: scale(.6); opacity: .7; }
  to { transform: scale(2.2); opacity: 0; }
}

/* ---------- Mock del dashboard ---------- */
.bar { transform-origin: bottom; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.toast-in { animation: toast 4.5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes toast {
  0% { transform: translateY(16px) scale(.96); opacity: 0; }
  10%, 85% { transform: none; opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}
.js .chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.js.powered .chart-line { animation: draw 2.4s .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Switch OFF / ON ---------- */
.state-off [data-on-only], .state-on [data-off-only] { display: none; }
.state-on .switch-knob { transform: translateX(100%); }
.state-on .switch-track { background: linear-gradient(90deg, #2f6bff, #3ee6ff); box-shadow: 0 0 30px rgba(62, 230, 255, .45); }
.state-off .pain-card { filter: grayscale(1); }
.pain-card { transition: filter .6s, border-color .6s, background-color .6s; }
.state-on .pain-card { border-color: rgba(62, 230, 255, .25); }

/* ---------- Timeline ---------- */
.timeline__fill { transform-origin: top; transform: scaleY(var(--p, 0)); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .marquee__track { animation: none; }
  .chart-line { stroke-dashoffset: 0; }
}