/* =========================================================
   MADE TO LOVE MEMORIALS
   COMING SOON PAGE — CONSOLIDATED RESPONSIVE VERSION

   LOCKED ANIMATION SEQUENCE:
   1. Logo enters
   2. Something Beautiful...
   3. Something Meaningful...
   4. Final headline reveals
   5. Brand message reveals
   6. Notify Me panel reveals
   ========================================================= */


/* =========================================================
   BRAND FONTS
   ========================================================= */

@font-face {
  font-family: "Artifakt Element";
  src: url("/assets/fonts/ArtifaktElement-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Artifakt Element";
  src: url("/assets/fonts/ArtifaktElement-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --gold: #b78125;
  --gold-light: #dfbd73;
  --gold-deep: #865813;

  --cream: #fffaf0;

  --ink: #17130d;
  --ink-soft: #463b2b;
}


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

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;

  color: var(--ink);
  background: #efe5ca;

  font-family:
    "Artifakt Element",
    Arial,
    Helvetica,
    sans-serif;
}

button,
input {
  font: inherit;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.coming-soon {
  position: relative;

  isolation: isolate;

  width: 100%;
  min-height: 100svh;

  overflow-x: hidden;

  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 250, 237, 0.01),
      rgba(255, 248, 228, 0.04)
    ),
    url("/assets/images/coming-soon-heaven-bg.png");

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Central light support */

.coming-soon::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(255, 255, 255, 0.23) 0%,
      rgba(255, 255, 255, 0.07) 34%,
      rgba(255, 255, 255, 0) 63%
    );
}


/* Subtle edge depth */

.coming-soon::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(58, 38, 10, 0.07),
      transparent 17%,
      transparent 83%,
      rgba(58, 38, 10, 0.07)
    );
}


/* =========================================================
   ATMOSPHERIC LIGHT
   ========================================================= */

.atmosphere {
  position: fixed;

  pointer-events: none;

  border-radius: 50%;

  filter: blur(70px);

  opacity: 0.14;

  z-index: 0;
}

.atmosphere-one {
  width: 390px;
  height: 390px;

  top: -170px;
  left: 20%;

  background:
    rgba(255, 235, 177, 0.80);

  animation:
    driftOne
    14s
    ease-in-out
    infinite
    alternate;
}

.atmosphere-two {
  width: 330px;
  height: 330px;

  right: 8%;
  bottom: -150px;

  background:
    rgba(255, 246, 215, 0.60);

  animation:
    driftTwo
    17s
    ease-in-out
    infinite
    alternate;
}


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

.hero {
  position: relative;

  z-index: 2;

  width: min(92%, 1120px);
  min-height: 100svh;

  margin: 0 auto;

  display: flex;
  flex-direction: column;

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

  padding:
    max(24px, env(safe-area-inset-top))
    20px
    max(20px, env(safe-area-inset-bottom));

  text-align: center;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-wrap {
  opacity: 0;

  transform:
    translateY(-12px)
    scale(0.95);

  animation:
    logoEntrance
    1.25s
    ease-out
    0.15s
    forwards;
}

.brand-logo {
  display: block;

  width:
    clamp(
      205px,
      17vw,
      285px
    );

  height: auto;

  margin:
    0 auto -4px;

  filter:
    drop-shadow(
      0 9px 15px
      rgba(0, 0, 0, 0.13)
    );
}


/* =========================================================
   INTRO AREA
   ========================================================= */

.intro {
  position: relative;

  width: 100%;
}

.intro-sequence {
  position: relative;

  height: 52px;

  margin: 0;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.sequence-line {
  position: absolute;

  inset: 0;

  display: flex;

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

  margin: 0;

  color: var(--ink);

  font-family:
    "Lora",
    Georgia,
    serif;

  font-size:
    clamp(
      1.35rem,
      2.4vw,
      2rem
    );

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  opacity: 0;

  text-shadow:
    0 1px 5px
    rgba(255, 255, 255, 0.88);
}


/* =========================================================
   LOCKED INTRO TIMING
   ========================================================= */

.sequence-one {
  animation:
    sequenceOne
    5.2s
    ease
    0.9s
    forwards;
}

.sequence-two {
  animation:
    sequenceTwo
    5.2s
    ease
    0.9s
    forwards;
}


/* =========================================================
   FINAL HEADLINE
   ========================================================= */

.headline-wrap {
  opacity: 0;

  transform:
    translateY(10px);

  animation:
    finalHeadline
    1.25s
    ease
    5.55s
    forwards;
}


/* =========================================================
   ORNAMENT
   ========================================================= */

.ornament {
  width:
    min(
      440px,
      72%
    );

  margin:
    0 auto 9px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 13px;

  color: var(--gold);
}

.ornament span:not(.ornament-heart) {
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(174, 119, 28, 0.85)
    );
}

.ornament span:last-child:not(.ornament-heart) {
  background:
    linear-gradient(
      to left,
      transparent,
      rgba(174, 119, 28, 0.85)
    );
}

.ornament-heart {
  font-size: 1.55rem;

  line-height: 1;
}


/* =========================================================
   FINAL HEADLINE TYPOGRAPHY
   ========================================================= */

.headline-top,
.headline-bottom {
  margin: 0;

  color: var(--ink);

  font-family:
    "Lora",
    Georgia,
    serif;

  font-weight: 600;

  text-transform: uppercase;

  text-shadow:
    0 1px 5px
    rgba(255, 255, 255, 0.78);
}

.headline-top {
  font-size:
    clamp(
      1.65rem,
      3vw,
      2.45rem
    );

  letter-spacing: 0.17em;
}

.headline-main {
  margin:
    5px 0 7px;

  color: var(--gold-deep);

  font-family:
    "Lora",
    Georgia,
    serif;

  font-size:
    clamp(
      4rem,
      7vw,
      6.8rem
    );

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.045em;

  text-shadow:
    0 2px 0
    rgba(255, 255, 255, 0.48),

    0 9px 24px
    rgba(105, 68, 10, 0.13);
}

.headline-bottom {
  font-size:
    clamp(
      1.5rem,
      2.8vw,
      2.15rem
    );

  letter-spacing: 0.21em;
}


/* =========================================================
   BRAND MESSAGE
   ========================================================= */

.brand-message {
  width:
    min(
      100%,
      800px
    );

  margin:
    14px auto 18px;

  opacity: 0;

  transform:
    translateY(12px);

  animation:
    contentEntrance
    1.15s
    ease
    6.25s
    forwards;
}

.brand-message h2 {
  margin:
    0 0 7px;

  color: #17120c;

  font-family:
    "Lora",
    Georgia,
    serif;

  font-size:
    clamp(
      1.45rem,
      2.5vw,
      1.95rem
    );

  font-weight: 700;

  text-shadow:
    0 1px 5px
    rgba(255, 255, 255, 0.90);
}


/*
   IMPORTANT READABILITY FIX

   This sentence sits over a very bright area
   of the background, so it needs stronger
   weight and contrast.
*/

.brand-message p {
  max-width: 760px;

  margin: 0 auto;

  color: #21180d;

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.12rem
    );

  font-weight: 700;

  line-height: 1.5;

  text-shadow:
    0 1px 2px
    rgba(255, 255, 255, 0.98),

    0 0 8px
    rgba(255, 250, 235, 0.94),

    0 0 16px
    rgba(255, 250, 235, 0.70);
}


/* =========================================================
   LAUNCH CARD
   ========================================================= */

.launch-card {
  width:
    min(
      100%,
      820px
    );

  padding:
    22px 27px 17px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 252, 244, 0.60),
      rgba(255, 247, 226, 0.47)
    );

  border:
    1px solid
    rgba(185, 132, 43, 0.38);

  box-shadow:
    inset
    0 1px 0
    rgba(255, 255, 255, 0.76),

    0 20px 48px
    rgba(79, 51, 9, 0.15);

  backdrop-filter:
    blur(8px);

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

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    contentEntrance
    1.15s
    ease
    6.75s
    forwards;
}

.launch-card h2 {
  margin:
    0 0 15px;

  color: var(--ink);

  font-family:
    "Lora",
    Georgia,
    serif;

  font-size:
    clamp(
      1.08rem,
      1.9vw,
      1.42rem
    );

  font-weight: 600;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


/* =========================================================
   FORM
   ========================================================= */

.launch-form {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 12px;

  width: 100%;
}


/* =========================================================
   EMAIL FIELD
   ========================================================= */

.email-field {
  min-height: 55px;

  display: flex;

  align-items: center;

  padding:
    0 19px;

  background:
    rgba(255, 255, 255, 0.88);

  border:
    1px solid
    rgba(181, 129, 44, 0.36);

  border-radius:
    999px;

  box-shadow:
    inset
    0 1px 2px
    rgba(90, 63, 18, 0.04);
}

.email-icon {
  flex:
    0 0 auto;

  margin-right:
    11px;

  color:
    var(--gold);

  font-size:
    1.05rem;
}

.email-field input {
  width: 100%;

  padding:
    14px 0;

  color:
    var(--ink);

  background:
    transparent;

  border: 0;

  outline: 0;

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    0.98rem;
}

.email-field input::placeholder {
  color:
    #817664;
}

.email-field:focus-within {
  border-color:
    var(--gold);

  box-shadow:
    0 0 0 3px
    rgba(185, 130, 31, 0.12);
}


/* =========================================================
   NOTIFY BUTTON
   ========================================================= */

.notify-button {
  min-height: 55px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    0 29px;

  color:
    #fffaf0;

  background:
    linear-gradient(
      135deg,
      #c99b3e,
      #9c6918
    );

  border:
    1px solid
    rgba(132, 86, 13, 0.45);

  border-radius:
    999px;

  box-shadow:
    0 8px 18px
    rgba(119, 78, 12, 0.18),

    inset
    0 1px 0
    rgba(255, 255, 255, 0.34);

  cursor:
    pointer;

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    0.93rem;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

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

  box-shadow:
    0 12px 22px
    rgba(119, 78, 12, 0.24),

    inset
    0 1px 0
    rgba(255, 255, 255, 0.34);

  filter:
    brightness(1.04);
}

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

.notify-button:focus-visible {
  outline:
    3px solid
    rgba(127, 83, 14, 0.35);

  outline-offset:
    3px;
}

.button-arrow {
  font-size:
    1.18rem;

  transition:
    transform
    180ms
    ease;
}

.notify-button:hover .button-arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   FORM MESSAGE
   ========================================================= */

.form-message {
  min-height: 20px;

  margin:
    8px 0 0;

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    0.84rem;

  font-weight:
    700;
}

.form-message.error {
  color:
    #8d2929;
}

.form-message.success {
  color:
    #3f5e2a;
}


/* =========================================================
   PRIVACY
   ========================================================= */

.privacy-note {
  max-width:
    680px;

  margin:
    3px auto 0;

  color:
    #382e20;

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    clamp(
      0.72rem,
      1.15vw,
      0.82rem
    );

  font-weight:
    400;

  line-height:
    1.4;
}


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

.coming-footer {
  margin-top:
    12px;

  opacity: 0;

  animation:
    contentEntrance
    1.05s
    ease
    7.15s
    forwards;
}

.coming-footer p {
  margin: 0;

  color:
    rgba(45, 35, 20, 0.88);

  font-family:
    "Artifakt Element",
    Arial,
    sans-serif;

  font-size:
    0.72rem;

  letter-spacing:
    0.025em;

  text-shadow:
    0 1px 3px
    rgba(255, 255, 255, 0.90);
}


/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes logoEntrance {

  from {
    opacity: 0;

    transform:
      translateY(-12px)
      scale(0.95);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/*
   SOMETHING BEAUTIFUL

   Appears first.
*/

@keyframes sequenceOne {

  0%,
  5% {
    opacity: 0;

    transform:
      translateY(8px);
  }

  14%,
  31% {
    opacity: 1;

    transform:
      translateY(0);
  }

  40%,
  100% {
    opacity: 0;

    transform:
      translateY(-8px);
  }

}


/*
   SOMETHING MEANINGFUL

   Appears only after first phrase fades.
*/

@keyframes sequenceTwo {

  0%,
  40% {
    opacity: 0;

    transform:
      translateY(8px);
  }

  50%,
  69% {
    opacity: 1;

    transform:
      translateY(0);
  }

  79%,
  100% {
    opacity: 0;

    transform:
      translateY(-8px);
  }

}


/*
   FINAL MESSAGE
*/

@keyframes finalHeadline {

  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/*
   SUPPORTING CONTENT
*/

@keyframes contentEntrance {

  from {
    opacity: 0;

    transform:
      translateY(16px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   ATMOSPHERIC MOVEMENT
   ========================================================= */

@keyframes driftOne {

  from {
    transform:
      translate3d(
        -30px,
        -10px,
        0
      );
  }

  to {
    transform:
      translate3d(
        65px,
        35px,
        0
      );
  }

}

@keyframes driftTwo {

  from {
    transform:
      translate3d(
        25px,
        20px,
        0
      );
  }

  to {
    transform:
      translate3d(
        -55px,
        -30px,
        0
      );
  }

}


/* =========================================================
   STANDARD LAPTOPS / SMALLER DESKTOPS
   ========================================================= */

@media (max-width: 1366px) {

  .hero {
    width:
      min(
        92%,
        980px
      );
  }

  .brand-logo {
    width:
      clamp(
        180px,
        16vw,
        235px
      );
  }

  .headline-main {
    font-size:
      clamp(
        3.5rem,
        6vw,
        5.3rem
      );
  }

  .launch-card {
    width:
      min(
        100%,
        760px
      );
  }

}


/* =========================================================
   SHORT LAPTOPS
   ========================================================= */

@media (min-width: 761px) and (max-height: 800px) {

  .hero {
    padding-top:
      14px;

    padding-bottom:
      14px;
  }

  .brand-logo {
    width:
      clamp(
        150px,
        13vw,
        190px
      );

    margin-bottom:
      -7px;
  }

  .intro-sequence {
    height:
      38px;
  }

  .sequence-line {
    font-size:
      clamp(
        1rem,
        1.8vw,
        1.4rem
      );
  }

  .ornament {
    margin-bottom:
      5px;
  }

  .headline-top {
    font-size:
      clamp(
        1.2rem,
        2vw,
        1.55rem
      );
  }

  .headline-main {
    margin:
      2px 0 3px;

    font-size:
      clamp(
        3rem,
        5vw,
        4.3rem
      );
  }

  .headline-bottom {
    font-size:
      clamp(
        1.05rem,
        1.8vw,
        1.35rem
      );
  }

  .brand-message {
    margin:
      8px auto 10px;
  }

  .brand-message h2 {
    font-size:
      1.3rem;
  }

  .brand-message p {
    font-size:
      0.9rem;

    line-height:
      1.4;
  }

  .launch-card {
    padding:
      14px 20px 11px;
  }

  .launch-card h2 {
    margin-bottom:
      10px;
  }

  .email-field,
  .notify-button {
    min-height:
      46px;
  }

  .coming-footer {
    margin-top:
      7px;
  }

}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 760px) {

  .hero {
    width:
      min(
        94%,
        680px
      );

    padding-left:
      15px;

    padding-right:
      15px;
  }

  .brand-logo {
    width:
      clamp(
        155px,
        32vw,
        205px
      );

    margin-bottom:
      -2px;
  }

  .intro-sequence {
    height:
      43px;
  }

  .sequence-line {
    font-size:
      clamp(
        1rem,
        4.5vw,
        1.4rem
      );

    letter-spacing:
      0.08em;
  }

  .ornament {
    width:
      min(
        330px,
        78%
      );
  }

  .headline-top {
    font-size:
      clamp(
        1.15rem,
        4.5vw,
        1.55rem
      );

    letter-spacing:
      0.11em;
  }

  .headline-main {
    font-size:
      clamp(
        3rem,
        11vw,
        4.7rem
      );

    letter-spacing:
      -0.04em;
  }

  .headline-bottom {
    font-size:
      clamp(
        1.1rem,
        4vw,
        1.45rem
      );
  }

  .brand-message {
    margin:
      10px auto 14px;
  }

  .brand-message h2 {
    font-size:
      clamp(
        1.2rem,
        4.5vw,
        1.5rem
      );
  }

  .brand-message p {
    max-width:
      570px;

    font-size:
      clamp(
        0.9rem,
        2.7vw,
        1rem
      );
  }

  .launch-card {
    width:
      min(
        100%,
        590px
      );

    padding:
      18px 16px 15px;
  }

  .launch-form {
    grid-template-columns:
      1fr;
  }

  .notify-button {
    width:
      100%;
  }

}


/* =========================================================
   PHONES
   ========================================================= */

@media (max-width: 480px) {

  .coming-soon {
    /*
       Wide background naturally crops on portrait devices.
       Keep the central heavenly light visible.
    */

    background-position:
      center center;
  }

  .hero {
    width:
      100%;

    justify-content:
      center;

    padding:
      max(
        18px,
        env(safe-area-inset-top)
      )
      16px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }

  .brand-logo {
    width:
      clamp(
        145px,
        42vw,
        180px
      );

    margin-bottom:
      -4px;
  }

  .intro-sequence {
    height:
      39px;
  }

  .sequence-line {
    font-size:
      clamp(
        0.94rem,
        4.8vw,
        1.18rem
      );

    letter-spacing:
      0.07em;
  }

  .ornament {
    width:
      min(
        275px,
        80%
      );

    margin-bottom:
      6px;
  }

  .ornament-heart {
    font-size:
      1.25rem;
  }

  .headline-top {
    font-size:
      clamp(
        1.05rem,
        5vw,
        1.35rem
      );

    letter-spacing:
      0.09em;
  }

  .headline-main {
    margin:
      5px 0;

    font-size:
      clamp(
        2.7rem,
        13vw,
        3.8rem
      );

    line-height:
      1.02;
  }

  .headline-bottom {
    font-size:
      clamp(
        1rem,
        4.8vw,
        1.3rem
      );

    letter-spacing:
      0.16em;
  }

  .brand-message {
    width:
      100%;

    margin:
      10px auto 13px;
  }

  .brand-message h2 {
    margin-bottom:
      5px;

    font-size:
      clamp(
        1.15rem,
        5vw,
        1.4rem
      );
  }

  .brand-message p {
    max-width:
      390px;

    font-size:
      0.9rem;

    font-weight:
      700;

    line-height:
      1.45;
  }

  .launch-card {
    width:
      100%;

    padding:
      17px 14px 14px;
  }

  .launch-card h2 {
    margin-bottom:
      12px;

    font-size:
      clamp(
        0.9rem,
        4.2vw,
        1.05rem
      );

    line-height:
      1.35;
  }

  .launch-form {
    gap:
      9px;
  }

  .email-field,
  .notify-button {
    min-height:
      49px;
  }

  .email-field {
    padding:
      0 15px;
  }

  .email-field input {
    font-size:
      0.9rem;
  }

  .notify-button {
    font-size:
      0.87rem;
  }

  .privacy-note {
    font-size:
      0.69rem;

    line-height:
      1.4;
  }

  .coming-footer {
    margin-top:
      9px;
  }

  .coming-footer p {
    font-size:
      0.64rem;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  .hero {
    padding-left:
      12px;

    padding-right:
      12px;
  }

  .brand-logo {
    width:
      138px;
  }

  .headline-main {
    font-size:
      2.55rem;
  }

  .brand-message p {
    font-size:
      0.84rem;
  }

  .launch-card {
    padding-left:
      11px;

    padding-right:
      11px;
  }

}


/* =========================================================
   SHORT PHONES
   ========================================================= */

@media (max-width: 480px) and (max-height: 700px) {

  .hero {
    justify-content:
      flex-start;

    padding-top:
      max(
        10px,
        env(safe-area-inset-top)
      );
  }

  .brand-logo {
    width:
      125px;
  }

  .intro-sequence {
    height:
      32px;
  }

  .ornament {
    margin-bottom:
      3px;
  }

  .headline-main {
    margin:
      2px 0;

    font-size:
      2.5rem;
  }

  .brand-message {
    margin:
      6px auto 8px;
  }

  .brand-message p {
    font-size:
      0.8rem;

    line-height:
      1.35;
  }

  .launch-card {
    padding:
      12px 11px 10px;
  }

  .launch-card h2 {
    margin-bottom:
      8px;
  }

  .email-field,
  .notify-button {
    min-height:
      44px;
  }

  .privacy-note {
    font-size:
      0.64rem;
  }

}


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

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-delay:
      0ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;
  }

  .sequence-one,
  .sequence-two {
    display:
      none;
  }

  .intro-sequence {
    display:
      none;
  }

  .headline-wrap,
  .brand-message,
  .launch-card,
  .coming-footer,
  .logo-wrap {
    opacity:
      1;

    transform:
      none;
  }

}