/* ==========================================================================
   Sanniasi Studio · capa de movimiento
   - Solo anima transform y opacity (rápido, sin saltos de diseño).
   - Todo se desactiva con «reducir movimiento» del sistema (accesibilidad).
   - El estado final de cada elemento es el normal: si el JS o las animaciones fallan, la web se ve igual.
   ========================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Transiciones suaves entre páginas (Chrome / Edge) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: cabecera; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none;
  background: var(--grad); transform-origin: left; transform: scaleX(var(--p, 0));
}

/* ---------- Hero: entrada escalonada ---------- */
@keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes palabra { from { opacity: 0; transform: translateY(.55em) rotate(2.5deg); } to { opacity: 1; transform: none; } }
@keyframes marco { from { transform: rotate(-1.2deg) translateY(30px) scale(.965); } to { transform: rotate(-1.2deg); } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes brillo { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.hero .eyebrow { animation: sube .8s var(--ease) .02s both; }
.hero h1 .w { display: inline-block; animation: palabra .9s var(--ease) both; }
.hero h1 .w1 { animation-delay: .10s; } .hero h1 .w2 { animation-delay: .16s; } .hero h1 .w3 { animation-delay: .22s; }
.hero h1 .w4 { animation-delay: .28s; } .hero h1 .w5 { animation-delay: .34s; } .hero h1 .w6 { animation-delay: .40s; }
.hero h1 .w7 { animation-delay: .46s; } .hero h1 .w8 { animation-delay: .56s; }
.hero h1 .grad-text.w { background-size: 220% 100%; animation: palabra .9s var(--ease) .56s both, brillo 9s ease-in-out 1.5s infinite alternate; }
.hero .lead { animation: sube .8s var(--ease) .62s both; }
.hero .btn-row { animation: sube .8s var(--ease) .76s both; }
.hero-badges li { animation: sube .7s var(--ease) both; }
.hero-badges li:nth-child(1) { animation-delay: .92s; } .hero-badges li:nth-child(2) { animation-delay: 1s; }
.hero-badges li:nth-child(3) { animation-delay: 1.08s; } .hero-badges li:nth-child(4) { animation-delay: 1.16s; }
.hero-media .frame { animation: marco 1.1s var(--ease) .1s both; }   /* la imagen es visible desde el primer instante (no retrasa la carga) */
.float-card { animation: aparece .8s var(--ease) .95s both, flota 7s ease-in-out 1.9s infinite alternate; }

/* ---------- Hero: aurora de fondo ---------- */
.hero > .container { position: relative; z-index: 1; }
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { width: 52vmax; height: 52vmax; left: -16vmax; top: -24vmax; background: radial-gradient(circle, rgba(166, 60, 242, .30), transparent 64%); animation: deriva1 24s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 46vmax; height: 46vmax; right: -14vmax; top: -10vmax; background: radial-gradient(circle, rgba(47, 107, 255, .28), transparent 64%); animation: deriva2 28s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 30vmax; height: 30vmax; left: 38%; bottom: -16vmax; background: radial-gradient(circle, rgba(255, 90, 170, .20), transparent 64%); animation: deriva3 32s ease-in-out infinite alternate; }
:root[data-theme="dark"] .aurora i { opacity: .85; }
@keyframes deriva1 { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); } }
@keyframes deriva2 { to { transform: translate3d(-8vmax, 9vmax, 0) scale(.92); } }
@keyframes deriva3 { to { transform: translate3d(-12vmax, -6vmax, 0) scale(1.18); } }
.hero.fuera .aurora i, .hero.fuera .float-card, .marquee.fuera .marquee__pista { animation-play-state: paused; }

/* ---------- Hero: inclinación 3D con el ratón y paralaje al hacer scroll ---------- */
.hero-media { transform-style: preserve-3d; translate: 0 var(--py, 0px); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.hero-media .float-card { translate: 0 0 46px; }

/* ---------- Franja de servicios en movimiento continuo ---------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); padding: 17px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__pista { display: flex; width: max-content; animation: marquesina 46s linear infinite; }
.marquee:hover .marquee__pista { animation-play-state: paused; }
.marquee__pista span {
  display: inline-flex; align-items: center; padding: 0 30px; white-space: nowrap;
  font: 700 1.08rem/1 'Outfit', 'Inter', sans-serif; letter-spacing: -.01em; color: var(--muted);
}
.marquee__pista span::after { content: '✦'; margin-left: 60px; font-size: .8rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes marquesina { to { transform: translateX(-50%); } }

/* ---------- Aparición al hacer scroll: más fluida + línea del «eyebrow» que se dibuja ---------- */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
.reveal.is-visible .eyebrow::before { transform: none; }
.work.reveal img { transform: scale(1.12); transition: transform 1.1s var(--ease); }
.work.reveal.is-visible img { transform: scale(1); }
.work.reveal.is-visible:hover img { transform: scale(1.06); }

/* ---------- Solo con ratón (no en pantallas táctiles) ---------- */
@media (hover: hover) and (pointer: fine) {
  .card, .plan, .work { position: relative; }
  .card::after, .plan::after, .work::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 76, 255, .13), transparent 46%);
  }
  .card:hover::after, .plan:hover::after, .work:hover::after { opacity: 1; }
  :root[data-theme="dark"] .card::after, :root[data-theme="dark"] .plan::after, :root[data-theme="dark"] .work::after {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 130, 255, .20), transparent 46%);
  }
  .hero .btn { translate: var(--bx, 0px) var(--by, 0px); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, translate .25s var(--ease); }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .progreso, .aurora { display: none; }
  .hero-media { transform: none; translate: none; }
  .hero-media .float-card { translate: none; }
  .reveal .eyebrow::before { transform: none; }
  .work.reveal img { transform: none; }
}

/* ==========================================================================
   Capa 2 · más movimiento (imágenes con cortina, paralaje, inclinación 3D, etiquetas flotantes, titulares por palabras)
   Todo es opcional: sin JS o con «reducir movimiento» la página se ve igual, sin estados ocultos.
   ========================================================================== */

/* ---------- Banners con imagen: se ve la foto y se mueve despacio (efecto cine) ---------- */
.page-banner--visual::before {
  background: linear-gradient(100deg, rgba(10, 10, 28, .94) 0%, rgba(10, 10, 28, .72) 40%, rgba(26, 22, 70, .30) 74%, rgba(47, 107, 255, .10) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .page-banner--visual .page-banner__img { transform-origin: 72% 50%; animation: cine 28s ease-in-out infinite alternate; will-change: transform; }
  .page-banner--visual.fuera .page-banner__img { animation-play-state: paused; }
}
@keyframes cine { from { transform: scale(1.02); } to { transform: scale(1.15) translate3d(-1.6%, -1.2%, 0); } }

/* ---------- Imágenes destacadas: cortina al aparecer ---------- */
.visual--wow { position: relative; }
.motion .visual--wow.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), clip-path 1.25s var(--ease); }
.motion .visual--wow.reveal:not(.is-visible) { clip-path: inset(14% 10% 14% 10% round 40px); }
.motion .visual--wow.reveal.is-visible { clip-path: inset(-90px); }
.visual--wow img { will-change: transform; }

/* ---------- Paralaje de la imagen al hacer scroll (navegadores con animaciones ligadas al scroll) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .visual--wow img { animation: paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes paralaje { from { transform: translateY(-5.5%) scale(1.15); } to { transform: translateY(5.5%) scale(1.15); } }

/* ---------- Solo con ratón: inclinación 3D + brillo que sigue al cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .motion .visual--wow.is-visible {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .4s var(--ease), clip-path 1.25s var(--ease), opacity .9s var(--ease), box-shadow .4s ease;
  }
  .motion .visual--wow.is-visible:hover { box-shadow: 0 50px 100px -40px rgba(100, 70, 230, .75), 0 0 0 1px rgba(150, 120, 255, .45); }
  .visual--wow::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .24), transparent 46%);
  }
  .visual--wow:hover::after { opacity: 1; }
  .benefit { position: relative; }
  .benefit::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 130, 255, .22), transparent 48%);
  }
  .benefit:hover::after { opacity: 1; }
}

/* ---------- Titulares que aparecen palabra a palabra ---------- */
.motion .pal { display: inline-block; opacity: 0; transform: translateY(.7em) rotate(2.2deg); transition: opacity .7s var(--ease), transform .85s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 100ms); }
.motion .is-visible .pal { opacity: 1; transform: none; }

/* ---------- Destello en los botones ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
}
.btn--ghost::before { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::before { animation: destello .85s ease; }
}
@keyframes destello { to { transform: translateX(130%); } }

/* ---------- Presentación «todo en un equipo» (portada) ---------- */
.showcase { overflow: hidden; }
.showcase__stage { position: relative; max-width: 1040px; margin: 14px auto 0; }
.showcase__img { box-shadow: 0 44px 90px -44px rgba(70, 50, 190, .7), 0 0 0 1px var(--line); border-radius: 28px; }
.showcase__img img { width: 100%; height: auto; aspect-ratio: 1400 / 764; object-fit: cover; }
.showcase__chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px; border-radius: 999px; white-space: nowrap;
  font: 600 .95rem/1 'Inter', system-ui, sans-serif; color: var(--ink); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 20px 44px -20px rgba(30, 20, 90, .6);
  transition: color .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .showcase__chip { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(14px) saturate(1.5); }
}
.showcase__chip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; font-size: .72rem; letter-spacing: .02em; }
.showcase__chip:hover { color: var(--brand); text-decoration: none; box-shadow: 0 26px 50px -20px rgba(100, 70, 230, .75); }
.showcase__chip--1 { left: -2.5%; top: 11%; }
.showcase__chip--2 { right: -2.5%; top: 25%; }
.showcase__chip--3 { left: 3%; bottom: 11%; }
.showcase__chip--4 { right: 2%; bottom: 7%; }
@media (prefers-reduced-motion: no-preference) {
  .showcase__chip { animation: flota 5.5s ease-in-out infinite alternate; }
  .showcase__chip--2 { animation-duration: 6.8s; animation-delay: -1.5s; }
  .showcase__chip--3 { animation-duration: 6.2s; animation-delay: -3s; }
  .showcase__chip--4 { animation-duration: 7.4s; animation-delay: -4.2s; }
  .showcase.fuera .showcase__chip { animation-play-state: paused; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .showcase__chip--1 { animation: flota 5.5s ease-in-out infinite alternate, deriva-a linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--2 { animation: flota 6.8s ease-in-out -1.5s infinite alternate, deriva-b linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--3 { animation: flota 6.2s ease-in-out -3s infinite alternate, deriva-b linear both; animation-timeline: auto, view(); }
    .motion .showcase__chip--4 { animation: flota 7.4s ease-in-out -4.2s infinite alternate, deriva-a linear both; animation-timeline: auto, view(); }
  }
}
@keyframes deriva-a { from { translate: 0 70px; } to { translate: 0 -70px; } }
@keyframes deriva-b { from { translate: 0 -50px; } to { translate: 0 50px; } }
@media (max-width: 760px) {
  .showcase__stage { display: flex; flex-wrap: wrap; gap: 10px; }
  .showcase__img { width: 100%; }
  .showcase__chip { position: static; animation: none !important; translate: none; }
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .pal { opacity: 1; transform: none; transition: none; }
  .visual--wow { clip-path: none; }
  .btn::before { display: none; }
}

/* ---------- Oferta: halo giratorio, latido y dígitos que se animan ---------- */
@media (prefers-reduced-motion: no-preference) {
  .oferta::before {
    content: ''; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0 52%, rgba(255, 120, 220, .30) 68%, rgba(110, 150, 255, .42) 84%, transparent 100%);
    animation: giro 16s linear infinite;
  }
  .oferta.fuera::before { animation-play-state: paused; }
  .oferta__etiqueta i, .oferta-chip i { animation: latido 1.8s ease-out infinite; }
  .oferta__cuenta b.tic { animation: tic .5s var(--ease); }
  .oferta__precio strong { animation: brillo 6s ease-in-out infinite alternate; }
  .oferta-chip { background-size: 200% 100%; animation: brillo 5s ease-in-out infinite alternate; }
}
@keyframes giro { to { transform: rotate(1turn); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 77, .8); } 70%, 100% { box-shadow: 0 0 0 11px rgba(255, 210, 77, 0); } }
@keyframes tic { from { transform: translateY(-45%); opacity: 0; } to { transform: none; opacity: 1; } }

/* El anuncio de la ficha se enseña entero: sin paralaje (recortaría el teléfono y la web de abajo) */
.project__ad .visual--wow img { animation: none !important; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .oferta-barra { animation: brillo 8s ease-in-out infinite alternate; }
  .oferta-barra__enlace i { animation: latido 1.8s ease-out infinite; }
}

/* ==========================================================================
   Capa 3 · efectos «wow» en las imágenes: enfoque al aparecer, borde aurora que gira, barrido de luz,
   profundidad con el cursor y lente flotante. Solo con ratón y sin «reducir movimiento»; sin JS la imagen se ve normal.
   ========================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes aurora-giro { to { --ang: 360deg; } }
@keyframes barrido { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }

/* Enfoque: la imagen llega desenfocada y muy saturada y se «enfoca» al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .motion .visual--wow img { transition: filter 1.5s var(--ease); }
  .motion .visual--wow.reveal:not(.is-visible) img { filter: blur(14px) saturate(1.7) brightness(1.15); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* las fichas y fotos del portafolio también se inclinan (sin cortina ni paralaje, para no recortar la imagen) */
  .visual--gloss { position: relative; }
  .motion .visual--gloss.is-visible {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .4s var(--ease), opacity .9s var(--ease), box-shadow .4s ease;
  }
  .motion .visual--gloss.is-visible:hover { box-shadow: 0 46px 90px -40px rgba(100, 70, 230, .7), 0 0 0 1px rgba(150, 120, 255, .4); }

  /* profundidad: la imagen se desplaza un poco en sentido contrario al cursor, dentro de su marco */
  .motion .visual--wow img { scale: 1.04; translate: var(--ix, 0px) var(--iy, 0px); transition: translate .5s var(--ease), filter 1.5s var(--ease); }
  .motion .visual--gloss img { scale: 1.05; translate: var(--ix, 0px) var(--iy, 0px); transition: translate .5s var(--ease); }

  /* borde aurora: un aro de colores que gira alrededor de la imagen */
  .visual--wow::before, .visual--gloss::before {
    content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 3px; pointer-events: none; opacity: 0; transition: opacity .45s ease;
    background: conic-gradient(from var(--ang), #ff5ac8, #7a5cff, #2fd0ff, #ff9d5c, #ff5ac8);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .visual--wow:hover::before, .visual--gloss:hover::before { opacity: 1; animation: aurora-giro 5s linear infinite; }

  /* brillo que sigue al cursor + barrido de luz al entrar */
  .visual--wow::after, .visual--gloss::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .42) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat,
                radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 46%);
  }
  .visual--wow:hover::after, .visual--gloss:hover::after { opacity: 1; animation: barrido 1.1s ease .05s 1; }
  .project__gallery a, .work__media { position: relative; }
  .project__gallery a::after, .work__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .38) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat;
  }
  .project__gallery a:hover::after, .work:hover .work__media::after { animation: barrido 1s ease; }
  .project__gallery a:hover img { transform: scale(1.07); }

  /* lente flotante: círculo que sigue al puntero sobre las imágenes ampliables y las fichas del portafolio */
  .lente {
    position: fixed; left: 0; top: 0; z-index: 9999; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; pointer-events: none;
    display: grid; place-items: center; color: #fff; opacity: 0; scale: .3; will-change: transform;
    background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .38), transparent 56%), var(--grad);
    box-shadow: 0 20px 44px -12px rgba(90, 60, 220, .75), inset 0 0 0 1px rgba(255, 255, 255, .4);
    transition: opacity .25s ease, scale .4s var(--ease);
  }
  .lente.is-on { opacity: 1; scale: 1; }
  .lente svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .lente[data-tipo="mas"] .lente__flecha, .lente[data-tipo="flecha"] .lente__mas { display: none; }
  .lente-on .project__gallery a, .lente-on .work { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .lente { display: none; } }


/* ---------- Banners de cabecera: profundidad 3D con el cursor, aurora y desplazamiento al hacer scroll ---------- */
.page-banner--visual > .container { position: relative; z-index: 1; }
.page-banner--visual h1 { max-width: 24ch; }
.page-banner--visual .aurora { mix-blend-mode: screen; opacity: .55; }
.page-banner--visual .aurora i:nth-child(3) { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .page-banner--visual { perspective: 1400px; }
  .motion .page-banner--visual .page-banner__img { scale: 1.07; translate: var(--ix, 0%) var(--iy, 0%); transition: translate .7s var(--ease); }
  .motion .page-banner--visual .page-banner__content {
    transform-style: preserve-3d; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg)); transition: transform .55s var(--ease);
  }
  .motion .page-banner--visual .page-banner__content h1 { transform: translateZ(46px); }
  .motion .page-banner--visual .page-banner__content .lead { transform: translateZ(24px); }
  .motion .page-banner--visual .page-banner__content .btn-row { transform: translateZ(34px); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .page-banner--visual .page-banner__content { animation: banner-sube linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
  }
}
@keyframes banner-sube { to { translate: 0 -34px; opacity: .25; } }