/* ==========================================================================
   Ishwar Jewellers — collection stage (ivory & champagne gold)
   --------------------------------------------------------------------------
   A tall track pins a 100vh stage (position: sticky). stage.js maps the scroll
   progress through the track to the horizontal choreography of five physical
   display units. Only transform / opacity / filter are animated.
   ========================================================================== */

:root {
  --gj-ivory: #f4eee4;
  --gj-gold: #b8923c;
  --gj-gold-light: #d9bb70;
  --gj-gold-soft: rgba(184, 146, 60, 0.55);
  --gj-bronze: #7a5b23;
  --gj-ink: #3d2d10;
  --gj-serif: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --gj-travel: 400vh;            /* scroll length of the choreography (stage is 100vh on top of it) */
  --gj-hero-h: 58svh;            /* height of the hero display when centred */
  --gj-baseline: 21.5%;          /* where the pedestals stand, from the stage bottom */
  --gj-header-h: clamp(96px, 15vh, 150px);
}

@supports not (height: 100svh) {
  :root { --gj-hero-h: 58vh; }
}

/* --------------------------------------------------------------------------
   Track + pinned stage
   -------------------------------------------------------------------------- */
.gj-section {
  position: relative;
  background: var(--gj-ivory);
  color: var(--gj-bronze);
  font-family: var(--gj-serif);
}

/* one extra viewport at the end of the track is the curtain hold: the stage stays
   pinned while the next section (margin-top: -100svh) rises over it */
.gj-track {
  position: relative;
  height: calc(200vh + var(--gj-travel));
  height: calc(200svh + var(--gj-travel));
}

.gj-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--gj-ivory);
  -webkit-user-select: none;
  user-select: none;
}

/* Environment ------------------------------------------------------------- */
/* hero -> next section: as the About section rises over the pinned stage, the
   stage recedes a touch (--cover is written by js/sections.js, eased) */
.gj-stage {
  transform: translate3d(0, calc(var(--cover, 0) * -4%), 0) scale(calc(1 - var(--cover, 0) * 0.04));
  transform-origin: 50% 35%;
}

.gj-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: #2a1e0c;
  opacity: calc(var(--cover, 0) * 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .gj-stage { transform: none; }
}

.gj-env {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.05);
  transform-origin: 50% 62%;
  will-change: transform;
}

.gj-env img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
}

/* lighting layers (all transform / opacity) -------------------------------- */
.gj-light {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  /* the light stays out of the header band so the navigation is never washed out */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--gj-header-h), rgba(0, 0, 0, 1) calc(var(--gj-header-h) + 90px));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--gj-header-h), rgba(0, 0, 0, 1) calc(var(--gj-header-h) + 90px));
}

/* warm bloom in the arch: brightens when a display is presented (JS opacity on the
   layer), and breathes slowly (animation on the pseudo-element, so both compose) */
.gj-light--bloom {
  inset: -6% -8%;
  z-index: 1;
}

.gj-light--bloom::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 34% at 50% 44%, rgba(255, 244, 214, 0.55), rgba(255, 244, 214, 0) 70%),
    radial-gradient(ellipse 42% 12% at 50% 78%, rgba(255, 236, 196, 0.5), rgba(255, 236, 196, 0) 70%);
  animation: gj-breathe 9s ease-in-out infinite;
}

/* a wide, very soft band of light that drifts across the gold architecture with the scroll */
.gj-light--sheen {
  inset: -10% -30%;
  z-index: 2;
  background: linear-gradient(100deg,
    rgba(255, 250, 236, 0) 30%, rgba(255, 250, 236, 0.32) 46%, rgba(255, 255, 250, 0.42) 50%,
    rgba(255, 250, 236, 0.32) 54%, rgba(255, 250, 236, 0) 70%);
  mix-blend-mode: soft-light;
}

/* warm pool on the marble under the hero position */
.gj-light--floor {
  left: 50%;
  bottom: 12%;
  width: 46vw;
  height: 12vh;
  z-index: 4;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 224, 160, 0.42), rgba(255, 224, 160, 0) 68%);
}

@keyframes gj-breathe {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}

.gj-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 74% at 50% 50%, rgba(110, 82, 34, 0) 60%, rgba(110, 82, 34, 0.12) 100%),
    linear-gradient(to top, var(--gj-ivory) 0%, rgba(244, 238, 228, 0) 7%);
}

/* --------------------------------------------------------------------------
   Header (logo centred, links either side, menu icon right — as the reference)
   -------------------------------------------------------------------------- */
.gj-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--gj-header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 0 clamp(20px, 4vw, 72px);
}

/* translucent ivory band behind the navigation row: frosted, softly fading out */
.gj-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(248, 244, 237, 0.8) 0%, rgba(248, 244, 237, 0.6) 55%, rgba(248, 244, 237, 0.24) 82%, rgba(248, 244, 237, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
}

/* whisper of shadow under the nav row so the text sits on something */
.gj-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--gj-header-h) * 0.62);
  height: 26px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(90, 66, 30, 0.07), rgba(90, 66, 30, 0));
  pointer-events: none;
}

.gj-nav {
  display: flex;
  gap: clamp(20px, 3.6vw, 64px);
  margin-top: calc(var(--gj-header-h) * 0.4);
}

.gj-nav--right {
  justify-content: flex-end;
  padding-right: clamp(44px, 5vw, 96px);
}

.gj-nav a {
  position: relative;
  color: var(--gj-ink);
  text-decoration: none;
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(248, 244, 237, 0.9);
  transition: color 0.3s ease;
}

.gj-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--gj-gold);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}

.gj-nav a.is-active,
.gj-nav a:hover,
.gj-nav a:focus-visible { color: #9a7429; }

.gj-nav a.is-active::after,
.gj-nav a:hover::after { transform: scaleX(1); }

.gj-logo {
  display: block;
  margin-top: 6px;
  width: clamp(140px, 12vw, 230px);
  filter: drop-shadow(0 2px 12px rgba(255, 248, 230, 0.8));
}

.gj-logo img { display: block; width: 100%; height: auto; }

/* thin gold rule across the header at the wordmark line, interrupted around the logo */
.gj-rule {
  position: absolute;
  top: calc(var(--gj-header-h) * 0.8);
  height: 1px;
  background: linear-gradient(to right, rgba(184, 146, 60, 0.15), rgba(184, 146, 60, 0.7));
  pointer-events: none;
}

.gj-rule--left { left: 0; right: calc(50% + clamp(120px, 11vw, 210px)); }

.gj-rule--right {
  left: calc(50% + clamp(120px, 11vw, 210px));
  right: 0;
  background: linear-gradient(to left, rgba(184, 146, 60, 0.15), rgba(184, 146, 60, 0.7));
}

.gj-rule::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gj-gold);
  background: var(--gj-ivory);
  transform: rotate(45deg);
}

.gj-rule--left::after { right: -4px; }
.gj-rule--right::after { left: -4px; }

.gj-menu-btn {
  position: absolute;
  right: clamp(20px, 4vw, 72px);
  top: calc(var(--gj-header-h) * 0.4 - 9px);
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gj-menu-btn span {
  display: block;
  height: 1.5px;
  background: var(--gj-ink);
  transition: transform 0.35s ease, opacity 0.3s ease;
}


.gj-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(247, 243, 236, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.45s;
}

.gj-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

html.gj-menu-open { overflow: hidden; }

.gj-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.gj-menu.is-open .gj-menu__list { transform: none; }

.gj-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gj-menu li + li { margin-top: 26px; }

.gj-menu.is-open li { opacity: 1; transform: none; }
.gj-menu.is-open li:nth-child(1) { transition-delay: 0.08s; }
.gj-menu.is-open li:nth-child(2) { transition-delay: 0.13s; }
.gj-menu.is-open li:nth-child(3) { transition-delay: 0.18s; }
.gj-menu.is-open li:nth-child(4) { transition-delay: 0.23s; }
.gj-menu.is-open li:nth-child(5) { transition-delay: 0.28s; }
.gj-menu.is-open li:nth-child(6) { transition-delay: 0.33s; }

.gj-menu a {
  color: var(--gj-ink);
  text-decoration: none;
  font-family: var(--gj-serif);
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.gj-menu a:hover,
.gj-menu a:focus-visible { color: var(--gj-gold); }

/* close (X) in the same top-right spot as the hamburger */
.gj-menu__close {
  position: absolute;
  right: clamp(20px, 4vw, 72px);
  top: calc(var(--gj-header-h) * 0.4 - 15px);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.35s ease 0.15s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, color 0.3s ease;
  color: var(--gj-ink);
}

.gj-menu.is-open .gj-menu__close { opacity: 1; transform: none; }
.gj-menu__close:hover,
.gj-menu__close:focus-visible { color: var(--gj-gold); }

.gj-menu__close span {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1.5px;
  background: currentColor;
}

.gj-menu__close span:first-child { transform: rotate(45deg); }
.gj-menu__close span:last-child { transform: rotate(-45deg); }

.gj-menu__close::after {
  content: "Close";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  font-family: var(--gj-serif);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Display units: dome + frame + pedestal + name + jewellery + shadow + reflection
   -------------------------------------------------------------------------- */
.gj-displays {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.gj-display {
  position: absolute;
  left: 50%;
  bottom: var(--gj-baseline);
  height: calc(var(--gj-hero-h) * var(--size, 1));
  transform: translateX(-50%);
}

.gj-display.is-hidden { visibility: hidden; }

.gj-display__unit {
  position: relative;
  height: 100%;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

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

/* the unit's reflection in the polished marble: strong at the pedestal, softer with
   distance, long enough that the jewellery itself is mirrored in the floor */
.gj-display__reflection {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  transform: translateY(74%) scaleY(-0.74);   /* mirror about the pedestal's bottom edge, foreshortened so the jewellery's reflection stays in view */
  transform-origin: 50% 0;
  opacity: 0.62;
  filter: saturate(1.25) contrast(1.08);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.28) 84%, rgba(0, 0, 0, 0) 96%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.62) 62%, rgba(0, 0, 0, 0.28) 84%, rgba(0, 0, 0, 0) 96%);
}

/* contact shadow / ambient occlusion under the plate */
.gj-display__shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -2.2%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(92, 68, 30, 0.42), rgba(92, 68, 30, 0) 70%);
  z-index: -1;
}

/* golden light sweep: clipped to the jewellery box, masked by the display's own alpha,
   blended so gold and diamonds catch the light while the glass barely changes */
.gj-display__sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  /* the pass is confined to the jewellery: the display's own alpha, intersected with a soft
     ellipse over the jewel box (so there is never a hard edge); the clip is a coarse fallback */
  clip-path: inset(calc((var(--jy) - 0.06) * 100%) calc((1 - var(--jx) - var(--jw) - 0.06) * 100%) calc((1 - var(--jy) - var(--jh) - 0.06) * 100%) calc((var(--jx) - 0.06) * 100%));
  -webkit-mask-image: var(--mask), radial-gradient(ellipse calc(var(--jw) * 66%) calc(var(--jh) * 66%) at calc((var(--jx) + var(--jw) / 2) * 100%) calc((var(--jy) + var(--jh) / 2) * 100%), #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: var(--mask), radial-gradient(ellipse calc(var(--jw) * 66%) calc(var(--jh) * 66%) at calc((var(--jx) + var(--jw) / 2) * 100%) calc((var(--jy) + var(--jh) / 2) * 100%), #000 58%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.gj-display__sweep i {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 220%;
  transform: translate3d(24%, 0, 0);
  background: linear-gradient(104deg,
    rgba(255, 228, 170, 0) 36%,
    rgba(255, 228, 170, 0.16) 44%,
    rgba(255, 240, 200, 0.5) 48.4%,
    rgba(255, 252, 240, 0.85) 49.6%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(255, 252, 240, 0.85) 50.4%,
    rgba(255, 240, 200, 0.5) 51.6%,
    rgba(255, 228, 170, 0.16) 56%,
    rgba(255, 228, 170, 0) 64%);
  will-change: transform;
}

.gj-display__sweep.is-on { animation: gj-sweep-fade 1.5s ease-out forwards; }
.gj-display__sweep.is-on i { animation: gj-sweep-move 1.5s cubic-bezier(0.35, 0, 0.25, 1) forwards; }

/* diamond glints: the same pass, masked by the display's luminance so only the bright
   stones (and the highlights) take it, blurred a little so each stone blooms */
.gj-display__sweep--glints {
  -webkit-mask-mode: luminance, alpha;          /* the glint mask is greyscale: white = stone */
  mask-mode: luminance, alpha;
  mix-blend-mode: plus-lighter;
}

.gj-display__sweep--glints i {
  background: linear-gradient(104deg,
    rgba(255, 248, 226, 0) 45%,
    rgba(255, 248, 226, 0.5) 48.8%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 248, 226, 0.5) 51.2%,
    rgba(255, 248, 226, 0) 55%);
}

.gj-display__sweep--glints.is-on,
.gj-display__sweep--glints.is-on i { animation-delay: 0.05s; }

/* the display itself glows a touch while the light passes */
.gj-display__image { transition: filter 0.5s ease; }
.gj-display__image.is-lit { filter: brightness(1.05) saturate(1.05) contrast(1.02); }

@keyframes gj-sweep-move {
  from { transform: translate3d(24%, 0, 0); }
  to   { transform: translate3d(-24%, 0, 0); }
}

@keyframes gj-sweep-fade {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Bottom: counter, progress (passive), scroll hint
   -------------------------------------------------------------------------- */
.gj-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

/* soft pool of light behind the readout so it stays legible over the reflections */
.gj-footer::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 560px;
  max-width: 100vw;
  height: 150px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 60%, rgba(246, 240, 230, 0.55) 0%, rgba(246, 240, 230, 0.3) 45%, rgba(246, 240, 230, 0) 72%);
  z-index: -1;
}

.gj-footer > * { position: relative; }

.gj-counter {
  margin: 0 0 10px;
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--gj-gold-soft);
}

.gj-counter b { font-weight: 400; color: var(--gj-gold); }
.gj-counter, .gj-hint span { text-shadow: 0 0 6px rgba(246, 240, 230, 0.9), 0 0 14px rgba(246, 240, 230, 0.8); }

.gj-progress {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.gj-progress i {
  position: relative;
  display: block;
  width: 28px;
  height: 8px;
}

.gj-progress i::before,
.gj-progress i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  will-change: transform, opacity;
}

.gj-progress i::before {           /* ○ */
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--gj-gold-soft);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: calc(1 - var(--on, 0));
}

.gj-progress i::after {            /* ━ */
  width: 28px;
  height: 5px;
  margin: -2.5px 0 0 -14px;
  border-radius: 3px;
  background: var(--gj-gold);
  box-shadow: 0 0 8px rgba(217, 187, 112, 0.5);
  opacity: var(--on, 0);
  transform: scaleX(var(--on, 0));
}

.gj-hint {
  margin-bottom: 1.4vh;
  will-change: opacity;
}

.gj-hint span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: var(--gj-gold-soft);
}

.gj-hint i {
  position: relative;
  display: block;
  width: 1px;
  height: 16px;
  margin: 8px auto 0;
  overflow: hidden;
  background: rgba(184, 146, 60, 0.3);
}

.gj-hint i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: var(--gj-gold);
  animation: gj-drip 1.9s ease-in-out infinite;
}

@keyframes gj-drip {
  from { transform: translateY(-100%); }
  to   { transform: translateY(200%); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Compact / mobile composition (not a scaled desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  :root {
    --gj-travel: 360vh;
    --gj-hero-h: 50svh;
    --gj-baseline: 21%;
    --gj-header-h: 92px;
  }

  @supports not (height: 100svh) {
    :root { --gj-hero-h: 50vh; }
  }

  .gj-header { grid-template-columns: 1fr; justify-items: center; }
  .gj-nav, .gj-rule { display: none; }
  .gj-logo { width: 122px; margin-top: 8px; }
  .gj-menu-btn { top: 28px; right: 20px; width: 26px; height: 19px; }

  .gj-env img { object-position: 50% 60%; }
  .gj-light--floor { width: 120vw; height: 10vh; bottom: 13%; }

  .gj-progress { gap: 9px; margin-bottom: 12px; }
  .gj-progress i { width: 22px; }
  .gj-progress i::after { width: 22px; margin-left: -11px; }
  .gj-counter { margin-bottom: 8px; }
  .gj-hint { margin-bottom: 1.6vh; }
  .gj-display__reflection { filter: saturate(1.2) contrast(1.06); opacity: 0.55; }
}

@media (max-width: 960px) {
  .gj-header { grid-template-columns: 1fr; justify-items: center; }
  .gj-nav, .gj-rule { display: none; }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root { --gj-hero-h: 60svh; --gj-baseline: 16%; --gj-header-h: 80px; }
  .gj-hint { display: none; }
  .gj-progress { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: cross-fade in place, no sweep / drift / breathing
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gj-env, .gj-light--sheen { transform: none !important; }
  .gj-light--bloom::before { animation: none; }
  .gj-hint i::after { animation: none; transform: translateY(50%); }
  .gj-display__sweep { display: none; }
  .gj-display__image { transition: none; }
  .gj-nav a::after, .gj-menu-btn span, .gj-menu, .gj-menu__list, .gj-menu li, .gj-menu__close { transition: none; }
}