/* ============================================================
   ANIMATIONS.CSS — keyframes, scroll entrances, hover states
   VELLMARK FOODLAB (fictional design demonstration)

   House rule: if JS writes a transform every frame, nothing in
   this file may put a transition on that same property.
   ============================================================ */

/* ============================================================
   Scroll entrances
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.955);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal.is-in,
.reveal-left.is-in,
.reveal-right.is-in,
.reveal-scale.is-in { opacity: 1; transform: none; }

/* Below the two-column breakpoints these have no side to enter from,
   and their off-canvas start position pushes the document wider than
   the viewport before they trigger. Fall back to the vertical rise. */
@media (max-width: 1100px) {
  .reveal-left, .reveal-right { transform: translateY(30px); }
}

/* Staggered entrance. nth-child covers the no-JS case; with JS,
   app.js writes per-element delays and clears them on arrival. */
.stagger-children > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2) { transition-delay: 90ms; }
.stagger-children > .reveal:nth-child(3) { transition-delay: 180ms; }
.stagger-children > .reveal:nth-child(4) { transition-delay: 270ms; }
.stagger-children > .reveal:nth-child(5) { transition-delay: 360ms; }
.stagger-children > .reveal:nth-child(6) { transition-delay: 450ms; }
.stagger-children > .reveal:nth-child(7) { transition-delay: 540ms; }

html.js-stagger .stagger-children > .reveal { transition-delay: 0s; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero statement: resolves out of open tracking, like a lens
   finding focus. */
@keyframes titleFocus {
  0%   { opacity: 0; transform: translateY(28px); letter-spacing: 0.1em; filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); letter-spacing: -0.028em; filter: blur(0); }
}

@keyframes emberPulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.16); }
  50%      { opacity: 1;    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.05); }
}

@keyframes glowBreathe {
  0%, 100% { text-shadow: 0 0 24px rgba(245, 166, 35, 0.16); }
  50%      { text-shadow: 0 0 44px rgba(245, 166, 35, 0.36); }
}

@keyframes lineDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0.9; }
}

/* Scan drift — the cold treatment on the essay screen */
@keyframes scanDrift {
  from { background-position: 0 0; }
  to   { background-position: 0 44px; }
}

/* Cross-section: the leader lines draw themselves in */
@keyframes strokeIn {
  from { stroke-dashoffset: var(--dash, 400); }
  to   { stroke-dashoffset: 0; }
}

/* --- data-visualisation entrances ------------------------- */

/* Fig. 2 — the bezel ticks run round the dial and settle. The
   dasharray on that circle is its tick pattern, so travelling the
   offset spins the ticks rather than drawing a line. */
@keyframes dialSpin {
  from { stroke-dashoffset: 300; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}

/* Fig. 2 — the eight handover ticks, each drawn outward */
@keyframes tickOut {
  from { stroke-dashoffset: 24; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}

/* Fig. 2 — the section plane opens from the centre of the unit */
@keyframes planeIn {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Fig. 2 — the dimension rule, measured out from the centre */
@keyframes dimIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Fig. 3 — a wire, drawn along its own length */
@keyframes edgeDraw {
  from { opacity: 0; stroke-dashoffset: var(--dash, 0); }
  28%  { opacity: 1; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}

/* Fig. 3 — a node settling into place */
@keyframes nodeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Timeline marks. Both keep the ring that punches the mark through
   the connector rule, and both end where they started — the flare
   is the whole animation. */
@keyframes markIgnite {
  0%   { box-shadow: 0 0 0 5px var(--bg-surface), 0 0 0 0    rgba(245, 166, 35, 0.55); }
  55%  { box-shadow: 0 0 0 5px var(--bg-surface), 0 0 0 13px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 5px var(--bg-surface), 0 0 0 0    rgba(245, 166, 35, 0); }
}

@keyframes numIgnite {
  0%   { box-shadow: 0 0 0 6px var(--bg-deep), 0 0 20px var(--amber-glow), 0 0 0 0    rgba(245, 166, 35, 0.5); }
  55%  { box-shadow: 0 0 0 6px var(--bg-deep), 0 0 20px var(--amber-glow), 0 0 0 14px rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 6px var(--bg-deep), 0 0 20px var(--amber-glow), 0 0 0 0    rgba(245, 166, 35, 0); }
}

/* ============================================================
   Hero choreography
   ============================================================ */
.hero__eyebrow    { animation: riseIn 0.9s 0.25s var(--ease) both; }
.hero__title      { animation: titleFocus 1.15s 0.4s var(--ease) both; }
.hero__product    { animation: riseIn 0.9s 0.72s var(--ease) both; }
.hero__lede       { animation: riseIn 0.9s 0.86s var(--ease) both; }
.hero__actions    { animation: riseIn 0.9s 1.0s  var(--ease) both; }
.hero__disclaimer { animation: fadeIn 0.9s 1.15s var(--ease) both; }
.hero__rail       { animation: riseIn 1s   1.15s var(--ease) both; }
.hero__scroll     { animation: fadeIn 1.2s 1.6s  var(--ease) both; }

.hero__eyebrow-dot { animation: emberPulse 3.2s var(--ease-io) infinite; }
.hero__scroll-line { transform-origin: top; animation: lineDrop 1.4s 1.7s var(--ease) both; }
.hero__read-value  { animation: glowBreathe 5s var(--ease-io) infinite; }

/* ============================================================
   Meters fill only once their section is on screen
   ============================================================ */
.phase__bar i,
.cov__bar i {
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease);
}

.is-in .phase__bar i,
.is-in .cov__bar i,
.matrix.is-in .cov__bar i { transform: scaleX(1); }

/* No-JS fallback: without .is-in they still have to be visible */
html:not(.js-on) .phase__bar i,
html:not(.js-on) .cov__bar i { transform: scaleX(1); }

/* ============================================================
   Cross-section leader lines
   ============================================================ */
.xsec .lead-line {
  stroke-dasharray: var(--dash, 400);
  stroke-dashoffset: var(--dash, 400);
}

.figure.is-in .xsec .lead-line { animation: strokeIn 1.1s 0.35s var(--ease) forwards; }
.figure.is-in .xsec .lead-line:nth-of-type(2) { animation-delay: 0.5s; }
.figure.is-in .xsec .lead-line:nth-of-type(3) { animation-delay: 0.65s; }

.xsec .lead-text { opacity: 0; transition: opacity 0.6s 0.8s var(--ease); }
.figure.is-in .xsec .lead-text { opacity: 1; }

.xsec .ring { transform-origin: center; transform: scale(0.86); opacity: 0; transition: transform 1s var(--ease), opacity 0.7s var(--ease); }
.figure.is-in .xsec .ring { transform: scale(1); opacity: 1; }
.figure.is-in .xsec .ring--mid  { transition-delay: 0.12s; }
.figure.is-in .xsec .ring--core { transition-delay: 0.24s; }

/* ============================================================
   Cross-section: the rest of the instrument, drawn in the order
   an instrument would come up — dial, then section plane, then
   the zones (above), then the handover ticks, then the dimension.
   Nothing here touches transform on .ring, and nothing here
   touches the two elements interactions.js rotates.
   ============================================================ */

/* Everything below starts hidden inside its own keyframe rather
   than in a base rule, except where the element has to be hidden
   before the figure is reached. `both` covers the delay. */
/* These two are the pair interactions.js rotates with the pointer.
   Their origin is the centre of the unit, not the centre of the
   viewBox, and no rule in this file may transition their transform. */
.xsec__bezel,
.xsec__ticks { transform-origin: 205px 272px; }

.xsec__bezel { opacity: 0; }
.figure.is-in .xsec__bezel { animation: dialSpin 1.5s var(--ease) 0.08s both; }

.xsec__plane {
  opacity: 0;
  transform-origin: 205px 270px;
}
.figure.is-in .xsec__plane { animation: planeIn 0.75s var(--ease) 0.30s both; }

.xsec .xsec-mark { opacity: 0; }
.figure.is-in .xsec .xsec-mark { animation: fadeIn 0.5s var(--ease) 0.72s both; }

.xsec__ticks line {
  opacity: 0;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.figure.is-in .xsec__ticks line { animation: tickOut 0.5s var(--ease) both; }

/* Round the dial rather than in document order, so the handover
   ticks read as one sweep. */
.figure.is-in .xsec__ticks line:nth-child(1) { animation-delay: 0.86s; }
.figure.is-in .xsec__ticks line:nth-child(2) { animation-delay: 0.92s; }
.figure.is-in .xsec__ticks line:nth-child(3) { animation-delay: 0.98s; }
.figure.is-in .xsec__ticks line:nth-child(4) { animation-delay: 1.04s; }
.figure.is-in .xsec__ticks line:nth-child(5) { animation-delay: 1.10s; }
.figure.is-in .xsec__ticks line:nth-child(6) { animation-delay: 1.16s; }
.figure.is-in .xsec__ticks line:nth-child(7) { animation-delay: 1.22s; }
.figure.is-in .xsec__ticks line:nth-child(8) { animation-delay: 1.28s; }

.xsec .dim {
  opacity: 0;
  transform-origin: 205px 492px;
}
.figure.is-in .xsec .dim { animation: dimIn 0.8s var(--ease) 1.22s both; }

.xsec .xsec-dim { opacity: 0; }
.figure.is-in .xsec .xsec-dim { animation: fadeIn 0.55s var(--ease) 1.6s both; }

/* ============================================================
   Timelines: the phase track (04) and the process rail (11)

   Both are a rule with marks sitting on it, so both draw the rule
   first and then light the marks in sequence. The process rail
   hangs off .reveal / .is-in, which app.js already sets; the phase
   track has no .reveal of its own and gets .is-seq from
   interactions.js instead.
   ============================================================ */
.track::before,
.process::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s 0.1s var(--ease);
}

.track.is-seq::before,
.process.is-in::before { transform: scaleX(1); }

.track.is-seq .phase:nth-child(1) .phase__mark { animation: markIgnite 1s var(--ease) 0.34s both; }
.track.is-seq .phase:nth-child(2) .phase__mark { animation: markIgnite 1s var(--ease) 0.66s both; }
.track.is-seq .phase:nth-child(3) .phase__mark { animation: markIgnite 1s var(--ease) 0.98s both; }

.process.is-in .step:nth-child(1) .step__num { animation: numIgnite 0.9s var(--ease) 0.30s both; }
.process.is-in .step:nth-child(2) .step__num { animation: numIgnite 0.9s var(--ease) 0.54s both; }
.process.is-in .step:nth-child(3) .step__num { animation: numIgnite 0.9s var(--ease) 0.78s both; }
.process.is-in .step:nth-child(4) .step__num { animation: numIgnite 0.9s var(--ease) 1.02s both; }

/* No JS at all: every diagram above is simply drawn. */
html:not(.js-on) .xsec .lead-line { stroke-dashoffset: 0; }
html:not(.js-on) .xsec .lead-text,
html:not(.js-on) .xsec .xsec-mark,
html:not(.js-on) .xsec .xsec-dim,
html:not(.js-on) .xsec__bezel { opacity: 1; }
html:not(.js-on) .xsec .ring { transform: none; opacity: 1; }
html:not(.js-on) .xsec__plane,
html:not(.js-on) .xsec .dim { opacity: 1; transform: none; }
html:not(.js-on) .xsec__ticks line { opacity: 1; stroke-dashoffset: 0; }
html:not(.js-on) .pathway__svg .node,
html:not(.js-on) .pathway__svg .edge > path { opacity: 1; }
html:not(.js-on) .pathway__svg .edge > path { stroke-dashoffset: 0; }
html:not(.js-on) .track::before,
html:not(.js-on) .process::before { transform: scaleX(1); }

/* ============================================================
   Pathway schematic: assembled left to right, in the direction
   the substrate actually travels. Each node settles, then the
   wires that leave it draw themselves along their own length,
   then the regulation signals arrive last.

   interactions.js writes two custom properties per element:
   --d    the delay, taken from the element's own x
   --dash the path length, so the wire can be drawn not faded
   Both have fallbacks. If the measuring pass never runs, every
   delay is 0 and every dash is 0, and the diagram draws in one
   pass instead of in sequence.
   ============================================================ */
.pathway__svg .node { opacity: 0; }
.pathway.is-in .pathway__svg .node { animation: nodeIn 0.5s var(--ease) var(--d, 0ms) both; }

.pathway__svg .edge > path { opacity: 0; }

/* Only the substrate wires get a dash — the regulation lane already
   owns stroke-dasharray for its dashed styling, and a draw would
   cost it that. It fades in instead, late. */
.pathway__svg .edge:not(.edge--reg) > path {
  stroke-dasharray: var(--dash, 0);
  stroke-dashoffset: var(--dash, 0);
}

.pathway.is-in .pathway__svg .edge:not(.edge--reg) > path {
  animation: edgeDraw 0.62s var(--ease) var(--d, 0ms) both;
}

.pathway.is-in .pathway__svg .edge--reg > path {
  animation: fadeIn 0.5s var(--ease) var(--d, 0ms) both;
}

/* ============================================================
   Scan drift (essay screen)
   ============================================================ */
.tone-scan .section-photo__grid { animation: scanDrift 6s linear infinite; }

/* ============================================================
   Hover detail
   ============================================================ */
.hover-lift { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px var(--amber-glow); }

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.22) 48%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease);
}

.btn:hover::after { transform: translateX(120%); }
.btn--ghost::after { background: linear-gradient(112deg, transparent 36%, rgba(255, 199, 107, 0.18) 48%, transparent 60%); }

/* Card tilt — app.js writes the inline transform, this file only
   handles the shadow and the travelling highlight. */
.tilt.is-tilting { box-shadow: 0 28px 62px rgba(0, 0, 0, 0.5), 0 0 46px var(--amber-glow-s); }

.tilt__glare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--t-med) var(--ease);
  background: radial-gradient(circle 320px at var(--gx, 50%) var(--gy, 50%),
    rgba(255, 199, 107, 0.16) 0%, rgba(255, 199, 107, 0.05) 36%, rgba(255, 199, 107, 0) 64%);
}

.tilt.is-tilting .tilt__glare { opacity: 1; }

/* .reveal.is-in sets transform:none, which outranks :hover.
   Put the lift back for touch and no-JS cases. */
.note.reveal.is-in:hover,
.phase.reveal.is-in:hover { transform: translateY(-4px); }

/* ============================================================
   Photographs under the pointer

   The plates already brighten and scale on hover. Two changes:
   the push is slower, so it reads as a slow lean rather than a
   pop; and a vignette deepens underneath, because the caption
   sits over the bottom of the frame and the image is getting
   brighter beneath it exactly where it must not.
   ============================================================ */
/* Specific enough to outrank .img-fade further down this file,
   which otherwise re-declares the shorthand and takes the 1s
   back. The opacity leg has to be restated for the same reason:
   losing it would cost the loading fade. */
.card__media .card__img {
  transition: opacity 0.75s var(--ease),
              transform 1.4s var(--ease),
              filter 0.75s var(--ease);
}

.card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;                 /* over tint and scrim, under .card__sheen (4) */
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(130% 92% at 50% 100%, rgba(20, 16, 12, 0.52) 0%, rgba(20, 16, 12, 0) 68%),
    linear-gradient(to top, rgba(20, 16, 12, 0.34) 0%, rgba(20, 16, 12, 0) 46%);
  transition: opacity 0.55s var(--ease);
}

.plate:hover .card__media::after,
.maker__plate:hover .card__media::after { opacity: 1; }

/* ============================================================
   POINTER CHROME — cursor ring, spotlight, magnetics

   All three are built by interactions.js and only on a fine
   pointer with motion allowed, so these rules describe elements
   that do not exist anywhere else.
   ============================================================ */

/* --- the ring ---------------------------------------------
   A companion to the native cursor, not a replacement for it.
   The page is a long read with a scrubable chart on it; the
   I-beam and the text caret stay. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 2000;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}

.cursor__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--amber);
  border-radius: 50%;
  background: rgba(245, 166, 35, 0);
  box-shadow: 0 0 12px rgba(245, 166, 35, 0.22), inset 0 0 8px rgba(245, 166, 35, 0.08);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* --- the spotlight ----------------------------------------
   A fixed square that is translated, rather than a full-viewport
   gradient that would be repainted. Screened at 7% of the site
   amber: warm, and nowhere near enough to lift body copy off its
   ground. It sits under the motes (900) and far under the nav
   and the fiction banner (1300 / 1400), which stay at full
   contrast by construction. */
.spotlight {
  position: fixed;
  top: 0; left: 0;
  z-index: 890;
  width: 760px; height: 760px;
  margin: -380px 0 0 -380px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side,
    rgba(245, 166, 35, 0.070) 0%,
    rgba(255, 107, 53, 0.032) 44%,
    rgba(245, 166, 35, 0) 74%);
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}

html.cursor-live .cursor,
html.cursor-live .spotlight { opacity: 1; }

html.cursor-out .cursor,
html.cursor-out .spotlight { opacity: 0; }

/* over something pressable */
html.cursor-hot .cursor__ring {
  transform: scale(1.55);
  border-color: var(--amber-lt);
  background: rgba(245, 166, 35, 0.10);
  box-shadow: 0 0 22px rgba(245, 166, 35, 0.38), inset 0 0 10px rgba(245, 166, 35, 0.12);
}

html.cursor-press .cursor__ring { transform: scale(0.8); }
html.cursor-hot.cursor-press .cursor__ring { transform: scale(1.25); }

/* --- magnetic buttons -------------------------------------
   House rule: interactions.js writes transform on these every
   frame, so transform comes out of their transition list. The
   -2px hover lift it replaces is folded into the JS offset. */
.btn.magnet,
.nav__cta.magnet {
  transition: background var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

/* ============================================================
   Image fade-in

   Only images JS has confirmed are still loading get .img-fade
   and get hidden. Anything already in cache is left alone, and
   the hero photograph never participates at all — it is the LCP
   element, and its visibility must not depend on a JS transition
   that may never run.
   ============================================================ */
.img-fade { opacity: 0; transition: opacity 0.75s var(--ease), transform 1s var(--ease), filter 0.6s var(--ease); }

.section-photo__img.img-fade,
.close__img.img-fade { transition: opacity 0.75s var(--ease); }

.img-fade.is-loaded { opacity: 1; }

/* ============================================================
   Chart placeholder texture until the first frame lands
   ============================================================ */
.chart__canvas-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--labgrid-fine);
  opacity: 0.5;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.chart__canvas-wrap.is-drawn::before { opacity: 0; }

/* ============================================================
   Coarse pointer / touch
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .tilt__glare { display: none !important; }
  .card__sheen { display: none; }

  /* interactions.js never builds these on a coarse pointer; the
     rule is here so a hybrid device that reports both cannot end
     up with a ring chasing a finger. */
  .cursor, .spotlight { display: none !important; }

  /* The hover vignette has no hover to hang off, and on a tap it
     would flash. Leave the plates alone. */
  .card__media::after { display: none; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }

  .phase__bar i, .cov__bar i { transform: scaleX(1); }

  .xsec .lead-line { stroke-dashoffset: 0; }
  .xsec .lead-text { opacity: 1; }
  .xsec .ring { transform: none; opacity: 1; }
  .pathway__svg .node, .pathway__svg .edge { opacity: 1; transform: none; }

  /* The diagram sequences all end where they started, so with the
     durations crushed above they simply resolve. State them anyway
     — none of them may depend on an animation having run. */
  .pathway__svg .edge > path { opacity: 1; stroke-dashoffset: 0; }
  .xsec__bezel, .xsec .xsec-mark, .xsec .xsec-dim { opacity: 1; }
  .xsec__plane, .xsec .dim { opacity: 1; transform: none; }
  .xsec__ticks line { opacity: 1; stroke-dashoffset: 0; }
  .xsec__bezel, .xsec__ticks { transform: none !important; }
  .track::before, .process::before { transform: scaleX(1); }

  .section-photo__img, .close__img, .hero__photo-img,
  .hero__photo-grid { transform: none !important; }

  .tilt__glare, .card__sheen { display: none; }

  /* No cursor ring, no spotlight, no magnetics. interactions.js
     does not build any of it under reduced motion either. */
  .cursor, .spotlight { display: none !important; }

  .card__img, .note__avatar img { transition: none; }
  .plate:hover .card__img,
  .maker__plate:hover .card__img { transform: scale(1.01); }
}