/* ═══════════════════════════════════════════════════
   animations.css — Keyframes, Scroll-reveal, Transitions
   ═══════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.2); }
}

@keyframes scroll-hint-fade {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.65; }
}

@keyframes scroll-line-grow {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  30%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@keyframes node-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

@keyframes dot-blink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

@keyframes metric-grow {
  from { width: 0; }
  to   { width: var(--pct, 0%); }
}

@keyframes bar-grow {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10%      { transform: translate(-2%,-3%); }
  20%      { transform: translate(2%,1%); }
  30%      { transform: translate(-1%,4%); }
  40%      { transform: translate(3%,-1%); }
  50%      { transform: translate(-2%,2%); }
  60%      { transform: translate(1%,-4%); }
  70%      { transform: translate(-3%,1%); }
  80%      { transform: translate(2%,3%); }
  90%      { transform: translate(-1%,-2%); }
}

@keyframes nav-line-in {
  from { right: 100%; }
  to   { right: 0; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes marquee-reviews {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Grain overlay ──────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 9999;
  animation: grain 8s steps(2) infinite;
}

/* ── Scroll reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for grid children */
.services-grid .reveal:nth-child(2) { transition-delay: 0.07s; }
.services-grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.services-grid .reveal:nth-child(4) { transition-delay: 0.21s; }
.services-grid .reveal:nth-child(5) { transition-delay: 0.28s; }
.services-grid .reveal:nth-child(6) { transition-delay: 0.35s; }

.testimonials-grid .reveal:nth-child(2) { transition-delay: 0.09s; }
.testimonials-grid .reveal:nth-child(3) { transition-delay: 0.18s; }
.testimonials-grid .reveal:nth-child(4) { transition-delay: 0.27s; }

.cases-list .reveal:nth-child(2) { transition-delay: 0.06s; }
.cases-list .reveal:nth-child(3) { transition-delay: 0.12s; }
.cases-list .reveal:nth-child(4) { transition-delay: 0.18s; }
.cases-list .reveal:nth-child(5) { transition-delay: 0.24s; }

.resolve-list .resolve-item:nth-child(2) { transition-delay: 0.05s; }
.resolve-list .resolve-item:nth-child(3) { transition-delay: 0.1s; }
.resolve-list .resolve-item:nth-child(4) { transition-delay: 0.15s; }
.resolve-list .resolve-item:nth-child(5) { transition-delay: 0.2s; }
.resolve-list .resolve-item:nth-child(6) { transition-delay: 0.25s; }

/* ── Hero sequential reveal ─────────────────────────── */
.hero-badge.is-visible    { transition-delay: 0.1s; }
.hero-title.is-visible    { transition-delay: 0.2s; }
.hero-lead.is-visible     { transition-delay: 0.32s; }
.hero-actions.is-visible  { transition-delay: 0.44s; }
.hero-meta.is-visible     { transition-delay: 0.52s; }
.hero-stats.is-visible    { transition-delay: 0.62s; }

/* ── Comparison stagger ─────────────────────────────── */
.comparison-grid .reveal:nth-child(2) { transition-delay: 0.1s; }

/* ── Why Us stagger ─────────────────────────────────── */
.wus-grid .reveal:nth-child(2) { transition-delay: 0.07s; }
.wus-grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.wus-grid .reveal:nth-child(4) { transition-delay: 0.21s; }

/* ── Why Us mobile alternating entrance ─────────────── */
@media (max-width: 600px) and (hover: none) {
  .wus-grid .reveal:nth-child(odd) {
    transform: translateX(-44px) scale(0.95);
    opacity: 0;
    transition:
      opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wus-grid .reveal:nth-child(even) {
    transform: translateX(44px) scale(0.95);
    opacity: 0;
    transition:
      opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wus-grid .reveal.is-visible {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  .wus-grid .reveal:nth-child(1) { transition-delay: 0s; }
  .wus-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
  .wus-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
  .wus-grid .reveal:nth-child(4) { transition-delay: 0.3s; }
}

/* ── FAQ stagger — opacity only, no transform (overflow:hidden container) ── */
.faq-list .reveal {
  transform: none;
}
.faq-list .reveal:nth-child(2) { transition-delay: 0.05s; }
.faq-list .reveal:nth-child(3) { transition-delay: 0.1s; }
.faq-list .reveal:nth-child(4) { transition-delay: 0.15s; }
.faq-list .reveal:nth-child(5) { transition-delay: 0.2s; }
.faq-list .reveal:nth-child(6) { transition-delay: 0.25s; }
.faq-list .reveal:nth-child(7) { transition-delay: 0.3s; }
.faq-list .reveal:nth-child(8) { transition-delay: 0.35s; }

/* ── Nav CTA button shimmer on load ─────────────────── */
.nav-cta {
  background-image: linear-gradient(
    105deg,
    var(--accent) 0%,
    var(--accent) 40%,
    rgba(255,255,255,0.25) 50%,
    var(--accent) 60%,
    var(--accent) 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear 1.5s infinite;
}

.nav-cta:hover {
  animation-play-state: paused;
}

/* ── Hover glow on buttons ──────────────────────────── */
.btn-primary {
  position: relative;
}

.btn-primary:hover {
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    0 1px 4px rgba(0,0,0,0.25);
}

/* ── Entrance for page ──────────────────────────────── */
#main-nav {
  animation: fade-in 0.5s ease-out forwards;
}

/* ── GSAP override — disable CSS transitions when GSAP is active ── */
.gsap-active .reveal {
  transition: none !important;
}

/* ── Magnetic buttons (desktop only; the eyes pointer is css/cursor.css) ── */
@media (pointer: fine) {

  /* Magnetic buttons */
  .btn {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                background var(--transition-base), color var(--transition-base),
                border-color var(--transition-base), box-shadow var(--transition-base) !important;
  }
}

/* ── Enhanced reveals on touch (spring easing + scale) ─ */
@media (max-width: 1024px) and (hover: none) {
  .reveal {
    transform: translateY(40px) scale(0.95);
    transition:
      opacity   0.75s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.is-visible {
    transform: translateY(0) scale(1);
  }
  /* Service cards: pop con stagger pronunciado */
  .services-grid .reveal {
    transform: translateY(36px) scale(0.9);
    transition:
      opacity   0.85s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Team members: slide desde lados alternos */
  .team-member.reveal {
    transform: translateX(-48px) scale(0.92);
    opacity: 0;
  }
  .team-member.reveal:nth-child(2) {
    transform: translateX(0) translateY(48px) scale(0.92);
  }
  .team-member.reveal:nth-child(3) {
    transform: translateX(48px) scale(0.92);
  }
  .team-member.reveal.is-visible {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
  }
  .team-member.reveal:nth-child(1) { transition-delay: 0s; }
  .team-member.reveal:nth-child(2) { transition-delay: 0.1s; }
  .team-member.reveal:nth-child(3) { transition-delay: 0.2s; }
  .split-visual {
    will-change: transform;
    transition: transform 0.08s linear;
  }
  .split-visual img {
    will-change: transform;
    transition: transform 0.08s linear;
  }
}

/* ── Page entry loader ──────────────────────────────── */
#page-loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100000;
  overflow: hidden;
  pointer-events: none;
}

.loader-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--deep-bg);
  transition: transform 0.58s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.loader-half--top    { top: 0; }
.loader-half--bottom { bottom: 0; }

.loader-logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 0.22s ease;
}

.loader-logo-mark {
  height: 78px;
  width: auto;
}
.loader-logo-word {
  height: 65px;
  width: auto;
  margin-top: -10px;
  filter: brightness(0) invert(1);
}

#page-loader.is-open .loader-half--top    { transform: translateY(-101%); }
#page-loader.is-open .loader-half--bottom { transform: translateY(101%);  }
#page-loader.is-open .loader-logo-wrap    { opacity: 0; }

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  body::after {
    display: none;
  }
}

/* ═══ Fluid layer — press feedback, springs, glass ═══ */

/* Company selector: instant press, spring release, selection pops from the pressed size */
.op-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform var(--spring-dur) var(--spring);
}
.op-btn:active {
  transform: scale(0.95);
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
}
.op-btn.op-btn--active {
  animation: op-pop var(--spring-dur) var(--spring-bouncy);
}
@keyframes op-pop {
  from { transform: scale(0.95); }
  to   { transform: translateY(-2px); }
}

/* Touch buttons settle back with a spring instead of a flat ease */
@media (hover: none) {
  .btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-base),
      transform var(--spring-dur) var(--spring);
  }
}

/* Nav as a translucent layer; a soft scroll-edge replaces the hard divider */
#main-nav.scrolled {
  background: rgba(5, 5, 7, 0.62);
  border-color: transparent;
}
#main-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.5), rgba(5, 5, 7, 0));
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}
#main-nav.scrolled::after { opacity: 1; }

/* Mobile menu: items arrive in the direction the panel travels */
@media (max-width: 900px) {
  .nav-menu .nav-links > li,
  .nav-menu .nav-actions {
    opacity: 0;
    transform: translateY(-14px);
    transition:
      opacity 0.2s ease,
      transform var(--spring-dur) var(--spring);
  }
  .nav-menu.open .nav-links > li,
  .nav-menu.open .nav-actions {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.35s ease,
      transform var(--spring-dur) var(--spring);
  }
  .nav-menu.open .nav-links > li:nth-child(1) { transition-delay: 0.06s; }
  .nav-menu.open .nav-links > li:nth-child(2) { transition-delay: 0.10s; }
  .nav-menu.open .nav-links > li:nth-child(3) { transition-delay: 0.14s; }
  .nav-menu.open .nav-links > li:nth-child(4) { transition-delay: 0.18s; }
  .nav-menu.open .nav-links > li:nth-child(5) { transition-delay: 0.22s; }
  .nav-menu.open .nav-links > li:nth-child(6) { transition-delay: 0.26s; }
  .nav-menu.open .nav-actions                 { transition-delay: 0.32s; }
}

/* Headings: tight leading and tracking at display size, relaxed when small */
.section-title {
  line-height: 1.1;
  padding-bottom: 0.14em;
}
@media (max-width: 480px) {
  .section-title {
    line-height: 1.14;
    letter-spacing: -0.022em;
  }
}

/* Accessibility: frostier / higher-contrast surfaces on request */
@media (prefers-reduced-transparency: reduce) {
  #main-nav.scrolled { background: #050507; }
  #main-nav::before,
  .nav-menu,
  .cookie-banner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-menu, .cookie-banner { background: #0c0e14; }
}
@media (prefers-contrast: more) {
  #main-nav.scrolled { background: #050507; border-color: var(--border-light); }
}

/* Touch: brand colour on press and on the selected company (mirrors desktop hover) */
@media (hover: none), (pointer: coarse) {
  .op-btn[data-op="telefonica"]:active,
  .op-btn[data-op="telefonica"].op-btn--active { border-color: #009bd5; box-shadow: 0 0 18px rgba(0,155,213,0.3); }
  .op-btn[data-op="orange"]:active,
  .op-btn[data-op="orange"].op-btn--active { border-color: #ff7900; box-shadow: 0 0 18px rgba(255,121,0,0.3); }
  .op-btn[data-op="yoigo"]:active,
  .op-btn[data-op="yoigo"].op-btn--active { border-color: #7b2d8b; box-shadow: 0 0 18px rgba(123,45,139,0.3); }
  .op-btn[data-op="vodafone"]:active,
  .op-btn[data-op="vodafone"].op-btn--active { border-color: #e60000; box-shadow: 0 0 18px rgba(230,0,0,0.28); }
  .op-btn[data-op="o2"]:active,
  .op-btn[data-op="o2"].op-btn--active { border-color: #00b2ff; box-shadow: 0 0 18px rgba(0,178,255,0.28); }
  .op-btn[data-op="jazztel"]:active,
  .op-btn[data-op="jazztel"].op-btn--active { border-color: #c8a200; box-shadow: 0 0 18px rgba(200,162,0,0.3); }
  .op-btn[data-op="masmovel"]:active,
  .op-btn[data-op="masmovel"].op-btn--active { border-color: #f9d800; box-shadow: 0 0 18px rgba(249,216,0,0.3); }
  .op-btn[data-op="digi"]:active,
  .op-btn[data-op="digi"].op-btn--active { border-color: #0057a8; box-shadow: 0 0 18px rgba(0,87,168,0.3); }
  .op-btn[data-op="lowi"]:active,
  .op-btn[data-op="lowi"].op-btn--active { border-color: #c8102e; box-shadow: 0 0 18px rgba(200,16,46,0.28); }
  .op-btn[data-op="simyo"]:active,
  .op-btn[data-op="simyo"].op-btn--active { border-color: #ff6b00; box-shadow: 0 0 18px rgba(255,107,0,0.3); }
  .op-btn[data-op="pepephone"]:active,
  .op-btn[data-op="pepephone"].op-btn--active { border-color: #e43c13; box-shadow: 0 0 18px rgba(228,60,19,0.28); }
  .op-btn[data-op="avatel"]:active,
  .op-btn[data-op="avatel"].op-btn--active { border-color: #6b2d8b; box-shadow: 0 0 18px rgba(107,45,139,0.32); }
  .op-btn[data-op="naturgy"]:active,
  .op-btn[data-op="naturgy"].op-btn--active { border-color: #f39200; box-shadow: 0 0 18px rgba(243,146,0,0.3); }
  .op-btn[data-op="endesa"]:active,
  .op-btn[data-op="endesa"].op-btn--active { border-color: #0096d6; box-shadow: 0 0 18px rgba(0,150,214,0.32); }
  .op-btn[data-op="otra"]:active,
  .op-btn[data-op="otra"].op-btn--active { border-color: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
  .op-btn.op-btn--active:not([data-op="otra"]) { background: rgba(255,255,255,0.04); }
}

/* Phones and tablets: js/mobile-fx.js drives these entrances from the scroll position.
   Switch off the older class-based entrance and any transform/opacity transition, so the
   motion follows the finger with no lag. */
@media (hover: none) {
  html body .fx-scroll.reveal:nth-child(n) { opacity: 1; transform: none; }
  .fx-scroll { transition-property: box-shadow, border-color, background-color, color; will-change: transform, opacity; }
  .stores-grid .fx-scroll img { transition: none; }
}