/* SEUWEB v5d — Premium Motion & Reveals */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal, 700ms) var(--ease-out-expo),
    transform var(--dur-reveal, 700ms) var(--ease-out-expo);
  will-change: transform, opacity;
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

[data-reveal][data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 280ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 380ms; }

/* Card hover lift + premium */
.card[data-tilt] {
  transition: transform 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium);
}

/* Magnetic buttons already handled in JS but add polish */
.btn {
  transition: transform 280ms var(--ease-out-expo), box-shadow 280ms, background 280ms;
}

/* Form focus states */
.form__input:focus, .form__select:focus, .form__textarea:focus {
  box-shadow: 0 0 0 4px var(--color-glow, rgba(94, 215, 232, 0.1));
}

/* Comparison handle polish */
.comparison__handle {
  transition: left 80ms linear;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .card, .btn, .hero__photo, .godray {
    transition: none !important;
    animation: none !important;
  }
  .hero__photo { transform: none !important; }
}

/* Hero content always full opacity for LCP (no dim while preloader runs) */
html:not(.loaded) .hero__content > * {
  opacity: 1;
}

/* Subtle scroll progress bar accent */
.scroll-progress {
  box-shadow: 0 0 10px var(--color-accent);
}

/* Toast polish */
.toast {
  box-shadow: 0 16px 60px -12px rgba(0,0,0,0.6);
}

/* Extended premium for task 4: glassmorphism + 3D hover depth + loading states */
.glass {
  background: var(--color-surface-glass, rgba(12,12,18,0.72));
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-strong);
}

[data-tilt]:hover {
  box-shadow: 0 30px 90px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--color-accent);
}

.hero__layers > * {
  transition: transform 1.1s var(--ease-premium);
}

/* —— Cursor de firma: retículo editorial + rombo glacial (js/cursor.js) —— */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}
@media (pointer: coarse) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: auto !important;
  }
}

/* Legado: si quedara basura en el DOM, no se ve */
.custom-cursor,
.custom-cursor-trail {
  display: none !important;
}

.sw-cursor,
.sw-cursor-aura {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease-premium, ease);
  will-change: transform, opacity;
}
.sw-cursor.is-on,
.sw-cursor-aura.is-on {
  opacity: 1;
}
.sw-cursor-aura {
  z-index: 99999;
}

/* Cruz editorial (core al instante) */
.sw-cursor__arm {
  position: absolute;
  background: rgba(242, 240, 235, 0.92);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition:
    width 220ms var(--ease-premium, ease),
    height 220ms var(--ease-premium, ease),
    background 220ms ease,
    box-shadow 220ms ease;
}
.sw-cursor__arm--h {
  width: 14px;
  height: 1px;
  left: 0;
  top: 0;
}
.sw-cursor__arm--v {
  width: 1px;
  height: 14px;
  left: 0;
  top: 0;
}
.sw-cursor__nucleus {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--color-accent, #5ed7e8);
  box-shadow: 0 0 10px 1px rgba(94, 215, 232, 0.55);
  transition: transform 180ms var(--ease-premium, ease), box-shadow 220ms ease;
}

/* Rombo glacial (aura con lag) */
.sw-cursor-aura__diamond {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(242, 240, 235, 0.45);
  background: transparent;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 1px;
  box-shadow:
    0 0 0 0 rgba(94, 215, 232, 0),
    inset 0 0 12px rgba(109, 143, 173, 0.08);
  transition:
    width 260ms var(--ease-premium, ease),
    height 260ms var(--ease-premium, ease),
    border-color 220ms ease,
    box-shadow 260ms ease,
    background 220ms ease;
}

/* Click */
.sw-cursor.is-active .sw-cursor__arm--h { width: 8px; }
.sw-cursor.is-active .sw-cursor__arm--v { height: 8px; }
.sw-cursor.is-active .sw-cursor__nucleus {
  transform: scale(0.7);
  box-shadow: 0 0 6px 0 rgba(94, 215, 232, 0.4);
}
.sw-cursor-aura.is-active .sw-cursor-aura__diamond {
  width: 14px;
  height: 14px;
  border-color: rgba(94, 215, 232, 0.7);
}

/* Hover sobre interactivos — cian de firma, cruz más abierta, rombo vivo */
.sw-cursor.is-magnetic .sw-cursor__arm {
  background: var(--color-accent, #5ed7e8);
  box-shadow: 0 0 8px rgba(94, 215, 232, 0.35);
}
.sw-cursor.is-magnetic .sw-cursor__arm--h { width: 22px; }
.sw-cursor.is-magnetic .sw-cursor__arm--v { height: 22px; }
.sw-cursor.is-magnetic .sw-cursor__nucleus {
  transform: scale(1.35);
  box-shadow: 0 0 14px 2px rgba(94, 215, 232, 0.75);
}
.sw-cursor-aura.is-magnetic .sw-cursor-aura__diamond {
  width: 36px;
  height: 36px;
  border-color: rgba(94, 215, 232, 0.85);
  background: rgba(94, 215, 232, 0.04);
  box-shadow:
    0 0 24px -4px rgba(94, 215, 232, 0.45),
    inset 0 0 16px rgba(94, 215, 232, 0.08);
}

/* Énfasis data-pinned */
.sw-cursor.is-pinned .sw-cursor__nucleus {
  box-shadow:
    0 0 0 3px rgba(94, 215, 232, 0.35),
    0 0 16px 2px rgba(94, 215, 232, 0.7);
}