/* Bresart Portfolio — dynamic Timeline view */

/* Toggle between grid and timeline */
body.view-timeline .wrap { display: none; }
body.view-timeline { overflow: hidden; }
.timeline[hidden] { display: none; }

/* Dynamic background (active work image) */
.tl-bg-wrap { position: fixed; inset: 0; display: none; pointer-events: none; }
body.view-timeline .tl-bg-wrap { display: block; }
.tl-bg-layer {
  position: absolute; inset: 0; background: #0c0e14 center/cover no-repeat;
  opacity: 0; transform: scale(1.12);
  transition: opacity .9s ease, transform 9s ease-out;
  filter: blur(22px) brightness(.45) saturate(1.05);
}
.tl-bg-layer.is-on { opacity: 1; transform: scale(1.22); }
.tl-bg-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,12,18,.9), rgba(10,12,18,.35) 55%, rgba(10,12,18,.8)),
    linear-gradient(180deg, rgba(10,12,18,.5), rgba(10,12,18,.75));
}

/* Layout */
.timeline {
  display: flex; align-items: stretch; gap: 0;
  height: calc(100vh - 86px);
  padding: 8px 0 0 clamp(18px, 4vw, 48px);
  position: relative; z-index: 1;
}

/* Left: year/period navigation */
.tl-nav {
  width: clamp(190px, 22vw, 300px); flex: none;
  overflow-y: auto; max-height: 100%;
  padding: 18px 26px 120px 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.tl-nav::-webkit-scrollbar { width: 6px; }
.tl-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.tl-group { margin-bottom: 26px; }
.tl-year {
  background: none; border: none; cursor: pointer; padding: 0 0 10px;
  color: #fff; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 21px;
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 1px;
}
.tl-year-arrow { color: var(--accent); font-weight: 400; transform: translateY(-1px); }
.tl-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tl-link {
  color: rgba(255,255,255,.5); font-size: 14.5px; cursor: pointer; line-height: 1.35;
  padding: 2px 0 2px 0; transition: color .18s, transform .18s; position: relative;
}
.tl-link:hover { color: #fff; }
.tl-link.is-active { color: #fff; font-weight: 700; transform: translateX(10px); }
.tl-link.is-active::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%; transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(127,176,255,.2);
}

/* Right: filmstrip stage */
.tl-stage {
  --tl-pad: 48px;
  position: relative; flex: 1; overflow: hidden; height: 100%;
  display: flex; align-items: center;
}
.tl-track {
  display: flex; align-items: center; gap: 30px;
  transform: translateX(0); will-change: transform;
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  padding-right: 50vw;
}
.tl-card {
  flex: none; width: min(60vw, 760px); cursor: pointer; position: relative;
  transform: scale(.8); opacity: .38; filter: saturate(.8);
  transition: transform .58s cubic-bezier(.22,.61,.36,1), opacity .5s, filter .5s;
}
.tl-card.is-next { transform: scale(.9); opacity: .82; filter: none; }
.tl-card.is-active { transform: scale(1); opacity: 1; filter: none; z-index: 2; }

.tl-period {
  display: none; position: absolute; top: -40px; left: 2px;
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 28px;
  color: rgba(255,255,255,.92); letter-spacing: 1px;
}
.tl-card.is-active .tl-period { display: block; animation: tlFadeDown .6s ease both; }

.tl-card-img {
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px;
  background: #232838 center/cover no-repeat; background-size: cover; overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}
.tl-card.is-active .tl-card-img { animation: tlKen 16s ease-in-out infinite alternate; }
.tl-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Montserrat", sans-serif; font-size: 72px; font-weight: 800; color: rgba(255,255,255,.18);
}
.tl-card-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 58px 28px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  opacity: 0; transform: translateY(10px); transition: opacity .5s .08s, transform .5s .08s;
}
.tl-card.is-active .tl-card-cap,
.tl-card.is-next .tl-card-cap { opacity: 1; transform: none; }
.tl-card-tag { color: var(--accent); font-weight: 700; font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: .5px; }
.tl-card-title { margin: 7px 0 0; font-size: clamp(20px, 2.6vw, 32px); font-weight: 800; line-height: 1.15; }
.tl-card.is-next .tl-card-title { font-size: clamp(17px, 1.8vw, 22px); }

@keyframes tlKen {
  from { background-size: 108%; background-position: 48% 50%; }
  to   { background-size: 122%; background-position: 52% 48%; }
}
@keyframes tlFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* entrance when timeline becomes live */
.timeline .tl-nav .tl-group { opacity: 0; transform: translateX(-14px); }
.timeline.is-live .tl-nav .tl-group { animation: tlNavIn .5s ease forwards; }
.timeline.is-live .tl-group:nth-child(1) { animation-delay: .05s; }
.timeline.is-live .tl-group:nth-child(2) { animation-delay: .13s; }
.timeline.is-live .tl-group:nth-child(3) { animation-delay: .21s; }
.timeline.is-live .tl-group:nth-child(4) { animation-delay: .29s; }
.timeline.is-live .tl-group:nth-child(n+5) { animation-delay: .35s; }
@keyframes tlNavIn { to { opacity: 1; transform: none; } }

/* mobile */
@media (max-width: 760px) {
  body.view-timeline { overflow: auto; }
  .timeline { flex-direction: column; height: auto; padding: 0 0 130px; }
  .tl-nav { display: none; }
  .tl-stage { --tl-pad: 7vw; height: 66vh; min-height: 420px; }
  .tl-card { width: 86vw; }
  .tl-track { gap: 18px; }
  .tl-period { font-size: 22px; top: -32px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-card.is-active .tl-card-img { animation: none; }
  .tl-bg-layer { transition: opacity .3s; }
}