/* King of Perfume Parfume — artistic fragrance launch */

:root {
  --near-black: #09070a;
  --deep-plum: #24101f;
  --aubergine: #3a1832;
  --muted-rose: #8d526d;
  --dusty-mauve: #a97891;
  --soft-pearl: #f2edef;
  --warm-ivory: #f5f0ea;
  --smoked-silver: #8d858b;

  --frame-gap: 26px;
  --edge-gap: 46px;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Manrope", Arial, sans-serif;

  --ease-editorial: cubic-bezier(.22, .72, .18, 1);
  --duration-drift: 28s;
  --duration-glass: 16s;
}

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

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

html {
  background: var(--near-black);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--near-black);
  color: var(--soft-pearl);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.launch {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 42%, rgba(169, 120, 145, .11), transparent 26%),
    radial-gradient(circle at 77% 26%, rgba(141, 82, 109, .16), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(58, 24, 50, .22), transparent 38%),
    linear-gradient(135deg, #09070a 0%, #171018 40%, #25101f 74%, #09070a 100%);
}

.atmosphere,
.grain,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.atmosphere {
  z-index: -1;
  overflow: hidden;
}

.diffusion {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
}

.diffusion--one {
  top: -22%;
  right: -10%;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(141, 82, 109, .34), rgba(58, 24, 50, .11) 52%, transparent 72%);
  opacity: .6;
  animation: diffusionOne var(--duration-drift) ease-in-out infinite alternate;
}

.diffusion--two {
  bottom: -30%;
  left: -10%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle, rgba(169, 120, 145, .22), rgba(36, 16, 31, .08) 52%, transparent 72%);
  opacity: .48;
  animation: diffusionTwo 32s ease-in-out infinite alternate;
}

.fluid-form {
  position: absolute;
  top: 48%;
  left: 50%;
  width: clamp(320px, 38vw, 590px);
  aspect-ratio: .86;
  transform: translate(-50%, -50%) rotate(-7deg);
  border: 1px solid rgba(242, 237, 239, .09);
  border-radius: 49% 51% 45% 55% / 37% 39% 61% 63%;
  background:
    linear-gradient(128deg, rgba(245, 240, 234, .08), rgba(245, 240, 234, .015) 27%, rgba(141, 82, 109, .045) 61%, rgba(0,0,0,.08)),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.08), transparent 28%);
  box-shadow:
    inset 28px 16px 54px rgba(255,255,255,.025),
    inset -32px -24px 58px rgba(0,0,0,.34),
    0 45px 120px rgba(0,0,0,.32),
    0 0 90px rgba(169,120,145,.045);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: .74;
  will-change: transform, opacity;
  animation: fluidBreath var(--duration-glass) ease-in-out infinite alternate;
}

.fluid-form::before,
.fluid-form::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.fluid-form::before {
  inset: 7% 9%;
  border: 1px solid rgba(255,255,255,.035);
}

.fluid-form::after {
  left: 14%;
  right: 14%;
  bottom: 10%;
  height: 18%;
  background: radial-gradient(ellipse, rgba(169,120,145,.10), transparent 69%);
  filter: blur(14px);
}

.fluid-form__surface {
  position: absolute;
  top: 10%;
  left: 12%;
  width: 14%;
  height: 58%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.01));
  filter: blur(9px);
  opacity: .42;
  transform: rotate(8deg);
}

.fluid-form__edge {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(242,237,239,.13), rgba(169,120,145,.19), transparent);
}

.fluid-form__edge--one {
  top: 12%;
  right: 10%;
  height: 58%;
}

.fluid-form__edge--two {
  left: 20%;
  bottom: 8%;
  height: 33%;
  transform: rotate(68deg);
}

.scent {
  position: absolute;
  width: 58vw;
  height: 23vh;
  border-top: 1px solid rgba(242, 237, 239, .085);
  border-radius: 50%;
  filter: blur(8px);
  opacity: .4;
  will-change: transform;
}

.scent::before,
.scent::after {
  content: "";
  position: absolute;
  left: 8%;
  width: 84%;
  border-radius: 50%;
}

.scent::before {
  top: 31%;
  height: 52%;
  border-top: 1px solid rgba(169,120,145,.12);
  filter: blur(6px);
}

.scent::after {
  top: -10%;
  height: 110%;
  background: radial-gradient(ellipse at center, rgba(169,120,145,.07), transparent 65%);
  filter: blur(28px);
}

.scent--upper {
  top: 5%;
  right: -19%;
  transform: rotate(-15deg);
  animation: scentUpper 30s ease-in-out infinite alternate;
}

.scent--lower {
  left: -22%;
  bottom: -2%;
  transform: rotate(16deg);
  animation: scentLower 34s ease-in-out infinite alternate;
}

.reference-ring {
  position: absolute;
  border: 1px solid rgba(242,237,239,.055);
  border-radius: 50%;
  opacity: .58;
}

.reference-ring::before,
.reference-ring::after {
  content: "";
  position: absolute;
  background: rgba(169,120,145,.22);
}

.reference-ring::before {
  top: 50%;
  left: -8px;
  width: calc(100% + 16px);
  height: 1px;
}

.reference-ring::after {
  top: -8px;
  left: 50%;
  width: 1px;
  height: calc(100% + 16px);
}

.reference-ring--one {
  top: 25%;
  left: 29%;
  width: 72px;
  height: 72px;
}

.reference-ring--two {
  right: 26%;
  bottom: 21%;
  width: 42px;
  height: 42px;
  opacity: .35;
}

.grain {
  z-index: 10;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.79' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.68'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  animation: grainShift .34s steps(2) infinite;
}

.vignette {
  z-index: 11;
  box-shadow:
    inset 0 0 14vw rgba(0,0,0,.78),
    inset 0 -12vh 18vh rgba(0,0,0,.28);
}

.viewport-frame {
  position: absolute;
  z-index: 7;
  inset: var(--frame-gap);
  border: 1px solid rgba(169, 120, 145, .24);
  pointer-events: none;
}

.viewport-frame::before,
.viewport-frame::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,237,239,.33), transparent);
}

.viewport-frame::before {
  top: -1px;
  left: 14%;
}

.viewport-frame::after {
  right: 13%;
  bottom: -1px;
}

.reference {
  position: absolute;
  z-index: 12;
  margin: 0;
  color: rgba(242, 237, 239, .5);
  font-size: clamp(.46rem, .46vw, .61rem);
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.reference--top-left {
  top: var(--edge-gap);
  left: var(--edge-gap);
}

.reference--top-right {
  top: var(--edge-gap);
  right: var(--edge-gap);
  text-align: right;
}

.reference--bottom-left {
  bottom: var(--edge-gap);
  left: var(--edge-gap);
}

.reference--bottom-right {
  right: var(--edge-gap);
  bottom: var(--edge-gap);
  text-align: right;
}

.measure {
  position: absolute;
  z-index: 9;
  top: 50%;
  width: 24px;
  height: 132px;
  transform: translateY(-50%);
  color: rgba(169,120,145,.5);
}

.measure--left {
  left: 44px;
}

.measure--right {
  right: 44px;
  transform: translateY(-50%) scaleX(-1);
}

.measure__index {
  position: absolute;
  top: -22px;
  left: -2px;
  font-size: .46rem;
  letter-spacing: .18em;
}

.measure--right .measure__index {
  transform: scaleX(-1);
}

.measure__line {
  position: absolute;
  top: 0;
  left: 7px;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(169,120,145,.31) 17%, rgba(169,120,145,.31) 83%, transparent);
}

.measure__tick {
  position: absolute;
  left: 4px;
  width: 7px;
  height: 1px;
  background: rgba(169,120,145,.48);
}

.measure__tick--a { top: 18%; }
.measure__tick--b { top: 50%; }
.measure__tick--c { bottom: 18%; }

.hero {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  width: min(94vw, 1200px);
  padding: 1rem 3rem;
  transform: translate(-50%, -50%);
  text-align: center;
}

.eyebrow {
  margin: 0 0 clamp(1.35rem, 2.4vh, 1.9rem);
  color: rgba(169, 120, 145, .9);
  font-size: clamp(.48rem, .56vw, .65rem);
  font-weight: 500;
  letter-spacing: .33em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow span {
  display: inline-block;
  margin: 0 .3em;
  color: rgba(242,237,239,.45);
}

.brand-title {
  margin: 0;
  color: var(--soft-pearl);
  font-family: var(--font-display);
  font-weight: 400;
  text-shadow:
    0 1px 0 rgba(255,255,255,.055),
    0 18px 56px rgba(0,0,0,.52),
    0 0 44px rgba(169,120,145,.045);
}

.brand-title__line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: .8;
}

.brand-title__line--top {
  gap: clamp(.48rem, 1vw, .95rem);
  font-size: clamp(4.4rem, 8.4vw, 8.7rem);
  letter-spacing: -.055em;
}

.brand-title__line--bottom {
  gap: clamp(.65rem, 1.25vw, 1.2rem);
  margin-top: clamp(.18rem, .55vh, .45rem);
  font-size: clamp(3.2rem, 6.6vw, 6.8rem);
  letter-spacing: -.04em;
}

.brand-title__king {
  font-weight: 400;
}

.brand-title__of {
  position: relative;
  top: -.11em;
  color: rgba(169,120,145,.84);
  font-size: .31em;
  font-style: italic;
  letter-spacing: .01em;
}

.brand-title__perfume {
  font-weight: 400;
}

.brand-title__parfume {
  color: rgba(245,240,234,.92);
  font-style: italic;
  font-weight: 400;
}

.coming-soon {
  margin: clamp(1.45rem, 3vh, 2.2rem) 0 0;
  color: rgba(242,237,239,.84);
  font-size: clamp(.54rem, .64vw, .72rem);
  font-weight: 500;
  letter-spacing: .48em;
  line-height: 1;
  text-transform: uppercase;
}

.statement {
  margin: .95rem auto 0;
  color: rgba(242,237,239,.52);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.3vw, 1.32rem);
  font-style: italic;
  line-height: 1.5;
}

.progress {
  width: clamp(200px, 24vw, 304px);
  margin: clamp(1.9rem, 3.8vh, 2.8rem) auto 0;
}

.progress__label {
  margin: 0 0 .72rem;
  color: rgba(169,120,145,.62);
  font-size: clamp(.42rem, .46vw, .55rem);
  font-weight: 500;
  letter-spacing: .29em;
  line-height: 1.3;
  text-transform: uppercase;
}

.progress__track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(169,120,145,.18);
}

.progress__light {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(242,237,239,.98), rgba(169,120,145,.78), transparent);
  filter: drop-shadow(0 0 5px rgba(169,120,145,.48));
  transform: translateX(-125%);
  animation: progressSweep 6.9s var(--ease-editorial) infinite;
}

.js .reveal {
  opacity: 0;
  transform: translateY(15px);
}

.js.is-ready .reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 1.2s var(--ease-editorial),
    transform 1.2s var(--ease-editorial);
}

.js.is-ready .reveal--1 { transition-delay: .1s; }
.js.is-ready .reveal--2 { transition-delay: .24s; }
.js.is-ready .reveal--3 { transition-delay: .42s; }
.js.is-ready .reveal--4 { transition-delay: .56s; }
.js.is-ready .reveal--5 { transition-delay: .72s; }

@keyframes diffusionOne {
  from { transform: translate3d(0, 0, 0) scale(.96); opacity: .44; }
  to { transform: translate3d(-7%, 6%, 0) scale(1.08); opacity: .68; }
}

@keyframes diffusionTwo {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .36; }
  to { transform: translate3d(8%, -6%, 0) scale(1.12); opacity: .54; }
}

@keyframes fluidBreath {
  from { transform: translate(-50%, -50%) rotate(-7deg) scale(.975); opacity: .6; }
  to { transform: translate(-50%, -50%) rotate(-4deg) scale(1.035); opacity: .78; }
}

@keyframes scentUpper {
  from { transform: translate3d(2%, -2%, 0) rotate(-15deg) scaleX(.95); }
  to { transform: translate3d(-10%, 8%, 0) rotate(-11deg) scaleX(1.07); }
}

@keyframes scentLower {
  from { transform: translate3d(-2%, 3%, 0) rotate(16deg) scaleX(.96); }
  to { transform: translate3d(10%, -8%, 0) rotate(12deg) scaleX(1.09); }
}

@keyframes progressSweep {
  0% { transform: translateX(-130%); opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: .92; }
  100% { transform: translateX(365%); opacity: 0; }
}

@keyframes grainShift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-1.4%, .9%, 0); }
  50% { transform: translate3d(1%, -1.3%, 0); }
  75% { transform: translate3d(.5%, 1.2%, 0); }
  100% { transform: translate3d(-.9%, -.5%, 0); }
}

@media (max-width: 900px) {
  :root {
    --edge-gap: 40px;
  }

  .hero {
    width: min(95vw, 900px);
    padding-inline: 2rem;
  }

  .brand-title__line--top {
    font-size: clamp(4rem, 11vw, 7rem);
  }

  .brand-title__line--bottom {
    font-size: clamp(3rem, 8.5vw, 5.5rem);
  }

  .fluid-form {
    width: clamp(320px, 56vw, 500px);
  }

  .reference-ring--one {
    left: 20%;
  }

  .reference-ring--two {
    right: 18%;
  }

  .measure--left {
    left: 38px;
  }

  .measure--right {
    right: 38px;
  }
}

@media (max-width: 640px) {
  :root {
    --frame-gap: 12px;
    --edge-gap: 25px;
  }

  .hero {
    width: 100%;
    padding-inline: 1.2rem;
  }

  .eyebrow {
    max-width: 80vw;
    margin-inline: auto;
    margin-bottom: 1.4rem;
    font-size: .44rem;
    letter-spacing: .24em;
  }

  .brand-title__line--top {
    gap: .42rem;
    font-size: clamp(3.55rem, 17vw, 5rem);
  }

  .brand-title__line--bottom {
    flex-wrap: wrap;
    gap: .2rem .58rem;
    margin-top: .42rem;
    font-size: clamp(2.55rem, 12vw, 3.75rem);
    line-height: .84;
  }

  .coming-soon {
    margin-top: 1.7rem;
    font-size: .49rem;
    letter-spacing: .4em;
  }

  .statement {
    max-width: 82vw;
    margin-top: .82rem;
    font-size: 1rem;
  }

  .progress {
    width: 192px;
    margin-top: 2rem;
  }

  .progress__label {
    font-size: .4rem;
    letter-spacing: .22em;
  }

  .reference {
    font-size: .41rem;
    letter-spacing: .18em;
  }

  .reference--top-right,
  .reference--bottom-left {
    display: none;
  }

  .measure {
    height: 90px;
    opacity: .55;
  }

  .measure--left {
    left: 16px;
  }

  .measure--right {
    right: 16px;
  }

  .measure__index {
    display: none;
  }

  .fluid-form {
    top: 46%;
    width: min(82vw, 360px);
    opacity: .52;
  }

  .scent--lower,
  .reference-ring--two {
    display: none;
  }

  .scent--upper {
    top: 7%;
    right: -44%;
    width: 108vw;
    opacity: .22;
  }

  .reference-ring--one {
    top: 22%;
    left: 15%;
    width: 48px;
    height: 48px;
    opacity: .3;
  }

  .viewport-frame::before,
  .viewport-frame::after {
    width: 32px;
  }
}

@media (max-height: 700px) and (min-width: 641px) {
  .hero {
    transform: translate(-50%, -48%);
  }

  .eyebrow {
    margin-bottom: 1rem;
  }

  .coming-soon {
    margin-top: 1.25rem;
  }

  .statement {
    margin-top: .65rem;
  }

  .progress {
    margin-top: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .js .reveal,
  .js.is-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .progress__light {
    left: 31%;
    transform: none;
    opacity: .8;
  }
}