/* Extras: timeline del reel y pie "Hablamos." */

/* ---- Timeline del reel */
.timeline { padding: 12px 44px 14px; }
.tl-track {
  position: relative; height: 12px;
  background: repeating-linear-gradient(90deg, rgba(241, 242, 240, 0.22) 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat;
}
.tl-fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #f1f2f0; }
.tl-head { position: absolute; top: -2px; bottom: 0; width: 1.5px; margin-left: -0.75px; background: #ff3b30; }
.tl-head::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7.5px; height: 5px; background: #ff3b30; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tl-tc { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: rgba(241, 242, 240, 0.5); }

/* ---- Pie "Hablamos." */
.footer.ft { height: auto; display: block; padding: 72px 44px 28px; }
.ft-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(241, 242, 240, 0.5); margin-bottom: 14px; }
.ft-cta { display: inline-block; font-size: clamp(56px, 9vw, 132px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.85; text-decoration: none; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: left bottom; }
.ft-cta .ft-dot { color: #ff3b30; display: inline-block; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ft-cta:hover .ft-dot { transform: translateX(0.12em); }
.ft-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(241, 242, 240, 0.5);
}
.ft-row .ft-mail { font-family: var(--font); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); }
.ft-row .ft-brand { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; text-transform: none; color: var(--text); }

@media (max-width: 809.98px) {
  .timeline { padding: 10px 20px 12px; }
  .footer.ft { padding: 48px 20px 24px; }
  .ft-row { flex-direction: column; gap: 8px; margin-top: 32px; }
}

/* ---- "Hablemos." en serif; al pasar el ratón pasa a cursiva */
.ft-cta { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(80px, 13vw, 210px); letter-spacing: -0.035em; line-height: 0.82; }
.ft-cta:hover { font-style: italic; }

/* ---- Contact: la foto se amplía al pasar el ratón */
.photo img { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.photo:hover img { transform: scale(1.14); }

/* ---- Work: los vídeos se destapan de abajo arriba y los textos suben escalonados */
.reveal { opacity: 1; transform: none; }
.reveal .player { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.18, 1); }
.reveal.is-in .player { clip-path: inset(0 0 0 0); }
.reveal .card:nth-child(2) .player, .reveal .p-pair-v { transition-delay: 0.15s; }
.reveal .copy > * { opacity: 0; transform: translateY(24px); transition: opacity 0.9s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in .copy > * { opacity: 1; transform: none; }
.reveal.is-in .copy > *:nth-child(2) { transition-delay: 0.08s; }
.reveal.is-in .copy > *:nth-child(3) { transition-delay: 0.16s; }
.reveal.is-in .copy > *:nth-child(4) { transition-delay: 0.24s; }
.reveal .credit, .reveal .caption { opacity: 0; transition: opacity 0.9s 0.5s; }
.reveal.is-in .credit, .reveal.is-in .caption { opacity: 1; }

/* ---- Letras que adelgazan cerca del cursor (nombre de la Home y títulos de Work) */
.vf .ch { font-variation-settings: "wght" var(--w, 600); transition: font-variation-settings 0.25s ease-out; }

/* ---- Home: el reel se abre como unas bandas de cine al cargar */
.reel { animation: reel-open 1.5s cubic-bezier(0.77, 0, 0.18, 1) 0.15s backwards; }
@keyframes reel-open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
.timeline { animation: tl-in 0.8s ease 1.2s backwards; }
@keyframes tl-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal .player, .reveal .copy > *, .reveal .credit, .reveal .caption { clip-path: none; opacity: 1; transform: none; transition: none; }
  .reel, .timeline { animation: none; }
}