/* =========================================================
   Capa de experiencia: intro, transiciones, movimiento.
   Todo lo que oculta contenido está detrás de html.fx, que
   solo se activa cuando js/fx.js arrancó bien. Sin JS o con
   "reducir movimiento" el sitio se ve completo y quieto.
   ========================================================= */

/* ---------- Pantalla de entrada: saludo, portal y bienvenida ---------- */
.opening { position: fixed; inset: 0; z-index: 400; display: none; color: #ece9e1; }
.intro-on .opening { display: block; }
.intro-on { overflow: hidden; }
.intro-on:not([data-fx-alive]) .opening { animation: gateFail .01s 5s forwards; }
@keyframes gateFail { to { visibility: hidden; pointer-events: none; } }
.intro-panel { position: absolute; left: 0; right: 0; height: 50.2%; background: #0b0e13; transition: transform 1.05s cubic-bezier(.76, 0, .24, 1); }
.intro-panel.t { top: 0; }
.intro-panel.b { bottom: 0; }
.opening.out .t { transform: translateY(-101%); }
.opening.out .b { transform: translateY(101%); }
.intro-inner { position: absolute; inset: 0; transition: opacity .45s, transform .9s cubic-bezier(.76, 0, .24, 1); }
.opening.out .intro-inner { opacity: 0; transform: scale(1.05); }
.portal-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; gap: 1.1rem; padding: 2rem clamp(1.25rem, 5vw, 4rem); transition: opacity .5s, transform .9s var(--ease); }
.opening.warp .gate { opacity: 0; transform: scale(.92); pointer-events: none; }
.g-hello { margin: 0; font: 800 clamp(2.7rem, 9.5vw, 8rem)/.96 var(--font-display); letter-spacing: -.04em; text-wrap: balance; max-width: 14ch; }
.g-hello em { font-style: normal; color: #e8d57a; }
.gw { display: inline-block; opacity: 0; transform: translateY(45%); filter: blur(10px); animation: gwIn 1.1s var(--ease) forwards; animation-delay: calc(var(--i) * .16s + .45s); }
@keyframes gwIn { to { opacity: 1; transform: none; filter: blur(0); } }
.g-sub, .g-invite { margin: 0; opacity: 0; transform: translateY(14px); animation: gwIn 1s var(--ease) forwards; }
.g-sub { max-width: 46ch; font: 500 clamp(.78rem, 1.5vw, .95rem)/1.6 var(--font-mono); letter-spacing: .03em; color: #a5abb6; margin-top: .6rem; animation-delay: 1.8s; }
.g-invite { max-width: 28ch; font: 600 clamp(1.25rem, 2.8vw, 1.9rem)/1.25 var(--font-display); letter-spacing: -.02em; margin-top: 2.2rem; animation-delay: 2.5s; }
.g-go { position: relative; display: inline-flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: 1.05rem 2.4rem; min-height: 3.4rem; border: 0; border-radius: 999px; background: #e8d57a; color: #17140a; font: 700 1.2rem var(--font-display); cursor: pointer; opacity: 0; transform: translateY(14px); animation: gwIn 1s var(--ease) 3.1s forwards; transition: transform .35s var(--ease); }
.g-go:hover { transform: scale(1.06); }
.g-go:focus-visible { outline: 3px solid #ece9e1; outline-offset: 4px; }
.g-go::before, .g-go::after { content: ""; position: absolute; inset: 0; border: 1.5px solid #e8d57a; border-radius: inherit; opacity: 0; animation: ping 2.4s ease-out infinite 4s; pointer-events: none; }
.g-go::after { animation-delay: 5.2s; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7, 2.1); opacity: 0; } }
.g-go svg { transition: transform .35s var(--ease); }
.g-go:hover svg { transform: translateX(5px); }
.opening.warp .g-go { transform: scale(.4); }
.g-welcome { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font: 800 clamp(3.2rem, 14vw, 12rem)/1 var(--font-display); letter-spacing: -.04em; color: #ece9e1; pointer-events: none; z-index: 3; text-align: center; }
.g-welcome .wl { display: inline-block; opacity: 0; transform: translateY(60%) scale(.9); filter: blur(12px); transition: opacity .8s, transform 1s var(--ease), filter .8s; transition-delay: calc(var(--i) * 60ms); }
.g-welcome span.wrap { display: block; }
.opening.welcome .g-welcome .wl { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Barra de progreso, cursor, transición entre secciones ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 300; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s; will-change: transform; }
.cursor i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }
.cursor.on { opacity: 1; }
.cursor.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cursor.view { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (pointer: coarse) { .cursor { display: none; } }

.wipe { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); transform: translateY(101%); pointer-events: none; font: 800 clamp(3rem, 12vw, 9rem)/1 var(--font-display); letter-spacing: -.04em; }
.wipe.in { transform: none; transition: transform .6s cubic-bezier(.76, 0, .24, 1); pointer-events: auto; }
.wipe.out { transform: translateY(-101%); transition: transform .7s cubic-bezier(.76, 0, .24, 1); }
.wipe span { opacity: 0; transform: translateY(40%); transition: opacity .4s .25s, transform .6s .25s var(--ease); }
.wipe.in span { opacity: 1; transform: none; }

/* Cambio de tema con círculo que se expande desde el botón */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9; }
::view-transition-old(root) { z-index: 1; }

/* ---------- Titulares: palabra por palabra ---------- */
.fx .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.fx .split .wi { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: left bottom; transition: transform 1.05s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.fx .split.in .wi { transform: none; }

/* Párrafos grandes que se "leen" con el scroll */
.fx .scrub .sw { opacity: .22; transition: opacity .35s linear; }
.fx .scrub .sw.on { opacity: 1; }

/* ---------- Hero ---------- */
.hero-wrap { position: relative; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s .4s; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.go .hero-canvas { opacity: 1; }
.hero-copy { transform: translate3d(0, calc(var(--hs, 0) * 1px), 0); }
.portrait { transform: translate3d(0, calc(var(--hs, 0) * -.45px), 0); }
.frame { perspective: 900px; }
.fx .hero-copy > :not(h1) { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.go .hero-copy > :not(h1) { opacity: 1; transform: none; }
.go .hero-copy > .hero-role { transition-delay: .1s; }
.go .hero-copy > .lead { transition-delay: 1s; }
.go .hero-copy > .hero-cta { transition-delay: 1.15s; }
.fx .hero h1 em { background-size: 2px .2em, 2px .2em, 0 2px; transition: background-size 1.3s 1.05s var(--ease); }
.go .hero h1 em { background-size: 2px .2em, 2px .2em, 100% 2px; }
.fx .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s .35s var(--ease); }
.go .frame { clip-path: inset(0); }
.fx .crop { transform: scale(0); transition: transform .7s 1.4s var(--ease); }
.go .crop { transform: none; }
.fx .dim { opacity: 0; transition: opacity 1s 1.6s; }
.go .dim { opacity: 1; }
.monogram { transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .25s ease-out; will-change: transform; }
.frame { transition-property: clip-path, transform; }
.tilt .frame { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: clip-path 1.4s .35s var(--ease), transform .25s ease-out; }

/* ---------- Cinta de palabras que corre con el scroll ---------- */
.marquee { overflow: hidden; padding-block: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.mq-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; font: 800 clamp(3.2rem, 10vw, 8.5rem)/1 var(--font-display); letter-spacing: -.035em; }
.mq-item { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding-right: clamp(1.5rem, 4vw, 3.5rem); color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.mq-item:nth-child(even) { color: var(--ink); -webkit-text-stroke: 0; }
.mq-item::after { content: ""; flex: none; width: .32em; height: .32em; background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 3px 100% no-repeat; }

/* ---------- Servicios: foco que sigue al mouse ---------- */
.svc { background-image: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }

/* ---------- Proyectos: revelado y parallax ---------- */
.fx .proj .browser { clip-path: inset(10% 7% 10% 7% round 12px); opacity: 0; transform: scale(.94); transition: clip-path 1.3s var(--ease), opacity .8s, transform 1.3s var(--ease); }
.fx .proj.in .browser { clip-path: inset(0 round 12px); opacity: 1; transform: none; }
.fx .proj.in:hover .browser { transform: translateY(-6px); transition-duration: .5s; }
.browser { overflow: hidden; }
.browser img { transform: translate3d(0, var(--py, 0%), 0) scale(1.12); will-change: transform; }
.proj-info .tags li { transition: background .25s, color .25s, border-color .25s; }
.proj-info .tags li:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Proceso y conocimientos ---------- */
.fx .step::after { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) calc(var(--n, 0) * .18s + .3s); }
.fx .step.in::after { transform: none; }
.step:nth-child(2) { --n: 1; } .step:nth-child(3) { --n: 2; } .step:nth-child(4) { --n: 3; }
.fx .sg li { opacity: 0; transform: translateX(-14px); transition: opacity .7s, transform .9s var(--ease), color .2s; transition-delay: calc(var(--k, 0) * 70ms + .15s); }
.fx .sg.in li { opacity: 1; transform: none; }
.sg li:hover { color: var(--accent); }
.sg li:nth-child(1) { --k: 0; } .sg li:nth-child(2) { --k: 1; } .sg li:nth-child(3) { --k: 2; } .sg li:nth-child(4) { --k: 3; } .sg li:nth-child(5) { --k: 4; }

/* ---------- Nombre gigante al final ---------- */
.wordmark { max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); font: 800 clamp(3.4rem, 12.6vw, 11rem)/.9 var(--font-display); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; padding-bottom: .12em; user-select: none; }
.wordmark .ch { display: inline-block; transition: transform 1.1s var(--ease), color .25s; transition-delay: calc(var(--i) * 40ms); }
.fx .wordmark:not(.in) .ch { transform: translateY(108%); }
.wordmark .ch:hover { color: var(--accent); transform: translateY(-6%); transition-delay: 0s; transition-duration: .25s; }
.wordmark .sp { display: inline-block; width: .28em; }
.wm-in { display: inline-block; }
.foot { border-top: 0; padding-top: 1rem; }

/* ---------- Respeta "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  .opening, .wipe, .cursor { display: none !important; }
  .fx .split .wi, .fx .scrub .sw, .fx .sg li, .fx .wordmark .ch { transform: none !important; opacity: 1 !important; }
  .fx .frame, .fx .proj .browser { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .fx .hero-copy > :not(h1), .fx .crop, .fx .dim { opacity: 1 !important; transform: none !important; }
  .fx .hero h1 em { background-size: 2px .2em, 2px .2em, 100% 2px !important; }
}