/* Reset, typography, shared components (buttons, links, grid, reveal, page transition). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 8px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--s-body);line-height:1.55;font-weight:500;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--red-ui);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--hdr-h) + 8px)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{padding-inline:var(--m)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--field-ink);padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* buttons — one shape, one radius */
[hidden]{display:none!important}
a[href^="tel:"]{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:var(--radius);
  font:var(--ui-weight) var(--s-ui)/1.1 var(--ui);text-decoration:none;cursor:pointer;text-align:center;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-red,.btn-p{background:var(--red-ui);color:#fff}
.btn-red:hover,.btn-p:hover{background:var(--red-ui-hover)}
.btn-ink{background:var(--ink);color:var(--field-ink)}
.btn-ink:hover{background:#2A2A2E}
.btn-paper{background:var(--bg);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-sm{min-height:44px;padding:0 14px;font-size:13px}

/* text link with a growing underline */
.link{font-weight:700;text-decoration:none;padding-bottom:3px;position:relative;display:inline-block}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform var(--t-ui) var(--ease-out)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1)}
.arrow{display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
a:hover .arrow{transform:translateX(5px)}

@media (max-width:759px){
  .g>*{grid-column:1 / -1 !important;grid-row:auto !important}
}

/* photos melt into whatever field they sit on, like the cover photo: soft sides and top, a longer fade at the bottom.
   Not on the car-listing gallery and lightbox, where the whole frame matters. */
.sit-photo img,.about-pic img,.work-strip img,.case-card-pic img,.stamp img,.lot-pic img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 60%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 60%,transparent 100%),linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect}

/* phone: photos run edge to edge across the screen (out of the page margins); with no sides left to soften,
   they only fade at the top and the bottom */
@media (max-width:759px){
  .sit-photo,.case-card-pic,.jx-example,.lot-pic{width:auto!important;max-width:none!important;margin-inline:calc(var(--m) * -1)!important;justify-self:stretch!important}
  .jx-example-t{padding-inline:var(--m)}
  .sit-photo img,.case-card-pic img,.lot-pic img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 62%,transparent 100%)}
}

/* text tied to a photo sits on it: at the bottom, white, over a dark fade (Milen, 2026-10-24) — captions of the plates,
   the panels of the project, the example on the sell page. These photos keep a full frame (no edge fade) so the text
   never lands on the light page. */
.plate{position:relative}
.plate picture{display:block}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;margin:0!important;padding:40px 14px 12px;z-index:1;
  color:#fff;font-weight:600;line-height:1.3;background:linear-gradient(0deg,rgba(12,12,14,.88) 0%,rgba(12,12,14,.55) 55%,rgba(12,12,14,0) 100%)}
.plate figcaption:empty{display:none}

/* a photo behind text (page heads, „Къде работя“, the FAQ band, the footer): it fills the block, a dark fade keeps
   the white text readable, and the picture drifts slowly with the scroll */
.has-bg{position:relative;isolation:isolate;overflow:clip}
.bg-ph{position:absolute;inset:0;z-index:-1;background:var(--field);overflow:hidden} /* the drifting picture never spills out of its block */
.bg-ph picture,.bg-ph img{display:block;width:100%;height:100%}
.bg-ph img{object-fit:cover}
.bg-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,12,14,.92) 0%,rgba(12,12,14,.66) 45%,rgba(12,12,14,.34) 80%,rgba(12,12,14,.5) 100%)}
@media (prefers-reduced-motion:no-preference){
  .bg-ph img{animation:bg-in 1600ms var(--ease-out) both}
  @supports (animation-timeline:view()){
    .bg-ph picture{animation:bg-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes bg-in{from{opacity:.2;transform:scale(1.08)}}
@keyframes bg-drift{from{transform:scale(1.14) translateY(-5%)}to{transform:scale(1.14) translateY(5%)}}

/* photos move with the scroll: they arrive faint and slightly closer, then settle and drift up as they pass —
   a window onto the car. The work strip does the same while it is swiped sideways. Transform/opacity only.
   The frames clip the enlarged picture, so nothing spills sideways off the page. */
.sit-photo,.plate,.about-pic,.case-card-pic,.jx-example,.lot-pic,.work-strip li{overflow:clip}
.plate picture,.jx-example picture{display:block;overflow:clip} /* the caption under the photo stays clear of it */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sit-photo img,.plate img,.about-pic img,.case .photo img,.case-card-pic img,.jx-example img,.lot-pic img{
      animation:ph-pass linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .work-strip img{animation:ph-slide linear both;animation-timeline:view(inline);animation-range:entry 0% exit 100%}
  }
}
@keyframes ph-pass{
  0%{opacity:.15;transform:scale(1.16) translateY(5%)}
  30%{opacity:1}
  100%{opacity:1;transform:scale(1.03) translateY(-4%)}
}
@keyframes ph-slide{
  0%{opacity:.3;transform:scale(1.12)}
  35%,65%{opacity:1;transform:scale(1)}
  100%{opacity:.6;transform:scale(1.06)}
}

/* ---- motion: everything visible without JS or with reduced motion ---- */
@keyframes line-up{to{transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes open{to{clip-path:inset(0)}}
@keyframes settle{to{transform:none}}
@keyframes ink{from{opacity:.25}to{opacity:1}}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo);transition-delay:var(--d,0ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  /* headings rise out of a mask, like a number turning up in a watch window */
  .js h1[data-reveal],.js h2[data-reveal]{opacity:1;transform:translateY(.35em);
    clip-path:polygon(-10% 125%,110% 125%,110% 125%,-10% 125%);
    transition:clip-path 1000ms var(--ease-in-out),transform 1000ms var(--ease-expo);transition-delay:var(--d,0ms)}
  .js h1[data-reveal].is-in,.js h2[data-reveal].is-in{transform:none;clip-path:polygon(-10% -25%,110% -25%,110% 125%,-10% 125%)}
  /* photographs open like a shutter */
  .js .shutter{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-in-out);transition-delay:var(--d,0ms)}
  .js .shutter.is-in{clip-path:inset(0)}
  .js .shutter.zoom img{transform:scale(1.12);transition:transform 1500ms var(--ease-out);transition-delay:var(--d,0ms)}
  .js .shutter.zoom.is-in img{transform:none}
  #main{view-transition-name:main-view}
  ::view-transition-old(main-view){animation:vt-out 220ms var(--ease-exit) both}
  ::view-transition-new(main-view){animation:vt-in 560ms var(--ease-expo) both}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}