/* ==========================================================================
   Ishwar Jewellers — SECTION 03 · Gold Rings  (Phase-02, keyframe 03)
   --------------------------------------------------------------------------
   Pinned exploded-ring experience (gold), continuing into the SILVER state
   (keyframe 04, spec 8) on deeper scroll: the gold stage folds back + fades
   while the silver layer crossfades in over the same compositional framework,
   a soft light sheen crossing during the hand-off. Gold rail autoplays
   LEFT→RIGHT, silver rail RIGHT→LEFT. Gold-phase elements carry data-until
   (leave at the transformation); silver elements data-at beyond it.

   Placement values come from images/gjr-manifest.json — every piece is glued
   to the podium via the fixed 16:9 scene layer (same system as Section 02).
   ========================================================================== */

.gjr {
  --gjr-gold: #a9853c;
  --gjr-brown: #6b4d1e;
  --gjr-ink: #4a3a22;
  --gjr-body: #7a6a52;
  --gjr-ivory: #f5efe2;
  --gjr-travel: 330vh;
  position: relative;
  background: var(--gjr-ivory);
  font-family: "Jost", "Segoe UI", system-ui, sans-serif;
}

.gjr__track {
  position: relative;
  height: calc(100vh + var(--gjr-travel));
  height: calc(100svh + var(--gjr-travel));
}

.gjr__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--gjr-ivory);
}

.gjr::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, #f6efe2, rgba(246, 239, 226, 0));
}

/* ------------------------------------------------- fixed-aspect scene layer */
.gjr__view { position: absolute; inset: 0; }

.gjr__scene {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.78svh);
  aspect-ratio: 1536 / 864;
}

.gjr__scene > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ring pieces — compact (dropped) → exploded (reference), driven by --pn ----- */
.gjr__piece {
  position: absolute;
  transform: translate3d(0, calc(var(--drop) * (1 - var(--pn, 0)) * 100cqh), 0);
  transition: transform 0.18s cubic-bezier(0.25, 0.6, 0.3, 1);
  will-change: transform;
}

.gjr__scene { container-type: size; }   /* cqh = scene height for the drop math */

.gjr__piece img { width: 100%; height: auto; display: block; -webkit-user-drag: none; }

/* whole group fades in from depth on approach */
.gjr__group {
  opacity: calc(0.6 + 0.4 * min(1, var(--p, 0) * 7));
  transition: opacity 0.9s ease;
}

/* podium captions -------------------------------------------------------- */
.gjr__caption {
  position: absolute;
  width: 24%;
  text-align: center;
  color: var(--gjr-ink);
}

.gjr__caption--e { left: 29.2%; top: 57.6%; }
.gjr__caption--h { left: 49%; top: 57.6%; }

.gjr__caption h3 {
  margin: 0 0 0.35em;
  font-size: clamp(11px, 1.05cqw, 17px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gjr__caption p {
  margin: 0;
  font-size: clamp(9.5px, 0.85cqw, 14px);
  color: #6d5c40;
}

/* spec callouts with leader lines ---------------------------------------- */
.gjr__callout {
  position: absolute;
  color: #5c4a2a;
  font-size: clamp(9px, 0.82cqw, 13.5px);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.gjr__callout i {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 1px dotted rgba(122, 96, 46, 0.75);
}

.gjr__callout i::after {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(122, 96, 46, 0.85);
}

.gjr__callout--l { text-align: right; transform: translateY(-50%); }
.gjr__callout--l i { left: 100%; margin-left: 8px; transform-origin: left center; }
.gjr__callout--l i::after { right: -2px; }
.gjr__callout--r { text-align: left; transform: translateY(-50%); }
.gjr__callout--r i { right: 100%; margin-right: 8px; transform-origin: right center; }
.gjr__callout--r i::after { left: -2px; }

/* positions (scene fractions, measured from the reference) */
.gjr__callout[data-co="e1"] { right: 67.5%; top: 14.1%; }
.gjr__callout[data-co="e1"] i { width: 3.4cqw; }
.gjr__callout[data-co="e2"] { right: 67.5%; top: 25%; }
.gjr__callout[data-co="e2"] i { width: 4.6cqw; }
.gjr__callout[data-co="e3"] { right: 67.5%; top: 36%; }
.gjr__callout[data-co="e3"] i { width: 3.2cqw; }
.gjr__callout[data-co="e4"] { right: 67.5%; top: 46.8%; }
.gjr__callout[data-co="e4"] i { width: 2.6cqw; }
.gjr__callout[data-co="h1"] { left: 68.5%; top: 16.8%; }
.gjr__callout[data-co="h1"] i { width: 3.6cqw; }
.gjr__callout[data-co="h2"] { left: 68.5%; top: 27.2%; }
.gjr__callout[data-co="h2"] i { width: 3cqw; }
.gjr__callout[data-co="h3"] { left: 68.5%; top: 36.8%; }
.gjr__callout[data-co="h3"] i { width: 3.4cqw; }
.gjr__callout[data-co="h4"] { left: 68.5%; top: 47.2%; }
.gjr__callout[data-co="h4"] i { width: 2.4cqw; }

/* callout entrance: label slides toward its anchor, line draws outward */
.js .gjr .gjr__callout[data-at] { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .gjr .gjr__callout--l[data-at] { transform: translateY(-50%) translateX(-12px); }
.js .gjr .gjr__callout--r[data-at] { transform: translateY(-50%) translateX(12px); }
.js .gjr .gjr__callout[data-at].is-past { transform: translateY(-50%); }
.js .gjr .gjr__callout i { transform: scaleX(0); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.js .gjr .gjr__callout.is-past i { transform: scaleX(1); }

/* --------------------------------------------------------- editorial (left) */
.gjr__copy {
  position: absolute;
  left: clamp(20px, 7.4vw, 130px);
  top: 6.5svh;
  width: clamp(220px, 16.5vw, 285px);
  z-index: 3;
}

.gjr__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;      /* single line like the reference; may exceed the column */
  margin: 0 0 1.1vw;
  color: var(--gjr-gold);
  font-size: clamp(10px, 0.82vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.gjr__eyebrow::before,
.gjr__eyebrow::after {
  content: "";
  width: 20px;
  height: 1px;
  background: rgba(169, 133, 60, 0.7);
}

.gjr__title {
  margin: 0 0 1vw;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 58px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(160deg, #8a6420 10%, #b98f3e 45%, #6f4f1a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gjr__orn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1.2vw;
}

.gjr__orn i { width: clamp(46px, 5vw, 84px); height: 1px; background: rgba(169, 133, 60, 0.7); }

.gjr__orn::after {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--gjr-gold);
  transform: rotate(45deg);
}

.gjr__desc {
  margin: 0 0 1.7vw;
  font-size: clamp(12.5px, 1vw, 17px);
  line-height: 1.6;
  color: var(--gjr-body);
}

.gjr__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8vw;
  padding: clamp(10px, 0.95vw, 16px) clamp(18px, 1.8vw, 30px);
  border: 1px solid rgba(169, 133, 60, 0.75);
  color: var(--gjr-brown);
  background: rgba(255, 252, 244, 0.35);
  text-decoration: none;
  font-size: clamp(10px, 0.82vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-indent: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.35s ease, color 0.35s ease;
}

.gjr__cta span { font-size: 1.3em; transition: transform 0.35s ease; }
.gjr__cta:hover, .gjr__cta:focus-visible { background: var(--gjr-gold); color: #fffcf4; }
.gjr__cta:hover span { transform: translateX(5px); }

.gjr__cue {
  position: absolute;
  left: clamp(20px, 7.6vw, 132px);
  top: 60svh;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8a6f3a;
  z-index: 3;
}

.gjr__cue i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(169, 133, 60, 0.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  color: var(--gjr-gold);
  animation: gjr-pulse 2.4s ease-in-out infinite;
}

@keyframes gjr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(169, 133, 60, 0.28); }
  55%      { box-shadow: 0 0 0 8px rgba(169, 133, 60, 0); }
}

.gjr__cue span {
  font-size: clamp(9px, 0.76vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em;
  line-height: 1.9;
  text-transform: uppercase;
}

/* --------------------------------------------------------- right column */
.gjr__aside {
  position: absolute;
  right: clamp(18px, 5.6vw, 100px);
  top: 8svh;
  width: clamp(200px, 13.5vw, 230px);
  z-index: 3;
  color: var(--gjr-ink);
}

.gjr__aside-orn { margin: 0 0 1vw; color: var(--gjr-gold); font-size: clamp(14px, 1.2vw, 20px); }

.gjr__aside h3 {
  margin: 0 0 1vw;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(19px, 1.75vw, 30px);
  line-height: 1.18;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gjr-brown);
}

.gjr__aside > p {
  margin: 0 0 1.3vw;
  font-size: clamp(11.5px, 0.92vw, 15px);
  line-height: 1.55;
  color: var(--gjr-body);
}

.gjr__aside-rule { width: 56px; height: 1px; background: rgba(169, 133, 60, 0.6); margin: 0 0 1.3vw; }

.gjr__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.5svh, 18px); }

.gjr__aside li { display: flex; align-items: center; gap: 12px; font-size: clamp(11.5px, 0.92vw, 15px); line-height: 1.3; }

.gjr__aside li svg {
  flex: 0 0 clamp(20px, 1.7vw, 28px);
  height: clamp(20px, 1.7vw, 28px);
  stroke: #a8823f;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* forever mark on the silk (bottom right) */
.gjr__forever {
  position: absolute;
  right: clamp(14px, 3.4vw, 60px);
  bottom: 7svh;
  z-index: 3;
  text-align: center;
  color: #8a6f3a;
  font-size: clamp(9px, 0.78vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 2;
  text-transform: uppercase;
}

.gjr__forever::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 8px auto 0;
  background: rgba(169, 133, 60, 0.7);
}

/* ------------------------------------------------------- collection rail */
.gjr__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6svh;
  margin-inline: auto;              /* transform-free centring - the reveal animates transform */
  width: min(72vw, 1120px);
  z-index: 4;
}

.gjr__rail-items {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(8px, 1.4vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gjr__rail-items > li {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
}

.gjr__thumb {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--gjr-ink);
  font: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.gjr__thumb::before { display: none; }

.gjr__card {
  position: relative;
  width: 100%;
  aspect-ratio: 0.78;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 10px 24px rgba(40, 30, 15, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #2b2217;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.gjr__card-fullimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.gjr__thumb:hover .gjr__card-fullimg {
  transform: scale(1.08);
}

/* Top Right WhatsApp icon */
.gjr__card-wa-icon {
  position: absolute;
  top: clamp(6px, 0.8vw, 10px);
  right: clamp(6px, 0.8vw, 10px);
  z-index: 4;
  width: clamp(24px, 2.2vw, 34px);
  height: clamp(24px, 2.2vw, 34px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1);
}

.gjr__card-wa-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.gjr__card-wa-icon:hover {
  transform: scale(1.18) rotate(-6deg);
}

/* Bottom title overlay — no gradient scrim, full image stays visible */
.gjr__card-bottom-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(8px, 1vw, 14px);
  z-index: 3;
  pointer-events: none;
}

.gjr__card-bottom-gradient h4 {
  margin: 0;
  font-family: "Cinzel", "Jost", serif;
  font-size: clamp(9.5px, 0.78vw, 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gjr-ink);
  text-shadow:
    -1px -1px 0 rgba(255, 252, 244, 0.95), 1px -1px 0 rgba(255, 252, 244, 0.95),
    -1px 1px 0 rgba(255, 252, 244, 0.95), 1px 1px 0 rgba(255, 252, 244, 0.95),
    0 1px 2px rgba(255, 252, 244, 0.7);
  line-height: 1.25;
}

/* Floating animation on hover/focus only — cards stay in their default
   resting state otherwise, including the rail's initially-active thumb */
.gjr__thumb:hover .gjr__card,
.gjr__thumb:focus-visible .gjr__card {
  border-color: rgba(230, 190, 85, 0.95);
  box-shadow: 0 16px 36px rgba(180, 140, 50, 0.38), 0 0 0 2px rgba(212, 175, 55, 0.5);
  transform: translateY(-6px);
}

.gjr__thumb small::before,
.gjr__thumb small::after { content: "\2009\2014\2009"; opacity: 0.45; }

.gjr__thumb.is-active .gjr__thumb-disc { transform: scale(1.18); }
.gjr__thumb.is-active h4 { color: var(--gjr-brown); }

.gjr__thumb:hover .gjr__thumb-disc { transform: scale(1.08); }
.gjr__thumb.is-active:hover .gjr__thumb-disc { transform: scale(1.18); }

/* arrows + dots (secondary controls) */
.gjr__arrow {
  position: absolute;
  top: 34%;
  width: clamp(30px, 2.6vw, 42px);
  height: clamp(30px, 2.6vw, 42px);
  border-radius: 50%;
  border: 1px solid rgba(169, 133, 60, 0.55);
  background: rgba(255, 252, 244, 0.55);
  color: var(--gjr-gold);
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease, color 0.3s ease;
}

.gjr__arrow:hover { background: var(--gjr-gold); color: #fffcf4; }
.gjr__arrow--prev { left: calc(-1 * clamp(36px, 3.4vw, 58px)); }
.gjr__arrow--next { right: calc(-1 * clamp(36px, 3.4vw, 58px)); }

.gjr__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(8px, 1.4svh, 14px);
}

.gjr__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(169, 133, 60, 0.7);
  box-sizing: border-box;
  transition: background 0.35s ease, transform 0.35s ease;
}

.gjr__dots i.is-active { background: var(--gjr-gold); transform: scale(1.15); }

/* --------------------------------------------------------- reveal states */
.js .gjr [data-at]:not(.gjr__callout) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .gjr [data-at]:not(.gjr__callout).is-past { opacity: 1; transform: none; }
.js .gjr .gjr__callout[data-at] { opacity: 0; }
.js .gjr .gjr__callout[data-at].is-past { opacity: 1; }

/* --------------------------------------------------------------- compact */
@media (max-width: 1023px) {
  /* the section stays pinned here too (same track/stage/crossfade mechanism
     as desktop, inherited unchanged below) so the gold→silver rail
     sequence finishes playing before scrolling is allowed to move past this
     section into the next one - only the overlay content is re-laid-out and
     re-scaled for a narrow screen */
  .gjr__callout { display: none; }     /* spatial annotations don't read at this scale */
  /* the scene is far wider than the mobile crop (same cover-crop technique
     used everywhere else in this codebase), so the exploded-ring captions -
     positioned as fixed % of that wide scene - land partly off the visible
     slice at this width; hidden here the same way the callouts are above */
  .gjr__caption { display: none; }

  /* the pinned stage now frames the ring imagery to a shorter centred band
     (see .gjr__view below), leaving open space above it - the editorial
     text sits there instead of overlaying the artwork */
  .gjr__copy {
    left: 20px;
    right: 20px;
    top: 3svh;
    width: auto;
    text-align: center;
  }

  .gjr__eyebrow { justify-content: center; font-size: 10px; margin-bottom: 8px; }
  .gjr__title { font-size: clamp(24px, 7vw, 34px); margin-bottom: 8px; }
  .gjr__orn { justify-content: center; }
  .gjr__desc { display: none; }
  .gjr__cta { padding: 10px 18px; font-size: 10px; gap: 6px; }
  .gjr__cue { left: 20px; top: auto; bottom: 30svh; }

  /* the scene's cover-crop formula (see the base .gjr__scene rule) sizes
     itself off the FULL pinned stage height on mobile, which - for this
     section's off-centre two-ring composition (unlike the single-centred
     hero other sections use this same technique for) - crops in far too
     tight and leaves the rings looking oversized and off-centre. Framing
     the scene to a shorter band instead (as the section used to be sized
     before it was pinned) keeps far more of the composition in view.
     Anchored from the top (right below the copy block) and sized to reach
     down near the stage's own bottom edge, rather than centred with a
     fixed height, so the pinned viewport is filled edge-to-edge instead of
     leaving a stretch of empty background below the rail. */
  .gjr__view {
    top: 24svh;
    bottom: auto;
    height: clamp(340px, 58svh, 560px);
    overflow: hidden;
  }

  .gjr__scene {
    width: max(100%, calc(clamp(340px, 58svh, 560px) * 1.7778));
    top: 50%;
  }

  /* the secondary feature list is desktop-only real estate - on a pinned
     mobile stage there isn't room for it alongside the copy + rail without
     crowding, so it stays hidden here (the rest of the pin/crossfade still
     plays the same as desktop) */
  .gjr__aside { display: none; }
  .gjr__forever { display: none; }

  /* sits on the ring image's own bottom edge (not floating in empty space
     below it), matching how the rail overlays the podium on desktop */
  .gjr__rail {
    left: 16px;
    right: 16px;
    bottom: 2svh;
    width: auto;
    transform: none;
  }

  /* overflow-x:auto forces overflow-y to clip too (no way to scroll one
     axis and leave the other open), and with no buffer that flattened
     every card's box-shadow into a hard line along its top/bottom edge
     instead of the soft glow it has everywhere else on the site. The
     container is auto-height, so extra padding just gives the shadow
     room to render without being clipped — it doesn't shift the cards or
     need a compensating margin. The horizontal scroll edges get a fade
     mask (same technique the review cards already use) instead of a
     negative margin, which would risk pushing the rail past the viewport
     and causing page-wide horizontal scroll. */
  .gjr__rail-items {
    gap: 10px;
    overflow-x: auto;
    padding: 10px 4px 20px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    scrollbar-width: none;
  }
  .gjr__rail-items::-webkit-scrollbar { display: none; }
  .gjr__rail-items > li { flex: 0 0 108px; }
  .gjr__thumb { --disc: 76px; }
  .gjr__thumb h4 { font-size: 10px; }
  .gjr__arrow { display: none; }
}


/* ==========================================================================
   SILVER STATE (keyframe 04) - gold → silver material transformation
   ========================================================================== */

/* gold phase leaving (pinned timeline, both desktop and mobile) */
.js .gjr [data-until] { pointer-events: auto; }

.js .gjr [data-until].is-out {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.js .gjr .gjr__copy [data-until].is-out,
.js .gjr .gjr__aside [data-until].is-out { transform: translateY(-12px); }

/* the exploded gold rings fold ~2/3 back toward compact while fading */
.gjr__group.is-out { --pn: 0.35; opacity: 0 !important; }
.gjr__group.is-out .gjr__piece { transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }

/* silver scene layer: crossfades in over the gold view ---------------------- */
.gjr__view--silver {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}

.gjr__view--silver.is-past { opacity: 1; }

/* the two silver rings: controlled arrival (opacity + scale + rise) */
.gjs__ring { position: absolute; margin: 0; }

.js .gjs__ring[data-at] {
  opacity: 0;
  transform: translateY(2.4%) scale(0.94);
  transition: opacity 0.9s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.js .gjs__ring[data-at].is-past { opacity: 1; transform: none; }

.gjs__ring img { width: 100%; height: auto; display: block; -webkit-user-drag: none; }

/* soft contact shadow replacing the baked reflection */
.gjs__ring::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -2.5%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(110, 90, 60, 0.32), rgba(110, 90, 60, 0) 70%);
  z-index: -1;
}

/* subtle premium turntable sway while the silver state is active */
.gjr__view--silver.is-past .gjs__ring.is-past .gjs__turn {
  animation: gjs-turn 7s ease-in-out infinite alternate;
  transform-origin: 50% 86%;
}

@keyframes gjs-turn {
  from { transform: rotate(-1.5deg); }
  to   { transform: rotate(1.5deg); }
}

/* silver captions on the slim podium */
.gjs__caption--r1 { left: 30%; top: 56.4%; }
.gjs__caption--r2 { left: 50.4%; top: 56.4%; }

/* silver callout anchors (scene fractions from keyframe 04) */
.gjr__callout[data-co="s1"] { right: 67.8%; top: 18.6%; }
.gjr__callout[data-co="s1"] i { width: 3.4cqw; }
.gjr__callout[data-co="s2"] { right: 67.8%; top: 28.2%; }
.gjr__callout[data-co="s2"] i { width: 2.6cqw; }
.gjr__callout[data-co="s3"] { right: 67.8%; top: 38%; }
.gjr__callout[data-co="s3"] i { width: 2.4cqw; }
.gjr__callout[data-co="s4"] { right: 67.8%; top: 47.7%; }
.gjr__callout[data-co="s4"] i { width: 2.8cqw; }
.gjr__callout[data-co="sr1"] { left: 71.9%; top: 21%; }
.gjr__callout[data-co="sr1"] i { width: 5.6cqw; }
.gjr__callout[data-co="sr2"] { left: 71.9%; top: 30.3%; }
.gjr__callout[data-co="sr2"] i { width: 4cqw; }
.gjr__callout[data-co="sr3"] { left: 71.9%; top: 40.6%; }
.gjr__callout[data-co="sr3"] i { width: 4.4cqw; }

/* silver editorial: Title-case headline in solid warm brown (kf 04) */
.gjr__copy--s, .gjr__aside--s, .gjr__rail--s { z-index: 3; }

.gjr__title--s {
  text-transform: none;
  letter-spacing: 0.01em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #5d452a;
  -webkit-text-fill-color: #5d452a;
}

/* light sheen crossing the stage during the material hand-off */
.gjr__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.gjr__sheen i {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -70%;
  width: 55%;
  transform: translateX(0) skewX(-14deg);
  background: linear-gradient(90deg,
    rgba(255, 252, 244, 0) 0%, rgba(255, 252, 244, 0.5) 48%,
    rgba(255, 255, 252, 0.75) 52%, rgba(255, 252, 244, 0) 100%);
  mix-blend-mode: soft-light;
}

.gjr__sheen.is-past { animation: gjr-sheen-fade 1.7s ease-out both; }
.gjr__sheen.is-past i { animation: gjr-sheen-move 1.7s cubic-bezier(0.4, 0, 0.3, 1) both; }

@keyframes gjr-sheen-move {
  from { transform: translateX(0) skewX(-14deg); }
  to   { transform: translateX(440%) skewX(-14deg); }
}

@keyframes gjr-sheen-fade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gjr__piece { transform: none !important; transition: none; }
  .gjr__group { opacity: 1; transition: none; }
  .gjr__view--silver.is-past .gjs__ring.is-past .gjs__turn { animation: none; }
  .js .gjs__ring[data-at] { transform: none; transition: opacity 0.6s ease; }
  .gjr__sheen.is-past, .gjr__sheen.is-past i { animation: none; opacity: 0; }
  .gjr__cue i { animation: none; }
  .js .gjr [data-at] { transform: none !important; transition: opacity 0.6s ease; }
  .js .gjr .gjr__callout i { transform: none; transition: none; }
  .gjr__thumb-disc, .gjr__thumb::before { transition: none; }
}