/* =========================================================
   Opening v2 — estilo póster "Paleta de cores · Azul":
   rejilla de plano + línea de luz → "JF" gigante condensado
   sube y "Webs Agency" se escribe en script encima → al
   frente, una ventana arma un sitio pieza por pieza mientras
   un contador llega al 100% → destello y la pantalla se parte
   en dos como cortina. Solo transform/opacity/clip-path.
   Solo se muestra si <html> tiene la clase "intro-on".
   ========================================================= */
#intro { display: none; }
.intro-on #intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  cursor: pointer; contain: strict;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
.intro-on body { overflow: hidden; }

/* Fondo: dos mitades que al final se abren como cortina */
.in-half { position: absolute; left: 0; right: 0; height: 50.5%; z-index: 0; will-change: transform;
  background: radial-gradient(80% 90% at 50% 100%, #6d28d9, #050506 55%, #020203); }
.in-top { top: 0; }
.in-bot { bottom: 0; transform: scaleY(-1); }
#intro.out .in-top { animation: halfUp .7s cubic-bezier(.7, 0, .2, 1) forwards; }
#intro.out .in-bot { animation: halfDown .7s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes halfUp { to { transform: translateY(-101%); } }
@keyframes halfDown { to { transform: scaleY(-1) translateY(-101%); } }

/* Rejilla de plano */
.in-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  animation: fade .6s .05s forwards; }
@keyframes fade { to { opacity: 1; } }

/* Línea de luz que barre de arriba a abajo */
.in-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, #e1251b 30%, #ffffff 50%, #e1251b 70%, transparent);
  box-shadow: 0 0 18px #e1251b, 0 0 50px #8b3dff; opacity: 0;
  animation: scan 1s .1s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }

.in-stage { position: relative; z-index: 3; display: grid; place-items: center; width: 100%; height: 100%; }
#intro.out .in-stage { animation: stageOut .55s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes stageOut { to { transform: scale(1.12); opacity: 0; filter: blur(6px); } }

/* "JF" gigante + script encima, como "Paleta de / CORES" */
.in-title { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.in-big { display: flex; overflow: hidden; line-height: .82; padding: .04em .08em .16em; }
.in-big b {
  display: block; font: 800 min(50vh, 46vw)/.82 "Jost", "Futura", sans-serif; letter-spacing: -.05em;
  background: linear-gradient(180deg, #e1251b 0%, #d9dce1 55%, #b9bdc4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transform: translateY(105%); animation: rise .9s var(--ease) forwards;
}
.in-big b + b { animation-delay: .12s; }
.in-big b:first-child { animation-delay: .25s; }
@keyframes rise { to { transform: translateY(0); } }
.in-script {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap;
  font: italic 400 min(13vh, 15vw)/1 "Instrument Serif", Georgia, serif; color: #ffffff;
  text-shadow: 0 6px 30px rgba(2, 2, 3, .7);
  clip-path: inset(-20% 100% -30% 0); animation: write 1s .65s cubic-bezier(.5, 0, .3, 1) forwards;
}
@keyframes write { to { clip-path: inset(-20% -5% -30% 0); } }

/* Ventana de navegador al frente, armando un sitio */
.in-frame {
  position: absolute; left: 50%; top: 60%; width: min(560px, 86vw); z-index: 2;
  border-radius: 16px; overflow: hidden; background: #020203;
  border: 2px solid transparent;
  background:
    linear-gradient(#020203, #020203) padding-box,
    radial-gradient(circle 120px at 85% -10%, #ffffff, #6d28d9) border-box;
  box-shadow: 0 40px 80px -30px rgba(2, 2, 3, .9), 0 0 60px rgba(217, 220, 225, .35);
  transform: translate(-50%, 60px) scale(.88) rotateX(18deg); opacity: 0;
  animation: frameIn .8s .85s var(--ease) forwards;
}
@keyframes frameIn { to { transform: translate(-50%, 0) scale(1) rotateX(0); opacity: 1; } }
.in-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1f2026; }
.in-bar i { width: 9px; height: 9px; border-radius: 50%; background: #e1251b; }
.in-bar i + i { background: #d9dce1; } .in-bar i + i + i { background: #f5f5f7; }
.in-url { flex: 1; margin-left: 8px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12);
  font: 600 12px "JetBrains Mono", monospace; color: #f5f5f7; min-height: 1.6em; }
.in-url::after { content: "|"; margin-left: 1px; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.in-body { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "nav nav" "hero chart" "cards cards"; gap: 12px; padding: 14px; }
#intro em { font-style: normal; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; -webkit-text-fill-color: currentColor; filter: none; text-shadow: none; }
.in-body em, .in-cta, .in-chart { opacity: 0; transform: translateY(12px); animation: pop .45s var(--ease) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } }
.in-nav { grid-area: nav; display: flex; gap: 8px; }
.in-nav em { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .28); animation-delay: 1.25s; }
.in-nav em:first-child { width: 22%; background: #d9dce1; }
.in-nav em:not(:first-child) { width: 11%; } .in-nav em:nth-child(2) { margin-left: auto; }
.in-hero { grid-area: hero; display: grid; gap: 8px; align-content: start; }
.in-hero em { display: block; height: 14px; border-radius: 6px; background: #ffffff; }
.in-hero .w1 { width: 92%; animation-delay: 1.35s; } .in-hero .w2 { width: 70%; animation-delay: 1.45s; background: #e1251b; }
.in-hero .w3 { width: 84%; height: 7px; margin-top: 4px; background: rgba(255, 255, 255, .3); animation-delay: 1.55s; }
.in-cta { justify-self: start; margin-top: 6px; padding: 7px 14px; border-radius: 10px; font: 600 12px var(--sans, system-ui); color: #fff;
  background: linear-gradient(135deg, #e1251b, #8b3dff 50%, #1f2026); box-shadow: -6px 6px 18px #8b3dff55; animation-delay: 1.65s; }
.in-chart { grid-area: chart; display: flex; align-items: flex-end; gap: 5px; height: 92px; padding: 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); animation-delay: 1.4s; }
.in-chart b { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; transform-origin: bottom; transform: scaleY(0);
  background: linear-gradient(180deg, #ffffff, #d9dce1 40%, rgba(139, 61, 255, .35)); animation: grow .6s var(--ease) forwards; }
.in-chart b:nth-child(1) { animation-delay: 1.5s; } .in-chart b:nth-child(2) { animation-delay: 1.57s; } .in-chart b:nth-child(3) { animation-delay: 1.64s; }
.in-chart b:nth-child(4) { animation-delay: 1.71s; } .in-chart b:nth-child(5) { animation-delay: 1.78s; } .in-chart b:nth-child(6) { animation-delay: 1.85s; box-shadow: 0 0 14px #e1251b; }
@keyframes grow { to { transform: scaleY(1); } }
.in-cards { grid-area: cards; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.in-cards em { display: block; height: 46px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.in-cards em:nth-child(1) { animation-delay: 1.75s; } .in-cards em:nth-child(2) { animation-delay: 1.85s; } .in-cards em:nth-child(3) { animation-delay: 1.95s; }

/* Contador */
.in-meter { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 600 12px "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 245, 247, .75);
  opacity: 0; animation: fade .4s .9s forwards; }
.in-meter b { font: 400 22px "Jost", "Futura", sans-serif; letter-spacing: 0; color: #ffffff; font-variant-numeric: tabular-nums; }

/* Destello diagonal antes de abrir */
.in-flash { position: absolute; inset: -20% -60%; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(225, 37, 27, .35) 47%, rgba(255, 255, 255, .9) 50%, rgba(225, 37, 27, .35) 53%, transparent 60%);
  transform: translateX(-60%); }
#intro.flash .in-flash { animation: sweep .6s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes sweep { 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(60%); opacity: 0; } }

.intro-skip {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5;
  font: 11px "JetBrains Mono", monospace; color: rgba(245, 245, 247, .45); letter-spacing: .1em;
}
#intro.out .intro-skip, #intro.out .in-grid { opacity: 0; transition: opacity .2s; }

@media (max-width: 640px) {
  .in-title { top: 35%; }
  .in-big b { font-size: min(40vh, 58vw); }
  .in-frame { top: 58%; }
  .in-body { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .in-chart { height: 74px; }
  .in-cards em { height: 34px; }
  .in-meter { top: 9%; font-size: 10px; }
}

/* Mientras corre el opening, lo de atrás se queda quieto (no gasta GPU/CPU) */
.intro-on .hero-wave, .intro-on .band-track, .intro-on .svc-big, .intro-on .orbit-floor .ring,
.intro-on .svc-card, .intro-on .tile, .intro-on em { animation-play-state: paused !important; }
.intro-on #intro em { animation-play-state: running !important; }
.intro-on .svc-orb { visibility: hidden; }