/* V58 POLISH — restrained interaction layer. Keeps V57 layout/stability intact. */

/* ---------- 1. Unified, soft desktop hover ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .project-card,
  .zoom,
  .gallery figure,
  .mosaic figure,
  .material-photo,
  .material-types > div,
  .contact-links a,
  .contact-icons a,
  .links a,
  .watch,
  .video-play,
  .phone .play,
  .v58-next-project{
    -webkit-tap-highlight-color:transparent;
  }

  /* Keep the frame fixed; only photography breathes. */
  .project-card img,
  .zoom img,
  .gallery figure img,
  .mosaic figure img,
  .material-photo img,
  .material-types > div img{
    transition:transform .52s cubic-bezier(.2,.72,.24,1),filter .42s ease,opacity .3s ease !important;
    transform:translateZ(0) scale(1);
    will-change:transform;
  }
  .project-card:hover img,
  .zoom:hover img,
  .gallery figure:hover img,
  .mosaic figure:hover img,
  .material-photo:hover img,
  .material-types > div:hover img{
    transform:translateZ(0) scale(1.028) !important;
    scale:1 !important;
  }

  /* Project title reaction without moving copy. */
  .project-card .card-copy h3{position:relative;display:inline-block}
  .project-card .card-copy h3::after{
    content:"";position:absolute;left:0;right:auto;bottom:-8px;width:0;height:1px;
    background:currentColor;opacity:.72;transition:width .36s cubic-bezier(.2,.72,.24,1);
  }
  .project-card:hover .card-copy h3::after{width:min(74px,42%)}

  /* Contact cards respond through the icon ring, not by enlarging the whole row. */
  .contact-links a,
  .contact-icons a,
  .links a{
    scale:1 !important;
    transition:color .28s ease,opacity .28s ease !important;
  }
  .contact-links a span,
  .contact-icons a span,
  .links a span{
    transition:transform .34s cubic-bezier(.2,.72,.24,1),border-color .28s ease,box-shadow .28s ease,background .28s ease;
  }
  .contact-links a:hover span,
  .contact-icons a:hover span,
  .links a:hover span{
    transform:translateY(-3px);
    border-color:rgba(218,174,101,.98) !important;
    box-shadow:0 8px 26px rgba(201,152,77,.13);
    background:rgba(201,152,77,.045);
  }

  /* Play controls: crisp, restrained response. */
  .video-play,.phone .play,.watch{
    transition:transform .32s cubic-bezier(.2,.72,.24,1),border-color .28s ease,box-shadow .28s ease,color .28s ease,opacity .28s ease !important;
  }
  .video-play:hover,.phone .play:hover{
    transform:translate(-50%,-50%) scale(1.055) !important;
    scale:1 !important;
    border-color:rgba(218,174,101,.98) !important;
    box-shadow:0 0 0 7px rgba(201,152,77,.07),0 14px 38px rgba(0,0,0,.25);
  }
  .page-rostselmash .video-play:hover{transform:scale(1.055) !important}
  .watch:hover{transform:translateX(3px);scale:1 !important;color:#fff}
}

/* ---------- 2. Adaptive header, no bulky panel ---------- */
@media (min-width:901px){
  .site-header,.topbar{
    transition:background .38s ease,color .32s ease,border-color .32s ease,box-shadow .32s ease;
  }
  .site-header .brand,.site-header .main-nav a,
  .topbar .wordmark,.topbar .brand,.topbar nav a,.topbar .manifest{
    transition:color .30s ease,opacity .30s ease,text-shadow .30s ease !important;
  }
  .site-header.on-light{
    background:linear-gradient(180deg,rgba(244,240,233,.76),rgba(244,240,233,.16),rgba(244,240,233,0)) !important;
    border-bottom-color:rgba(88,76,59,.12) !important;
    box-shadow:none !important;
  }
  .topbar.on-light-scene{
    background:linear-gradient(180deg,rgba(244,240,233,.74),rgba(244,240,233,.14),rgba(244,240,233,0)) !important;
    box-shadow:none !important;
  }
  .topbar.on-light-scene .wordmark,
  .topbar.on-light-scene .brand,
  .topbar.on-light-scene nav a,
  .topbar.on-light-scene .manifest{
    color:#38352f !important;
    text-shadow:0 1px 10px rgba(255,255,255,.38);
  }
  .topbar.on-light-scene nav a:hover{color:#0d0d0b !important}
}

/* ---------- 3. Unified lightbox treatment ---------- */
.lb,.lightbox{
  display:flex !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(4,4,4,.94) !important;
  backdrop-filter:blur(5px);
  transition:opacity .26s ease,visibility 0s linear .26s;
}
.lb.open,.lightbox.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,visibility 0s linear 0s;
}
.lb > img,.lightbox > img{
  max-width:min(90vw,1500px) !important;
  max-height:86vh !important;
  object-fit:contain !important;
  box-shadow:0 24px 90px rgba(0,0,0,.42);
  will-change:transform,opacity;
}
.lb .x,.lightbox > button:first-of-type,
.lb .prev,.lb .next,.lightbox .lb-prev,.lightbox .lb-next{
  border:1px solid rgba(255,255,255,.28) !important;
  transition:border-color .25s ease,background .25s ease,transform .25s ease,opacity .25s ease !important;
}
@media (hover:hover) and (pointer:fine){
  .lb button:hover,.lightbox button:hover{
    border-color:rgba(218,174,101,.9) !important;
    background:rgba(201,152,77,.08) !important;
    scale:1 !important;
  }
}
.lb .count,.lightbox .lb-count{
  letter-spacing:.18em;
  color:rgba(255,255,255,.74) !important;
}

/* ---------- 4. Major heading reveal ---------- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .v58-reveal-heading{
    opacity:0;
    transform:translateY(18px);
    clip-path:inset(0 0 100% 0);
    will-change:transform,opacity,clip-path;
  }
  .v58-reveal-heading.v58-visible{
    animation:v58HeadingReveal .72s cubic-bezier(.16,.76,.24,1) forwards;
  }
  @keyframes v58HeadingReveal{
    0%{opacity:0;transform:translateY(18px);clip-path:inset(0 0 100% 0)}
    42%{opacity:1}
    100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
  }
}

/* ---------- 5. One-time draw for existing gold dividers ---------- */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .v58-draw-line{
    transform-origin:left center;
    transform:scaleX(0);
    opacity:.35;
  }
  .v58-draw-line.v58-visible{
    animation:v58LineDraw .58s cubic-bezier(.2,.72,.24,1) forwards;
  }
  @keyframes v58LineDraw{to{transform:scaleX(1);opacity:1}}
}

/* ---------- 6. Chapter labels for desktop dots ---------- */
@media (min-width:901px){
  .dots,.screen-dots{overflow:visible !important}
  .dots > span,.screen-dots > span{
    position:relative;
    cursor:pointer;
    outline:none;
  }
  .dots > span::before,.screen-dots > span::before{
    content:attr(data-v58-label);
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%) translateX(4px);
    width:max-content;
    max-width:180px;
    padding:5px 8px;
    border:1px solid rgba(201,152,77,.18);
    background:rgba(7,8,8,.72);
    backdrop-filter:blur(7px);
    color:rgba(241,237,228,.78);
    font:700 8px/1 Arial,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
    white-space:nowrap;
  }
  .dots > span:hover::before,.screen-dots > span:hover::before,
  .dots > span:focus-visible::before,.screen-dots > span:focus-visible::before,
  .dots > span.active::before,.screen-dots > span.active::before{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) translateX(0);
    transition:opacity .22s ease,transform .22s ease,visibility 0s;
  }
  .dots > span.active::before,.screen-dots > span.active::before{opacity:.64}
  .dots > span:hover::before,.screen-dots > span:hover::before,
  .dots > span:focus-visible::before,.screen-dots > span:focus-visible::before{opacity:1}
}

/* ---------- 7. Compact next-project teaser ---------- */
.v58-next-project{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  width:min(310px,100%);
  margin-top:22px;
  padding:8px 10px 8px 8px;
  border:1px solid rgba(201,152,77,.22);
  color:inherit;
  text-decoration:none;
  background:rgba(255,255,255,.018);
  overflow:hidden;
  transition:border-color .28s ease,background .28s ease,transform .34s cubic-bezier(.2,.72,.24,1) !important;
}
.v58-next-project img{
  width:68px !important;
  height:48px !important;
  object-fit:cover !important;
  display:block;
  scale:1 !important;
  transition:transform .45s cubic-bezier(.2,.72,.24,1),filter .32s ease !important;
}
.v58-next-project small{
  display:block;
  margin:0 0 5px;
  color:#c9984d !important;
  font:700 7px/1 Arial,sans-serif !important;
  letter-spacing:.16em;
}
.v58-next-project b{
  display:block;
  color:#eeeae2;
  font:400 13px/1.15 Georgia,serif;
  letter-spacing:.01em;
}
.v58-next-project .v58-next-arrow{color:#c9984d;font-size:16px;transition:transform .3s ease}
@media (hover:hover) and (pointer:fine){
  .v58-next-project:hover{
    transform:translateY(-2px);
    scale:1 !important;
    border-color:rgba(201,152,77,.55);
    background:rgba(201,152,77,.035);
  }
  .v58-next-project:hover img{transform:scale(1.035) !important}
  .v58-next-project:hover .v58-next-arrow{transform:translateX(3px)}
}

/* Keep the teaser harmless on the already-approved mobile layout. */
@media (max-width:900px){
  .v58-next-project{display:none !important}
  .dots > span::before,.screen-dots > span::before{display:none !important}
  .v58-reveal-heading,.v58-draw-line{opacity:1 !important;transform:none !important;clip-path:none !important;animation:none !important}
}

@media (prefers-reduced-motion:reduce){
  .v58-reveal-heading,.v58-draw-line{opacity:1 !important;transform:none !important;clip-path:none !important;animation:none !important}
  .lb,.lightbox,.v58-next-project,*{scroll-behavior:auto}
}