@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --bg: #050713;
  --surface: #091126;
  --surface-soft: rgba(13, 23, 45, 0.72);
  --text: #f4f7ff;
  --text-soft: #a7b4ca;
  --text-muted: #6f7c93;
  --accent: #5d9dff;
  --accent-soft: #c5dcff;
  --line: rgba(172, 205, 255, 0.14);
  --line-strong: rgba(172, 205, 255, 0.3);
  --max: 1440px;
  --pad: clamp(1rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 9% 5%, rgba(48, 117, 255, 0.11), transparent 28rem),
    radial-gradient(circle at 88% 30%, rgba(93, 157, 255, 0.07), transparent 34rem),
    linear-gradient(180deg, #050713 0%, #060a16 52%, #03050c 100%);
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.42;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
button { color: inherit; }

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  width: min(calc(100% - 2rem), var(--max));
  min-height: 5.25rem;
  margin: 0 auto;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.025em; }
.brand img { width: 2.45rem; height: 2.45rem; object-fit: contain; }
.site-header > p { margin: 0; color: var(--text-muted); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em; }
.back-link { justify-self: end; color: var(--text-soft); font-size: 0.7rem; font-weight: 600; transition: color 160ms ease; }
.back-link:hover { color: #fff; }
.back-link span { margin-left: 0.5rem; color: var(--accent); }

/* Keep CTA arrows consistent across devices; iOS otherwise renders ↗ as emoji. */
.back-link > span[aria-hidden="true"],
.portfolio-cta > a span[aria-hidden="true"],
.project-copy > span[aria-hidden="true"],
.optional-link > span[aria-hidden="true"] {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  flex: 0 0 0.78rem;
  overflow: hidden;
  background-color: currentColor;
  -webkit-mask: url("../up-right-arrow.png") center / contain no-repeat;
  mask: url("../up-right-arrow.png") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
}

main { width: min(100%, var(--max)); margin: 0 auto; }
.eyebrow { margin: 0 0 1.1rem; color: #8db7fb; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }

.folder-section { min-height: calc(100vh - 5.25rem); padding: clamp(4.5rem, 8vw, 7rem) var(--pad); }
.section-intro { display: grid; margin-bottom: clamp(3rem, 5vw, 4.5rem); grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: end; }
.section-intro h2 { margin: 0; font-size: clamp(3.3rem, 7vw, 7rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.065em; }
.section-intro > p { max-width: 27rem; margin: 0; justify-self: end; color: var(--text-soft); font-size: 0.86rem; line-height: 1.7; }

.folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.folder-card {
  position: relative;
  min-height: 13.5rem;
  padding: 0;
  overflow: visible;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: transform 220ms ease;
}
.folder-card::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 43%;
  height: 2.6rem;
  content: "";
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  background: rgba(16, 31, 61, 0.94);
}
.folder-card::after {
  position: absolute;
  z-index: 1;
  inset: 1.9rem 0 0;
  content: "";
  border: 1px solid var(--line-strong);
  border-radius: 0 1.2rem 1.2rem 1.2rem;
  background:
    linear-gradient(150deg, rgba(29, 57, 109, 0.88), rgba(8, 17, 36, 0.96) 72%),
    rgba(11, 22, 46, 0.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 18px 50px rgba(0,0,0,0.2);
  backdrop-filter: blur(16px);
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.folder-card:hover { transform: translateY(-7px); }
.folder-card:hover::after, .folder-card:focus-visible::after { border-color: rgba(130, 181, 255, 0.55); box-shadow: 0 22px 65px rgba(0,0,0,0.28), 0 0 38px rgba(66, 132, 235, 0.14), inset 0 1px 0 rgba(255,255,255,0.09); }
.folder-preview { position: absolute; z-index: 2; top: 2.65rem; right: 1.1rem; left: 1.1rem; height: 6rem; perspective: 700px; }
.folder-preview > span { position: absolute; inset: 0.4rem 10% 0; overflow: hidden; border: 1px solid rgba(195, 219, 255, 0.21); border-radius: 0.8rem; background: #0a1120; box-shadow: 0 14px 34px rgba(0,0,0,0.3); transform-origin: bottom center; }
.folder-preview > span:first-child { opacity: 0.42; transform: translateY(-0.65rem) rotate(-3deg) scale(0.88); }
.folder-preview > span:nth-child(2) { opacity: 0.72; transform: translateY(-0.15rem) rotate(2.5deg) scale(0.94); }
.folder-preview > span:last-child { transform: translateY(0.45rem); }
.folder-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: #08101f; filter: saturate(0.88) contrast(1.03); }
.folder-preview.is-empty span { display: grid; place-items: center; background: linear-gradient(145deg, #122344, #081124); }
.folder-preview.is-empty b { color: #8db7ff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.12em; }
.folder-preview.is-designed { top: 2.45rem; height: 6.55rem; perspective: none; }
.folder-preview.is-designed > .folder-cover {
  --cover-accent: #75aaff;
  --cover-accent-soft: rgba(117, 170, 255, 0.22);
  inset: 0;
  isolation: isolate;
  opacity: 1;
  border-color: rgba(151, 194, 255, 0.28);
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 82% 18%, var(--cover-accent-soft), transparent 31%),
    linear-gradient(135deg, rgba(24, 47, 88, 0.94), rgba(5, 12, 27, 0.98) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.34);
  transform: none;
}
.folder-preview.is-designed > .folder-cover::before {
  position: absolute;
  z-index: -1;
  inset: auto -8% -65% 42%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(137, 183, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 1.4rem rgba(93, 151, 247, 0.04), 0 0 0 3.2rem rgba(93, 151, 247, 0.025);
}
.folder-preview.is-designed > .folder-cover::after {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.6rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--cover-accent));
  box-shadow: 0 0 16px var(--cover-accent-soft);
}
.folder-cover-grid {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: linear-gradient(rgba(133,176,241,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(133,176,241,0.08) 1px, transparent 1px);
  background-size: 1.2rem 1.2rem;
  mask-image: linear-gradient(90deg, #000, transparent 76%);
}
.folder-cover-orbit { position: absolute; top: -2.75rem; right: -1.25rem; width: 8rem; aspect-ratio: 1; border: 1px solid rgba(142,187,255,0.16); border-radius: 50%; }
.folder-cover-number { position: absolute; top: 0.7rem; right: 0.75rem; color: rgba(192,216,255,0.55); font-size: 0.52rem; font-weight: 600; letter-spacing: 0.16em; }
.folder-cover-mark { position: absolute; top: 0.75rem; left: 0.85rem; color: #dceaff; font-size: clamp(1.2rem, 2.25vw, 1.75rem); font-weight: 500; letter-spacing: -0.06em; text-shadow: 0 0 24px var(--cover-accent-soft); }
.folder-cover-copy { position: absolute; right: 0.85rem; bottom: 0.7rem; left: 0.85rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.folder-cover-copy small { color: var(--cover-accent); font-size: 0.48rem; font-weight: 600; letter-spacing: 0.15em; }
.folder-cover-copy b { color: #aabbd5; font-size: 0.58rem; font-weight: 500; }
.folder-cover--video-editing::before { inset: -72% 37% auto -13% !important; }
.folder-cover--video-editing .folder-cover-grid { background-size: 2rem 0.72rem; transform: skewX(-16deg); }
.folder-cover--video-production::before { inset: -35% -9% auto auto !important; width: 6.2rem; }
.folder-cover--video-production .folder-cover-orbit { top: 0.7rem; right: 1.1rem; width: 2.35rem; box-shadow: 0 0 0 0.75rem rgba(107,164,255,0.035); }
.folder-cover--website-software .folder-cover-grid { background-size: 2.4rem 100%, 100% 2.4rem; }
.folder-cover--website-software::before { inset: auto 8% -117% auto !important; width: 10rem; border-radius: 22%; transform: rotate(28deg); }
.folder-cover--application, .folder-cover--automation { filter: saturate(0.78); }
.folder-cover--application .folder-cover-grid, .folder-cover--automation .folder-cover-grid { opacity: 0.18; }
.folder-cover--application::after, .folder-cover--automation::after { opacity: 0.5; }
.folder-card:hover .folder-cover { border-color: rgba(166, 204, 255, 0.5); }
.folder-meta { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.2rem; left: 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 0.8rem; align-items: end; }
.folder-meta b { display: block; margin-bottom: 0.38rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; }
.folder-meta small { color: #8290a7; font-size: 0.62rem; }
.folder-meta i { display: grid; width: 2rem; height: 2rem; place-items: center; color: #a9c9ff; border: 1px solid var(--line); border-radius: 50%; font-size: 0.72rem; font-style: normal; }

.folder-project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.folder-project-grid.is-folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.project-card { position: relative; grid-column: span 4; padding: 0; overflow: hidden; color: var(--text); border: 1px solid var(--line); border-radius: 1rem; outline: 0; background: #080f20; cursor: pointer; text-align: left; box-shadow: 0 18px 55px rgba(0,0,0,0.18); transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.project-card.is-wide { grid-column: span 8; }
.project-card:hover, .project-card:focus-visible { border-color: rgba(132, 180, 253, 0.46); box-shadow: 0 24px 70px rgba(0,0,0,0.3), 0 0 36px rgba(67, 132, 235, 0.1); transform: translateY(-5px); }
.project-image { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #071020; }
.project-card.is-wide .project-image { aspect-ratio: 16 / 8.25; }
.project-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(3,7,15,0.38), transparent 48%); pointer-events: none; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 300ms ease; }
.project-image.media-placeholder { display: grid; place-content: center; justify-items: center; gap: 1.15rem; background: radial-gradient(circle at 50% 35%, rgba(91,151,255,0.23), transparent 34%), linear-gradient(145deg, #102142, #060d1c 70%); }
.project-image.media-placeholder small { color: #94b9f5; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.project-image.media-placeholder b { display: grid; width: 4rem; height: 4rem; place-items: center; color: #07101f; border-radius: 50%; background: linear-gradient(135deg, #d3e4ff, #6ca4ff); box-shadow: 0 16px 40px rgba(69,139,255,0.25); font-size: 1rem; }
.project-card:hover .project-image img { filter: saturate(1.08); transform: scale(1.035); }
.project-copy { display: grid; padding: 1.15rem 1.2rem 1.25rem; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
.project-copy small { display: block; margin-bottom: 0.4rem; color: #7791bb; font-size: 0.56rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
.project-copy h3 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; }
.project-copy .project-proof { display: block; margin-top: 0.65rem; color: #9abcf3; font-size: 0.6rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.project-copy > span { color: #91b8f7; font-size: 0.82rem; }
.empty-state { padding: 4rem 1rem; color: var(--text-soft); border: 1px dashed var(--line-strong); border-radius: 1rem; text-align: center; }
.empty-state p { margin: 0 0 0.5rem; color: #fff; font-size: 1.2rem; }
.empty-state span { font-size: 0.75rem; }
.empty-state code { color: #aacaff; }

.portfolio-cta { display: grid; min-height: 32rem; padding: clamp(5rem, 10vw, 9rem) var(--pad); place-content: center; text-align: center; }
.portfolio-cta h2 { max-width: 13ch; margin: 0 auto 2.25rem; font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; line-height: 0.94; letter-spacing: -0.065em; }
.portfolio-cta h2 strong { color: #8db7ff; font-weight: 600; }
.portfolio-cta > a, .optional-link { display: inline-flex; min-height: 3.2rem; padding: 0 1.1rem; align-items: center; justify-content: center; gap: 1rem; color: #07101f; border-radius: 0.7rem; background: linear-gradient(135deg, #c5dcff, #6da5ff); font-size: 0.7rem; font-weight: 700; }
.optional-link[hidden] { display: none !important; }
.portfolio-cta > a { justify-self: center; }

footer { display: grid; width: min(calc(100% - 2rem), var(--max)); min-height: 9rem; margin: 0 auto; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.68rem; }
.footer-brand img { width: 2rem; height: 2rem; object-fit: contain; }
footer p { justify-self: center; text-align: center; }
footer > span { justify-self: end; }

body.modal-open { overflow: hidden; }
.folder-modal, .project-modal { position: fixed; inset: 0; display: grid; padding: 1rem; place-items: center; }
.folder-modal { z-index: 100; }
.project-modal { z-index: 120; }
.folder-modal[hidden],
.project-modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,4,11,0.86); backdrop-filter: blur(18px); }
.folder-modal-card { position: relative; z-index: 1; width: min(100%, 78rem); max-height: calc(100dvh - 2rem); padding: clamp(1.25rem, 3vw, 2.2rem); overflow: auto; scrollbar-width: none; border: 1px solid var(--line-strong); border-radius: 1.25rem; background: #070d1b; box-shadow: 0 40px 120px rgba(0,0,0,0.62); }
.modal-card { scrollbar-width: none; }
.folder-modal-card::-webkit-scrollbar, .modal-card::-webkit-scrollbar { width: 0; height: 0; }
.folder-modal-card::-webkit-scrollbar-track, .modal-card::-webkit-scrollbar-track { background: transparent; }
.folder-modal-card::-webkit-scrollbar-thumb, .modal-card::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(136, 157, 191, 0.36); }
.folder-modal-card::-webkit-scrollbar-button, .modal-card::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.folder-modal-head { display: flex; margin-bottom: 2rem; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.folder-modal-heading { max-width: 50rem; }
.folder-modal-head h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 500; line-height: 0.94; letter-spacing: -0.06em; }
.folder-summary { max-width: 46rem; margin: 1rem 0 0; color: var(--text-soft); font-size: 0.78rem; line-height: 1.65; }
.folder-back { margin: 0 0 1.25rem; padding: 0; color: #91b8f7; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; }
.folder-back:hover, .folder-back:focus-visible { color: #d9e7ff; }
.folder-modal-actions { display: flex; align-items: center; gap: 1rem; color: var(--text-muted); font-size: 0.68rem; }
.folder-modal-actions b { color: #d8e6ff; font-weight: 600; }
.folder-modal-actions button { position: relative; display: block; width: 2.65rem; height: 2.65rem; padding: 0; appearance: none; color: #dce7fb; border: 1px solid rgba(190,215,255,0.2); border-radius: 50%; background: transparent; cursor: pointer; font-size: 0; line-height: 0; }
.modal-card { position: relative; z-index: 1; display: grid; width: min(100%, 68rem); max-height: calc(100dvh - 2rem); overflow: auto; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); border: 1px solid var(--line-strong); border-radius: 1.25rem; background: #070d1b; box-shadow: 0 40px 120px rgba(0,0,0,0.62); }
.modal-close { position: absolute; z-index: 3; top: 1rem; right: 1rem; display: block; width: 2.65rem; height: 2.65rem; padding: 0; appearance: none; color: #dce7fb; border: 1px solid rgba(190,215,255,0.24); border-radius: 50%; background: rgba(5,10,22,0.76); cursor: pointer; font-size: 0; line-height: 0; backdrop-filter: blur(12px); }
.folder-modal-actions button::before, .folder-modal-actions button::after, .modal-close::before, .modal-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.78rem; height: 1.5px; border-radius: 999px; background: currentColor; transform-origin: center; }
.folder-modal-actions button::before, .modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.folder-modal-actions button::after, .modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-media { display: grid; min-height: 34rem; place-items: center; overflow: hidden; background: #030711; }
.modal-media img { width: 100%; height: 100%; max-height: 75dvh; object-fit: contain; }
.modal-media > img[hidden], .modal-media-placeholder[hidden] { display: none !important; }
.modal-media-placeholder { display: grid; width: 100%; min-height: 34rem; place-content: center; justify-items: center; gap: 1.5rem; background: radial-gradient(circle at 50% 42%, rgba(91,151,255,0.24), transparent 32%), linear-gradient(145deg, #102142, #050b17 70%); }
.modal-media-placeholder span { color: #9cc0f8; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.modal-media-placeholder b { display: grid; width: 5.25rem; height: 5.25rem; place-items: center; color: #07101f; border-radius: 50%; background: linear-gradient(135deg, #d3e4ff, #6ca4ff); box-shadow: 0 18px 55px rgba(69,139,255,0.28); }
.modal-content { display: flex; padding: clamp(1.5rem, 4vw, 3rem); flex-direction: column; justify-content: center; }
.modal-content h2 { margin: 0 0 1.2rem; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.055em; }
.modal-description { margin: 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.75; }
.modal-proof { margin: 1.15rem 0 0; color: #a9c9ff; font-size: 0.75rem; font-weight: 600; }
.service-list { display: flex; margin: 2rem 0; flex-wrap: wrap; gap: 0.45rem; }
.service-list span { padding: 0.5rem 0.65rem; color: #aabbd6; border: 1px solid var(--line); border-radius: 999px; font-size: 0.6rem; }
.optional-link { align-self: flex-start; }

@media (max-width: 1180px) {
  .folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header > p { display: none; }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card, .project-card.is-wide { grid-column: span 6; }
  .folder-project-grid.is-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-card { grid-template-columns: 1fr; }
  .modal-media { min-height: 22rem; }
}

@media (max-width: 640px) {
  .site-header { width: calc(100% - 1.2rem); min-height: 4.7rem; }
  .brand span { font-size: 0.65rem; }
  .brand img { width: 2.2rem; height: 2.2rem; }
  .back-link { font-size: 0; }
  .back-link::before { content: "Kembali"; font-size: 0.66rem; }
  .back-link span { font-size: 0.7rem; }
  .folder-section { padding-top: 4rem; }
  .section-intro { grid-template-columns: 1fr; gap: 1rem; }
  .section-intro > p { justify-self: start; }
  .folder-grid { grid-template-columns: 1fr; gap: 1.35rem; }
  .folder-card { min-height: 14rem; }
  .folder-project-grid { grid-template-columns: 1fr; }
  .folder-project-grid.is-folder-grid { grid-template-columns: 1fr; }
  .project-card, .project-card.is-wide { grid-column: 1; }
  .project-card.is-wide .project-image { aspect-ratio: 4 / 3; }
  .portfolio-cta { min-height: 27rem; }
  footer { padding: 2rem 0; grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
  footer p, footer > span, .footer-brand { justify-self: center; }
  .folder-modal, .project-modal { padding: 0.55rem; }
  .folder-modal { align-items: end; }
  .project-modal { place-items: center; }
  .folder-modal-card { max-height: calc(100dvh - 1.1rem); padding: 1.2rem; border-radius: 1rem; }
  .folder-modal-head { margin-bottom: 1.4rem; }
  .folder-modal-actions > span { display: none; }
  .modal-card { max-height: calc(100dvh - 1.1rem); border-radius: 1rem; }
  .modal-media { min-height: 18rem; }
  .modal-content { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}