@font-face {
  font-family: "Elume Cormorant";
  src: url("assets/elume-cormorant-latin-ext.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Elume Inter";
  src: url("assets/elume-inter-latin-ext.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: light;
  --elume-burgundy: #8b0f17;
  --elume-burgundy-dark: #650a10;
  --elume-ink: #302321;
  --elume-ivory: #f4eadc;
  --elume-scene: url("assets/elume-coming-soon-desktop-bg-v1.png");
  --elume-curtain-mask: linear-gradient(128deg, transparent 0 55%, rgb(0 0 0 / 18%) 63%, #000 78%);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--elume-ivory);
  color: var(--elume-ink);
  font-family: "Elume Inter", sans-serif;
}

::selection {
  background: var(--elume-burgundy);
  color: #fffaf5;
}

.welcome {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--elume-ivory);
}

.welcome__scene,
.welcome__curtain,
.welcome__light {
  position: absolute;
  pointer-events: none;
}

.welcome__scene {
  inset: -3%;
  background-image:
    linear-gradient(180deg, rgb(255 249 241 / 4%), rgb(255 249 241 / 1%)),
    var(--elume-scene);
  background-position: center;
  background-size: cover;
  will-change: transform;
}

.welcome__scene {
  z-index: 0;
  transform: scale(1.012) translate3d(-0.15%, -0.08%, 0);
}

.welcome__curtain {
  inset: -1%;
  z-index: 1;
  background:
    linear-gradient(112deg, transparent 38%, rgb(255 221 196 / 10%) 47%, rgb(255 245 226 / 46%) 53%, transparent 63%),
    radial-gradient(circle at 88% 52%, rgb(139 15 23 / 12%) 0, transparent 58%);
  background-position: 130% 0, center;
  background-size: 220% 100%, 100% 100%;
  -webkit-mask-image: var(--elume-curtain-mask);
  mask-image: var(--elume-curtain-mask);
  mix-blend-mode: soft-light;
  opacity: 0.58;
  transform: scale(1.008);
  transform-origin: 88% 88%;
  will-change: transform, opacity, background-position;
}

.welcome__light {
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 48% 42%, rgb(255 252 247 / 22%) 0 18%, transparent 52%);
  mix-blend-mode: soft-light;
  opacity: 0.76;
  will-change: opacity;
}

.welcome__content {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(64vw, 1040px);
  margin-top: -7vh;
  align-items: center;
  flex-direction: column;
  text-align: center;
  text-wrap: balance;
}

.welcome__logo {
  display: block;
  width: min(39vw, 625px);
  height: auto;
}

.welcome__announcement {
  display: grid;
  margin-top: clamp(18px, 2vh, 28px);
  place-items: center;
}

.welcome__soon {
  color: var(--elume-burgundy);
  font-family: "Elume Inter", sans-serif;
  font-size: clamp(0.8rem, 0.9vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  line-height: 1;
  text-transform: uppercase;
}

.welcome__line {
  position: relative;
  display: block;
  width: clamp(58px, 5vw, 88px);
  height: 1px;
  margin: clamp(13px, 1.4vh, 18px) 0 clamp(14px, 1.5vh, 20px);
  overflow: visible;
  background: rgb(139 15 23 / 38%);
  transform-origin: center;
}

.welcome__line::after {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--elume-burgundy);
  box-shadow: 0 2px 10px rgb(101 10 16 / 22%);
  content: "";
  transform: translateX(-50%);
}

h1 {
  display: flex;
  margin: 0;
  align-items: baseline;
  color: var(--elume-burgundy-dark);
  font-family: "Elume Cormorant", serif;
  font-size: clamp(4rem, 5.5vw, 6rem);
  font-weight: 400;
  gap: 0.18em;
  letter-spacing: -0.032em;
  line-height: 0.82;
}

h1 span:last-child {
  color: var(--elume-burgundy);
  font-style: italic;
}

.welcome__lead {
  max-width: 48ch;
  margin: clamp(21px, 2.2vh, 30px) 0 0;
  color: rgb(48 35 33 / 86%);
  font-size: clamp(0.94rem, 0.95vw, 1.04rem);
  font-weight: 400;
  letter-spacing: 0.008em;
  line-height: 1.62;
}

.welcome__motto {
  position: relative;
  margin: clamp(20px, 2.3vh, 30px) 0 0;
  padding-top: clamp(13px, 1.5vh, 19px);
  color: var(--elume-burgundy-dark);
  font-family: "Elume Inter", sans-serif;
  font-size: clamp(0.73rem, 0.75vw, 0.83rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.35;
  text-transform: uppercase;
}

.welcome__motto::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 1px;
  background: rgb(139 15 23 / 40%);
  content: "";
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .welcome__scene {
    animation: elume-scene-breathe 20s ease-in-out infinite alternate;
  }

  .welcome__curtain {
    animation: elume-curtain-breathe 10s ease-in-out infinite alternate;
  }

  .welcome__light {
    animation: elume-ambient-light 12s ease-in-out 1.4s infinite alternate;
  }

  .welcome__logo {
    animation: elume-logo-reveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .welcome__line {
    animation: elume-line-reveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
  }

  h1,
  .welcome__lead,
  .welcome__motto,
  .welcome__soon {
    animation: elume-copy-reveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .welcome__soon {
    animation-delay: 0.58s;
  }

  h1 {
    animation-delay: 0.72s;
  }

  .welcome__lead {
    animation-delay: 0.86s;
  }

  .welcome__motto {
    animation-delay: 1s;
  }
}

.is-paused .welcome__scene,
.is-paused .welcome__curtain,
.is-paused .welcome__light {
  animation-play-state: paused;
}

@keyframes elume-scene-breathe {
  from {
    transform: scale(1.012) translate3d(-0.15%, -0.08%, 0);
  }
  to {
    transform: scale(1.026) translate3d(0.38%, -0.24%, 0);
  }
}

@keyframes elume-curtain-breathe {
  from {
    background-position: 130% 0, center;
    opacity: 0.48;
    transform: scale(1.008) translate3d(0, 0, 0);
  }
  to {
    background-position: -35% 0, center;
    opacity: 0.88;
    transform: scale(1.018) translate3d(0.3%, -0.18%, 0);
  }
}

@keyframes elume-ambient-light {
  from {
    opacity: 0.66;
  }
  to {
    opacity: 0.9;
  }
}

@keyframes elume-logo-reveal {
  from {
    clip-path: inset(0 51% 0 51%);
    filter: blur(5px);
    opacity: 0.12;
  }
  to {
    clip-path: inset(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes elume-line-reveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes elume-copy-reveal {
  from {
    filter: blur(7px);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-aspect-ratio: 4 / 5) {
  :root {
    --elume-scene: url("assets/elume-coming-soon-mobile-bg-v1.png");
    --elume-curtain-mask: linear-gradient(144deg, transparent 0 57%, rgb(0 0 0 / 25%) 68%, #000 81%);
  }

  .welcome__light {
    background: radial-gradient(circle at 50% 42%, rgb(255 252 247 / 20%) 0 17%, transparent 48%);
  }

  .welcome__content {
    width: min(86vw, 820px);
    margin-top: -8vh;
  }

  .welcome__logo {
    width: min(74vw, 640px);
  }

  .welcome__announcement {
    margin-top: clamp(20px, 2.2vh, 34px);
  }

  .welcome__soon {
    font-size: clamp(0.74rem, 2.8vw, 0.95rem);
    letter-spacing: 0.36em;
  }

  h1 {
    display: grid;
    font-size: clamp(3.8rem, 13vw, 7rem);
    gap: 0;
    line-height: 0.72;
  }

  .welcome__lead {
    max-width: 31ch;
    font-size: clamp(0.92rem, 3.3vw, 1.16rem);
    line-height: 1.58;
  }

  .welcome__motto {
    max-width: 34ch;
    font-size: clamp(0.68rem, 2.6vw, 0.82rem);
    letter-spacing: 0.16em;
  }
}

@media (max-width: 420px) {
  .welcome__content {
    width: 88vw;
    margin-top: -6vh;
  }

  .welcome__logo {
    width: 78vw;
  }

  .welcome__announcement {
    margin-top: 18px;
  }

  .welcome__line {
    margin-top: 12px;
    margin-bottom: 13px;
  }

  h1 {
    font-size: clamp(3.25rem, 16.5vw, 4.15rem);
  }

  .welcome__lead {
    max-width: 30ch;
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.54;
  }

  .welcome__motto {
    max-width: 31ch;
    margin-top: 18px;
    padding-top: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome__scene,
  .welcome__curtain {
    transform: scale(1.012);
  }

  .welcome__light {
    opacity: 0.72;
  }
}