/* ============================================================
   logo3d.css — 3D Design & Rendering section.
   Page-scoped (td- prefix); shared tokens come from styles.css.
   The interface stays quiet so the object can dominate.
   ============================================================ */

/* ---------- Layout: copy rail left, sticky stage right ---------- */
.td-exp{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:clamp(24px,4vw,64px);
  padding:0 clamp(20px,5vw,72px);
  max-width:var(--wrap);
  margin:0 auto;
  width:100%;
}
/* canvas column is first in the DOM (mobile shows it on top);
   grid places it on the right on desktop */
.td-left{min-width:0;grid-column:1;grid-row:1}
.td-right{min-width:0;grid-column:2;grid-row:1}
.td-sticky{
  position:sticky;
  top:60px;                       /* header height */
  height:calc(100vh - 60px);
  height:calc(100svh - 60px);
  display:flex;
  flex-direction:column;
  user-select:none;
  -webkit-user-select:none;
}

/* ---------- Canvas / stage ---------- */
.td-canvas{
  flex:1;
  width:100%;
  min-height:0;
  display:block;
  touch-action:pan-y;             /* vertical swipes scroll, the rest is ours */
  cursor:grab;
  opacity:0;
  transition:opacity .8s ease;
}
.td-canvas:active{cursor:grabbing}
.td-3d-on .td-canvas{opacity:1}
.td-3d-failed .td-canvas{display:none}

/* Static fallback — visible until WebGL actually boots */
.td-fallback{
  position:absolute;
  inset:0 0 84px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:24px;
  text-align:center;
}
.td-3d-on .td-fallback{display:none}
.td-fallback img{width:min(340px,60%);height:auto;opacity:0.92}
.td-fallback p{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);max-width:34ch;line-height:1.7}

/* Interaction hint — fades after first touch */
.td-hint{
  position:absolute;
  top:clamp(14px,2vw,24px);
  right:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.td-3d-on .td-hint{opacity:1}
.td-3d-on .td-hint.is-done{opacity:0}
.td-hint em{font-style:normal;color:var(--blue)}

/* ---------- Material selector ---------- */
.td-mats{
  display:flex;
  flex-wrap:wrap;
  gap:2px clamp(14px,1.6vw,26px);
  padding:16px 0 6px;
  border-top:1px solid var(--line);
}
.td-mats button{
  appearance:none;
  background:none;
  border:none;
  padding:6px 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.td-mats button:hover{color:var(--ink)}
.td-mats button.is-active{color:var(--blue);border-bottom-color:var(--blue)}
.td-3d-failed .td-mats{display:none}

.td-live{
  padding:10px 0 14px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--mist);
}
.td-3d-failed .td-live{display:none}

/* ---------- Left rail: hero copy ---------- */
.td-intro{
  min-height:calc(100vh - 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(48px,8vh,96px) 0;
}
.td-intro .eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.td-intro h1{
  font-weight:700;
  font-size:clamp(44px,5.6vw,96px);
  line-height:0.88;
  letter-spacing:-0.045em;
}
.td-tag{
  margin-top:clamp(24px,3vw,40px);
  font-size:clamp(19px,2vw,28px);
  line-height:1.35;
  letter-spacing:-0.01em;
  font-weight:600;
}
.td-tag em{font-style:normal;color:var(--blue)}
.td-desc{
  margin-top:clamp(18px,2.4vw,28px);
  max-width:44ch;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.6;
  color:var(--muted);
}
.td-caps{
  list-style:none;
  margin:clamp(28px,3.5vw,44px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.td-caps li{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
}
.td-scrollcue{
  margin-top:clamp(32px,5vh,64px);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Left rail: pipeline stages ---------- */
.td-stage{
  min-height:72vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(32px,5vh,64px) 0;
  border-top:1px solid var(--line);
  opacity:0.38;
  transition:opacity .45s ease;
}
.td-stage.is-active{opacity:1}
.td-stage__num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  color:var(--muted);
  margin-bottom:clamp(14px,2vw,22px);
  transition:color .45s ease;
}
.td-stage.is-active .td-stage__num{color:var(--blue)}
.td-stage h2{
  font-weight:700;
  font-size:clamp(34px,4vw,64px);
  letter-spacing:-0.04em;
  line-height:0.92;
}
.td-stage p{
  margin-top:clamp(14px,2vw,22px);
  max-width:38ch;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.6;
  color:var(--muted);
}
.td-stage.is-active p{color:var(--ink)}

/* closing beat */
.td-close{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(20px,3vw,32px);
  padding:clamp(40px,6vh,80px) 0 clamp(64px,10vh,120px);
  border-top:1px solid var(--line);
}
.td-close h2{
  font-weight:700;
  font-size:clamp(30px,3.6vw,56px);
  letter-spacing:-0.04em;
  line-height:0.95;
  max-width:16ch;
}
.td-close p{max-width:40ch;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--muted)}

/* ---------- Responsive: stage pins on top, copy scrolls under ---------- */
@media (max-width:900px){
  /* the whole right column pins; copy scrolls up beneath it */
  .td-exp{display:block}
  .td-right{
    position:sticky;
    top:60px;
    height:52vh;
    height:52svh;
    min-height:340px;
    z-index:5;
    background:var(--paper);
  }
  .td-sticky{position:relative;top:0;height:100%}
  .td-intro{min-height:0;padding-top:clamp(28px,5vh,48px)}
  .td-stage{min-height:58vh}
  .td-hint{top:10px;font-size:10px;letter-spacing:0.12em;white-space:nowrap}
  .td-fallback{inset:0 0 64px 0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .td-canvas{transition:none}
  .td-stage{transition:none}
}