/* 3-Dees Visuals — Digital Lab surface
   Editorial High-End & Playful (warm canvas). Grid: site-grid.css. */

@import url("site-grid.css");

:root {
  /* Editorial light canvas — Digital Lab tokens */
  --web-bg: #F4F0EA;
  --web-bg-deep: #EBE6DE;
  --web-bg-elevated: #FFFCF8;
  --web-ink: #161617;
  --web-muted: #6B6670;
  --web-accent: #00A8A8;
  --web-accent-glow: #66FCF1;
  --web-accent-deep: #008080;
  --web-line: rgba(22, 22, 23, 0.1);
  --web-glow-teal: rgba(0, 168, 168, 0.09);
  --web-glow-warm: rgba(200, 160, 120, 0.1);

  /* Technical grid on light canvas */
  --web-grid-line: rgba(0, 128, 128, 0.09);
  --web-grid-size: 10px;
  --web-grid-opacity: 0.9;

  /* Folder palette — swap HEX freely */
  --folder-teal: #00A8A8;
  --folder-aqua: #2EC4B6;
  --folder-blue: #3B6FBF;
  --folder-purple: #6B4EA8;
  --folder-magenta: #C23A7A;
  --folder-green: #2F7A5B;
  --folder-slate: #2A303C;
  --folder-coral: #D4674E;
  --folder-ink: #1A1A1E;
}

html {
  color-scheme: light;
}

/* Own the page chrome only on plain Digital Lab pages (not dual-track / split index) */
body:not(.theme-arch):not(.theme-web):not(.is-split-index) {
  isolation: isolate;
  background-color: var(--web-bg);
  background-image:
    radial-gradient(ellipse 85% 55% at 72% 18%, var(--web-glow-teal), transparent 58%),
    radial-gradient(ellipse 70% 50% at 12% 78%, var(--web-glow-warm), transparent 55%);
}

body:not(.theme-arch):not(.theme-web):not(.is-split-index)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--web-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--web-grid-line) 1px, transparent 1px);
  background-size: var(--web-grid-size) var(--web-grid-size);
  opacity: var(--web-grid-opacity);
}

/* Reinforce tokens when dual-track pages opt into the web theme */
body.theme-web {
  --web-bg: #F4F0EA;
  --web-ink: #161617;
  --web-accent: #00A8A8;
  --web-accent-glow: #66FCF1;
}

/* ==========================================================================
   Interactive turquoise glow + custom pixel cursor (shared Digital Lab FX)
   ========================================================================== */

/* Hide the OS pointer everywhere — child rules like .orbit-stage { cursor: default }
   must not resurrect it alongside the pixel cursor */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  mix-blend-mode: normal;
}

.cursor.is-on {
  opacity: 1;
}

.cursor__arch,
.cursor__pixel {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.cursor__arch {
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.cursor__pixel {
  width: 32px;
  height: 32px;
  opacity: 1;
}

.cursor__arch svg,
.cursor__pixel svg {
  display: block;
  overflow: visible;
}

.cursor.is-clickable .cursor__pixel {
  transform: scale(0.9);
}

.cursor__dot {
  display: none;
}

/* —— Panel / page surface glow (tracks --mx / --my) —— */
.panel--web:not(body) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--web-bg);
  color: var(--web-ink);
}

body.panel--web,
body.theme-web.web-surface-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--web-bg);
  color: var(--web-ink);
  background-image:
    radial-gradient(ellipse 85% 55% at 72% 18%, var(--web-glow-teal), transparent 58%),
    radial-gradient(ellipse 70% 50% at 12% 78%, var(--web-glow-warm), transparent 55%);
}

.panel__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.panel--web .panel__glow,
body.panel--web > .panel__glow {
  inset: auto;
  width: min(48vw, 520px);
  height: min(48vw, 520px);
  left: var(--mx, 70%);
  top: var(--my, 48%);
  transform: translate(-50%, -50%);
  /* Fallback then tokenized accent glow */
  background:
    radial-gradient(circle, rgba(102, 252, 241, 0.28) 0%, rgba(0, 168, 168, 0.14) 32%, transparent 68%);
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--web-accent-glow) 28%, transparent) 0%,
      color-mix(in srgb, var(--web-accent) 14%, transparent) 32%,
      transparent 68%
    );
  opacity: 0;
  mix-blend-mode: multiply;
  filter: blur(0.2px);
  transition: opacity 0.4s ease;
  will-change: left, top, opacity;
}

/* Full-page hosts: glow follows viewport cursor above page chrome */
body.panel--web > .panel__glow {
  position: fixed;
  z-index: 1;
}

.panel--web.is-hot .panel__glow,
body.panel--web.is-hot > .panel__glow {
  opacity: 1;
}

@media (max-width: 768px), (hover: none) {
  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  .panel--web .panel__glow {
    left: 72%;
    top: 38%;
    opacity: 0.55;
  }
}

/* ==========================================================================
   Full-screen 2.5D Folder Showcase — Hero
   Visual asset-layered folders (base + peeking sheet)
   ========================================================================== */

.folder-orbit-hero {
  --folder-w: 200px;
  --folder-h: 168px;
  --folder-base-art: url("../assets/folder/folder-base.png");
  position: relative;
  min-height: calc(100vh - var(--header-h, 72px));
  height: calc(100vh - var(--header-h, 72px));
  max-height: 980px;
  overflow: hidden;
  isolation: isolate;
}

.folder-orbit-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 55% 48%, rgba(0, 168, 168, 0.07), transparent 62%),
    radial-gradient(ellipse 45% 40% at 18% 72%, rgba(212, 180, 140, 0.12), transparent 70%);
}

/* —— View mode toolbar (floating pill, top-right) —— */
.orbit-toolbar {
  position: absolute;
  top: clamp(16px, 2.8vh, 28px);
  right: 12px;
  left: auto;
  transform: none;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.78);
  border: 1px solid rgba(22, 22, 23, 0.08);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    0 12px 36px rgba(22, 22, 23, 0.08),
    0 2px 8px rgba(22, 22, 23, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

@media (max-width: 1100px) and (min-width: 768px) {
  .orbit-mode-btn {
    padding: 8px 12px;
    letter-spacing: 0.1em;
  }
}

.orbit-mode-btn {
  appearance: none;
  margin: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 9px 17px;
  border-radius: 999px;
  font-family: Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--web-muted);
  background: transparent;
  transition:
    color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.orbit-mode-btn:hover {
  color: var(--web-ink);
  background: rgba(22, 22, 23, 0.04);
}

.orbit-mode-btn:focus-visible {
  outline: none;
  color: var(--web-accent-deep);
  box-shadow: 0 0 0 2px rgba(0, 168, 168, 0.35);
}

.orbit-mode-btn.is-active {
  color: #0a0c0d;
  background: linear-gradient(180deg, #66FCF1 0%, #00A8A8 100%);
  box-shadow:
    0 6px 18px rgba(0, 168, 168, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.orbit-mode-btn.is-active:hover {
  color: #0a0c0d;
  background: linear-gradient(180deg, #7FFCF5 0%, #00B3B3 100%);
}

.orbit-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1400px;
  perspective-origin: 50% 42%;
  display: grid;
  place-items: center;
  cursor: default;
  touch-action: none;
}

.folder-orbit-hero[data-view="flat"] .orbit-stage {
  perspective: 1800px;
  perspective-origin: 50% 48%;
}

.folder-orbit-hero[data-view="tilt"] .orbit-stage {
  perspective: 1280px;
  perspective-origin: 50% 38%;
}

.folder-orbit-hero[data-view="gallery"] .orbit-stage {
  perspective: 1240px;
  perspective-origin: 50% 44%;
}

.folder-orbit-hero[data-view="ring"] .orbit-stage {
  perspective: 1320px;
  perspective-origin: 50% 40%;
}

.orbit-scene {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(48deg) rotateY(0deg) rotateZ(-5deg);
}

.orbit-folder {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--folder-w);
  height: var(--folder-h);
  margin: calc(var(--folder-h) / -2) 0 0 calc(var(--folder-w) / -2);
  transform-style: preserve-3d;
  transform-origin: 50% 70%;
  text-decoration: none;
  color: inherit;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Native mouseenter/mouseleave target — children stay pointer-events: none */
  pointer-events: auto;
  will-change: transform, opacity;
}

.orbit-folder:focus-visible .folder-rig {
  outline: 2px solid rgba(0, 168, 168, 0.5);
  outline-offset: 6px;
}

.about-degree {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sky-mid);
  margin-bottom: 20px;
}

.about-degree svg {
  width: 15px;
  height: 15px;
  color: var(--sun);
  flex-shrink: 0;
}

.hku-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* —— Shell: mild isometric tilt; assets carry the silhouette —— */
.folder-shell {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-38deg) rotateZ(6deg) rotateY(-10deg);
}

/* Layer stage — local perspective for the folder layers */
.folder-rig {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  perspective-origin: 50% 0%;
  transform-style: preserve-3d;
}

/* Soft ground contact */
.folder-cast {
  position: absolute;
  left: 10%;
  right: 6%;
  top: 66%;
  bottom: -26%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 48% 35%,
    rgba(22, 22, 23, 0.34) 0%,
    rgba(22, 22, 23, 0.12) 42%,
    transparent 72%
  );
  transform: translateZ(-44px) rotateX(72deg) scale(1.12, 0.78);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.orbit-folder.is-active .folder-cast {
  opacity: 1;
  transform: translateZ(-52px) rotateX(72deg) scale(1.28, 0.95);
}

/* —— 1. Base pocket asset — rear layer; the peeking sheet paints in front of it —— */
.folder-base {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateZ(4px);
  pointer-events: none;
}

.folder-base picture {
  display: block;
  width: 100%;
  height: 100%;
}

.folder-base__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.folder-base__art {
  filter:
    drop-shadow(0 28px 44px rgba(22, 22, 23, 0.22))
    drop-shadow(0 10px 18px rgba(22, 22, 23, 0.1))
    drop-shadow(0 2px 4px rgba(22, 22, 23, 0.06));
}

/* Brand tint preserves baked lighting (luminosity) */
.folder-tint {
  position: absolute;
  inset: 0;
  background: var(--folder-c, #00A8A8);
  mix-blend-mode: color;
  pointer-events: none;
  -webkit-mask-image: var(--folder-base-art);
  mask-image: var(--folder-base-art);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.folder-label {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 22%;
  z-index: 5;
  transform: translateZ(18px);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  pointer-events: none;
  opacity: 0.94;
  transition: opacity 0.35s ease;
}

/* —— 2a. Pocket mouth — painted over the base, clipped exactly at the light front
   rim of folder-base.png (measured head-on). Above the rim the card covers the
   pocket interior; below it the front wall shows, so the card sits inside the pocket.
   translateZ stays just above the base (4px) to avoid perspective drift of the edge. —— */
.folder-mouth {
  position: absolute;
  inset: 0;
  z-index: 4;
  transform: translateZ(5px);
  clip-path: polygon(
    0% -220%, 100% -220%,
    100% 39.4%, 96.7% 39.4%, 87.9% 41.1%, 78.1% 44%, 68.4% 46.9%, 58.6% 48.9%,
    50% 49.6%, 39.1% 49%, 29.3% 46.8%, 19.5% 43.4%, 9.8% 40.4%, 2.9% 38.8%,
    1.2% 38.4%, 0% 38.8%
  );
  pointer-events: none;
}

/* —— 2. Project sheet — resting peek (SHEET_TUCK_Y negative = above the lip) —— */
.folder-sheet {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 18%;
  height: 68%;
  z-index: 1;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFCF8;
  box-shadow: none;
  /* Resting peek (= SHEET_TUCK_Y): bottom in the pocket, top above the rim */
  transform: translate3d(0, 15px, 0);
  pointer-events: none;
  transform-origin: 50% 85%;
  will-change: transform, opacity;
}

.folder-sheet img {
  width: 100%;
  height: 64%;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #d8d2c8;
}

.folder-sheet__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 36%;
  padding: 0 12px;
  background: linear-gradient(180deg, #FFFCF8, #F4F0EA);
}

.folder-sheet__meta strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #161617;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-sheet__meta span {
  font-family: Inter, sans-serif;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6670;
}

.orbit-folder.is-active .folder-label {
  opacity: 0;
}

.orbit-folder.is-active .folder-base__art {
  filter:
    drop-shadow(0 32px 52px rgba(22, 22, 23, 0.24))
    drop-shadow(0 12px 22px rgba(22, 22, 23, 0.12))
    drop-shadow(0 2px 4px rgba(22, 22, 23, 0.06));
}

/* —— Central spotlight preview ——
   Flat layer above the tilted stage; its centre is the scene origin.
   The card mirrors .folder-sheet proportions × --spot-scale so the hand-off is seamless. */
.folder-spotlight-layer {
  --spot-scale: 2.3;
  position: absolute;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.folder-spotlight {
  grid-area: 1 / 1;
  width: calc(var(--folder-w) * 0.66 * var(--spot-scale));
  height: calc(var(--folder-h) * 0.68 * var(--spot-scale));
  border-radius: calc(10px * var(--spot-scale));
  overflow: hidden;
  background: #FFFCF8;
  box-shadow:
    0 42px 68px rgba(22, 22, 23, 0.28),
    0 18px 32px rgba(22, 22, 23, 0.16),
    0 8px 18px rgba(22, 22, 23, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  transform-origin: 50% 50%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.folder-spotlight img {
  display: block;
  width: 100%;
  height: 64%;
  object-fit: cover;
  object-position: top center;
  background: #d8d2c8;
}

.folder-spotlight__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(3px * var(--spot-scale));
  height: 36%;
  padding: 0 calc(12px * var(--spot-scale));
  background: linear-gradient(180deg, #FFFCF8, #F4F0EA);
}

.folder-spotlight__meta strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: calc(0.76rem * var(--spot-scale));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #161617;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-spotlight__meta span {
  font-family: Inter, sans-serif;
  font-size: calc(0.56rem * var(--spot-scale));
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6670;
}

/* —— Editorial overlay —— */
.hero-editorial {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 5vh, 56px);
  z-index: 8;
  max-width: min(28rem, calc(100% - 48px));
  pointer-events: none;
}

.hero-editorial > * {
  pointer-events: auto;
}

.hero-editorial .hero-eyebrow {
  margin: 0 0 12px;
  font-family: Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--web-accent);
}

.hero-editorial h1 {
  margin: 0 0 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--web-ink);
}

.hero-editorial h1 span {
  display: inline;
  color: var(--web-muted);
  font-weight: 400;
}

.hero-editorial .hero-lead {
  margin: 0 0 22px;
  max-width: 34ch;
  color: var(--web-muted);
  font-family: Inter, sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 400;
}

.hero-editorial .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--web-ink);
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.ghost-link:hover,
.ghost-link:focus-visible {
  color: var(--web-accent-deep);
  border-bottom-color: rgba(0, 168, 168, 0.45);
  outline: none;
}

.ghost-link.is-muted {
  color: var(--web-muted);
}

.ghost-link.is-muted:hover,
.ghost-link.is-muted:focus-visible {
  color: var(--web-ink);
  border-bottom-color: rgba(22, 22, 23, 0.28);
}

.orbit-hint {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(28px, 5vh, 56px);
  z-index: 8;
  font-family: Inter, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(107, 102, 112, 0.55);
  pointer-events: none;
}

/* —— Mobile fallback —— */
.orbit-mobile {
  display: none;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 24px 0 8px;
}

.orbit-mobile__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px clamp(16px, 4vw, 28px) 28px;
  scrollbar-width: none;
}

.orbit-mobile__track::-webkit-scrollbar {
  display: none;
}

.orbit-mobile__card {
  flex: 0 0 min(72vw, 240px);
  scroll-snap-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: var(--web-bg-elevated);
  border: 1px solid var(--web-line);
  box-shadow: 0 12px 28px rgba(22, 22, 23, 0.08);
}

.orbit-mobile__card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--web-bg-deep);
}

.orbit-mobile__card figcaption {
  padding: 14px 14px 16px;
}

.orbit-mobile__card strong {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.orbit-mobile__card span {
  font-family: Inter, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--web-muted);
}

@media (max-width: 767px) {
  .folder-orbit-hero {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-bottom: 8px;
  }

  .orbit-stage,
  .orbit-toolbar,
  .orbit-hint,
  .folder-spotlight-layer {
    display: none !important;
  }

  .orbit-mobile {
    display: block;
  }

  .hero-editorial {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    padding: 36px clamp(16px, 4vw, 28px) 8px;
  }

  .hero-editorial h1 {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }

  .hero-editorial .hero-lead {
    max-width: 42ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folder-shell,
  .folder-sheet,
  .folder-cast,
  .orbit-mode-btn {
    transition: none !important;
  }
}