/* ═══════════════════════════════════════════
   UNVERSIO — Hero FX
   Apple / Stripe level visual layer
   No structural changes to existing markup
═══════════════════════════════════════════ */

/* WebGL canvas — layer 0 */
#hero-webgl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* Portada image — layer 1 */
#hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('img/img_portada.webp');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  will-change: background-position;
}

#hero-bg-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12,10,9,0.55) 0%, transparent 45%);
}

/* Particle canvas — layer 2 */
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* Ambient grid — layer 1 */
#hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image:
    linear-gradient(rgba(245,240,232,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,240,232,1) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 100%);
}

/* Ambient glow blobs — layer 1 */
.hero-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 1;
  animation: ambientFloat ease-in-out infinite;
  will-change: transform;
}

.hero-ambient-gold {
  width: 600px;
  height: 600px;
  left: -8%;
  top: 5%;
  background: radial-gradient(circle, rgba(196,151,90,0.12) 0%, transparent 70%);
  animation-duration: 14s;
}

.hero-ambient-blue {
  width: 450px;
  height: 450px;
  right: 8%;
  bottom: 5%;
  background: radial-gradient(circle, rgba(90,180,252,0.06) 0%, transparent 70%);
  animation-duration: 18s;
  animation-delay: -5s;
}

.hero-ambient-warm {
  width: 350px;
  height: 350px;
  left: 38%;
  top: 55%;
  background: radial-gradient(circle, rgba(196,151,90,0.05) 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: -9s;
}

@keyframes ambientFloat {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(25px, -18px) scale(1.04); }
  66%      { transform: translate(-18px, 12px) scale(0.96); }
}

/* Mouse proximity glow — layer 2 */
#hero-mouse-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(196,151,90,0.07) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}

/* All hero content floats above FX */
#hero .hero-left,
#hero .hero-right,
#hero .hero-scroll {
  position: relative;
  z-index: 10;
}

/* Bottom glow line */
.hero-glow-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(196,151,90,0.25) 30%,
    rgba(196,151,90,0.35) 50%,
    rgba(196,151,90,0.25) 70%,
    transparent 100%
  );
  animation: glowLinePulse 4s ease-in-out infinite;
}

@keyframes glowLinePulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* ── Orbital System ── */
#hero-orbital {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
  width: 480px;
  height: 480px;
  opacity: 0;
  animation: orbFadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}

@keyframes orbFadeIn {
  to { opacity: 0.4; }
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196,151,90,0.18);
  animation: orbSpin linear infinite;
}

.orbital-ring-1 {
  inset: 80px;
  animation-duration: 20s;
  border-color: rgba(196,151,90,0.22);
}

.orbital-ring-2 {
  inset: 130px;
  animation-duration: 32s;
  animation-direction: reverse;
  border-color: rgba(90,180,252,0.14);
}

.orbital-ring-3 {
  inset: 40px;
  animation-duration: 48s;
  border-color: rgba(196,151,90,0.08);
  border-style: dashed;
}

.orbital-ring-4 {
  inset: 170px;
  animation-duration: 55s;
  border-color: rgba(245,240,232,0.05);
}

@keyframes orbSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbital nodes — positioned on ring perimeter */
.orbital-node {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C4975A;
  box-shadow: 0 0 10px rgba(196,151,90,0.9), 0 0 24px rgba(196,151,90,0.4);
  top: 50%;
  left: -3.5px;
  margin-top: -3.5px;
}

.orbital-node-b {
  background: rgba(90,180,252,0.95);
  box-shadow: 0 0 10px rgba(90,180,252,0.9), 0 0 24px rgba(90,180,252,0.4);
  top: -3.5px;
  left: 50%;
  margin-left: -3.5px;
  margin-top: 0;
}

.orbital-node-sm {
  width: 4px;
  height: 4px;
  margin-top: -2px;
}

/* Center orb */
.orbital-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(196,151,90,0.7) 0%,
    rgba(196,151,90,0.15) 50%,
    transparent 100%);
  box-shadow:
    0 0 30px rgba(196,151,90,0.5),
    0 0 60px rgba(196,151,90,0.2),
    0 0 100px rgba(196,151,90,0.08);
  animation: orbCenterPulse 3.5s ease-in-out infinite;
}

@keyframes orbCenterPulse {
  0%,100% {
    box-shadow:
      0 0 30px rgba(196,151,90,0.5),
      0 0 60px rgba(196,151,90,0.2),
      0 0 100px rgba(196,151,90,0.08);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 50px rgba(196,151,90,0.7),
      0 0 100px rgba(196,151,90,0.3),
      0 0 160px rgba(196,151,90,0.1);
    transform: scale(1.08);
  }
}

/* ── Enhanced text animations (Apple-style) ── */
.hero-tag {
  animation: heroTagReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
}

@keyframes heroTagReveal {
  from { opacity: 0; transform: translateY(8px); letter-spacing: 0.38em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.24em; }
}

.hero-h1 {
  animation: heroH1Reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both !important;
}

@keyframes heroH1Reveal {
  from {
    opacity: 0;
    transform: translateY(48px) skewY(1.5deg);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
    filter: blur(0);
  }
}

.hero-sub {
  animation: heroSubReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both !important;
}

@keyframes heroSubReveal {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-actions {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both !important;
}

.hero-proof {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.88s both !important;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Word-by-word stagger on h1 */
@keyframes wordSlideUp {
  from {
    transform: translateY(105%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hero-h1 .hw-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}

.hero-h1 .hw-inner {
  display: inline-block;
  animation: wordSlideUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* When WebGL is active, hero bg becomes transparent */
#hero.fx-active {
  background: #070605 !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  #hero-orbital { display: none; }
  .hero-ambient-gold   { width: 400px; height: 400px; }
  .hero-ambient-blue   { display: none; }
  .hero-ambient-warm   { display: none; }
}

@media (max-width: 768px) {
  #hero-bg-img img { opacity: 0.06; }
  .hero-ambient-gold { width: 300px; height: 300px; left: -20%; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .orbital-ring,
  .orbital-center,
  .hero-ambient,
  .hero-glow-line {
    animation: none !important;
  }
  #hero-bg-img img { transform: none !important; }
  .hero-tag, .hero-h1, .hero-sub, .hero-actions, .hero-proof {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-h1 .hw-inner { animation: none !important; }
}