/* Kleo — landing page (kleo-app.com). Dark marble, bronze and gold, as the app. */

@font-face {
  font-family: 'Kleo Serif';
  font-weight: 600;
  font-display: swap;
  src: url('/legal/assets/kleo-serif-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Kleo Serif';
  font-weight: 700;
  font-display: swap;
  src: url('/legal/assets/kleo-serif-700.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/legal/assets/dm-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 550;
  font-display: swap;
  src: url('/legal/assets/dm-sans-550.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 650;
  font-display: swap;
  src: url('/legal/assets/dm-sans-650.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --night: #0b0a08;
  --marble: #141310;
  --stone: #1c1b17;
  --line: rgba(232, 208, 150, 0.14);
  --ivory: #efe9dc;
  --muted: #a39c8d;
  --dim: #6f695d;
  --bronze: #a8763e;
  --gold: #c9a45c;
  --gold-hi: #f2dca0;
  --ember: #ff9a3d;
  --serif: 'Kleo Serif', 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.js {
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 6px;
}
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
::selection {
  background: rgba(201, 164, 92, 0.35);
}

.skip {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--gold);
  color: #17140e;
  border-radius: 10px;
  font-weight: 650;
  text-decoration: none;
  transition: top 0.2s;
}
.skip:focus {
  top: 16px;
}

/* ---------- Loader ---------- */
.loader {
  display: none;
}
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--night);
  transition:
    clip-path 1.1s var(--ease-in-out),
    visibility 0s 1.1s;
  clip-path: inset(0 0 0 0);
}
.js.loaded .loader {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}
.loader-mark img {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  animation: breathe 2.4s var(--ease-in-out) infinite;
  box-shadow: 0 0 60px rgba(201, 164, 92, 0.25);
}
@keyframes breathe {
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 90px rgba(201, 164, 92, 0.45);
  }
}
.loader-line {
  width: 180px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.loader-line span {
  display: block;
  height: 100%;
  width: calc(var(--load, 0) * 100%);
  background: linear-gradient(90deg, var(--bronze), var(--gold-hi));
  transition: width 0.4s var(--ease);
}
.loader p {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Progress and header ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 80;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--bronze), var(--gold-hi));
  box-shadow: 0 0 12px rgba(242, 220, 160, 0.6);
}

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
  padding-top: max(14px, env(safe-area-inset-top));
  transition:
    transform 0.6s var(--ease),
    background 0.4s,
    border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.top.scrolled {
  background: rgba(11, 10, 8, 0.88);
  border-color: var(--line);
}
.top.hidden {
  transform: translateY(-110%);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.brand span {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.34em;
}
.top-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.top-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
.top-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.top-nav a:hover {
  color: var(--ivory);
}
.top-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.lang {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.lang a {
  min-width: 34px;
  min-height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
}
.lang a[aria-current] {
  background: var(--gold);
  color: #17140e;
}
@media (max-width: 760px) {
  .top-nav {
    display: none;
  }
  .lang {
    margin-left: auto;
  }
}

/* ---------- Common ---------- */
section {
  position: relative;
}
.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.section-head h2,
.armor-copy h2,
.watch-copy h2,
.final h2 {
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.02;
}
.lede {
  max-width: 560px;
  margin-top: 22px;
  font-size: clamp(16px, 1.35vw, 19px);
  color: var(--muted);
  line-height: 1.65;
}
.section-head {
  padding: 0 var(--gutter);
  max-width: 1100px;
}

/* Gold that moves across a heading's letters. */
.section-head h2,
.armor-copy h2,
.watch-copy h2,
.final h2,
.hero h1 {
  background: linear-gradient(
    100deg,
    var(--ivory) 0%,
    var(--ivory) 38%,
    var(--gold-hi) 48%,
    var(--gold) 52%,
    var(--ivory) 62%,
    var(--ivory) 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* One sweep of gold when the heading has risen, then still: no painting while it is read. */
[data-split].in {
  animation: gild 2.8s var(--ease-in-out) 0.6s 1 both;
}
@keyframes gild {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* Split text: each word rises out of its own mask. */
.js [data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.js [data-split] .w > span {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
.js [data-split].in .w > span {
  transform: none;
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 1.2s var(--ease),
    transform 1.2s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .section-head[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .section-head .lede,
.js .section-head .eyebrow {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s var(--ease) 0.25s,
    transform 1s var(--ease) 0.25s;
}
.js .section-head.in .lede,
.js .section-head.in .eyebrow {
  opacity: 1;
  transform: none;
}

.soon {
  display: inline-flex;
  text-align: center;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 19, 16, 0.82);
  font-size: 13px;
  font-weight: 550;
  color: var(--ivory);
  letter-spacing: 0.02em;
}
.soon-text {
  display: grid;
  text-align: left;
  line-height: 1.35;
}
.soon-text strong {
  font-weight: 650;
}
.soon-text span {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 0 rgba(242, 220, 160, 0.7);
  animation: ping 2s infinite;
}
@keyframes ping {
  70% {
    box-shadow: 0 0 0 10px rgba(242, 220, 160, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 220, 160, 0);
  }
}
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.store {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 8px 26px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--bronze));
  color: #17140e;
  font-weight: 650;
  font-size: 18px;
  line-height: 1.1;
  text-decoration: none;
  box-shadow:
    0 10px 40px rgba(201, 164, 92, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}
.store small {
  font-size: 11px;
  font-weight: 550;
  opacity: 0.75;
}
.store::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}
.store:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 60px rgba(201, 164, 92, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.store:hover::after {
  transform: translateX(120%);
}

/* ---------- Hero: the gates ---------- */
.hero {
  height: 320vh;
  height: 320svh;
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 55%, #1a140b 0%, var(--night) 60%);
}
.gate-ambient {
  position: absolute;
  inset: -10%;
  z-index: 0;
  opacity: 0.55;
}
.gate-ambient img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(48px) brightness(0.42) saturate(1.2);
  transform: scale(1.12);
}
.hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
.gate {
  --gate-h: max(112vh, 112svh);
  position: absolute;
  left: 50%;
  top: -6vh;
  height: var(--gate-h);
  aspect-ratio: 1200 / 2122;
  transform-origin: 50% 54.31%;
  transform: translate3d(-50%, 0, 0);
  z-index: 1;
  will-change: transform;
}
.gate-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%);
  mask-composite: intersect;
  filter: brightness(0.86) saturate(1.05);
  pointer-events: none;
}
.gate-door {
  position: absolute;
  left: 32.87%;
  top: 38.61%;
  width: 34.23%;
  height: 31.4%;
  perspective: 1400px;
  overflow: hidden;
  background: #000;
}
.gate-inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gate-inside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform: scale(1.45);
  will-change: transform;
}
.gate-shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.55;
}
.gate-light {
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    50% 50% at 50% 55%,
    rgba(255, 233, 180, 0.8),
    rgba(255, 170, 70, 0.35) 40%,
    transparent 72%
  );
  opacity: 0;
  mix-blend-mode: screen;
}
.leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}
.leaf-left {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(0deg);
}
.leaf-right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(0deg);
}
.leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 40%);
  opacity: var(--open, 0);
}
.leaf-right::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), transparent 40%);
}
.seam {
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    #fff3d0 15%,
    #ffe2a0 50%,
    #fff3d0 85%,
    transparent
  );
  box-shadow:
    0 0 18px 4px rgba(255, 196, 100, 0.65),
    0 0 60px 12px rgba(255, 170, 70, 0.3);
  opacity: 0.85;
}

.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  text-align: center;
  will-change: transform, opacity;
}
.hero-top {
  top: 0;
  padding-top: max(15vh, 96px);
  padding-bottom: 8vh;
  background: linear-gradient(
    180deg,
    rgba(11, 10, 8, 0.9) 0%,
    rgba(11, 10, 8, 0.6) 60%,
    transparent 100%
  );
}
.hero-bottom {
  bottom: 0;
  padding-top: 10vh;
  padding-bottom: max(13vh, 110px);
  background: linear-gradient(
    0deg,
    rgba(11, 10, 8, 0.95) 0%,
    rgba(11, 10, 8, 0.7) 50%,
    transparent 100%
  );
}
.kicker {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero h1 {
  font-size: clamp(46px, min(8vw, 12.5vh), 132px);
  line-height: 0.98;
  font-weight: 700;
  max-width: 12ch;
}
.hero-sub {
  max-width: 540px;
  font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(239, 233, 220, 0.8);
}
.hero-inside {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 6;
  transform: translateY(-50%) scale(0.92);
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 110px);
  color: var(--ivory);
  opacity: 0;
  letter-spacing: 0.01em;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.6),
    0 10px 60px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  padding: 0 var(--gutter);
}
.cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 6;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
}
.cue i {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.cue i::after {
  content: '';
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--gold-hi);
  animation: drip 2s var(--ease-in-out) infinite;
}
@keyframes drip {
  to {
    top: 110%;
  }
}
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: var(--night);
  opacity: 0;
  pointer-events: none;
}
.js .hero h1 .w > span {
  transition-delay: calc(0.35s + var(--i) * 90ms);
}

/* ---------- The log ---------- */
.log {
  /* Rises over the end of the gates while they fade, rather than after a screen of night. */
  margin-top: -30vh;
  z-index: 8;
  padding-bottom: 12vh;
}
.log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4vw;
  padding: 0 var(--gutter);
  max-width: 1320px;
  margin: 0 auto;
}
.log-steps {
  padding: 10vh 0 20vh;
}
.step {
  min-height: 88vh;
  display: grid;
  align-content: center;
  gap: 14px;
  max-width: 480px;
  opacity: 0.22;
  transition: opacity 0.6s var(--ease);
}
.step.on {
  opacity: 1;
}
.step-index {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.step h3 {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
}
.step p {
  font-size: 18px;
  color: var(--muted);
}
.step-phone,
.step-watch {
  display: none;
}
/* The watch stands beside the phone, and comes forward on its own step. */
.log-watch {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 250px;
  transform: translate3d(calc(min(13vw, 190px) - 50%), calc(-50% + 20vh), 0) scale(0.56);
  transition: transform 1s var(--ease);
  will-change: transform;
}
.log-stage.wrist .log-watch {
  transform: translate3d(calc(min(4vw, 60px) - 50%), -50%, 0) scale(0.95);
}
.phone {
  transition: opacity 0.8s var(--ease);
}
.log-stage.wrist .phone {
  opacity: 0.32;
}
.log-stage.wrist .chip {
  opacity: 0;
}
.chip {
  transition: opacity 0.5s;
}
.log-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1600px;
}
.phone {
  /* Always whole in the window: its height follows the window's. */
  width: min(340px, 26vw, 35vh);
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(-2deg);
  transform-style: preserve-3d;
  will-change: transform;
}
.screen {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition:
    clip-path 0.9s var(--ease-in-out),
    transform 0.9s var(--ease-in-out);
  transform: scale(1.08);
}
.screen.on {
  clip-path: inset(0 0 0 0);
  transform: none;
  z-index: 2;
}
.screen.off {
  clip-path: inset(0 0 0 0);
  z-index: 1;
  transform: scale(0.96);
  filter: brightness(0.4);
  transition:
    transform 0.9s var(--ease-in-out),
    filter 0.9s;
}
.screens {
  position: absolute;
  inset: 0;
}
/* ---------- A phone ---------- */
/* The screen keeps the iPhone's proportions (390 by 844 points): a capture of the
   app fills it exactly. Sizes inside it follow its width (container units). */
.device {
  position: relative;
  width: 100%;
  padding: 4.4%;
  border-radius: 17% / 7.9%;
  background: linear-gradient(
    150deg,
    #5a4f3a 0%,
    #1d1a14 20%,
    #0d0c0a 48%,
    #1d1a14 80%,
    #4a412f 100%
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(242, 220, 160, 0.3),
    inset 0 0 0 4px #050504,
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 60px 110px -30px rgba(0, 0, 0, 0.95),
    0 0 90px -20px rgba(201, 164, 92, 0.2);
}
.device::before,
.device::after {
  content: '';
  position: absolute;
  width: 1.1%;
  border-radius: 2px;
  background: linear-gradient(90deg, #6b5d42, #2a251b);
}
.device::before {
  left: -0.9%;
  top: 19%;
  height: 12%;
}
.device::after {
  right: -0.9%;
  top: 25%;
  height: 16%;
}
.device-screen {
  position: relative;
  aspect-ratio: 390 / 844;
  border-radius: 13.5% / 6.25%;
  overflow: hidden;
  background: #1c1d1a;
  container-type: inline-size;
  isolation: isolate;
}
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.device-status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 13.6cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2cqw 7.6cqw 0 9.4cqw;
  color: #fff;
  pointer-events: none;
}
.ds-time {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 4.3cqw;
  letter-spacing: -0.01em;
}
.ds-island {
  position: absolute;
  left: 50%;
  top: 2.8cqw;
  width: 31cqw;
  height: 9.4cqw;
  border-radius: 99px;
  background: #000;
  transform: translateX(-50%);
}
.ds-icons {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
}
.ds-icons svg {
  height: 3.1cqw;
  width: auto;
  fill: currentColor;
}
.ds-icons svg:last-child {
  height: 3.4cqw;
}
.device-home {
  position: absolute;
  left: 50%;
  bottom: 2.1cqw;
  z-index: 5;
  width: 35cqw;
  height: 1.3cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}
.device-glass {
  position: absolute;
  inset: 4.4%;
  border-radius: 13.5% / 6.25%;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 28%,
    transparent 72%,
    rgba(255, 255, 255, 0.04) 100%
  );
  pointer-events: none;
}

.chip {
  position: absolute;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ivory);
  background: rgba(28, 27, 23, 0.94);
  border: 1px solid rgba(242, 220, 160, 0.22);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  will-change: transform;
  white-space: nowrap;
}
.chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: 2px;
}
.chip-0 {
  left: 4%;
  top: 24%;
}
.chip-1 {
  right: 2%;
  top: 36%;
}
.chip-2 {
  left: 0;
  top: 62%;
}
.chip-2::before {
  background: #8aad91;
}
.chip-3 {
  right: 8%;
  top: 76%;
}

/* ---------- Strip: numbers and lifts ---------- */
.strip {
  padding: 8vh 0 14vh;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--marble), var(--night));
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0 var(--gutter) 9vh;
  max-width: 1320px;
  margin: 0 auto;
}
.stat {
  display: grid;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.stat strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1;
  background: linear-gradient(180deg, var(--gold-hi), var(--bronze));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat span {
  font-size: 14px;
  color: var(--muted);
  max-width: 200px;
}
.stat:nth-child(2) {
  --delay: 0.1s;
}
.stat:nth-child(3) {
  --delay: 0.2s;
}
.stat:nth-child(4) {
  --delay: 0.3s;
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee 48s linear infinite;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 220, 160, 0.42);
  white-space: nowrap;
}
.marquee-track i {
  font-style: normal;
  font-size: 0.4em;
  color: var(--gold);
  -webkit-text-stroke: 0;
}
.marquee-track span:hover {
  color: var(--gold-hi);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Ranks and armour ---------- */
.armor-rank {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}
.medals {
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  flex: none;
  perspective: 800px;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
}
.medal {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.medal:first-child {
  opacity: 1;
}
.medal-face {
  position: absolute;
  left: var(--hole-l);
  top: var(--hole-t);
  width: var(--hole-d);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
}
.medal-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.25) brightness(0.95);
}
.medal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.medal-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 65%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  mix-blend-mode: overlay;
  animation: sheen 4.2s var(--ease-in-out) infinite;
}
@keyframes sheen {
  0%,
  55% {
    background-position: 120% 0;
  }
  100% {
    background-position: -20% 0;
  }
}
.medal-names {
  position: relative;
  flex: 1;
  height: 66px;
  overflow: hidden;
}
.medal-name {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 48px;
  line-height: 66px;
  color: var(--rank-c);
  opacity: 0;
  will-change: transform, opacity;
}
.medal-name:first-child {
  opacity: 1;
}
[data-rank='bronze'] {
  --rank-c: #d08a52;
}
[data-rank='argent'] {
  --rank-c: #d6d8dc;
}
[data-rank='or'] {
  --rank-c: #f0c95e;
}
[data-rank='platine'] {
  --rank-c: #9fd8d3;
}
[data-rank='diamant'] {
  --rank-c: #a9c8ff;
}
[data-rank='titan'] {
  --rank-c: #e07a6c;
}
[data-rank='olympien'] {
  --rank-c: #f2dca0;
}
/* ---------- Armour ---------- */
.armor {
  height: 380vh;
}
.armor-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4vw;
  padding: 0 var(--gutter);
  max-width: 1320px;
  margin: 0 auto;
}
.armor-scale {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.armor-scale li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 550;
  color: var(--dim);
  transition:
    color 0.5s,
    transform 0.5s var(--ease);
}
.armor-scale li.on {
  color: var(--ivory);
}
.armor-scale li.done {
  color: var(--muted);
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition:
    opacity 0.5s,
    box-shadow 0.5s;
}
.armor-scale li.on .dot {
  opacity: 1;
  box-shadow: 0 0 14px currentColor;
}
.dot-bronze {
  color: #d08a52;
}
.dot-argent {
  color: #d6d8dc;
}
.dot-or {
  color: #f0c95e;
}
.dot-platine {
  color: #9fd8d3;
}
.dot-diamant {
  color: #a9c8ff;
}
.dot-titan {
  color: #e07a6c;
}
.dot-olympien {
  color: #f2dca0;
}
.armor-figure {
  position: relative;
  height: 86vh;
  display: grid;
  place-items: center;
}
.armor-aura {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rank-rgb, 208, 138, 82), 0.45), transparent 65%);
  filter: blur(30px);
  transition: background 0.8s;
  animation: aura 5s var(--ease-in-out) infinite;
}
@keyframes aura {
  50% {
    transform: scale(1.12);
    opacity: 0.8;
  }
}
.armor-plinth {
  position: absolute;
  bottom: 6%;
  width: 60%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--rank-rgb, 208, 138, 82), 0.4), transparent);
  filter: blur(8px);
}
.armor-piece {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
}
.armor-piece:first-of-type {
  opacity: 1;
}
.armor-piece img {
  height: 100%;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.8));
}

/* ---------- Arena ---------- */
.arena {
  padding: 22vh 0 18vh;
  overflow: hidden;
  isolation: isolate;
}
.arena-back {
  position: absolute;
  inset: -10% 0;
  z-index: -1;
}
.arena-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  will-change: transform;
  filter: brightness(0.38) saturate(1.1);
}
.arena-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      var(--night) 0%,
      rgba(11, 10, 8, 0.3) 30%,
      rgba(11, 10, 8, 0.5) 70%,
      var(--night) 100%
    ),
    radial-gradient(70% 60% at 50% 55%, transparent, rgba(11, 10, 8, 0.8));
}
.arena-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.arena .section-head {
  display: grid;
  justify-items: center;
}
.arena .lede {
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  color: rgba(239, 233, 220, 0.75);
}
.arena-phones {
  position: relative;
  width: min(980px, 92vw);
  height: min(640px, 120vw);
  margin: 10vh auto 6vh;
  perspective: 1800px;
}
.mini-phone {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(290px, 28vw);
}
.mp-center,
.js .mp-center[data-reveal].in {
  z-index: 2;
  transform: translateX(-50%);
}
.mp-left,
.js .mp-left[data-reveal].in {
  transform: translateX(-138%) translateY(9%) rotateY(18deg) rotateZ(-4deg) scale(0.9);
}
.mp-right,
.js .mp-right[data-reveal].in {
  transform: translateX(38%) translateY(9%) rotateY(-18deg) rotateZ(4deg) scale(0.9);
}
.mp-left {
  --delay: 0.15s;
}
.mp-right {
  --delay: 0.3s;
}
.js .mini-phone[data-reveal] {
  filter: blur(6px);
}
.js .mp-center[data-reveal]:not(.in) {
  transform: translateX(-50%) translateY(80px);
}
.js .mp-left[data-reveal]:not(.in) {
  transform: translateX(-50%) translateY(14%) rotateY(0) scale(0.85);
}
.js .mp-right[data-reveal]:not(.in) {
  transform: translateX(-50%) translateY(14%) rotateY(0) scale(0.85);
}
.js .mini-phone[data-reveal].in {
  filter: none;
  transition-duration: 1.4s;
}
.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: min(980px, 100%);
  padding: 0 var(--gutter);
}
.counter {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 26px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(20, 19, 16, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.counter strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;
  color: var(--gold-hi);
  text-shadow: 0 0 40px rgba(242, 220, 160, 0.35);
}
.counter span {
  font-size: 14px;
  color: var(--muted);
}
.counter:nth-child(2) {
  --delay: 0.12s;
}
.counter:nth-child(3) {
  --delay: 0.24s;
}

/* ---------- Titles ---------- */
.titles {
  /* The same chapter as the ranks: it follows the armour without a new opening. */
  padding: 4vh 0 16vh;
}
.title-grid {
  list-style: none;
  margin: 10vh auto 0;
  padding: 0 var(--gutter);
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.title-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 18px 24px;
  border-radius: 26px;
  background: radial-gradient(90% 70% at 50% 30%, #23201a, var(--marble));
  border: 1px solid var(--line);
  text-align: center;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition:
    transform 0.5s var(--ease),
    border-color 0.4s,
    opacity 1.2s var(--ease),
    filter 1.2s var(--ease);
  transform-style: preserve-3d;
}
.js .title-card[data-reveal].in {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}
.js .title-card[data-reveal]:not(.in) {
  transform: perspective(900px) translateY(60px) rotateX(18deg);
}
.title-card:hover {
  border-color: rgba(242, 220, 160, 0.4);
  transition:
    transform 0.15s linear,
    border-color 0.4s;
}
.title-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform: translateZ(40px);
}
.title-decor {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
}
.title-face {
  position: absolute;
  left: 22.2%;
  top: 21.6%;
  width: 55.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #111;
}
.title-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.2) brightness(0.9);
}
.glare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 30%),
    rgba(255, 245, 210, 0.35),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.title-card:hover .glare {
  opacity: 1;
}
.title-card h3 {
  font-size: 26px;
  margin-top: 8px;
  transform: translateZ(24px);
}
.title-card p {
  font-size: 13px;
  color: var(--muted);
  transform: translateZ(16px);
}
.title-card:nth-child(4n + 2) {
  --delay: 0.08s;
}
.title-card:nth-child(4n + 3) {
  --delay: 0.16s;
}
.title-card:nth-child(4n + 4) {
  --delay: 0.24s;
}

/* ---------- Watch ---------- */
.watch-figure {
  display: grid;
  justify-items: center;
  perspective: 1200px;
}
.watch-case {
  position: relative;
  width: 250px;
  aspect-ratio: 41 / 49;
  border-radius: 30% / 25%;
  padding: 14px;
  background: linear-gradient(145deg, #4a4232, #16140f 40%, #2d281e 80%, #5a4f3a);
  box-shadow:
    0 0 0 1px rgba(242, 220, 160, 0.2),
    0 50px 90px -20px rgba(0, 0, 0, 0.9),
    0 0 80px -10px rgba(201, 164, 92, 0.25),
    inset 0 2px 2px rgba(255, 255, 255, 0.15);
  transform: rotateY(-16deg) rotateX(8deg);
  animation: float 6s var(--ease-in-out) infinite;
}
@keyframes float {
  50% {
    transform: rotateY(-10deg) rotateX(4deg) translateY(-12px);
  }
}
.watch-crown {
  position: absolute;
  right: -10px;
  top: 26%;
  width: 12px;
  height: 46px;
  border-radius: 5px;
  background: repeating-linear-gradient(180deg, #6b5d42 0 2px, #2b261c 2px 4px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.watch-screen {
  position: relative;
  height: 100%;
  border-radius: 26% / 21%;
  background: #050505;
  padding: 26px 20px 18px;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: hidden;
}
.w-time {
  position: absolute;
  right: 22px;
  top: 14px;
  font-size: 13px;
  font-weight: 650;
  color: #fff;
}
.w-pulse {
  position: absolute;
  right: 22px;
  top: 32px;
  font-size: 11px;
  color: #e0796c;
}
.heart {
  display: inline-block;
  animation: beat 0.9s infinite;
}
@keyframes beat {
  15% {
    transform: scale(1.3);
  }
  30% {
    transform: scale(1);
  }
}
.w-name {
  margin-top: 34px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ivory);
}
.w-set {
  font-size: 11px;
  color: var(--muted);
}
.w-values {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.w-values b {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--ivory);
  font-weight: 700;
}
.w-button {
  margin-top: 14px;
  padding: 9px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  color: #17140e;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.watch-band {
  width: 170px;
  height: 90px;
  background: linear-gradient(90deg, #15130f, #2a251c 50%, #15130f);
}
.watch-band-top {
  border-radius: 30px 30px 0 0;
  transform: rotateY(-16deg) rotateX(8deg) translateY(10px);
}
.watch-band-bottom {
  border-radius: 0 0 30px 30px;
  transform: rotateY(-16deg) rotateX(8deg) translateY(-10px);
}

/* ---------- Final: the brazier ---------- */
.final {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
  padding: 10vh var(--gutter) 18vh;
  overflow: hidden;
}
.final .lede {
  margin: 24px auto 40px;
}
.brazier {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1080 / 720;
  margin-top: 14vh;
  margin-bottom: 3vh;
}
.fire-gl {
  position: absolute;
  left: 0;
  width: 100%;
  top: -60%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
}
.brazier-bowl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7));
}
.brazier-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: -30%;
  height: 90%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 150, 50, 0.32), transparent);
  filter: blur(30px);
  animation: glow 2.6s var(--ease-in-out) infinite;
}
@keyframes glow {
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
.no-fire .fire-gl {
  display: none;
}

/* ---------- Footer ---------- */
.foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 40px var(--gutter) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  justify-content: center;
}
.links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
.links a:hover {
  color: var(--gold-hi);
}
.copy {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--dim);
  text-align: center;
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .log-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .log-stage {
    display: none;
  }
  .log-steps {
    padding: 6vh 0 0;
  }
  .step {
    min-height: auto;
    padding: 8vh 0;
    opacity: 1;
    max-width: none;
  }
  .step-watch {
    display: block;
    margin: 34px auto 10px;
  }
  .step-phone {
    display: block;
    width: min(290px, 72vw);
    margin: 32px auto 0;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .armor-rank {
    margin-top: 18px;
    gap: 16px;
  }
  .medals {
    width: 86px;
  }
  .medal-names {
    height: 50px;
  }
  .medal-name {
    font-size: 32px;
    line-height: 50px;
  }
  /* On a phone the statue takes what the words leave, never more: always whole. */
  .armor-stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    gap: 0;
    padding-top: max(76px, 9vh);
    padding-bottom: 3vh;
  }
  .armor-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 18px;
  }
  .armor-scale li {
    font-size: 12px;
    gap: 6px;
  }
  .armor-scale li.on {
    transform: none;
  }
  .armor-copy .lede {
    margin-top: 12px;
    font-size: 15px;
  }
  .armor-figure {
    flex: 1;
    min-height: 0;
    height: auto;
    width: 100%;
    margin-top: 1vh;
  }
  .armor-copy .eyebrow {
    margin-bottom: 10px;
  }
  .armor-copy h2 {
    font-size: 38px;
  }
  .arena-phones {
    height: 122vw;
    max-height: 620px;
    margin: 6vh auto 4vh;
  }
  .mini-phone {
    width: 50vw;
    max-width: 260px;
  }
  .mp-left,
  .js .mp-left[data-reveal].in {
    transform: translateX(-104%) translateY(12%) rotateY(18deg) rotateZ(-5deg) scale(0.82);
  }
  .mp-right,
  .js .mp-right[data-reveal].in {
    transform: translateX(4%) translateY(12%) rotateY(-18deg) rotateZ(5deg) scale(0.82);
  }
  .counters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .counter {
    padding: 18px 8px;
    border-radius: 16px;
  }
  .counter strong {
    font-size: 38px;
  }
  .counter span {
    font-size: 11.5px;
    line-height: 1.35;
  }
  .title-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .title-card h3 {
    font-size: 21px;
  }
  .foot {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* ---------- Still: reduced motion or no script ---------- */
html:not(.js) .hero,
.still .hero {
  height: auto;
}
html:not(.js) .log,
.still .log {
  margin-top: 0;
}
html:not(.js) .hero-stage,
.still .hero-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
}
html:not(.js) .armor,
.still .armor {
  height: auto;
}
html:not(.js) .armor-stage,
.still .armor-stage {
  position: relative;
  height: auto;
  min-height: 100vh;
  padding-block: 10vh;
}
/* At rest, the summit: the Olympian medallion with the Olympian armour. */
html:not(.js) .medal,
.still .medal,
html:not(.js) .medal-name,
.still .medal-name {
  opacity: 0 !important;
}
html:not(.js) .medal:last-child,
.still .medal:last-child,
html:not(.js) .medal-name:last-child,
.still .medal-name:last-child {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js) .armor-piece:not(:last-of-type),
.still .armor-piece:not(:last-of-type) {
  display: none;
}
html:not(.js) .armor-piece:last-of-type,
.still .armor-piece:last-of-type {
  position: relative;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  height: 80vh;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}