/* =======================================================
   INVITACIÓN AL SIGUIENTE PROYECTO (COMÚN A TODOS LOS CASOS)
   ======================================================= */
/* Requiere los tokens de works-base.css (--sans, --mono, --margen, --hover-lento). La lógica está en caso-siguiente.js */
/* Una pista de scroll de dos pantallas con el panel fijo: al entrar, la escena del siguiente proyecto se
   expande desde una lámina (--e); al seguir bajando, la barra se llena (--p) y al completarse se abre.
   El panel habla con la identidad del próximo proyecto; la tipografía del nombre es la de Agustín Design */
.sig { position: relative; background: var(--c-fondo); }
.sig-pista { height: 210svh; }
.sig-panel { --e: 0; --p: 0; position: sticky; top: 0; height: 100svh; height: 100lvh; display: block; overflow: hidden; color: #FFFFFF; font-family: var(--sans); }
.sig-escena { position: absolute; inset: 0; overflow: hidden; background: var(--sig-tinte); clip-path: inset(calc((1 - var(--e)) * 16%) calc((1 - var(--e)) * 10%) calc((1 - var(--e)) * 16%) round calc(28px * (1 - var(--p) * 0.6))); }
.sig-escena > * { transform: scale(calc(1.08 - var(--p) * 0.08)); }
.sig-txt { position: absolute; left: var(--margen); right: var(--margen); bottom: clamp(88px, 12svh, 140px); z-index: 3; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
.sig-fila { display: flex; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.28); font: 12px var(--mono); opacity: calc(0.4 + var(--e) * 0.6); }
.sig-nombre { font-family: var(--sig-f, var(--sans)); font-size: clamp(96px, 19vw, 340px); font-weight: 500; letter-spacing: -0.075em; line-height: 0.78; margin-left: -0.05em; transform: translateY(calc((1 - var(--e)) * 30%)); transition: transform 700ms var(--hover-lento), opacity 500ms; }
.sig-bajada { max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); opacity: 0.8; }
/* Avance: un anillo que se llena; al completarse la flecha gira y el caso se abre */
.sig-progreso { position: absolute; right: var(--margen); top: 92px; z-index: 3; display: flex; align-items: center; gap: 14px; font: 12px var(--mono); }
.sig-anillo { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sig-anillo svg { position: absolute; inset: 0; rotate: -90deg; }
.sig-anillo circle { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 2; }
.sig-anillo .lleno { stroke: #FFFFFF; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.sig-flecha { font-size: 18px; transition: transform 500ms var(--hover-lento); }
.sig-panel.abriendo .sig-flecha { transform: rotate(-90deg); }
.sig-panel.abriendo .sig-nombre { transform: translateY(-12%); opacity: 0; }
.sig-panel.abriendo .sig-escena { clip-path: inset(0); }
.sig-panel.abriendo .sig-splash { opacity: 1; }
@media (hover: hover) { .sig-panel:hover .sig-anillo { background: rgba(0, 0, 0, 0.36); } }

/* --- 1. ESCENA MEND --- */
.sig-e-mend .sig-campo { position: absolute; inset: 0; background:
    radial-gradient(52% 72% at 90% 0%, rgba(201, 233, 232, 0.95) 0%, rgba(190, 220, 219, 0.6) 38%, rgba(190, 220, 219, 0) 76%),
    radial-gradient(40% 60% at 60% 0%, rgba(168, 186, 182, 0.6) 0%, rgba(168, 186, 182, 0) 72%),
    radial-gradient(60% 65% at 0% 100%, rgba(30, 77, 87, 0.95) 0%, rgba(30, 77, 87, 0) 72%),
    linear-gradient(90deg, #2A5960 0%, #3A6970 22%, #5E8C91 46%, #84AEB2 70%, #8EB8BB 100%); }
.sig-e-mend .sig-campo::after { content: ''; position: absolute; inset: 0; opacity: 0.7; mix-blend-mode: soft-light; background-size: 200px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
/* El logo horizontal ocupa el lugar del nombre: se dibuja el trazo, se rellena y el isotipo encaja */
.sig-mend-logo { display: block; width: clamp(300px, 46vw, 760px); overflow: visible; fill: #FFFFFF; }
.sig:has(.sig-e-mend) .sig-nombre { margin-left: 0; line-height: 0; }
.sig-mend-logo .ej-pair { opacity: 0; }
.sig-mend-logo .trazo { stroke: #FFFFFF; stroke-width: 0.7; stroke-dasharray: 1; stroke-opacity: 0; }
/* La animación la lleva el scroll: todas en pausa, y --l (0 a 1, lo publica el JS) fija su momento en una línea de
   4,3 s (trazo de 0,2 a 2,2 s, relleno de 1,5 a 2,2 s, encaje de 1,9 a 4,3 s). Al subir, retrocede */
.sig-mend-logo .trazo { animation: sigTrazo 2s cubic-bezier(0.6, 0.1, 0.3, 1) both, sigRelleno 0.7s ease both; animation-delay: calc(0.2s - var(--l, 0) * 4.35s), calc(1.5s - var(--l, 0) * 4.35s); animation-play-state: paused; }
.sig-mend-logo .ej-full { transform-box: fill-box; transform-origin: 50% 50%; animation: sigEjFull 2.4s linear both; animation-delay: calc(1.9s - var(--l, 0) * 4.35s); animation-play-state: paused; }
.sig-mend-logo .ej-pair { animation: sigEjPair 2.4s linear both; animation-delay: calc(1.9s - var(--l, 0) * 4.35s); animation-play-state: paused; }
.sig-mend-logo .ej-a { animation: sigGlideA 2.4s linear both, sigCloseA 2.4s linear both; animation-delay: calc(1.9s - var(--l, 0) * 4.35s); animation-play-state: paused; }
.sig-mend-logo .ej-b { animation: sigGlideB 2.4s linear both, sigCloseB 2.4s linear both; animation-delay: calc(1.9s - var(--l, 0) * 4.35s); animation-play-state: paused; }
@keyframes sigTrazo { 0% { stroke-dashoffset: 1; stroke-opacity: 1; } 88% { stroke-dashoffset: 0; stroke-opacity: 1; } 100% { stroke-dashoffset: 0; stroke-opacity: 0; } }
@keyframes sigRelleno { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes sigGlideA { 0% { translate: 13.57px -3.46px; animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1); } 80%, 100% { translate: 0 0; } }
@keyframes sigGlideB { 0% { translate: -13.57px 3.46px; animation-timing-function: cubic-bezier(0.2, 0.65, 0.3, 1); } 80%, 100% { translate: 0 0; } }
@keyframes sigCloseA { 0%, 50% { transform: translate(-0.99px, -3.88px); animation-timing-function: cubic-bezier(0.9, 0, 1, 1); } 80%, 100% { transform: none; } }
@keyframes sigCloseB { 0%, 50% { transform: translate(0.99px, 3.88px); animation-timing-function: cubic-bezier(0.9, 0, 1, 1); } 80%, 100% { transform: none; } }
@keyframes sigEjPair { 0% { opacity: 0; } 18% { opacity: 0.45; } 62% { opacity: 1; } 79.9% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sigEjFull { 0%, 79.9% { opacity: 0; transform: none; } 80% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); } 87% { transform: scale(0.982); animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); } 100% { opacity: 1; transform: none; } }
/* El teléfono con la app sube a medida que se avanza hacia el caso. Marco de titanio, bisel fino e isla, como los
   teléfonos de los casos; la pantalla es la captura limpia de la app (antes era una imagen que ya traía su propio
   iPhone y fondo negro, y quedaba un marco dentro de otro) y baja por la app con el avance */
.sig-e-mend .sig-tel { --w: clamp(220px, 19vw, 320px); position: absolute; left: 79%; top: 17svh; width: var(--w); aspect-ratio: 9 / 19.5; padding: calc(var(--w) * 0.014); border-radius: calc(var(--w) * 0.18); background: linear-gradient(150deg, #5B6A6C 0%, #1F2A2C 22%, #3A4749 52%, #131B1C 78%, #48585A 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 3px rgba(5, 20, 22, 0.35), 0 40px 70px -24px rgba(5, 20, 22, 0.55), 0 80px 140px -50px rgba(5, 20, 22, 0.7); translate: -50% calc((1 - var(--p)) * 38svh); }
.sig-e-mend .sig-pant { position: relative; width: 100%; height: 100%; overflow: hidden; border: calc(var(--w) * 0.03) solid #050708; border-radius: calc(var(--w) * 0.166); background: #577A80; }
.sig-e-mend .sig-pant::before { content: ''; position: absolute; left: 50%; top: calc(var(--w) * 0.02); z-index: 3; width: 30%; height: calc(var(--w) * 0.085); margin-left: -15%; border-radius: 99px; background: #050708; }
.sig-e-mend .sig-pant::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, 0.1), transparent 38%); }
.sig-e-mend .sig-larga { position: absolute; left: 0; top: calc(var(--w) * 0.1); width: 100%; max-width: none; transform: translateY(calc(var(--p) * -28%)); will-change: transform; }
.sig-e-mend .sig-tel .sig-splash { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
/* Texto en la mitad izquierda: la mitad derecha queda para el teléfono */
.sig:has(.sig-e-mend) .sig-txt { right: 40vw; }
/* Una luz suave que sigue el avance: el campo de Mend se ilumina hacia el caso */
.sig-e-mend .sig-luz { position: absolute; inset: 0; background: radial-gradient(40% 50% at 78% 40%, rgba(201, 233, 232, 0.55), transparent 70%); opacity: var(--p); }

/* --- 2. ESCENA TAP IN --- */
.sig-e-tapin { background: radial-gradient(120% 90% at 70% 0%, #6B5CE7 0%, #4A3CAE 38%, #2D2560 100%); }
.sig-tiras { position: absolute; right: -6%; top: -30%; bottom: -30%; width: 60%; display: flex; gap: clamp(14px, 1.6vw, 26px); transform: rotate(-22deg); }
.sig-tiras i { flex: 1; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--tono) 82%, #fff), var(--tono)); translate: 0 calc((1 - var(--p)) * (10% + var(--i) * 8%)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5); }
.sig-tp-wm { position: absolute; left: var(--margen); top: 14svh; width: clamp(200px, 26vw, 420px); aspect-ratio: 389.87 / 150.6; background: #FFFFFF; -webkit-mask: url("media/tp-wordmark.svg") center / contain no-repeat; mask: url("media/tp-wordmark.svg") center / contain no-repeat; }

/* --- 3. ESCENA LLEGÓ FARMA --- */
.sig-e-llego > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sig-e-llego::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 21, 0.2), rgba(10, 20, 21, 0.75)); }
.sig-reticula { position: absolute; inset: 0 var(--margen); z-index: 1; border-right: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 25% 100% repeat-x; }
.sig-lf-iso { position: absolute; z-index: 2; left: var(--margen); top: 14svh; width: clamp(64px, 6vw, 96px); }
/* Móvil y tablet vertical, igual que los casos */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1100px) {
    /* El teléfono cabe en el hueco sobre el rótulo (--sig-hueco lo mide el JS) y se centra ahí, sin pisarlo en ningún
       alto de pantalla. Entra con el panel: cuando el panel llena la pantalla ya está en su lugar */
    .sig-e-mend .sig-tel { --tope: 38vw; --w: min(var(--tope), calc((var(--sig-hueco, 60svh) - 7svh - 28px) * 9 / 19.5)); left: 50%; top: max(5svh, calc((var(--sig-hueco, 60svh) - 20px - var(--w) * 19.5 / 9) / 2)); translate: -50% calc((1 - var(--e, 1)) * 10svh); opacity: clamp(0, (var(--e, 1) - 0.55) * 2.6, 1); }
    .sig:has(.sig-e-mend) .sig-txt { right: var(--margen); }
    .sig-mend-logo { width: 78vw; }
    .sig-progreso { top: auto; bottom: 24px; }
}
/* Tablet vertical: el teléfono más chico y más arriba, para que no tope con el logo */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1100px) { .sig-e-mend .sig-tel { --tope: 30vw; } }
@media (prefers-reduced-motion: reduce) {
    .sig-escena { clip-path: none; }
    .sig-escena > *, .sig-nombre, .sig-tiras i, .sig-e-mend .sig-larga { transform: none; translate: none; }
    .sig-e-mend .sig-tel { translate: -50% 0; }
}