/* ============================================================
   KOUNI WEBSITE
   ============================================================ */

:root {
  --background: #f5f3ef;
  --paper: #fbfaf7;
  --surface: #ebe8e2;

  --black: #141311;
  --charcoal: #25221e;

  --text: #171614;
  --secondary: #68635c;
  --muted: #9b958c;

  --line: #d7d2ca;

  --ivory: #f4f1eb;

  --radius-large: 44px;
  --radius-medium: 30px;

  --container: 1240px;

  --arabic:
    "IBM Plex Sans Arabic",
    sans-serif;

  --editorial:
    "Playfair Display",
    serif;
}


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--arabic);

  background: var(--background);
  color: var(--text);

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--black);
  color: var(--ivory);
}

:focus-visible {
  outline:
    2px solid var(--black);

  outline-offset: 4px;
}

.container {
  width:
    min(
      calc(100% - 48px),
      var(--container)
    );

  margin-inline: auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;

  inset:
    0 0 auto;

  z-index: 1000;

  background:
    rgba(
      245,
      243,
      239,
      0.82
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  border-bottom:
    1px solid
    rgba(
      23,
      22,
      20,
      0.08
    );
}

.header-inner {
  height: 86px;

  display: flex;

  align-items: center;
  justify-content:
    space-between;
}


/* ============================================================
   KOUNI BRAND
   ============================================================ */

.brand,
.footer-brand {
  direction: ltr;

  font-family:
    var(--editorial);

  font-size: 24px;
  font-weight: 500;

  letter-spacing: 0.12em;

  line-height: 1;

  white-space: nowrap;
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

.desktop-nav {
  display: flex;

  align-items: center;

  gap: 34px;

  font-size: 12px;
  font-weight: 500;
}

.desktop-nav a {
  position: relative;
}

.desktop-nav a::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background:
    var(--black);

  transition:
    width 0.3s ease;
}

.desktop-nav a:hover::after {
  width: 100%;
}


/* ============================================================
   MENU BUTTON
   ============================================================ */

.menu-button {
  width: 46px;
  height: 46px;

  display: none;

  border:
    1px solid
    var(--line);

  border-radius: 50%;

  background:
    transparent;

  align-items: center;
  justify-content:
    center;

  flex-direction:
    column;

  gap: 5px;

  cursor: pointer;
}

.menu-button span {
  width: 17px;
  height: 1px;

  display: block;

  background:
    var(--black);

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.menu-button.active
span:first-child {
  transform:
    translateY(3px)
    rotate(45deg);
}

.menu-button.active
span:last-child {
  transform:
    translateY(-3px)
    rotate(-45deg);
}

.mobile-menu {
  display: none;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height: 100vh;

  position: relative;

  display: flex;
  align-items: center;

  padding:
    150px 0 80px;

  overflow: hidden;
}

.hero-grid {
  display: grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  gap: 80px;

  align-items: center;
}

.hero-content {
  position: relative;

  z-index: 5;
}

.eyebrow {
  display: flex;

  align-items: center;

  gap: 11px;

  direction: ltr;

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 2px;

  color:
    var(--secondary);
}

.eyebrow span {
  display: block;

  width: 28px;
  height: 1px;

  background:
    currentColor;
}

.hero h1,
.section h2 {
  font-weight: 500;
}

.hero h1 {
  margin-top: 24px;

  font-size:
    clamp(
      54px,
      7vw,
      96px
    );

  line-height: 1.08;

  letter-spacing: -3px;
}

.hero-description {
  max-width: 560px;

  margin-top: 26px;

  color:
    var(--secondary);

  font-size: 17px;

  line-height: 1.95;
}

.hero-actions {
  display: flex;

  align-items: center;

  gap: 28px;

  margin-top: 38px;
}

.primary-button {
  min-height: 56px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 25px;

  padding:
    0 24px;

  background:
    var(--black);

  color: white;

  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    opacity 0.3s ease;
}

.primary-button:hover {
  transform:
    translateY(-2px);

  background:
    #292622;
}

.primary-button:active {
  transform:
    translateY(0);

  opacity: 0.85;
}

.primary-button span {
  font-size: 18px;
}

.text-link {
  font-size: 13px;
  font-weight: 600;

  border-bottom:
    1px solid
    var(--black);

  padding-bottom: 3px;
}


/* ============================================================
   HERO VISUAL
   ============================================================ */

.hero-visual {
  min-height: 610px;

  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;
}

.fashion-object {
  width:
    min(
      470px,
      100%
    );

  aspect-ratio: 0.82;

  position: relative;

  overflow: hidden;

  color:
    var(--ivory);

  background:
    linear-gradient(
      145deg,
      #1e1c19,
      #0f0e0d
    );

  border-radius:
    43% 57% 52% 48% /
    37% 41% 59% 63%;

  box-shadow:
    0 45px 100px
    rgba(
      0,
      0,
      0,
      0.16
    );

  will-change:
    transform;
}

.fashion-object::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  top: -95px;
  left: -80px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-radius: 50%;
}

.fashion-object::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -65px;
  bottom: -35px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius: 50%;
}

.fashion-object-number {
  position: absolute;

  top: 36px;
  right: 42px;

  width: 45px;
  height: 45px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.24
    );

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  direction: ltr;

  font-size: 8px;

  letter-spacing: 1px;
}

.fashion-object-center {
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;
}

.small-label {
  direction: ltr;

  font-size: 8px;

  letter-spacing: 3px;

  opacity: 0.6;

  margin-bottom: 21px;
}

.large-word {
  direction: ltr;

  font-family:
    var(--editorial);

  font-size:
    clamp(
      52px,
      6vw,
      82px
    );

  line-height: 0.87;

  text-align: center;

  letter-spacing: -3px;
}

.fashion-object-footer {
  position: absolute;

  left: 50%;
  bottom: 35px;

  transform:
    translateX(-50%);

  width: max-content;

  direction: ltr;

  font-size: 7px;

  letter-spacing: 2px;

  opacity: 0.48;
}

.floating-bubble {
  position: absolute;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;
}

.bubble-small {
  width: 82px;
  height: 82px;

  right: 0;
  bottom: 105px;

  background:
    var(--paper);

  border:
    1px solid
    var(--line);

  font-family:
    var(--editorial);

  font-size: 19px;

  font-weight: 500;

  direction: ltr;

  box-shadow:
    0 22px 55px
    rgba(
      0,
      0,
      0,
      0.09
    );

  will-change:
    transform;
}

.bubble-outline {
  width: 145px;
  height: 145px;

  top: 25px;
  left: 5px;

  border:
    1px solid
    rgba(
      23,
      22,
      20,
      0.14
    );
}

.hero-orbit {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.orbit-one {
  width: 420px;
  height: 420px;

  right: -270px;
  top: 160px;

  border:
    1px solid
    rgba(
      23,
      22,
      20,
      0.09
    );
}

.orbit-two {
  width: 280px;
  height: 280px;

  left: -190px;
  bottom: -40px;

  background:
    rgba(
      23,
      22,
      20,
      0.025
    );
}

.scroll-indicator {
  position: absolute;

  bottom: 32px;
  right: 48px;

  display: flex;

  align-items: center;

  gap: 13px;

  direction: ltr;

  font-size: 7px;

  letter-spacing: 2px;

  color:
    var(--muted);
}

.scroll-indicator div {
  width: 42px;
  height: 1px;

  background:
    var(--line);
}


/* ============================================================
   COMMON SECTIONS
   ============================================================ */

.section {
  padding:
    130px 0;
}

.section h2 {
  margin-top: 22px;

  font-size:
    clamp(
      42px,
      5vw,
      70px
    );

  line-height: 1.15;

  letter-spacing: -2px;
}

.section-number {
  direction: ltr;

  font-size: 10px;

  letter-spacing: 2px;

  color:
    var(--muted);
}


/* ============================================================
   ABOUT
   ============================================================ */

.about-section {
  background:
    var(--paper);

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.about-section
.section-number {
  margin-bottom: 70px;
}

.about-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 120px;
}

.about-copy {
  padding-top: 40px;

  color:
    var(--secondary);
}

.about-copy p {
  font-size: 16px;

  line-height: 2;
}

.about-copy
.large-copy {
  color:
    var(--text);

  font-size: 26px;

  line-height: 1.7;

  margin-bottom: 30px;
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */

.section-top {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  margin-bottom: 70px;
}

.steps-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 14px;
}

.step-card {
  min-height: 365px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  position: relative;

  background:
    var(--paper);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-medium);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.step-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    0 30px 70px
    rgba(
      0,
      0,
      0,
      0.08
    );
}

.step-card.inverted {
  background:
    var(--black);

  color: white;

  border-color:
    var(--black);
}

.step-index {
  direction: ltr;

  font-size: 8px;

  letter-spacing: 1.5px;

  color:
    var(--muted);
}

.step-circle {
  width: 76px;
  height: 76px;

  margin-top: 45px;

  border-radius: 50%;

  background:
    var(--surface);

  display: flex;

  align-items: center;
  justify-content: center;

  direction: ltr;

  font-family:
    var(--editorial);

  font-size: 20px;
}

.inverted
.step-circle {
  background:
    rgba(
      255,
      255,
      255,
      0.10
    );
}

.step-card h3 {
  margin-top: auto;

  font-size: 20px;

  font-weight: 600;
}

.step-card p {
  margin-top: 10px;

  font-size: 13px;

  line-height: 1.8;

  color:
    var(--secondary);
}

.inverted p {
  color:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


/* ============================================================
   COLLECTIONS
   ============================================================ */

.collections-section {
  background:
    var(--paper);
}

.collections-header {
  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 80px;

  align-items: end;

  margin-bottom: 60px;
}

.collections-header p {
  max-width: 420px;

  color:
    var(--secondary);

  font-size: 15px;

  line-height: 1.9;
}

.collection-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 18px;
}

.collection-card {
  background:
    var(--background);

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-large);

  overflow: hidden;
}

.collection-meta {
  height: 63px;

  padding:
    0 25px;

  display: flex;

  align-items: center;
  justify-content:
    space-between;

  direction: ltr;

  font-size: 7px;

  letter-spacing: 1.5px;

  color:
    var(--muted);
}

.collection-art {
  min-height: 430px;

  margin:
    0 15px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 32px;

  background:
    #e6e1d9;
}

.dark-art {
  background:
    var(--black);

  color:
    var(--ivory);
}

.collection-art > span {
  position: relative;

  z-index: 2;

  direction: ltr;

  font-family:
    var(--editorial);

  font-size:
    clamp(
      60px,
      7vw,
      100px
    );

  line-height: 1;

  letter-spacing: -5px;
}

.collection-orbit {
  position: absolute;

  border-radius: 50%;
}

.orbit-a {
  width: 300px;
  height: 300px;

  top: -100px;
  right: -70px;

  border:
    1px solid
    rgba(
      23,
      22,
      20,
      0.12
    );
}

.orbit-b {
  width: 220px;
  height: 220px;

  left: -60px;
  bottom: -80px;

  border:
    1px solid
    rgba(
      23,
      22,
      20,
      0.10
    );
}

.dark-art
.collection-orbit {
  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );
}

.collection-content {
  padding:
    30px 30px 35px;

  display: grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap: 35px;
}

.collection-label {
  direction: ltr;

  display: block;

  margin-bottom: 7px;

  font-size: 7px;

  letter-spacing: 1.5px;

  color:
    var(--muted);
}

.collection-content h3 {
  direction: ltr;

  font-family:
    var(--editorial);

  font-size: 34px;
}

.collection-content p {
  color:
    var(--secondary);

  font-size: 13px;

  line-height: 1.8;
}

.future-collections {
  margin-top: 24px;

  padding:
    24px 2px;

  display: flex;

  align-items: center;
  justify-content:
    space-between;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.future-collections > span {
  direction: ltr;

  font-size: 7px;

  letter-spacing: 1.7px;

  color:
    var(--muted);
}

.future-list {
  direction: ltr;

  display: flex;

  gap: 30px;

  font-family:
    var(--editorial);

  font-size: 17px;

  color:
    var(--secondary);
}


/* ============================================================
   EXPERIENCE
   ============================================================ */

.experience-section {
  position: relative;

  overflow: hidden;

  background:
    var(--black);

  color:
    var(--ivory);
}

.experience-grid {
  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 120px;

  position: relative;

  z-index: 2;
}

.light-eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      0.52
    );
}

.experience-copy p {
  max-width: 450px;

  margin-top: 26px;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size: 15px;

  line-height: 1.9;
}

.experience-list {
  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );
}

.experience-item {
  min-height: 122px;

  display: grid;

  grid-template-columns:
    55px 1fr;

  gap: 30px;

  align-items: center;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );
}

.experience-item > span {
  direction: ltr;

  font-size: 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.42
    );
}

.experience-item h3 {
  font-size: 19px;

  font-weight: 500;
}

.experience-item p {
  margin-top: 4px;

  color:
    rgba(
      255,
      255,
      255,
      0.50
    );

  font-size: 12px;
}

.experience-orbit {
  position: absolute;

  width: 620px;
  height: 620px;

  right: -330px;
  top: -180px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-radius: 50%;
}


/* ============================================================
   PHILOSOPHY
   ============================================================ */

.philosophy-section {
  min-height: 650px;

  display: flex;

  align-items: center;
}

.philosophy-content {
  max-width: 850px;

  margin-inline: auto;

  text-align: center;
}

.quote-mark {
  display: block;

  font-family:
    var(--editorial);

  font-size: 110px;

  line-height: 0.6;

  color:
    var(--line);
}

.philosophy-content p {
  font-size:
    clamp(
      30px,
      4vw,
      55px
    );

  line-height: 1.55;

  letter-spacing: -1px;
}

.philosophy-signature {
  direction: ltr;

  display: inline-block;

  margin-top: 35px;

  font-size: 8px;

  letter-spacing: 2px;

  color:
    var(--muted);
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact-section {
  padding-top: 0;
}

.contact-card {
  min-height: 400px;

  padding: 60px;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end;
  justify-content:
    space-between;

  gap: 40px;

  background:
    var(--black);

  color:
    var(--ivory);

  border-radius:
    var(--radius-large);
}

.contact-card::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -230px;
  left: -100px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius: 50%;
}

.contact-card > * {
  position: relative;

  z-index: 2;
}

.contact-card h2 {
  font-family:
    var(--editorial);

  direction: ltr;

  margin-top: 20px;
}

.contact-card p {
  margin-top: 15px;

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}

.contact-placeholder {
  min-width: 210px;

  padding: 20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.18
    );
}

.contact-placeholder span {
  display: block;

  direction: ltr;

  font-size: 7px;

  letter-spacing: 1.7px;

  color:
    rgba(
      255,
      255,
      255,
      0.42
    );
}

.contact-placeholder strong {
  display: block;

  direction: ltr;

  margin-top: 7px;

  font-family:
    var(--editorial);

  font-size: 17px;

  font-weight: 500;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  padding:
    55px 0;

  border-top:
    1px solid
    var(--line);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;

  gap: 60px;
}

.site-footer p {
  direction: ltr;

  margin-top: 8px;

  font-size: 6.5px;

  letter-spacing: 1.8px;

  color:
    var(--muted);
}

.footer-links {
  display: flex;

  gap: 25px;

  font-size: 11px;

  color:
    var(--secondary);
}

.copyright {
  direction: ltr;

  font-size: 8px;

  letter-spacing: 1.1px;

  color:
    var(--muted);
}


/* ============================================================
   REVEAL ANIMATION
   ============================================================ */

.reveal {
  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity 0.9s ease,
    transform 0.9s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (
  max-width: 1024px
) {

  .hero-grid,
  .about-grid,
  .experience-grid {
    gap: 60px;
  }

  .steps-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .collection-art {
    min-height: 360px;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (
  max-width: 760px
) {

  .container {
    width:
      min(
        calc(
          100% - 30px
        ),
        var(--container)
      );
  }

  .site-header {
    background:
      rgba(
        245,
        243,
        239,
        0.93
      );
  }

  .header-inner {
    height: 72px;
  }

  .brand {
    font-size: 21px;

    letter-spacing:
      0.11em;
  }

  .desktop-nav {
    display: none;
  }

  .menu-button {
    display: flex;
  }

  .mobile-menu {
    position: fixed;

    inset:
      72px 0 auto;

    min-height:
      calc(
        100vh - 72px
      );

    min-height:
      calc(
        100dvh - 72px
      );

    padding:
      50px 22px;

    background:
      var(--paper);

    display: flex;

    flex-direction:
      column;

    gap: 6px;

    transform:
      translateX(100%);

    visibility: hidden;

    transition:
      transform 0.45s
      cubic-bezier(
        0.16,
        1,
        0.3,
        1
      ),
      visibility 0.45s;
  }

  .mobile-menu.active {
    transform:
      translateX(0);

    visibility: visible;
  }

  .mobile-menu a {
    padding:
      17px 0;

    font-size: 21px;

    border-bottom:
      1px solid
      var(--line);
  }

  .hero {
    min-height: auto;

    padding:
      125px 0 90px;
  }

  .hero-grid {
    grid-template-columns:
      1fr;

    gap: 60px;
  }

  .hero h1 {
    font-size: 55px;

    letter-spacing: -2px;
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-visual {
    min-height: 480px;
  }

  .fashion-object {
    width: 90%;
  }

  .bubble-small {
    width: 68px;
    height: 68px;

    right: 1px;
    bottom: 65px;
  }

  .bubble-outline {
    width: 110px;
    height: 110px;

    left: -10px;
  }

  .scroll-indicator {
    display: none;
  }

  .section {
    padding:
      90px 0;
  }

  .section h2 {
    font-size: 43px;

    letter-spacing:
      -1.5px;
  }

  .about-section
  .section-number {
    margin-bottom: 40px;
  }

  .about-grid {
    grid-template-columns:
      1fr;

    gap: 20px;
  }

  .about-copy {
    padding-top: 20px;
  }

  .about-copy
  .large-copy {
    font-size: 21px;
  }

  .section-top {
    margin-bottom: 45px;
  }

  .steps-grid {
    grid-template-columns:
      1fr;
  }

  .step-card {
    min-height: 300px;
  }

  .collections-header {
    grid-template-columns:
      1fr;

    gap: 25px;

    margin-bottom: 40px;
  }

  .collection-grid {
    grid-template-columns:
      1fr;
  }

  .collection-art {
    min-height: 330px;
  }

  .collection-content {
    grid-template-columns:
      1fr;

    gap: 15px;
  }

  .future-collections {
    align-items:
      flex-start;

    gap: 20px;

    flex-direction:
      column;
  }

  .future-list {
    flex-wrap: wrap;

    gap: 18px;

    font-size: 15px;
  }

  .experience-grid {
    grid-template-columns:
      1fr;

    gap: 60px;
  }

  .experience-item {
    grid-template-columns:
      38px
      1fr;

    gap: 15px;
  }

  .philosophy-section {
    min-height: 520px;
  }

  .philosophy-content p {
    font-size: 30px;
  }

  .contact-card {
    min-height: 450px;

    padding:
      38px 26px;

    align-items:
      flex-start;

    flex-direction:
      column;

    justify-content:
      space-between;
  }

  .contact-placeholder {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns:
      1fr;

    gap: 30px;
  }

  .footer-links {
    flex-direction:
      column;

    gap: 10px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (
  prefers-reduced-motion:
  reduce
) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

  .reveal {
    opacity: 1;

    transform: none;
  }

}