/* Entrada del escaparate y portada (studio/app/entrance.js).
   Estados en <html>: is-loading (cortina con monograma, primera visita) · is-entering (sin
   cortina, solo la portada aparece) · is-ready (arranca todo) · no-motion (sin animaciones). */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-curtain: cubic-bezier(.76, 0, .24, 1);
  --base: .1s;
}
.is-loading { --base: .45s; }

/* ── Cortina ─────────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: #1a1520; color: #f3ede6;
}
.is-loading .preloader { display: grid; place-items: center; }
.is-loading:not(.is-ready) body { overflow: hidden; }
.preloader.is-leaving { transform: translateY(-100%); transition: transform 1.05s var(--ease-curtain); }
.preloader__center { display: grid; justify-items: center; gap: 22px; }
.monogram { width: clamp(120px, 15vw, 170px); overflow: visible; }
.monogram path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: miter; stroke-linecap: square;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.15s .15s cubic-bezier(.65, 0, .35, 1) forwards; }
.monogram .monogram__w2 { stroke: #d6a1b4; animation-delay: .4s; }
.preloader__brand { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .01em; }
.preloader__brand span { display: inline-block; opacity: 0; transform: translateY(.4em);
  animation: letter .7s var(--ease-out) forwards; animation-delay: calc(.75s + var(--li) * 40ms); }
.preloader__note, .preloader__count {
  position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); margin: 0;
  font: 500 12px/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: #a99fae;
}
.preloader__note { left: max(28px, env(safe-area-inset-left)); }
.preloader__count { right: max(28px, env(safe-area-inset-right)); font-variant-numeric: tabular-nums; color: #f3ede6; }
.preloader.is-leaving .preloader__center { transform: translateY(-6vh); opacity: 0; transition: transform 1s var(--ease-curtain), opacity .6s ease; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes letter { to { opacity: 1; transform: none; } }

/* La página sube un poco detrás de la cortina, para que se sienta un solo movimiento. */
.is-loading main, .is-loading .top { transform: translateY(7vh); }
.is-ready main, .is-ready .top { transform: none; transition: transform 1.25s var(--ease-out) .12s; }

/* ── Portada ─────────────────────────────────────────────── */
main:has(> .hero) { padding-top: 40px; grid-template-columns: minmax(0, 1fr); }
.hero { display: grid; gap: clamp(36px, 5vw, 64px); overflow: clip; padding-block: 8px 24px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.hero__head { display: grid; justify-items: center; gap: 22px; text-align: center; }
.hero__title { font-size: clamp(42px, 6.4vw, 100px); line-height: 1; letter-spacing: -.02em; max-width: 17ch; }
.hero__foot { display: grid; justify-items: center; gap: 24px; text-align: center; }
.hero__foot .lead { max-width: 56ch; }

/* Palabras del titular: suben desde detrás de su línea. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w > span { display: inline-block; }
:is(.is-loading, .is-entering) .w > span { transform: translateY(108%); }
.is-ready .w > span { transform: none; transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--base) + .1s + var(--wi) * 55ms); }

[data-rise] { --i: 0; }
:is(.is-loading, .is-entering) [data-rise] { opacity: 0; transform: translateY(16px); }
.is-ready [data-rise] { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ease-out);
  transition-delay: calc(var(--base) + .75s + var(--i) * 120ms); }
.is-ready .hero__eyebrow { transition-delay: var(--base); }

/* Galería: fotos y la web de ejemplo en el centro */
.hero__gallery { --mx: 0; --my: 0; --sy: 0; display: flex; justify-content: center; align-items: center;
  gap: clamp(10px, 1.6vw, 22px); padding-block: 40px; }
.hero__card { flex: none; margin: 0; width: clamp(104px, 13vw, 200px);
  transform: translate3d(calc(var(--mx) * var(--depth) * 14px), calc(var(--y) + var(--my) * var(--depth) * 10px - var(--sy) * var(--depth) * .1px), 0); }
.hero__card--wide { width: clamp(150px, 19vw, 280px); }
.hero__card-in { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 14px 14px; background: var(--line); }
.hero__card--wide .hero__card-in { aspect-ratio: 4 / 3; border-radius: 14px; }
.hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

:is(.is-loading, .is-entering) .hero__card .hero__card-in { clip-path: inset(100% 0 0 0); }
:is(.is-loading, .is-entering) .hero__card img { transform: scale(1.3); }
.is-ready .hero__card .hero__card-in { clip-path: inset(0); transition: clip-path 1.3s var(--ease-curtain); transition-delay: calc(var(--base) + .35s + var(--i) * 110ms); }
.is-ready .hero__card img { transform: scale(1); transition: transform 2s var(--ease-out); transition-delay: calc(var(--base) + .35s + var(--i) * 110ms); }

.hero__phone.phone { flex: none; position: relative; z-index: 2; margin: 0; width: clamp(200px, 17vw, 250px); display: block; justify-self: auto;
  transform: translate3d(calc(var(--mx) * var(--depth) * 14px), calc(var(--y) + var(--my) * var(--depth) * 10px - var(--sy) * var(--depth) * .1px), 0); }
.hero__phone .hero__card-in { width: 100%; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
.hero__phone .scaled { width: 100%; box-shadow: 0 40px 80px -20px rgb(31 26 36 / .35); }
:is(.is-loading, .is-entering) .hero__phone .hero__card-in { opacity: 0; transform: translateY(70px) scale(.96); }
.is-ready .hero__phone .hero__card-in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1.4s var(--ease-out); transition-delay: calc(var(--base) + .2s); }

/* Botón que se deja atraer un poco por el ratón */
.btn--magnetic { transition: filter .15s, transform .4s var(--ease-out); }

/* ── Contenido que aparece al bajar ──────────────────────── */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s var(--ease-out); transition-delay: calc(var(--ri, 0) * 90ms); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .hero__gallery { gap: 10px; padding-block: 28px; }
  .hero__card:nth-child(1), .hero__card:nth-last-child(1) { display: none; }
  .hero__card--wide { width: 150px; }
  .hero__phone.phone { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none !important; }
}