/* Premium finish – opt-in per site ("premium": true in dealer.json). See references/auto-ux.md §4.
   No study shows these effects raise leads, so each one must be free: transform/opacity only, nothing
   touches the LCP image before it has painted, nothing moves under prefers-reduced-motion: reduce. */

@media (prefers-reduced-motion: no-preference) {
  /* Hero light sweep: one soft band crosses the photo once, 0.6 s after load (the photo is already painted).
     Sits above the scrim (::before) and below the text, inside the hero's isolation. */
  .hero-cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(100deg,transparent 35%,rgb(255 255 255/.16) 50%,transparent 65%);
    transform:translateX(-110%);animation:pf-sweep 1.6s .6s cubic-bezier(.4,0,.2,1) forwards}
  @keyframes pf-sweep{to{transform:translateX(110%)}}

  /* Press feedback – the "premium" a phone can feel (there is no cursor to play with) */
  .btn:active,.listing:active,.cat:active{transform:scale(.98);transition:transform .08s}
}

/* ===== Editorial voice: body.editorial (car-dealer sets it with "premium": true) – references/premium-feel.md =====
   Most of a "cinematic" site's premium feel is static: three type voices, numbered hairline rows, the brand set
   big at the end. No downloads: the monospace and the italic serif are system fonts; a site may override
   --font-accent with a webfont that has Cyrillic (design-tokens.md). */
.editorial{--font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono","Liberation Mono",monospace;
  --font-accent:Georgia,"Times New Roman","Noto Serif",serif}
/* voice 3: labels in a letter-spaced monospace (eyebrows, menu, spec names) */
.editorial :is(.eyebrow,.nav a,.spec-table dt,.spec-grid dt){font-family:var(--font-mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.editorial .eyebrow{font-size:.72rem}
.editorial :is(.nav a,.spec-table dt,.spec-grid dt){font-size:.74rem}
/* voice 2: the word doing the work, in italic serif – the city in the hero, or any <em> in a heading */
.editorial h1 span,.editorial :is(h1,h2) em{font-family:var(--font-accent);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.editorial .gauge .g-unit{font:italic 400 9px var(--font-accent)}
/* numbered spec rows: "01 · ПРОБЕГ ……… 128 000 км"; the number is decoration, so screen readers skip it */
.editorial .spec-table{counter-reset:pf-spec;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.editorial .spec-table div{counter-increment:pf-spec;align-items:baseline;border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent)}
.editorial .spec-table dt::before{content:counter(pf-spec,decimal-leading-zero) " · ";content:counter(pf-spec,decimal-leading-zero) " · " / "";opacity:.5}
.editorial .spec-table dd{font-variant-numeric:tabular-nums}
/* the brand edge to edge above the footer; --n = letters in the name (set by the builder) */
.editorial .wordmark{margin:0;padding:8px 16px 28px;font:500 min(calc(170vw / var(--n,8)),20rem)/.8 var(--font-display);
  letter-spacing:.01em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;color:var(--brand)}

/* The power gauge draws itself as it scrolls into view and is complete once it is fully on screen, so a
   visible gauge is never half-drawn. The number beside it never moves: animate the picture, never the data. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .editorial .gauge .g-arc{animation:pf-arc linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes pf-arc{from{stroke-dashoffset:calc((var(--f) + 1) * 1px)}} /* a length, like the 0px it animates to: a bare number would jump */

/* ===== The scroll journey (premium sites; after the Royal Cars build, but scroll-driven CSS instead of observers) =====
   Everything is driven by the scroll position, so an anchor jump (#contact), a restored scroll or a back navigation
   never leaves a section stuck invisible, and a browser without scroll timelines simply shows the finished page. */
@media (prefers-reduced-motion: no-preference) {
  /* the hero copy rises in once on load; it starts at .35 opacity, never 0, so it still counts for LCP at once */
  .editorial .hero-cover .wrap>*{animation:pf-in .95s cubic-bezier(.22,1,.36,1) both}
  .editorial .hero-cover .wrap>:nth-child(2){animation-delay:.07s}
  .editorial .hero-cover .wrap>:nth-child(3){animation-delay:.14s}
  .editorial .hero-cover .wrap>:nth-child(4){animation-delay:.21s}
  .editorial .hero-cover .wrap>:nth-child(5){animation-delay:.28s}
  .editorial .hero-cover .wrap>:nth-child(n+6){animation-delay:.35s}
  @keyframes pf-in{from{opacity:.35;transform:translateY(18px)}}

  @supports (animation-timeline: scroll()) {
    /* a hairline at the very top shows how far down the page you are */
    body.editorial::after{content:"";position:fixed;left:0;right:0;top:0;height:2px;z-index:40;pointer-events:none;
      background:linear-gradient(90deg,transparent,var(--brand) 35%,var(--accent));transform-origin:0 50%;
      animation:pf-progress linear both;animation-timeline:scroll(root)}
    @keyframes pf-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    /* the header firms up into a solid bar with a shadow over the first 160 px of scrolling */
    .editorial .site-header{animation:pf-head linear both;animation-timeline:scroll(root);animation-range:0 160px}
    @keyframes pf-head{to{background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:0 16px 36px -24px rgb(0 0 0/.95)}}
  }
  @supports (animation-timeline: view()) {
    /* section heads: the heading rises into place and the eyebrow's hairline draws itself */
    .editorial main section:not(.hero-cover) .wrap>:is(.eyebrow,h2),.editorial .section-head :is(.eyebrow,h2),.editorial .showcase :is(.eyebrow,h2){
      animation:pf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes pf-rise{from{opacity:0;transform:translateY(24px)}}
    .editorial .eyebrow::before{transform-origin:0 50%;animation:pf-draw linear both;animation-timeline:view();animation-range:entry 20% entry 90%}
    @keyframes pf-draw{from{transform:scaleX(0)}}
    /* the spotlight car's photos unveil top to bottom as they scroll in – complete once fully on screen, never half-shown */
    .editorial .mosaic img{animation:pf-unveil linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    .editorial .mosaic img:nth-child(2){animation-range:entry 15% entry 100%}
    .editorial .mosaic img:nth-child(3){animation-range:entry 30% entry 100%}
    @keyframes pf-unveil{from{clip-path:inset(0 0 100% 0 round var(--radius));transform:scale(1.05)}to{clip-path:inset(0 0 0 0 round var(--radius));transform:none}}
  }
}

/* Desktop with a real mouse only: cursor effects mean nothing on touch screens */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Cursor light on [data-light] blocks (premium.js moves it with transform: no repaint per move) */
  .pf-light{position:absolute;left:0;top:0;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;z-index:-1;
    background:radial-gradient(closest-side,rgb(255 255 255/.17),rgb(255 255 255/.05) 55%,transparent);
    pointer-events:none;opacity:0;transition:opacity .35s}
  .pf-lit>.pf-light{opacity:1;will-change:transform}

  /* Photo sheen: a light band crosses the card photo on hover – never over text or prices */
  .listing .media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 30%,rgb(255 255 255/.26) 48%,transparent 66%);
    transform:translateX(-120%);transition:transform .7s cubic-bezier(.4,0,.2,1)}
  .listing:hover .media::after{transform:translateX(120%)}

  /* Light crosses the main buttons on hover (the background moves inside a still box: the glow outside stays) */
  .editorial .btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(110deg,transparent 38%,rgb(255 255 255/.5) 50%,transparent 62%) no-repeat;
    background-size:260% 100%;background-position:130% 0;transition:background-position .8s cubic-bezier(.22,1,.36,1)}
  .editorial .btn-primary:hover::before{background-position:-30% 0}

  /* Car cards lean toward the cursor (max 5°) with a soft glare (premium.js sets the variables) */
  .editorial .listing.pf-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);
    transition:transform .08s linear}
  .editorial .listing .media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgb(255 255 255/.13),transparent 60%)}
  .editorial .listing.pf-tilt .media::before{opacity:1}
}