/* =========================================================
   VELOURA PRE-LAUNCH
   MATCHES ORIGINAL VELOURA WEBSITE
========================================================= */

:root {
  --cream: #fffaf8;
  --soft: #fff3f6;
  --pink: #e8699b;
  --pink-dark: #c84e7e;
  --gold: #c28a2e;
  --gold-light: #f2c96c;
  --brown: #33201a;
  --muted: #8d635b;
  --line: rgba(194, 138, 46, .16);
  --shadow: 0 24px 70px rgba(65, 36, 30, .10);
  --font-body: "Montserrat", sans-serif;
  --font-display: "Cormorant Garamond", serif;
}


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

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

html,
body {
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
}

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


/* =========================================================
   PAGE
========================================================= */

.prelaunch-page {
  position: relative;

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: var(--cream);
}


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

.prelaunch-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.prelaunch-background img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 30%;

  filter:
    saturate(1.18)
    contrast(1.06)
    brightness(1.02);

  animation:
    velouraBackgroundMove
    18s
    ease-in-out
    infinite
    alternate;
}

.prelaunch-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(255, 250, 248, .98) 0%,
      rgba(255, 250, 248, .94) 30%,
      rgba(255, 243, 246, .77) 51%,
      rgba(255, 243, 246, .32) 73%,
      rgba(255, 250, 248, .05) 100%
    );
}


/* =========================================================
   DECORATIVE GLOWS
========================================================= */

.prelaunch-glow {
  position: absolute;

  z-index: 1;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(50px);
}

.prelaunch-glow-one {
  width: 340px;
  height: 340px;

  top: -170px;
  left: -100px;

  background:
    rgba(242, 201, 108, .20);

  animation:
    glowOne
    12s
    ease-in-out
    infinite;
}

.prelaunch-glow-two {
  width: 390px;
  height: 390px;

  left: 35%;
  bottom: -210px;

  background:
    rgba(232, 105, 155, .13);

  animation:
    glowTwo
    14s
    ease-in-out
    infinite;
}


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

.prelaunch-header {
  position: relative;

  z-index: 5;

  min-height: 92px;

  padding:
    20px
    clamp(24px, 5vw, 80px);

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

.prelaunch-logo {
  width: 210px;
  max-width: 46vw;

  display: block;

  animation:
    revealLeft
    .8s
    ease
    both;
}


/* =========================================================
   OWNER BUTTON
========================================================= */

.owner-login {
  min-height: 42px;

  padding:
    0
    18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

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

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .86);

  color:
    var(--gold);

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

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;

  animation:
    revealTop
    .8s
    .12s
    ease
    both;
}

.owner-login:hover {
  transform:
    translateY(-2px);

  background:
    var(--gold);

  color:
    #fff;

  box-shadow:
    0 12px 28px
    rgba(194, 138, 46, .17);
}


/* =========================================================
   CONTENT
========================================================= */

.prelaunch-main {
  position: relative;

  z-index: 2;

  flex: 1;

  width: 100%;

  display: flex;
  align-items: center;

  padding:
    40px
    clamp(24px, 7vw, 120px)
    75px;
}

.prelaunch-content {
  width:
    min(
      590px,
      100%
    );
}

.prelaunch-eyebrow {
  margin-bottom: 15px;

  color:
    var(--gold);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 3.6px;

  text-transform: uppercase;

  animation:
    revealUp
    .8s
    .12s
    ease
    both;
}

.prelaunch-title {
  max-width: 580px;

  font-family:
    var(--font-display);

  color:
    var(--brown);

  font-size:
    clamp(
      55px,
      6.5vw,
      90px
    );

  font-weight: 600;

  line-height: .96;

  letter-spacing: -1.3px;

  animation:
    revealUp
    .85s
    .22s
    ease
    both;
}

.prelaunch-title span {
  display: block;

  color:
    var(--pink);
}

.prelaunch-line {
  width: 72px;
  height: 2px;

  margin:
    28px
    0;

  background:
    var(--gold);

  transform-origin: left;

  animation:
    lineReveal
    .8s
    .4s
    ease
    both;
}

.prelaunch-description {
  max-width: 500px;

  color:
    var(--muted);

  font-size: 14px;

  line-height: 1.85;

  animation:
    revealUp
    .8s
    .48s
    ease
    both;
}


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

.prelaunch-actions {
  margin-top: 32px;

  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  animation:
    revealUp
    .8s
    .58s
    ease
    both;
}

.primary-action {
  position: relative;

  width: 250px;
  height: 52px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  overflow: hidden;

  border: 0;

  background:
    var(--pink);

  color:
    #fff;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2.2px;

  box-shadow:
    0 14px 30px
    rgba(232, 105, 155, .18);

  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.primary-action::before {
  content: "";

  position: absolute;

  top: 0;
  left: -130%;

  width: 55%;
  height: 100%;

  transform:
    skewX(-25deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .32),
      transparent
    );

  transition:
    left
    .65s
    ease;
}

.primary-action:hover::before {
  left: 150%;
}

.primary-action:hover {
  transform:
    translateY(-3px);

  background:
    var(--pink-dark);

  box-shadow:
    0 18px 38px
    rgba(200, 78, 126, .22);
}

.primary-action i {
  transition:
    transform
    .25s
    ease;
}

.primary-action:hover i {
  transform:
    translateX(4px);
}


/* =========================================================
   NOTES + CONTACT
========================================================= */

.prelaunch-note {
  max-width: 510px;

  margin-top: 26px;

  color:
    var(--muted);

  font-size: 11px;

  line-height: 1.75;

  animation:
    revealUp
    .8s
    .68s
    ease
    both;
}

.prelaunch-contact {
  margin-top: 32px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    14px
    24px;

  animation:
    revealUp
    .8s
    .78s
    ease
    both;
}

.prelaunch-contact a {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    var(--muted);

  text-decoration: none;

  font-size: 11px;

  transition:
    color .2s ease,
    transform .2s ease;
}

.prelaunch-contact i {
  color:
    var(--gold);
}

.prelaunch-contact a:hover {
  color:
    var(--pink-dark);

  transform:
    translateY(-1px);
}


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

.prelaunch-footer {
  position: relative;

  z-index: 3;

  width: 100%;

  padding:
    18px
    clamp(24px, 5vw, 80px);

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

  gap: 20px;

  color:
    var(--muted);

  font-size: 10px;

  animation:
    revealUp
    .8s
    .85s
    ease
    both;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealTop {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineReveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes velouraBackgroundMove {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }
}

@keyframes glowOne {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(28px, 25px, 0);
  }
}

@keyframes glowTwo {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0);
  }

  50% {
    transform:
      translate3d(-25px, -25px, 0);
  }
}


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

@media(max-width: 768px) {

  .prelaunch-background img {
    object-position:
      82% center;
  }

  .prelaunch-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(255, 250, 248, .92),
        rgba(255, 243, 246, .72),
        rgba(255, 250, 248, .93)
      );
  }

  .prelaunch-header {
    min-height: 76px;

    padding:
      15px
      16px;
  }

  .prelaunch-logo {
    width: 160px;
  }

  .owner-login {
    width: 40px;

    height: 40px;

    padding: 0;
  }

  .owner-login span {
    display: none;
  }

  .prelaunch-main {
    align-items: flex-end;

    padding:
      45px
      16px
      40px;
  }

  .prelaunch-content {
    padding:
      28px
      22px;

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

    border-radius:
      24px;

    background:
      rgba(255, 250, 248, .9);

    backdrop-filter:
      blur(16px);

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

    box-shadow:
      var(--shadow);
  }

  .prelaunch-title {
    font-size:
      clamp(
        48px,
        14vw,
        64px
      );
  }

  .primary-action {
    width: 100%;
  }

  .prelaunch-contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .prelaunch-footer {
    flex-direction: column;

    gap: 5px;

    text-align: center;
  }
}


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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

}