/* One shared clock keeps paint, polish, and stage labels synchronized. */
.restoration{--cycle:8s;min-height:470px}
.hero-art .restoration-car{width:100%;left:0;top:105px}
.animation-toggle{position:absolute;z-index:2;right:20px;top:16px;width:32px;height:32px;border:1px solid #646b57;background:#171d15;color:var(--gold);border-radius:50%;cursor:pointer;font:14px Arial,sans-serif}
.animation-toggle:hover{background:#303828}
.animation-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.car-primer{opacity:0;animation:primer-coat var(--cycle) linear infinite}
.car-finish,.car-gold{opacity:0;animation:final-coat var(--cycle) linear infinite}
.car-damage{animation:repair-damage var(--cycle) linear infinite}
.car-shine{opacity:0;animation:polish-pass var(--cycle) linear infinite}
.restoration-timeline{position:absolute;left:25px;right:25px;bottom:69px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.restoration-timeline>span{position:relative;color:#79816d;font-size:9px;letter-spacing:1.3px;padding-bottom:14px;animation:stage-before var(--cycle) linear infinite}
.restoration-timeline b{font-weight:400;font-size:8px;margin-right:6px}
.restoration-timeline i{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#363f2e;overflow:hidden}
.restoration-timeline i::after{content:'';display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:progress-before var(--cycle) linear infinite}
.restoration-timeline .stage-primer{animation-name:stage-primer}
.restoration-timeline .stage-after{animation-name:stage-after}
.stage-primer i::after{animation-name:progress-primer}
.stage-after i::after{animation-name:progress-after}
.restoration .art-bottom{font-size:7px;letter-spacing:1px;bottom:24px}
.restoration.is-paused *,.restoration.is-paused *::after{animation-play-state:paused!important}
@keyframes repair-damage{0%,22%,100%{opacity:1}32%,94%{opacity:0}}
@keyframes primer-coat{0%,22%,100%{opacity:0}34%,94%{opacity:1}}
@keyframes final-coat{0%,49%,100%{opacity:0}63%,93%{opacity:1}}
@keyframes polish-pass{0%,63%{opacity:0;transform:translateX(0)}65%{opacity:1;transform:translateX(0)}83%{opacity:1;transform:translateX(820px)}85%,100%{opacity:0;transform:translateX(820px)}}
@keyframes stage-before{0%,24%,100%{color:#e0d4a6}33%,94%{color:#79816d}}
@keyframes stage-primer{0%,25%,61%,100%{color:#79816d}33%,51%{color:#e0d4a6}}
@keyframes stage-after{0%,51%,100%{color:#79816d}63%,93%{color:#e0d4a6}}
@keyframes progress-before{0%,100%{transform:scaleX(0)}25%,94%{transform:scaleX(1)}}
@keyframes progress-primer{0%,29%,100%{transform:scaleX(0)}55%,94%{transform:scaleX(1)}}
@keyframes progress-after{0%,58%,100%{transform:scaleX(0)}90%,94%{transform:scaleX(1)}}
@media(max-width:760px){.restoration{min-height:400px}.hero-art .restoration-car{top:75px;max-height:240px}.restoration-timeline{gap:10px;left:20px;right:20px}.restoration-timeline>span{font-size:8px;letter-spacing:.8px}.restoration .art-bottom{left:20px;right:20px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.restoration *,.restoration *::after{animation:none!important}.car-primer,.car-finish,.car-gold{opacity:1}.car-damage,.car-shine{opacity:0}.restoration-timeline .stage-after{color:var(--gold)}.restoration-timeline i::after{transform:scaleX(1)}.animation-toggle{display:none}}

/* Real project photography: preserve each photo's full frame. */
.other-work{border-top:1px solid var(--line)}
.project-shortcuts{display:flex;flex-wrap:wrap;gap:12px}
.project-shortcuts a,.project-video-link{display:inline-block;border:1px solid #57594d;padding:12px 18px;color:var(--gold);font-size:12px}
.project-shortcuts a:hover,.project-video-link:hover{background:#272c21}
.project-video-link{margin-top:20px}
.restoration{background:#10120f}
.hero-photos{position:absolute;inset:55px 0 112px;overflow:hidden;background:#10120f}
.hero-photo{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;background:#10120f}
.photo-during{opacity:0;animation:primer-coat var(--cycle) linear infinite}
.photo-after{opacity:0;animation:final-coat var(--cycle) linear infinite}
.restoration .art-label{z-index:1;color:#c7bb8d}
.additional-project{margin-top:45px}
.photo-grid.photo-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.photo-card img{object-fit:contain;background:#191b18}
.photo-card a{display:block}
.video-grid:has(>.video-card:only-child){grid-template-columns:minmax(0,800px);justify-content:center}
.video-card video{object-fit:contain;max-height:520px}
@media(max-width:760px){.photo-grid.photo-pair{grid-template-columns:1fr}.hero-photos{inset:55px 0 112px}}
@media(prefers-reduced-motion:reduce){.photo-after{opacity:1}.photo-during{opacity:0}}

/* On phones the photograph determines the height; labels stay in their own rows. */
@media(max-width:760px){
  .hero{min-width:0}
  .hero-copy{min-width:0}
  .hero h1{font-size:clamp(46px,12vw,64px)}
  .hero .restoration{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);padding-top:58px;--cycle:10s}
  .restoration .art-label{top:24px;left:16px;font-size:8px;letter-spacing:1px;max-width:calc(100% - 80px)}
  .restoration .animation-toggle{width:44px;height:44px;top:7px;right:10px}
  .restoration .hero-photos{position:relative;inset:auto;width:100%;aspect-ratio:4/3;isolation:isolate}
  .restoration .hero-photo{display:block;max-width:100%;object-fit:contain}
  .restoration .photo-before{object-fit:cover;object-position:50% 58%}
  .restoration .restoration-timeline{position:relative;inset:auto;margin:20px 16px 0;gap:12px}
  .restoration-timeline>span{font-size:10px;letter-spacing:.6px;white-space:nowrap;padding-bottom:12px}
  .restoration-timeline b{font-size:9px;margin-right:4px}
  .restoration .art-bottom{position:relative;inset:auto;margin:18px 16px;gap:12px;font-size:7px;line-height:1.6}
  .restoration .art-number{display:none}
}