/* ==========================================================================
 * home.css — the gallery walk.
 *
 * Loaded after styles.css on the homepage, the gallery and the photograph
 * pages (every page whose <main> carries .gw-page). scrollcraft.css is loaded
 * BEFORE styles.css on those pages, so the site's own body, button and form
 * rules win over the engine's floor; only the engine's device rules
 * (.sc-stage, [data-sc-cue], [data-sc-pan] …) are meant to survive, and they
 * do because nothing in styles.css names them.
 *
 * Brand: warm editorial, gallery-white, unhurried (Chris, 2026-09-03).
 * One accent, the olive the site already had. Serif titles because Chris chose
 * Playfair for the homepage on 2026-09-02; the Fonts panel injects Inter with
 * !important on every heading, so the title rules here carry !important and
 * a higher specificity, the same way styles.css already does for .home-page.
 * ========================================================================== */

:root {
  --sc-canvas: #ffffff;
  --sc-surface: #f6f3ee;
  --sc-ink: #1f1f1f;
  --sc-ink-soft: #5f5b55;
  --sc-accent: #6f7f52;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Playfair Display", Georgia, serif;
  --sc-font-text: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-shadow-color: 30 20% 18%;

  --gw-gutter: clamp(13px, 4vw, 40px);
  --gw-wall-a: #f5f0e7;
  --gw-wall-b: #e6dfd2;
  --gw-wall-ink: #5a4d3e;
}

/* The engine's floor sets a few things the site does not want. */
main.gw-page ::selection { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------- labels -- */
.gw-label { display: grid; gap: 14px; align-content: start; }
.gw-label-row {
  display: flex; gap: 10px; align-items: baseline;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-text);
}
.gw-num { font-variant-numeric: tabular-nums; }
.gw-count { color: var(--muted); font-weight: 700; }

main.gw-page .gw-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.4rem) !important;
  line-height: 1.08; letter-spacing: -.02em; font-weight: 700;
  text-wrap: balance;
}
main.gw-page h1.gw-title { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.5rem) !important; line-height: 1.04; }

.gw-facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.gw-fact {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: .93rem; line-height: 1.5;
}
.gw-fact dt {
  margin: 0; padding-top: .22em;
  color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.gw-fact dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; text-wrap: pretty; overflow-wrap: anywhere; }
.gw-cta { justify-self: start; margin-top: 4px; }
@media (max-width: 620px) { .gw-cta { justify-self: stretch; } }

/* ---------------------------------------------------------------- hero -- */
/* Object 01. On a phone the photograph is the one thing on the site that runs
   edge to edge and is cropped to the screen (Chris relaxed the rule for the
   hero only, 2026-09-03). Everywhere else, whole, at its own shape. */
.gw-hero { display: grid; gap: 18px; padding: 0 0 clamp(28px, 6vh, 56px); }
.gw-hero-media { display: block; background: var(--soft); }
.gw-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, auto); }

@media (max-width: 860px) {
  .gw-hero-media { margin-inline: calc(50% - 50vw); }
  .gw-hero-media img { height: clamp(300px, 58svh, 620px); width: 100%; object-fit: cover; }
}
@media (min-width: 861px) {
  .gw-hero {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(28px, 4vw, 56px); align-items: start;
    padding-top: clamp(20px, 3vh, 36px);
  }
  .gw-hero-media { background: transparent; }
  .gw-hero-media img { max-height: 78vh; object-fit: contain; object-position: left top; border: 1px solid var(--line); }
  .gw-hero-label { position: sticky; top: 24px; }
}

/* ---------------------------------------------------------------- walk -- */
.gw-walk { margin: clamp(20px, 4vh, 44px) 0 0; }
.gw-rail { display: grid; gap: clamp(30px, 6vh, 60px); }

.gw-index-head, .gw-rail-end .gw-index-head {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.06; letter-spacing: -.02em; font-weight: 700;
}
.gw-index-intro { margin: 10px 0 0; color: var(--muted); max-width: 48ch; line-height: 1.6; }
.gw-index-list {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 18px;
  border-top: 1px solid var(--line);
}
.gw-index-list li { border-bottom: 1px solid var(--line); }
.gw-index-list a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 8px; align-items: baseline;
  min-height: 40px; padding: 9px 0;
  text-decoration: none; color: var(--ink); font-size: .86rem; line-height: 1.35;
}
.gw-index-list a:hover .gw-index-title { text-decoration: underline; text-underline-offset: .2em; }
.gw-index-list .gw-num { color: var(--accent-text); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.gw-index-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gw-object { display: grid; gap: 14px; }
.gw-object-media { display: block; text-decoration: none; }
.gw-object-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--ar, auto);
  background: var(--tile-tint, var(--soft)); border: 1px solid var(--line);
}
main.gw-page .gw-object-label .gw-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem) !important; }
.gw-object-label .gw-fact { font-size: .88rem; padding: 7px 0; }
.gw-rail-end { display: grid; gap: 14px; padding: 18px 0 8px; border-top: 1px solid var(--line); }
.gw-rail-end .btn { justify-self: start; }
@media (max-width: 620px) { .gw-rail-end .btn { justify-self: stretch; } }

/* Wide: the collection is a wall you walk along. The stage pins and the rail
   travels sideways under the scroll; every photograph is shown at one height,
   whole, so widths vary with each frame's own shape, the way a hung row does.
   Before the engine mounts (or without JavaScript) the stage is a plain
   scroll region, so nothing is ever unreachable. */
@media (min-width: 861px) {
  .gw-walk { margin-inline: calc(50% - 50vw); }
  .gw-walk-stage { display: flex; align-items: center; }
  html:not(.sc-ready) .gw-walk-stage { overflow-x: auto; }
  .gw-rail {
    display: flex; align-items: flex-start; width: max-content;
    gap: clamp(40px, 4.5vw, 80px); padding: 0 clamp(28px, 5vw, 80px);
  }
  .gw-rail-lead { flex: 0 0 auto; width: clamp(22rem, 30vw, 31rem); align-self: center; }
  .gw-rail-lead .gw-index-list { grid-template-columns: 1fr 1fr; }
  .gw-object { flex: 0 0 auto; max-width: 60vw; align-self: center; }
  .gw-object-media img { height: min(50vh, 560px); width: auto; max-width: 60vw; object-fit: contain; }
  /* The label wraps at the photograph's width rather than widening the
     object: contain keeps its intrinsic width out of the flex item's size. */
  .gw-object-label { max-width: 34rem; contain: inline-size; }
  .gw-rail-end { flex: 0 0 auto; width: clamp(18rem, 22vw, 24rem); align-self: center; border: 0; }
}

/* ---------------------------------------------------------------- wall -- */
/*
 * The signature move. Four phases, each a 0..1 number derived from the act's
 * progress (--sc-p, published by the engine on the act element and inherited
 * here). Everything that moves is transform or opacity.
 *
 *   --t   0.04 → 0.44   the photograph lifts off the page and shrinks to its hung size
 *   --tf  0.34 → 0.48   the frame closes around it
 *   --ts  0.42 → 0.58   the shadow lands on the wall
 *   --td  0.56 → 0.72   the dimension lines draw to the product's real size
 *   copy  0.64 →        the label arrives (an engine cue) and holds to the end
 */
.gw-wall { margin: clamp(36px, 7vh, 88px) calc(50% - 50vw) 0; }
/* No `position` here: the engine's .sc-stage makes this sticky, and a rule of
   equal specificity later in the cascade would silently un-pin it. */
.gw-wall-stage {
  height: 100vh; height: 100svh; overflow: clip;
  --t:  clamp(0, calc((var(--sc-p, 0) - 0.04) / 0.40), 1);
  --tf: clamp(0, calc((var(--sc-p, 0) - 0.34) / 0.14), 1);
  --ts: clamp(0, calc((var(--sc-p, 0) - 0.42) / 0.16), 1);
  --td: clamp(0, calc((var(--sc-p, 0) - 0.56) / 0.16), 1);
  --hang-w: 62vw;            /* hung width on a phone */
  --s0: 1.42;                /* starting scale: the column width, roughly */
  --hang-drop: 16svh;        /* how far below its hook it starts */
  /* Below the phone header, which stays pinned (folded to the brand row, about
     60px) over the stage; the top dimension line needs its own room above the
     frame as well. */
  --hang-top: 19svh;
  --fw: calc(var(--hang-w) * 0.052);
  --dim-gap: 22px;
}
.gw-wall-surface {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, var(--gw-wall-a) 0%, #ece6da 52%, var(--gw-wall-b) 100%);
}
.gw-wall-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12%;
  background: linear-gradient(180deg, #d8cfc0, #cbc1b1);
  border-top: 1px solid rgba(60, 45, 30, .18);
}
main.gw-page .gw-wall-lead {
  position: absolute; z-index: 3; left: var(--gw-gutter); top: clamp(64px, 9svh, 96px); margin: 0;
  max-width: 16ch;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.2rem) !important;
  line-height: 1.08; letter-spacing: -.02em; color: var(--ink);
}

.gw-hang {
  position: absolute; z-index: 2;
  left: 50%; top: var(--hang-top);
  width: var(--hang-w); aspect-ratio: var(--ar, 1.25);
  transform-origin: 50% 50%;
  transform: translate3d(-50%, calc((1 - var(--t)) * var(--hang-drop)), 0)
             scale(calc(var(--s0) + (1 - var(--s0)) * var(--t)));
  will-change: transform;
}
.gw-hang-print { position: absolute; inset: 0; z-index: 2; margin: 0; overflow: hidden; background: var(--soft); }
.gw-hang-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw-hang-frame {
  position: absolute; z-index: 1; inset: calc(-1 * var(--fw));
  border: var(--fw) solid var(--frame, #3b2a1e);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  opacity: var(--tf);
  transform: scale(calc(0.955 + 0.045 * var(--tf)));
  will-change: transform, opacity;
}
/* The recess of a floating frame: the canvas sits a little inside it. */
.gw-hang-frame::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 calc(var(--fw) * 0.9) rgba(0, 0, 0, .38);
}
.gw-hang-shadow {
  position: absolute; z-index: 0; inset: calc(-1 * var(--fw));
  transform: translate(2.5%, 5.5%);
  background: rgba(45, 32, 20, .45);
  filter: blur(calc(var(--hang-w) * 0.035));
  opacity: var(--ts);
  will-change: opacity;
}
.gw-dim {
  position: absolute; z-index: 3; opacity: var(--td);
  color: var(--gw-wall-ink);
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gw-dim-w { left: calc(-1 * var(--fw)); right: calc(-1 * var(--fw)); top: calc(-1 * var(--fw) - var(--dim-gap) - 22px); height: 22px; }
.gw-dim-w::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gw-wall-ink);
  transform: scaleX(var(--td)); transform-origin: 0 50%;
}
.gw-dim-w::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 7px;
  border-left: 1px solid var(--gw-wall-ink); border-right: 1px solid var(--gw-wall-ink);
}
.gw-dim-w span { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); }
.gw-dim-h { top: calc(-1 * var(--fw)); bottom: calc(-1 * var(--fw)); right: calc(-1 * var(--fw) - var(--dim-gap)); width: 1px; }
.gw-dim-h::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--gw-wall-ink);
  transform: scaleY(var(--td)); transform-origin: 50% 0;
}
.gw-dim-h::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; width: 7px;
  border-top: 1px solid var(--gw-wall-ink); border-bottom: 1px solid var(--gw-wall-ink);
}
.gw-dim-h span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }

.gw-wall-copy {
  position: absolute; z-index: 4;
  left: var(--gw-gutter); right: var(--gw-gutter); bottom: clamp(14px, 4svh, 40px);
}
.gw-wall-label {
  gap: 10px; padding: 16px 18px 18px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
  box-shadow: 0 14px 34px -18px rgba(45, 32, 20, .45);
}
main.gw-page .gw-wall-label .gw-title { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem) !important; }
.gw-wall-label .gw-facts { border-top-color: var(--line); }
.gw-wall-label .gw-fact { padding: 7px 0; font-size: .9rem; }
.gw-fact-frame dd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gw-swatches { display: inline-flex; gap: 8px; }
main.gw-page .gw-swatch {
  width: 34px; height: 34px; min-height: 34px; padding: 0; margin: 0;
  border-radius: 50%; border: 1px solid rgba(0, 0, 0, .22);
  background: var(--sw, #888); box-shadow: inset 0 0 0 2px #fff;
  cursor: pointer; transition: transform .16s ease;
}
main.gw-page .gw-swatch:hover { background: var(--sw, #888); color: inherit; transform: scale(1.06); }
main.gw-page .gw-swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.gw-frame-name { color: var(--muted); font-size: .86rem; }

@media (min-width: 861px) {
  .gw-wall-stage {
    --hang-w: min(36vw, calc(58vh * var(--ar, 1.25)));
    --s0: 1.6;
    --hang-drop: 14vh;
    --hang-top: calc(50% - (var(--hang-w) / var(--ar, 1.25)) / 2);
    --dim-gap: 28px;
  }
  .gw-hang { left: 31%; }
  main.gw-page .gw-wall-lead { top: clamp(20px, 4vh, 40px); }
  .gw-wall-copy {
    left: auto; right: 6vw; top: 0; bottom: 0; width: min(34rem, 36vw);
    display: flex; align-items: center;
  }
  .gw-wall-label { padding: 24px 26px 26px; }
}

/* Without motion, or without the engine, the photograph is simply hung. */
@media (prefers-reduced-motion: reduce) {
  .gw-wall-stage { --t: 1; --tf: 1; --ts: 1; --td: 1; }
  main.gw-page .gw-wall-lead { display: none; }
}
html:not(.sc-ready) .gw-wall-stage { --t: 1; --tf: 1; --ts: 1; --td: 1; }
html:not(.sc-ready) .gw-wall [data-sc-cue] { opacity: 1; }
html:not(.sc-ready) main.gw-page .gw-wall-lead { display: none; }

/* A static copy of the wall, for the photograph page: hung, no act. */
.gw-wall-static { margin-top: clamp(24px, 5vh, 48px); }
.gw-wall-static .gw-wall-stage { position: relative; --t: 1; --tf: 1; --ts: 1; --td: 1; height: clamp(440px, 72svh, 640px); }
.gw-wall-static [data-sc-cue] { opacity: 1; }
.gw-wall-static .gw-hang { top: 12svh; }
/* On a phone the label flows under the hung print instead of floating over
   it: the stage grows to fit, and the floor stays at its foot. */
@media (max-width: 860px) {
  .gw-wall-static .gw-wall-stage { --hang-top: 64px; height: auto; padding-bottom: 20px; }
  .gw-wall-static .gw-hang { top: var(--hang-top); }
  .gw-wall-static .gw-wall-copy {
    position: relative; left: auto; right: auto; bottom: auto;
    margin: 0 var(--gw-gutter);
    padding-top: calc(var(--hang-top) + var(--hang-w) / var(--ar, 1.25) + var(--fw) + 36px);
  }
}
@media (min-width: 861px) { .gw-wall-static .gw-hang { top: calc(47% - (var(--hang-w) / var(--ar, 1.25)) / 2); } }

/* -------------------------------------------------------------- plates -- */
.gw-plate { padding: clamp(36px, 7vh, 72px) 0 clamp(12px, 3vh, 28px); max-width: 62ch; }
.gw-plate-eyebrow { margin: 0 0 12px; color: var(--accent-text); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
main.gw-page .gw-plate-heading {
  margin: 0 0 18px;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.8rem) !important;
  line-height: 1.06; letter-spacing: -.025em; font-weight: 700; text-wrap: balance;
}
.gw-plate-text { margin: 0 0 14px; color: var(--ink); font-size: 1.04rem; line-height: 1.72; text-wrap: pretty; }
.gw-plate-link { display: inline-block; margin-top: 4px; padding: 4px 0; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .26em; }

/* --------------------------------------------------------------- close -- */
.gw-close { margin-top: clamp(30px, 6vh, 64px); padding: clamp(40px, 8vh, 96px) 0 clamp(20px, 4vh, 40px); border-top: 1px solid var(--line); }
.gw-close-label { max-width: 64ch; }
.gw-close-label .gw-fact { grid-template-columns: 6rem minmax(0, 1fr); }
.gw-close-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .26em; }
@media (max-width: 620px) {
  .gw-fact, .gw-close-label .gw-fact { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 10px; }
}

/* ---------------------------------------------------- flow reveals, engine -- */
/* The engine hides [data-sc-in] until it fires. Without the engine (script
   blocked, very old browser) the content must still be there. */
html:not(.sc-ready) [data-sc-in], html:not(.sc-ready) [data-sc-stagger] > * { opacity: 1; transform: none; }

/* ------------------------------------------------------- photograph page -- */
.gw-photo { display: grid; gap: 22px; padding-top: clamp(14px, 3vh, 30px); }
.gw-photo-media { margin: 0; background: var(--soft); }
.gw-photo-media img { display: block; width: 100%; height: auto; max-height: 74svh; object-fit: contain; border: 1px solid var(--line); background: var(--soft); }
.gw-photo-stage { display: grid; gap: 12px; align-content: start; min-width: 0; }
.gw-photo-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
main.gw-page .gw-photo-quickbuy { width: auto; min-height: 44px; padding: 0 18px; }
@media (max-width: 860px) { .gw-photo-quickbuy { display: none; } } /* the buy bar carries it on a phone */
.gw-photo-desc { margin: 0; color: var(--muted); line-height: 1.7; }
.gw-buy { display: grid; gap: 14px; scroll-margin-top: 90px; }
.gw-buy-head { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
@media (min-width: 861px) {
  .gw-photo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
  .gw-photo-stage { position: sticky; top: 24px; }
  .gw-photo-media img { max-height: 82vh; object-position: left top; }
}
/* A bar that stays at the bottom of a phone screen with the price on it, so
   the buying step is one tap from anywhere on the page. */
.gw-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(31, 31, 31, .5);
  backdrop-filter: blur(10px);
}
.gw-buybar-price { display: grid; gap: 2px; font-size: .8rem; color: var(--muted); line-height: 1.3; min-width: 0; text-decoration: none; }
.gw-buybar-price strong { color: var(--ink); font-size: .9rem; line-height: 1.25; }
main.gw-page .gw-buybar .btn { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 16px; }
body.has-buybar { padding-bottom: 76px; }
@media (min-width: 861px) { .gw-buybar { display: none; } body.has-buybar { padding-bottom: 0; } }

/* ---------------------------------------------------- motion on a phone -- */
/* The page ground follows the engine's drift (paper through the walk, the
   wall's own tint at the wall, white again at the close). styles.css paints
   body white; on the walk pages the canvas token wins. */
html:has(main.gw-page) body { background: var(--sc-canvas, #ffffff); }

.gw-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

@media (max-width: 860px) {
  /* The hero photograph moves a little slower than the page; the box clips the
     overshoot so no edge ever shows. */
  .gw-hero-media { overflow: hidden; }
  .gw-hero-media img { height: clamp(330px, 64svh, 680px); margin-top: -6svh; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-hero-media img { margin-top: 0; }
}

/* ------------------------------------------------------------- touch -- */
/* The tapped photograph morphs into its page. Browsers without cross-document
   view transitions ignore the whole block. */
@view-transition { navigation: auto; }
::view-transition-old(enc-photo), ::view-transition-new(enc-photo) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Press feedback: everything tappable gives a little under the thumb. */
main.gw-page .btn, .gw-buybar .btn, .gw-object-media, .gw-hero-media, .gw-index-list a, .gw-swatch, .photo-tile {
  transition: transform 140ms cubic-bezier(.2, .7, .2, 1), opacity 140ms ease;
}
@media (hover: none) {
  main.gw-page .btn:active, .gw-buybar .btn:active { transform: scale(.97); }
  .gw-object-media:active, .gw-hero-media:active, .photo-tile:active { transform: scale(.985); }
  .gw-index-list a:active { opacity: .55; }
  .gw-swatch:active { transform: scale(.88); }
}

/* The frame takes its new colour with a short fade and a settle, not a snap. */
.gw-hang-frame { transition: border-color 260ms ease; }
.gw-hang.gw-hang-settle { animation: gw-settle 360ms cubic-bezier(.2, .7, .2, 1); }
@keyframes gw-settle {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}
/* The moment the frame closes, its shadow deepens once. */
.gw-wall-framed .gw-hang-shadow { animation: gw-shadow-land 420ms ease-out; }
@keyframes gw-shadow-land {
  0% { transform: translate(1.5%, 3%); }
  100% { transform: translate(2.5%, 5%); }
}

/* The buy bar arrives once the reader has moved past the title. */
.gw-buybar { transform: translateY(110%); transition: transform 320ms cubic-bezier(.2, .7, .2, 1); }
.gw-buybar.is-on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gw-buybar { transition: none; }
  main.gw-page .btn, .gw-object-media, .gw-hero-media, .gw-swatch, .photo-tile { transition: none; }
  .gw-hang.gw-hang-settle, .gw-wall-framed .gw-hang-shadow { animation: none; }
}

/* Without JavaScript the bar simply stays in place. */
html:not(.sc-ready) .gw-buybar { transform: none; }