/* ============================================================
   LÍNEA DE TIEMPO — "Todo lo que hago" (tira Calafate)
   Aislado y namespaced (tl-) para no chocar con el sitio.
   ============================================================ */
#linea-tiempo{ --tl-dark:#14110f; --tl-rojo:#c81432; background:var(--tl-dark); }

/* intro / título de entrada */
.tl-intro{
  position:relative;                 /* ancla del indicador de scroll */
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;background:var(--tl-dark);color:#e9e6df;
}
/* Título GIGANTE (como el typewriter de Skills). En 2 renglones para poder ser grande. */
.tl-title{
  font-family:var(--font-heading,"halyard-display",system-ui,sans-serif);font-weight:800;
  font-size:clamp(2rem,8vw,9rem);line-height:.95;letter-spacing:-.02em;
  color:#cbbfad;margin:0;text-transform:uppercase;
  white-space:pre-wrap;              /* respeta el salto de línea del typewriter */
  min-height:1.9em;                  /* reserva 2 renglones -> no salta el layout */
  display:flex;align-items:center;justify-content:center;
}
.tl-scroll{ color:#cbbfad; }
.tl-sub{
  font-family:"halyard-display",system-ui,sans-serif;font-weight:300;
  font-size:clamp(1rem,2vw,1.2rem);color:#a99f92;margin:0;
}

/* tira horizontal — sticky nativo de CSS (sin pin de ScrollTrigger, no rompe otros pins) */
#tl-scroller{position:relative}                 /* la altura la pone el JS */
#tl-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--tl-dark)}
#tl-track{display:flex;align-items:center;height:100vh;will-change:transform}
.tl-stage{
  position:relative;height:78vh;aspect-ratio:16/9;flex:0 0 auto;
  background-size:cover;background-position:center;background-repeat:no-repeat;overflow:visible;
}

#tl-vignette{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(ellipse 82% 85% at 50% 50%, transparent 72%, rgba(10,8,7,.28) 100%);
}
#tl-progress{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  z-index:120;display:flex;align-items:center;gap:16px;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
}
#tl-progress.on{opacity:1}
#tl-pbar{width:200px;height:2px;background:rgba(233,230,223,.22);border-radius:2px;overflow:hidden}
#tl-pfill{height:100%;width:0%;background:var(--tl-rojo);border-radius:2px}

/* stickers */
.tl-sticker{
  position:absolute;width:var(--w,10%);transform-origin:center;will-change:transform;
  pointer-events:auto;z-index:6;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));touch-action:none;
}
.tl-sfloat{display:block;will-change:transform;transition:transform .18s ease}
.tl-sticker img{display:block;width:100%;height:auto;pointer-events:none}
.tl-peel{display:none}
.tl-sticker.dragging{z-index:50;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.tl-sticker.dragging .tl-sfloat{transform:scale(1.09) rotate(-2.5deg)}
.tl-sticker.pressed .tl-sfloat{transform:scale(.94);transition:transform .12s ease}

/* foto de Rodrigo */
.tl-photo{
  position:absolute;z-index:7;pointer-events:auto;touch-action:none;will-change:transform;
  transform-origin:center bottom;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.tl-photo img{display:block;width:100%;height:auto;pointer-events:none}
.tl-photo.dragging{z-index:60;filter:drop-shadow(0 34px 46px rgba(0,0,0,.6))}
.tl-photo.dragging img{transform:scale(1.03) rotate(-1.5deg);transition:transform .18s ease}

@media (max-width:700px){
  .tl-stage{height:64vh}
}