/* ============================================================
 * BRAND ORBIT — products circling the SS Brand seal
 * + full-screen product experience.
 * Markup: partials/brand_orbit.php · Behaviour: js/brand-orbit.js
 *
 * 3D model (all inside one preserve-3d context on .brand-orbit__stage):
 *   track  spins on a plane tilted --tilt degrees back (a "Saturn ring")
 *   slot   places each item on the ring:  rotateZ(a) translateX(r) rotateZ(-a)
 *   item   counter-spins + counter-tilts, so every product stays upright
 *          and faces the viewer while it travels round
 *   seal   sits at z = 0 in the centre, so items on the far side of the
 *          ring pass BEHIND it and items on the near side pass in FRONT.
 * ============================================================ */

/* Product colours for the full-screen view (set per slide by JS). */
@property --fc1 { syntax: '<color>'; inherits: true; initial-value: #e31e24; }
@property --fc2 { syntax: '<color>'; inherits: true; initial-value: #ffb52e; }
@property --fc3 { syntax: '<color>'; inherits: true; initial-value: #8a3dff; }

.brand-orbit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  color: #fff;
  background:
    radial-gradient(ellipse 45% 40% at 50% 60%, rgba(227, 30, 36, .30), transparent 70%),
    radial-gradient(ellipse 55% 50% at 15% 5%, rgba(84, 34, 160, .7), transparent 70%),
    radial-gradient(ellipse 50% 45% at 90% 95%, rgba(150, 18, 80, .55), transparent 70%),
    #12052e;
}

/* Twinkling stars */
.brand-orbit__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.brand-orbit__sky span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px #ffd27a;
  opacity: .2; animation: orbit-twinkle 3.6s ease-in-out infinite;
}
.brand-orbit__sky span:nth-child(1) { left: 8%;  top: 22%; }
.brand-orbit__sky span:nth-child(2) { left: 22%; top: 70%; animation-delay: .7s; }
.brand-orbit__sky span:nth-child(3) { left: 36%; top: 12%; animation-delay: 1.5s; }
.brand-orbit__sky span:nth-child(4) { left: 64%; top: 18%; animation-delay: .3s; width: 2px; height: 2px; }
.brand-orbit__sky span:nth-child(5) { left: 78%; top: 66%; animation-delay: 2.1s; }
.brand-orbit__sky span:nth-child(6) { left: 90%; top: 30%; animation-delay: 1.1s; width: 2px; height: 2px; }
.brand-orbit__sky span:nth-child(7) { left: 52%; top: 88%; animation-delay: 2.7s; }
.brand-orbit__sky span:nth-child(8) { left: 5%;  top: 84%; animation-delay: 1.9s; width: 2px; height: 2px; }

/* Heading */
.brand-orbit__head { text-align: center; position: relative; z-index: 2; }
.brand-orbit__eyebrow {
  display: inline-block;
  padding: .4rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255, 190, 70, .45);
  background: rgba(255, 190, 70, .08);
  color: #ffd35c; font-size: .74rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.brand-orbit__title {
  margin: 1rem 0 .6rem;
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
}
.brand-orbit__title em {
  font-style: normal;
  background: linear-gradient(100deg, #ff4b4b, #ffb52e 60%, #ffe08a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-orbit__lede { margin: 0 auto; max-width: 52ch; color: rgba(240, 230, 255, .78); font-size: 1rem; }

/* ---------- Stage ---------- */
.brand-orbit__stage {
  --w: min(720px, 94vw);       /* stage width                         */
  --r: calc(var(--w) * .40);   /* orbit radius                        */
  --tilt: 66deg;               /* how far the ring is tipped back     */
  --spin: 46s;                 /* one full revolution                 */
  position: relative;
  width: var(--w);
  height: calc(var(--w) * .66);
  margin: clamp(.5rem, 3vw, 2rem) auto 0;
  perspective: 1500px;
  perspective-origin: 50% 35%;
  transform-style: preserve-3d;
  /* The stage's own box sits at depth 0, so it would swallow clicks meant
     for products on the far side of the ring (they are "behind" it).
     Only the products and the seal take pointer events. */
  pointer-events: none;
}
.brand-orbit__item,
.brand-orbit__seal { pointer-events: auto; }
/* The seal's glow, ring and hint reach far beyond the disc — they must
   not steal clicks from products orbiting behind them. */
.brand-orbit__seal-glow,
.brand-orbit__seal-spin,
.brand-orbit__seal-hint { pointer-events: none; }

/* Guide rings — tilted with the orbit, so their near half crosses in
   front of the seal and their far half behind it. */
.brand-orbit__ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%;
  pointer-events: none;
  transform: rotateX(var(--tilt));   /* static tilt; the spin animation adds rotation */
}
.brand-orbit__ring--a {
  border: 2px dashed rgba(255, 181, 46, .45);
  box-shadow: 0 0 30px rgba(227, 30, 36, .35), inset 0 0 30px rgba(227, 30, 36, .25);
  animation: orbit-ring var(--spin) linear infinite;
}
.brand-orbit__ring--b {
  width: calc(var(--r) * 2.32); height: calc(var(--r) * 2.32);
  margin: calc(var(--r) * -1.16) 0 0 calc(var(--r) * -1.16);
  border: 1px dotted rgba(255, 255, 255, .35);
  animation: orbit-ring calc(var(--spin) * 1.6) linear infinite reverse;
}

/* Track = a point at the centre of the stage; the whole ring spins here. */
.brand-orbit__track {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  animation: orbit-spin var(--spin) linear infinite;
}
.brand-orbit__slot {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  transform:
    rotateZ(calc(360deg / var(--n) * var(--i)))
    translateX(var(--r))
    rotateZ(calc(-360deg / var(--n) * var(--i)));
}
/* Counter-spin + counter-tilt = always upright and facing the viewer. */
.brand-orbit__item {
  position: absolute; left: 0; top: 0;
  display: grid; justify-items: center; gap: .55rem;
  padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
  font: inherit;
  animation: orbit-face var(--spin) linear infinite;
}
.brand-orbit__thumb {
  display: block;
  width: calc(var(--w) * .135);
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 210, 120, .55);
  background: #2a0b5e;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 0 26px rgba(227, 30, 36, .4);
  transition: scale .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, border-color .3s;
}
.brand-orbit__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-orbit__label {
  padding: .25rem .65rem; border-radius: 999px;
  background: rgba(18, 5, 46, .85);
  border: 1px solid rgba(255, 210, 120, .4);
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  opacity: 0; translate: 0 -6px;
  transition: opacity .25s, translate .25s;
}
.brand-orbit__item:hover .brand-orbit__thumb,
.brand-orbit__item:focus-visible .brand-orbit__thumb {
  scale: 1.18;
  border-color: #ffd35c;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .75), 0 0 40px rgba(255, 181, 46, .7);
}
.brand-orbit__item:hover .brand-orbit__label,
.brand-orbit__item:focus-visible .brand-orbit__label { opacity: 1; translate: 0 0; }
.brand-orbit__item:focus-visible { outline: none; }

/* Transparent PNG products float free round the seal — no tile behind
   them; the glow and shadow follow the product's own outline. */
.brand-orbit__item.is-cutout .brand-orbit__thumb {
  background: none; border-color: transparent; box-shadow: none;
  overflow: visible;
}
.brand-orbit__item.is-cutout .brand-orbit__thumb img {
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(227, 30, 36, .55));
}
.brand-orbit__item.is-cutout:hover .brand-orbit__thumb,
.brand-orbit__item.is-cutout:focus-visible .brand-orbit__thumb { border-color: transparent; box-shadow: none; }
.brand-orbit__item.is-cutout:hover .brand-orbit__thumb img {
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 181, 46, .85));
}
.brand-orbit__item:focus-visible .brand-orbit__thumb { outline: 3px solid #ffd35c; outline-offset: 3px; }

/* Hovering or tabbing into the stage holds the orbit still, so a moving
   product is easy to click. */
.brand-orbit__stage:hover .brand-orbit__track,
.brand-orbit__stage:hover .brand-orbit__item,
.brand-orbit__stage:focus-within .brand-orbit__track,
.brand-orbit__stage:focus-within .brand-orbit__item { animation-play-state: paused; }

/* ---------- The seal ---------- */
.brand-orbit__seal {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--w) * .27); aspect-ratio: 1;
  translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  display: grid; place-items: center;
}
.brand-orbit__seal img {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55));
  animation: orbit-seal-float 5s ease-in-out infinite;
  transition: scale .4s cubic-bezier(.34, 1.56, .64, 1);
}
.brand-orbit__seal:hover img,
.brand-orbit__seal:focus-visible img { scale: 1.06; }
.brand-orbit__seal:focus-visible { outline: 3px solid #ffd35c; outline-offset: 8px; }
/* Breathing red/gold glow */
.brand-orbit__seal-glow {
  position: absolute; inset: -38%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 181, 46, .55) 0%, rgba(227, 30, 36, .4) 35%, transparent 68%);
  animation: orbit-breathe 4s ease-in-out infinite;
}
/* Sparkling ring that spins around the seal */
.brand-orbit__seal-spin {
  position: absolute; inset: -9%; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 4%, #ffd35c 5%, transparent 7% 21%, #ff4b4b 22%, transparent 24% 46%,
    #ffd35c 47%, transparent 49% 63%, #fff 64%, transparent 66% 88%, #ff4b4b 89%, transparent 91%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%);
          mask: radial-gradient(circle, transparent 64%, #000 65%, #000 69%, transparent 70%);
  animation: orbit-ring 9s linear infinite;
}
.brand-orbit__seal:hover .brand-orbit__seal-spin { animation-duration: 2.4s; }
.brand-orbit__seal-hint {
  position: absolute; left: 50%; bottom: -2.1rem; z-index: 2;
  translate: -50% 0;
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #ffd35c; white-space: nowrap;
  animation: orbit-hint 2.6s ease-in-out infinite;
}

/* Off-screen: pause everything (JS toggles .is-idle). */
.brand-orbit.is-idle *, .brand-orbit.is-idle *::before, .brand-orbit.is-idle *::after { animation-play-state: paused !important; }

/* ---------- Keyframes ---------- */
@keyframes orbit-spin  { from { transform: rotateX(var(--tilt)) rotateZ(0deg); }  to { transform: rotateX(var(--tilt)) rotateZ(360deg); } }
@keyframes orbit-face  { from { transform: translate(-50%, -50%) rotateZ(0deg) rotateX(calc(-1 * var(--tilt))); }
                         to   { transform: translate(-50%, -50%) rotateZ(-360deg) rotateX(calc(-1 * var(--tilt))); } }
@keyframes orbit-ring  { from { transform: rotateX(var(--tilt, 0deg)) rotateZ(0deg); } to { transform: rotateX(var(--tilt, 0deg)) rotateZ(360deg); } }
@keyframes orbit-twinkle { 0%, 100% { opacity: .15; scale: .7; } 50% { opacity: .95; scale: 1.2; } }
@keyframes orbit-breathe { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.06; } }
@keyframes orbit-seal-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes orbit-hint { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* The seal's own sparkle ring is flat (no tilt) — override the var. */
.brand-orbit__seal-spin { --tilt: 0deg; }

@media (max-width: 640px) {
  .brand-orbit__stage { --w: 96vw; --tilt: 64deg; height: calc(var(--w) * .78); }
  .brand-orbit__thumb { width: calc(var(--w) * .17); border-radius: 9px; }
  .brand-orbit__seal { width: calc(var(--w) * .32); }
  .brand-orbit__label { display: none; }          /* no hover on touch */
}

/* ============================================================
 * FULL-SCREEN EXPERIENCE
 * Opens with a circular reveal from the exact point that was clicked
 * (--ox / --oy), while the product image flies out of the orbit.
 * ============================================================ */
html.orbit-fs-open { overflow: hidden; }

.orbit-fs {
  --ox: 50%; --oy: 50%;
  --fc1: #e31e24; --fc2: #ffb52e; --fc3: #8a3dff;
  position: fixed; inset: 0; z-index: 1400;
  display: grid;
  grid-template-rows: 1fr auto auto;
  background: #0b0320;
  color: #fff;
  clip-path: circle(0 at var(--ox) var(--oy));
  transition: clip-path .85s cubic-bezier(.72, 0, .18, 1),
              --fc1 1.2s ease, --fc2 1.4s ease, --fc3 1.6s ease;
  overflow: hidden;
}
.orbit-fs[hidden] { display: none; }
.orbit-fs.is-open { clip-path: circle(150vmax at var(--ox) var(--oy)); }

/* Blurred art backgrounds, cross-fading with a slow drift. */
.orbit-fs__bgs { position: absolute; inset: 0; z-index: 0; }
.orbit-fs__bg {
  position: absolute; inset: -12%;
  background-size: cover; background-position: center;
  filter: blur(46px) saturate(1.5) brightness(.5);
  opacity: 0;
  transition: opacity 1.1s ease;
}
.orbit-fs__bg.is-active { opacity: 1; animation: orbit-fs-drift 18s ease-in-out infinite alternate; }
@keyframes orbit-fs-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-3%, 2%); } }

/* Colour wash in the product's own palette. */
.orbit-fs__aurora {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 50% at 30% 45%, color-mix(in srgb, var(--fc1) 45%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 45% at 78% 30%, color-mix(in srgb, var(--fc2) 35%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 40% at 70% 85%, color-mix(in srgb, var(--fc3) 40%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(11, 3, 32, .2), rgba(11, 3, 32, .75));
  mix-blend-mode: screen;
}
/* Huge, faint, slowly turning seal behind everything. */
.orbit-fs__watermark {
  position: absolute; left: 30%; top: 50%; z-index: 1;
  width: min(80vmin, 760px); height: auto;
  translate: -50% -50%;
  opacity: .07; pointer-events: none;
  animation: orbit-ring 80s linear infinite;
  --tilt: 0deg;
}

.orbit-fs__close {
  position: absolute; top: clamp(.8rem, 2.5vw, 1.6rem); right: clamp(.8rem, 2.5vw, 1.6rem); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .2s, rotate .3s;
}
.orbit-fs__close:hover { background: rgba(255, 255, 255, .22); rotate: 90deg; }

.orbit-fs__layout {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding-top: clamp(3.5rem, 7vh, 5rem);
  min-height: 0;
}

/* Product stage — slides turn in 3D between products. */
.orbit-fs {
  /* Product stage height. Also used as the image's max-height directly:
     `max-height: 100%` inside the grid-centred slide resolves against an
     auto-sized track (i.e. not at all), which let the image overflow. */
  --fs-h: min(60vh, 600px);
}
.orbit-fs__stage {
  position: relative;
  height: var(--fs-h);
  perspective: 1400px;
}
.orbit-fs__slide {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  opacity: 0;
  transform: translateX(32%) translateZ(-260px) rotateY(-48deg);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.orbit-fs__slide.is-before { transform: translateX(-32%) translateZ(-260px) rotateY(48deg); }
.orbit-fs__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.orbit-fs__slide img {
  max-width: 100%; max-height: var(--fs-h);
  width: auto; height: auto;
  border-radius: 18px;
  /* drop-shadow (not box-shadow) follows the image's real outline: a
     normal photo still gets a rounded-rectangle shadow, but a transparent
     PNG cut-out gets a shadow + glow around the PRODUCT, instead of a
     dark empty rectangle behind it. */
  filter:
    drop-shadow(0 30px 34px rgba(0, 0, 0, .6))
    drop-shadow(0 0 36px color-mix(in srgb, var(--fc1) 50%, transparent));
}
.orbit-fs__slide img.is-cutout { border-radius: 0; }
.orbit-fs__slide.is-active img { animation: orbit-fs-float 6s ease-in-out infinite; }
@keyframes orbit-fs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* Copy */
.orbit-fs__info { display: grid; }
.orbit-fs__copy { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.orbit-fs__copy.is-active { visibility: visible; animation: orbit-fs-copy .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes orbit-fs-copy { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.orbit-fs__badge {
  display: inline-block; margin-bottom: .9rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--fc1) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--fc2) 60%, transparent);
  color: #ffe6a8; font-size: .76rem; font-weight: 800; letter-spacing: .06em;
}
.orbit-fs__name {
  margin: 0 0 .5rem; color: #fff;
  font-size: clamp(2.1rem, 5vw, 4.2rem); font-weight: 900;
  line-height: 1; letter-spacing: -.04em;
}
.orbit-fs__tags { margin: 0 0 1rem; color: #ffd35c; font-weight: 700; letter-spacing: .02em; }
.orbit-fs__desc { margin: 0 0 1.4rem; max-width: 46ch; color: rgba(240, 232, 255, .84); line-height: 1.6; }
.orbit-fs__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.orbit-fs__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 800; font-size: .95rem; text-decoration: none; color: #fff;
  transition: transform .2s, box-shadow .25s, background .2s;
}
.orbit-fs__btn:hover { transform: translateY(-2px); color: #fff; }
.orbit-fs__btn--primary {
  background: linear-gradient(120deg, #ff5a1f, #e31e24 55%, #c2187a);
  box-shadow: 0 14px 30px -10px rgba(227, 30, 36, .7);
}
.orbit-fs__btn--wa { background: #19cd63; box-shadow: 0 14px 30px -10px rgba(25, 205, 99, .6); }

/* Nav + thumbs */
.orbit-fs__nav {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  padding: .6rem 0 .4rem;
}
.orbit-fs__arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 1.25rem; cursor: pointer;
  transition: background .2s, transform .2s;
}
.orbit-fs__arrow:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.orbit-fs__count { font-weight: 700; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.orbit-fs__count b { color: #fff; font-size: 1.15rem; }

.orbit-fs__thumbs {
  position: relative; z-index: 2;
  display: flex; justify-content: center; gap: .6rem;
  padding: .5rem 1rem clamp(1rem, 3vh, 1.6rem);
  overflow-x: auto; scrollbar-width: none;
}
.orbit-fs__thumbs::-webkit-scrollbar { display: none; }
.orbit-fs__thumb {
  flex: 0 0 auto;
  width: 54px; aspect-ratio: 2 / 3;
  padding: 0; border-radius: 9px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .2);
  background: #2a0b5e; opacity: .55;
  transition: opacity .25s, border-color .25s, transform .25s;
}
.orbit-fs__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.orbit-fs__thumb:hover { opacity: .9; transform: translateY(-3px); }
.orbit-fs__thumb.is-active { opacity: 1; border-color: #ffd35c; transform: translateY(-3px); }
/* Cut-out thumbnails: show the whole product, not a cropped middle. */
.orbit-fs__thumb.is-cutout img { object-fit: contain; padding: 3px; }

/* The flying image that travels from the orbit into the stage. */
.orbit-fs-flyer {
  position: fixed; z-index: 1500; margin: 0;
  border-radius: 12px; object-fit: cover; pointer-events: none;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
  transform-origin: 0 0;
}

@media (max-width: 860px) {
  .orbit-fs { grid-template-rows: 1fr auto auto; }
  .orbit-fs__layout {
    grid-template-columns: 1fr; text-align: center;
    gap: 1rem; align-content: center;
    padding-top: 4.2rem;
  }
  .orbit-fs { --fs-h: min(40vh, 400px); }
  .orbit-fs__ctas { justify-content: center; }
  .orbit-fs__desc { margin-inline: auto; }
  .orbit-fs__name { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .orbit-fs__watermark { left: 50%; top: 32%; }
  .orbit-fs__thumb { width: 42px; }
}

/* Reduced motion — no spin, float or fly; the full screen just appears. */
@media (prefers-reduced-motion: reduce) {
  .brand-orbit *, .brand-orbit *::before, .brand-orbit *::after,
  .orbit-fs, .orbit-fs * { animation: none !important; }
  .orbit-fs { transition: opacity .2s; clip-path: none; opacity: 0; }
  .orbit-fs.is-open { clip-path: none; opacity: 1; }
  .orbit-fs__slide { transition: opacity .2s; transform: none !important; }
  /* Orbit is frozen, so place items statically (with the tilt). */
  .brand-orbit__track { transform: rotateX(var(--tilt)); }
  .brand-orbit__item { transform: translate(-50%, -50%) rotateX(calc(-1 * var(--tilt))); }
}