/* SIMETRA — Proje Akışı page (proje-akisi.html) styles
   A curving "thread" — 8 steps zigzag left/right down the page, connected by
   a smooth SVG curve that draws itself in as you scroll. Meant to be the
   most striking section of the site. */

.thread{ margin-top:var(--s7); }

.thread-steps{
  position:relative;
  display:flex; flex-direction:column; gap:var(--s8);
}
.thread-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.thread-svg .base{ fill:none; stroke:rgba(14,13,12,0.12); stroke-width:1.5; }
.thread-svg .fill{ fill:none; stroke:url(#threadGrad); stroke-width:1.5; stroke-linecap:round; transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1); }

.thread-step{
  position:relative; z-index:1;
  display:flex; gap:var(--s5); align-items:flex-start;
  opacity:0; transform:translateY(30px);
  /* closing (scrolled back up) is deliberately slower than opening, so the
     collapse is clearly visible rather than a quick snap */
  transition:opacity 2.6s cubic-bezier(.16,1,.3,1), transform 2.6s cubic-bezier(.16,1,.3,1);
}
.thread-step.in-view{
  opacity:1; transform:translateY(0);
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1);
}
.thread-step{ max-width:720px; }
.thread-step:not(.right){ margin-right:auto; }
.thread-step.right{ flex-direction:row-reverse; margin-left:auto; }

.thread-dot{
  position:relative; flex-shrink:0; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); border:1.5px solid rgba(14,13,12,0.15);
  font-family:var(--display); font-style:italic; font-weight:400; font-size:14px; color:#a89f8d;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1), border-color 1.1s ease, background 1.1s ease, color 1.1s ease, box-shadow 1.1s ease;
}
.thread-step.in-view .thread-dot{
  background:var(--brass); border-color:var(--brass); color:var(--ink); transform:scale(1.12);
  box-shadow:0 10px 26px rgba(169,131,91,0.32);
  transition:transform .8s cubic-bezier(.16,1,.3,1), border-color .6s ease, background .6s ease, color .6s ease, box-shadow .6s ease;
}
.thread-dot::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1.5px solid var(--brass-light);
  opacity:0; pointer-events:none;
}
.thread-step.in-view .thread-dot::after{
  animation: thread-ping 1s cubic-bezier(.16,1,.3,1) .3s;
}
@keyframes thread-ping{
  0%{ opacity:.65; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.9); }
}

.thread-media{
  /* matches the 3:2 source photos exactly so object-fit:cover never has to crop them */
  flex:0 0 280px; position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:8px;
  background:repeating-linear-gradient(135deg, #efe9db 0 18px, #f6f3ea 18px 36px);
  box-shadow:0 1px 2px rgba(14,13,12,0.04), 0 22px 48px rgba(14,13,12,0.12);
}
.thread-media:not(.no-image){ cursor:pointer; }
.thread-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.thread-step:hover .thread-media img{ transform:scale(1.1); }
.thread-fallback{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; text-align:center;
  color:#a89f8d; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:var(--s3);
}
.thread-media.no-image .thread-fallback{ display:flex; }
/* curtain reveal — mirrors the wipe direction to match each side's zigzag lean */
.thread-media::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:var(--ink);
  transform:scaleX(1); transform-origin:right;
  transition:transform 2.8s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.thread-step.right .thread-media::after{ transform-origin:left; }
.thread-step.in-view .thread-media::after{
  transform:scaleX(0);
  transition:transform 1.7s cubic-bezier(.16,1,.3,1);
  transition-delay:.25s;
}

.thread-content{ flex:1; min-width:0; padding-top:6px; }
.thread-title, .thread-hook, .thread-lines{
  opacity:0; transform:translateY(14px);
  transition:opacity 1.8s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1);
}
.thread-step.in-view .thread-title{
  opacity:1; transform:translateY(0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:.35s;
}
.thread-step.in-view .thread-hook{
  opacity:1; transform:translateY(0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:.52s;
}
.thread-step.in-view .thread-lines{
  opacity:1; transform:translateY(0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:.7s;
}

.thread-title{
  display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); font-weight:700; margin-bottom:var(--s2);
}
.thread-hook{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.2vw,24px); line-height:1.42; color:var(--ink);
  max-width:44ch; margin-bottom:var(--s3);
}
.thread-lines{ display:flex; flex-direction:column; gap:7px; max-width:52ch; }
.thread-lines span{ font-size:15px; line-height:1.7; color:#544f43; }

@media (max-width:760px){
  /* not enough width for a meaningful left/right zigzag — stack instead and
     let the numbered dots carry the sequence without the connecting curve */
  .thread-svg{ display:none; }
  .thread-steps{ gap:var(--s6); }
  .thread-step, .thread-step.right{
    max-width:none; margin:0; flex-direction:column; gap:var(--s3);
  }
  .thread-dot{ width:40px; height:40px; font-size:12px; }
  .thread-media{ flex:0 0 auto; width:100%; aspect-ratio:3/2; }
  .thread-content{ padding-top:0; }
}