@charset "UTF-8";

@font-face {
  font-family: "UA-brand";
  src: url("../fonts/ua-brand.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../fonts/noto-sans-sc-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

#fiona {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#fiona .make,
#fiona .make-up,
#fiona .your,
#fiona .your-up,
#fiona .reality,
#fiona .reality-up {
  will-change: transform;
}

#fiona .fiona {
  position: relative;
  background-image: url("../images/brand/FIONA_BITCH.png");
  background-image: image-set(
    url("../images/brand/FIONA_BITCH.webp") type("image/webp"),
    url("../images/brand/FIONA_BITCH.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 44%;
  height: 66vw;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin-top: -51px;
  pointer-events: none;
  font-family: "UA-brand";
  line-height: 1.5;
  white-space: nowrap;
}

#fiona .fiona .make {
  position: absolute;
  font-size: 11.45vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #000;
  z-index: -2;
  top: 6.6vw;
  left: -56px;
}

#fiona .fiona .make-up {
  position: absolute;
  font-size: 11.45vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: transparent;
  z-index: 3;
  top: 6.6vw;
  left: -56px;
  -webkit-text-stroke: .5px rgba(255, 255, 255, .5411764706);
  text-stroke: .5px rgba(255, 255, 255, .5411764706);
  -webkit-text-fill-color: transparent;
}

#fiona .fiona .your {
  position: absolute;
  font-size: 11vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #000;
  z-index: -1;
  top: 17.4vw;
  left: -147px;
}

#fiona .fiona .your-up {
  position: absolute;
  font-size: 11vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: .5px #fff;
  text-stroke: .5px #fff;
  -webkit-text-fill-color: transparent;
  top: 17.4vw;
  left: -147px;
}

#fiona .fiona .reality {
  position: absolute;
  font-size: 10.1vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #000;
  z-index: -1;
  top: 28vw;
  left: -425px;
}

#fiona .fiona .reality-up {
  position: absolute;
  font-size: 10.1vw;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: .5px #fff;
  text-stroke: .5px #fff;
  -webkit-text-fill-color: transparent;
  top: 28vw;
  left: -425px;
}

#fiona .WARNING {
  position: absolute;
  background: url("../images/brand/WARNINGBLACK.svg");
  background-size: cover;
  width: 97vw;
  height: 9.5vw;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 8vw;
  z-index: -1;
  opacity: .6;
  pointer-events: none;
}

#fiona .WARNINGWHITE {
  position: absolute;
  background: url("../images/brand/WARNINGWHITE.svg");
  background-size: cover;
  width: 97vw;
  height: 9.5vw;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 8vw;
  z-index: 3;
  opacity: .7;
  pointer-events: none;
}

#ash {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ash-state {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: clamp(18px, 4vw, 64px);
  margin: 0;
  color: #111;
  font: 500 11px/1.2 "SF Pro Display", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .58;
  pointer-events: none;
}

.eye {
  width: 2.4557vw;
  height: 2.4557vw;
  top: 17.7vw;
  left: 32vw;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 60px 0 rgba(146, 146, 146, .5);
  border-radius: 100%;
  position: absolute;
  perspective: 500px;
  overflow: hidden;
  z-index: -1;
}

.eye.demon {
  background-color: #000;
  box-shadow: inset 0 0 60px 0 rgba(26, 26, 26, .7);
}

.eye.demon .iris {
  background: radial-gradient(ellipse at center, #000 26%, #bc0d0d 15%, #ff6347 15%, #b7451b 26%, #e6690d 55%, #ff4500 0%, #3a332c 53%, rgb(253, 0, 0) 128%, transparent 8%);
}

.eye .iris {
  width: 1.8vw;
  height: 1.8vw;
  top: 0;
  left: 0;
  position: absolute;
  border-radius: 100px;
  transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(.6);
  background: radial-gradient(ellipse at center, #454545 26%, #2e2e2e 15%, #000 15%, #919191 26%, #7c7c7c 55%, #878787 0%, #b9b9b9 53%, rgba(153, 153, 153, .4) 128%, transparent 8%);
}

.eye .iris.anim {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: iris;
}

@keyframes iris {
  0%, 100% { transform: rotateX(-7deg) rotateY(19deg) translateZ(34px) scale(.6); }
  10% { transform: rotateX(-4deg) rotateY(10deg) translateZ(34px) scale(.6); }
  30% { transform: rotateX(-4deg) rotateY(8deg) translateZ(34px) scale(.6); }
  45% { transform: rotateX(0deg) rotateY(20deg) translateZ(34px) scale(.6); }
  55%, 60% { transform: rotateX(0deg) rotateY(15deg) translateZ(34px) scale(.6); }
  90% { transform: rotateX(-6deg) rotateY(16deg) translateZ(34px) scale(.6); }
}

.mafreeqa {
  position: relative;
  background: url("../images/brand/mafreeqa.svg") no-repeat;
  background-size: contain;
  width: 69px;
  height: 36px;
  margin: 20px auto;
}

.mafreeqa::before,
.mafreeqa::after {
  content: "";
  position: absolute;
  background: #000;
  height: 4px;
  width: 20vw;
  margin: auto;
  top: 0;
  bottom: 0;
  border-radius: 100px;
}

.mafreeqa::before { left: -21vw; }
.mafreeqa::after { right: -21vw; }

.lb-locale-fr #fiona .make,
.lb-locale-fr #fiona .make-up { left: -12vw; font-size: 9.7vw; }
.lb-locale-fr #fiona .your,
.lb-locale-fr #fiona .your-up { left: -9vw; font-size: 10.6vw; }
.lb-locale-fr #fiona .reality,
.lb-locale-fr #fiona .reality-up { left: -20vw; font-size: 9.8vw; }

.lb-locale-zh-hans #fiona .fiona {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 600;
}

.lb-locale-zh-hans #fiona .make,
.lb-locale-zh-hans #fiona .make-up,
.lb-locale-zh-hans #fiona .your,
.lb-locale-zh-hans #fiona .your-up,
.lb-locale-zh-hans #fiona .reality,
.lb-locale-zh-hans #fiona .reality-up {
  left: 2vw;
  font-size: 13vw;
  letter-spacing: .08em;
}

@media (max-width: 1199px) {
  #fiona { min-height: min(78vw, 850px); }
  #fiona .fiona { width: 51vw; height: 78.35vw; margin-top: -20px; }
  #fiona .make, #fiona .make-up { top: 8vw; left: -8vw; font-size: 13vw; }
  #fiona .your, #fiona .your-up { top: 22vw; left: -13vw; font-size: 12.5vw; }
  #fiona .reality, #fiona .reality-up { top: 36vw; left: -27vw; font-size: 11.4vw; }
  .eye { top: 21vw; left: 37vw; width: 2.8vw; height: 2.8vw; }
  .eye .iris { width: 2.1vw; height: 2.1vw; }
}

@media (max-width: 720px) {
  #fiona .fiona {
    background-image: url("../images/brand/FIONA_BITCH.png");
    background-image: image-set(
      url("../images/brand/FIONA_BITCH-mobile.webp") type("image/webp"),
      url("../images/brand/FIONA_BITCH.png") type("image/png")
    );
  }

  #fiona { min-height: clamp(460px, 135vw, 700px); }
  #fiona .fiona { width: min(82vw, 470px); height: min(126vw, 724px); margin-top: 0; }
  #fiona .make, #fiona .make-up { top: 15vw; left: -14vw; font-size: 24vw; }
  #fiona .your, #fiona .your-up { top: 43vw; left: -7vw; font-size: 22vw; }
  #fiona .reality, #fiona .reality-up { top: 71vw; left: -28vw; font-size: 18vw; }
  #fiona .WARNING, #fiona .WARNINGWHITE { width: 130vw; height: 12.7vw; bottom: 10vw; left: -15vw; right: auto; }
  .eye { top: 34vw; left: 59.5vw; width: 4.8vw; height: 4.8vw; }
  .eye .iris { width: 3.6vw; height: 3.6vw; }
  .mafreeqa::before, .mafreeqa::after { width: 28vw; }
  .mafreeqa::before { left: -30vw; }
  .mafreeqa::after { right: -30vw; }
  .lb-locale-en #fiona .make, .lb-locale-en #fiona .make-up { left: -2vw; }
  .lb-locale-fr #fiona .make, .lb-locale-fr #fiona .make-up { left: -24vw; font-size: 21vw; }
  .lb-locale-zh-hans #fiona .make, .lb-locale-zh-hans #fiona .make-up,
  .lb-locale-zh-hans #fiona .your, .lb-locale-zh-hans #fiona .your-up,
  .lb-locale-zh-hans #fiona .reality, .lb-locale-zh-hans #fiona .reality-up { left: -2vw; font-size: 25vw; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  #fiona .make, #fiona .make-up, #fiona .your, #fiona .your-up,
  #fiona .reality, #fiona .reality-up, .eye .iris.anim {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
  #ash { display: none !important; }
}