@font-face {
   font-family: 'WonderGarden';
   src: url('../fonts/wonder-garden-script.ttf') format('truetype');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}

@font-face {
   font-family: 'CormorantGaramond';
   src: url('../fonts/CormorantGaramond-Regular.ttf') format('truetype');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
}

@font-face {
   font-family: 'CormorantGaramond';
   src: url('../fonts/CormorantGaramond-Medium.ttf') format('truetype');
   font-style: normal;
   font-weight: 500;
   font-display: swap;
}

html {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

*,
*::before,
*::after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}

:root {
   --bg-main: #fcfaf7;
   --bg-soft: #f7f1eb;

   --text-main: #3d312c;
   --text-title: #5f5049;
   --text-soft: rgba(61, 49, 44, 0.84);
   --text-muted: rgba(61, 49, 44, 0.72);

   --line-soft: rgba(97, 82, 75, 0.12);

   --accent: #c3a0a8;
   --accent-deep: #9f7880;

   --shadow-soft: 0 10px 30px rgba(61, 42, 30, 0.04), 0 2px 8px rgba(61, 42, 30, 0.025);
   --shadow-card: 0 24px 60px rgba(61, 42, 30, 0.06), 0 8px 22px rgba(61, 42, 30, 0.035);

   --radius-xl: 32px;

   --section-space: 96px;
   --section-space-compact: 76px;
   --container: 1180px;
   --container-narrow: 860px;
}

body {
   margin: 0;
   min-width: 320px;
   font-family: 'CormorantGaramond', serif;
   color: var(--text-main);
   background:
      radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(252, 250, 247, 1) 56%),
      -webkit-gradient(linear, left top, left bottom, from(#fffdfa), to(var(--bg-main)));
   background:
      -o-radial-gradient(top, circle, rgba(255, 255, 255, 0.98), rgba(252, 250, 247, 1) 56%),
      -o-linear-gradient(top, #fffdfa 0%, var(--bg-main) 100%);
   background:
      radial-gradient(circle at top, rgba(255, 255, 255, 0.98), rgba(252, 250, 247, 1) 56%),
      linear-gradient(180deg, #fffdfa 0%, var(--bg-main) 100%);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   background:
      -o-radial-gradient(10% 10%, circle, rgba(195, 160, 168, 0.055), transparent 18%),
      -o-radial-gradient(88% 6%, circle, rgba(231, 223, 214, 0.12), transparent 18%);
   background:
      radial-gradient(circle at 10% 10%, rgba(195, 160, 168, 0.055), transparent 18%),
      radial-gradient(circle at 88% 6%, rgba(231, 223, 214, 0.12), transparent 18%);
}

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

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

button,
a,
input,
textarea,
select {
   font: inherit;
}

.container {
   width: min(100%, var(--container));
   margin: 0 auto;
   padding-inline: 28px;
}

.container--narrow {
   width: min(100%, var(--container-narrow));
}

.section-offset {
   padding-block: var(--section-space);
}

.section-offset--compact {
   padding-block: var(--section-space-compact);
}

.section-offset--calendar {
   padding-top: 0;
}

.section-offset--tinted {
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(246, 241, 235, 0.68)), to(rgba(243, 238, 232, 0.94)));
   background: -o-linear-gradient(top, rgba(246, 241, 235, 0.68), rgba(243, 238, 232, 0.94));
   background: linear-gradient(180deg, rgba(246, 241, 235, 0.68), rgba(243, 238, 232, 0.94));
}

.section-title {
   margin: 0;
   font-size: clamp(34px, 4vw, 42px);
   line-height: 1.02;
   font-weight: 500;
   text-align: center;
   color: var(--text-title);
}

.section-title::after {
   content: "";
   display: block;
   width: 60px;
   height: 1px;
   margin: 18px auto 0;
   background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(159, 120, 128, 0.72)), to(transparent));
   background: -o-linear-gradient(left, transparent, rgba(159, 120, 128, 0.72), transparent);
   background: linear-gradient(90deg, transparent, rgba(159, 120, 128, 0.72), transparent);
}

.fade-up {
   opacity: 1;
   -webkit-transform: none;
   -ms-transform: none;
   transform: none;
}

.js .fade-up {
   opacity: 0;
   -webkit-transform: translateY(22px);
   -ms-transform: translateY(22px);
   transform: translateY(22px);
   -webkit-transition: opacity 0.85s ease, -webkit-transform 0.85s ease;
   transition: opacity 0.85s ease, -webkit-transform 0.85s ease;
   -o-transition: opacity 0.85s ease, transform 0.85s ease;
   transition: opacity 0.85s ease, transform 0.85s ease;
   transition: opacity 0.85s ease, transform 0.85s ease, -webkit-transform 0.85s ease;
}

.js .fade-up.visible {
   opacity: 1;
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
   transform: translateY(0);
}

.fade-up--delay-1 {
   -webkit-transition-delay: 0.12s;
   -o-transition-delay: 0.12s;
   transition-delay: 0.12s;
}

.hero {
   padding-top: 72px;
   padding-bottom: 84px;
}

.hero__container {
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: minmax(0, 1fr) 64px minmax(340px, 500px);
   grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   gap: 64px;
}

.hero__info {
   position: relative;
   max-width: 560px;
}

.hero__info::before {
   content: "";
   position: absolute;
   left: -36px;
   top: -22px;
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: -o-radial-gradient(circle, rgba(195, 160, 168, 0.16), rgba(195, 160, 168, 0));
   background: radial-gradient(circle, rgba(195, 160, 168, 0.16), rgba(195, 160, 168, 0));
   -webkit-filter: blur(6px);
   filter: blur(6px);
   z-index: -1;
}

.hero__subtitle {
   margin: 0 0 22px;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.hero__title {
   margin: 0 0 20px;
   font-family: 'WonderGarden', cursive;
   font-size: clamp(74px, 9vw, 136px);
   line-height: 0.96;
   font-weight: 400;
   color: var(--text-main);
   text-wrap: balance;
   text-shadow: 0 8px 18px rgba(61, 42, 30, 0.04);
}

.hero__title span {
   display: inline-block;
   margin-inline: 0.08em;
   font-size: 0.82em;
}

.hero__date {
   margin: 0 0 14px;
   font-size: clamp(24px, 2.6vw, 34px);
   line-height: 1.15;
   font-weight: 500;
   color: var(--text-soft);
}

.hero__note {
   max-width: 420px;
   margin: 0;
   font-size: clamp(22px, 2.2vw, 26px);
   line-height: 1.45;
   color: var(--text-muted);
}

.hero__photo {
   position: relative;
   border-radius: var(--radius-xl);
   padding: 14px;
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.76)));
   background: -o-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.76));
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.76));
   border: 1px solid rgba(255, 255, 255, 0.82);
   -webkit-box-shadow: var(--shadow-card);
   box-shadow: var(--shadow-card);
}

.hero__photo::after {
   content: "";
   position: absolute;
   right: -18px;
   bottom: -18px;
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: -o-radial-gradient(circle, rgba(195, 160, 168, 0.15), rgba(195, 160, 168, 0));
   background: radial-gradient(circle, rgba(195, 160, 168, 0.15), rgba(195, 160, 168, 0));
   z-index: -1;
}

.hero__img {
   width: 100%;
   aspect-ratio: 0.84 / 1;
   -o-object-fit: cover;
   object-fit: cover;
   border-radius: 24px;
   -webkit-box-shadow: 0 16px 34px rgba(61, 42, 30, 0.07);
   box-shadow: 0 16px 34px rgba(61, 42, 30, 0.07);
   -webkit-filter: contrast(1.01) brightness(1.01) saturate(0.97);
   filter: contrast(1.01) brightness(1.01) saturate(0.97);
}

.invite__container,
.place__container,
.wishes__container,
.response__container,
.palette__container,
.timeline__container {
   max-width: 920px;
}

.invite__lead {
   max-width: 700px;
   margin-inline: auto;
}

.invite__text,
.palette__text,
.response__text,
.wishes__content p {
   max-width: 660px;
   margin: 28px auto 0;
   text-align: center;
   font-size: clamp(21px, 2.2vw, 24px);
   line-height: 1.55;
   color: var(--text-soft);
}

.invite__text--last,
.response__text--soft,
.wishes__content p+p,
.palette__text {
   margin-top: 18px;
}

.response__text--soft {
   color: var(--text-muted);
}

.calendar-card {
   width: min(620px, 100%);
   margin: 0 auto;
}

.calendar-card__content {
   position: relative;
   padding: 34px 30px 32px;
   border-radius: var(--radius-xl);
   background:
      -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.96)), to(rgba(255, 255, 255, 0.88))),
      -webkit-gradient(linear, left top, left bottom, from(rgba(246, 241, 235, 0.28)), to(rgba(255, 255, 255, 0)));
   background:
      -o-linear-gradient(top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
      -o-linear-gradient(top, rgba(246, 241, 235, 0.28), rgba(255, 255, 255, 0));
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
      linear-gradient(180deg, rgba(246, 241, 235, 0.28), rgba(255, 255, 255, 0));
   border: 1px solid var(--line-soft);
   -webkit-box-shadow: var(--shadow-card);
   box-shadow: var(--shadow-card);
   overflow: hidden;
}

.calendar-card__content::before {
   content: "";
   position: absolute;
   inset: 0;
   opacity: 0.18;
   pointer-events: none;
   background:
      -o-repeating-linear-gradient(bottom, rgba(120, 102, 84, 0.012) 0px, rgba(120, 102, 84, 0.012) 1px, transparent 1px, transparent 5px),
      -o-repeating-linear-gradient(left, rgba(120, 102, 84, 0.01) 0px, rgba(120, 102, 84, 0.01) 1px, transparent 1px, transparent 6px);
   background:
      repeating-linear-gradient(0deg, rgba(120, 102, 84, 0.012) 0px, rgba(120, 102, 84, 0.012) 1px, transparent 1px, transparent 5px),
      repeating-linear-gradient(90deg, rgba(120, 102, 84, 0.01) 0px, rgba(120, 102, 84, 0.01) 1px, transparent 1px, transparent 6px);
}

.month {
   position: relative;
   z-index: 1;
   margin: 0 0 20px;
   text-align: center;
   font-size: clamp(40px, 4vw, 42px);
   font-weight: 500;
   color: var(--text-main);
}

.dow,
.days {
   position: relative;
   z-index: 1;
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
   grid-template-columns: repeat(7, 1fr);
   gap: 10px;
   text-align: center;
}

.dow {
   margin-bottom: 12px;
}

.dow div {
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--text-muted);
}

.day {
   position: relative;
   display: -ms-grid;
   display: grid;
   place-items: center;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   font-size: 26px;
   line-height: 1;
   font-weight: 500;
   color: var(--text-main);
}

.day.empty {
   color: transparent;
}

.day.selected {
   color: #2f2420;
}

.day.selected::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -43%);
   -ms-transform: translate(-50%, -43%);
   transform: translate(-50%, -43%);

   width: clamp(32px, 5vw, 45px);
   height: clamp(32px, 5vw, 45px);

   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 29' xmlns='http://www.w3.org/2000/svg'%3E%5C%0A%3Cpath d='M23.6 0c-2.9 0-5.6 1.6-7.6 4.2C14 1.6 11.3 0 8.4 0 3.8 0 0 3.7 0 8.3c0 9.1 16 20.7 16 20.7s16-11.6 16-20.7C32 3.7 28.2 0 23.6 0z' fill='%23d9aeb6'/%3E%5C%0A%3C/svg%3E") no-repeat center / contain;

   opacity: 0.62;
   z-index: -1;
}

.day.selected::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -43%);
   -ms-transform: translate(-50%, -43%);
   transform: translate(-50%, -43%);

   width: clamp(52px, 8vw, 72px);
   height: clamp(52px, 8vw, 72px);


   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 29' xmlns='http://www.w3.org/2000/svg'%3E%5C%0A%3Cpath d='M23.6 0c-2.9 0-5.6 1.6-7.6 4.2C14 1.6 11.3 0 8.4 0 3.8 0 0 3.7 0 8.3c0 9.1 16 20.7 16 20.7s16-11.6 16-20.7C32 3.7 28.2 0 23.6 0z' fill='%23d9aeb6'/%3E%5C%0A%3C/svg%3E") no-repeat center / contain;

   opacity: 0.52;
   -webkit-filter: blur(6px);
   filter: blur(6px);
   z-index: -2;
}

.calendar__signature {
   margin: 18px 0 0;
   text-align: center;
   font-size: 24px;
   line-height: 1.4;
   font-style: italic;
   color: var(--text-muted);
}

.place__name {
   margin: 28px 0 14px;
   font-size: clamp(28px, 3vw, 36px);
   line-height: 1.28;
   font-weight: 500;
   text-align: center;
}

.place__address {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 6px;
   margin: 0 0 30px;
   font-style: normal;
   text-align: center;
}

.place__address span {
   font-size: clamp(21px, 2.1vw, 24px);
   line-height: 1.45;
   color: var(--text-soft);
}

.place__link {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   margin: 0 auto;

   min-height: 64px;
   padding: 18px 38px;

   border-radius: 999px;
   border: 1px solid rgba(97, 82, 75, 0.16);
   background: rgba(255, 255, 255, 0.82);
   -webkit-box-shadow: var(--shadow-soft);
   box-shadow: var(--shadow-soft);

   font-size: 21px;
   line-height: 1;
   color: var(--text-main);

   -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;

   transition: background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;

   -o-transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
}

.place__link:hover {
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
   transform: translateY(-2px);
   background: rgba(255, 255, 255, 0.92);
}

.place__link:focus-visible,
.response__btn:focus-visible {
   outline: none;
   -webkit-box-shadow: 0 0 0 4px rgba(195, 160, 168, 0.22);
   box-shadow: 0 0 0 4px rgba(195, 160, 168, 0.22);
}

.timeline__list {
   --timeline-padding-left: 34px;
   --timeline-line-x: 12px;
   --timeline-dot-size: 11px;

   position: relative;
   max-width: 760px;
   margin: 34px auto 0;
   padding-left: var(--timeline-padding-left);
}

.timeline__list::before {
   content: "";
   position: absolute;
   left: var(--timeline-line-x);
   top: 16px;
   bottom: 16px;
   width: 1px;
   background: -webkit-gradient(linear,
         left top, left bottom,
         from(rgba(164, 127, 135, 0.08)),
         color-stop(rgba(164, 127, 135, 0.46)),
         to(rgba(230, 220, 210, 0.28)));
   background: -o-linear-gradient(top,
         rgba(164, 127, 135, 0.08),
         rgba(164, 127, 135, 0.46),
         rgba(230, 220, 210, 0.28));
   background: linear-gradient(180deg,
         rgba(164, 127, 135, 0.08),
         rgba(164, 127, 135, 0.46),
         rgba(230, 220, 210, 0.28));
}

.timeline__item {
   position: relative;
   display: -ms-grid;
   display: grid;
   -ms-grid-columns: 110px 22px 1fr;
   grid-template-columns: 110px 1fr;
   gap: 22px;
   padding: 10px 0 20px;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
}

.timeline__item::before {
   content: "";
   position: absolute;
   width: var(--timeline-dot-size);
   height: var(--timeline-dot-size);
   border-radius: 50%;
   background: -webkit-gradient(linear, left top, left bottom, from(#d5b4bb), to(#ab828b));
   background: -o-linear-gradient(top, #d5b4bb, #ab828b);
   background: linear-gradient(180deg, #d5b4bb, #ab828b);
   -webkit-box-shadow: 0 0 0 8px rgba(195, 160, 168, 0.07);
   box-shadow: 0 0 0 8px rgba(195, 160, 168, 0.07);

   left: calc(var(--timeline-line-x) - var(--timeline-padding-left) - (var(--timeline-dot-size) / 2));
   top: 24px;
}

.timeline__time {
   font-size: clamp(30px, 3vw, 31px);
   line-height: 1;
   font-weight: 500;
   color: var(--accent-deep);
}

.timeline__content {
   padding-bottom: 4px;
}

.timeline__content h3 {
   margin: 0 0 6px;
   font-size: clamp(28px, 2.6vw, 32px);
   line-height: 1.12;
   font-weight: 500;
   color: var(--text-main);
}

.timeline__content p {
   margin: 0;
   font-size: clamp(20px, 2.1vw, 22px);
   line-height: 1.48;
   color: var(--text-soft);
}

.palette__text {
   margin-bottom: 34px;
}

.palette__composition {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   width: 100%;
   overflow-x: auto;
   padding: 10px 20px 6px;
   position: relative;
   mask-image: linear-gradient(to right,
         transparent 0,
         black 18px,
         black calc(100% - 18px),
         transparent 100%);
   -webkit-mask-image: linear-gradient(to right,
         transparent 0,
         black 18px,
         black calc(100% - 18px),
         transparent 100%);
}

.palette__composition::-webkit-scrollbar {
   height: 6px;
}

.palette__composition::-webkit-scrollbar-thumb {
   background: rgba(97, 82, 75, 0.14);
   border-radius: 999px;
}

.palette__bubble {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   width: 68px;
   height: 68px;
   border-radius: 50%;
   border: 1px solid rgba(97, 82, 75, 0.12);
   -webkit-box-shadow: 0 4px 10px rgba(61, 42, 30, 0.04);
   box-shadow: 0 4px 10px rgba(61, 42, 30, 0.04);
   margin-left: -8px;
}

.palette__bubble:first-child {
   margin-left: 0;
}

.palette__bubble--1 {
   background: #f7f2ec;
}

.palette__bubble--2 {
   background: #e9ddd0;
}

.palette__bubble--3 {
   background: #e6cdd2;
}

.palette__bubble--4 {
   background: #ebcfc2;
}

.palette__bubble--5 {
   background: #d7decf;
}

.palette__bubble--6 {
   background: #d6e1e8;
}

.palette__bubble--7 {
   background: #f1e7bf;
}

.palette__bubble--8 {
   background: #dccfe3;
}

.response__container {
   text-align: center;
}

.response__btn {
   margin: 28px auto 0;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   min-height: 66px;
   padding: 18px 44px;
   border-radius: 999px;
   border: 1px solid rgba(166, 127, 135, 0.18);
   color: #fffdfa;
   background: -webkit-gradient(linear, left top, left bottom, from(#bf9ba3), to(#a67f87));
   background: -o-linear-gradient(top, #bf9ba3, #a67f87);
   background: linear-gradient(180deg, #bf9ba3, #a67f87);
   -webkit-box-shadow: 0 14px 28px rgba(164, 127, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
   box-shadow: 0 14px 28px rgba(164, 127, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
   font-size: 21px;
   -webkit-transition: -webkit-transform 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-filter 0.28s ease;
   transition: -webkit-transform 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-filter 0.28s ease;
   -o-transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
   transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
   transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease, -webkit-transform 0.28s ease, -webkit-box-shadow 0.28s ease, -webkit-filter 0.28s ease;
}

.response__btn:hover {
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
   transform: translateY(-2px);
   -webkit-box-shadow: 0 18px 34px rgba(164, 127, 135, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
   box-shadow: 0 18px 34px rgba(164, 127, 135, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
   -webkit-filter: saturate(1.03);
   filter: saturate(1.03);
}

.response__hint {
   margin: 14px 0 0;
   font-size: 18px;
   line-height: 1.4;
   text-align: center;
   color: var(--text-muted);
}

::-moz-selection {
   background: rgba(195, 160, 168, 0.28);
   color: var(--text-main);
}

::selection {
   background: rgba(195, 160, 168, 0.28);
   color: var(--text-main);
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      -webkit-animation-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      -webkit-animation-iteration-count: 1 !important;
      animation-iteration-count: 1 !important;
      -webkit-transition-duration: 0.01ms !important;
      -o-transition-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }

   .fade-up {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
   }
}