:root {
  color-scheme: dark;
  --ivory: #d9ded8;
  --pulse: #86bdba;
  --page: #050807;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #000;
}

body {
  color: var(--ivory);
  font-family: Georgia, "Times New Roman", serif;
}

.experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--page);
}

.environment,
.manifestation,
.atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.environment {
  z-index: -4;
  inset: -2%;
  background-image: url("/assets/night-nurse-visiting-soon-background-clean.png");
  background-position: center;
  background-size: cover;
  filter: blur(13px) brightness(.58) saturate(.86);
  transform: scale(1.04);
}

.manifestation {
  z-index: -3;
  background-image: url("/assets/night-nurse-visiting-soon.png");
  background-position: center;
  background-size: cover;
  -webkit-mask-image: linear-gradient(100deg, #000 0 44%, rgba(0, 0, 0, .96) 47%, rgba(0, 0, 0, .55) 51%, transparent 56%);
  mask-image: linear-gradient(100deg, #000 0 44%, rgba(0, 0, 0, .96) 47%, rgba(0, 0, 0, .55) 51%, transparent 56%);
}

.atmosphere {
  z-index: -2;
  background:
    radial-gradient(circle at 31% 37%, transparent 0 17%, rgba(0, 0, 0, .08) 42%, rgba(0, 0, 0, .38) 78%),
    linear-gradient(90deg, transparent 0 41%, rgba(4, 8, 7, .42) 54%, rgba(2, 4, 4, .24) 72%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 23%, rgba(0, 0, 0, .1) 72%, rgba(0, 0, 0, .48));
}

.identity {
  position: absolute;
  z-index: 2;
  top: 9.75%;
  left: 44.74%;
  width: 44.86%;
}

.identity::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5% -6% -28%;
  background: radial-gradient(ellipse at center, rgba(2, 5, 4, .9) 0 60%, rgba(2, 5, 4, .58) 76%, transparent 100%);
  filter: blur(12px);
}

.title-lockup {
  display: block;
  width: 100%;
  height: auto;
}

.announcement {
  position: absolute;
  z-index: 3;
  top: 53.1%;
  left: 46.5%;
  width: 43%;
  text-align: center;
  text-transform: uppercase;
}

.announcement::before,
.pulse::before,
.brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(2, 5, 4, .96) 0 56%, rgba(2, 5, 4, .72) 71%, transparent 100%);
  filter: blur(11px);
}

.announcement::before { inset: -34% -7% -62%; }
.pulse::before { inset: -24% -5% -65%; }
.brand::before { inset: -34% -42% -38%; }

.announcement h2,
.announcement p,
.brand p {
  margin: 0;
  font-weight: 400;
}

.announcement h2 {
  color: #dce8e4;
  font-size: clamp(2rem, 3.15vw, 3.35rem);
  line-height: 1;
  letter-spacing: .35em;
  text-shadow: 0 0 22px rgba(113, 166, 162, .18);
}

.announcement p {
  margin-top: clamp(1.7rem, 3.8vh, 2.5rem);
  color: #e1dfdc;
  font-size: clamp(.76rem, 1.06vw, 1.08rem);
  line-height: 1.3;
  letter-spacing: .48em;
}

.pulse {
  position: absolute;
  z-index: 3;
  top: 69.2%;
  left: 51.3%;
  width: 33.5%;
  height: 9.4%;
}

.pulse svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pulse path {
  fill: none;
  stroke: var(--pulse);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.pulse .pulse-glow {
  opacity: .3;
  stroke-width: 5;
  filter: blur(3px);
}

.brand {
  position: absolute;
  z-index: 3;
  top: 84.1%;
  left: 60.7%;
  width: 12.4%;
  text-align: center;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.brand p {
  margin-top: .45rem;
  color: #f0efec;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.44rem, .57vw, .62rem);
  line-height: 1.2;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.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;
}

@media (max-width: 1180px) {
  .experience { min-height: 720px; }

  .environment {
    background-position: 31% center;
    filter: blur(15px) brightness(.24) saturate(.78);
  }

  .manifestation {
    background-position: 8% center;
    clip-path: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, .88) 56%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0 42%, rgba(0, 0, 0, .88) 56%, transparent 78%);
  }

  .atmosphere {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .12) 36%, rgba(3, 7, 6, .82) 59%, #030505 100%),
      radial-gradient(circle at 50% 35%, transparent 0 24%, rgba(0, 0, 0, .4) 80%);
  }

  .identity {
    top: 49%;
    left: 8%;
    width: 84%;
  }

  .announcement {
    top: 70.5%;
    left: 6%;
    width: 88%;
  }

  .announcement h2 { font-size: clamp(2.15rem, 6.2vw, 3.65rem); }

  .announcement p {
    margin-top: 1.5rem;
    font-size: clamp(.75rem, 1.72vw, 1rem);
  }

  .pulse {
    top: 82.5%;
    left: 18%;
    width: 64%;
    height: 6.8%;
  }

  .brand {
    top: 89.2%;
    left: 39%;
    width: 22%;
  }
}

@media (min-width: 800px) and (max-width: 1180px) and (orientation: landscape) {
  .environment {
    background-position: center;
    filter: blur(13px) brightness(.52) saturate(.84);
  }

  .manifestation {
    background-position: center;
    -webkit-mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .94) 47%, rgba(0, 0, 0, .5) 52%, transparent 59%);
    mask-image: linear-gradient(100deg, #000 0 42%, rgba(0, 0, 0, .94) 47%, rgba(0, 0, 0, .5) 52%, transparent 59%);
  }

  .atmosphere {
    background:
      linear-gradient(90deg, transparent 0 38%, rgba(4, 8, 7, .5) 52%, rgba(1, 3, 3, .35) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 30%, rgba(0, 0, 0, .46));
  }

  .identity {
    top: 5.5%;
    left: 46%;
    width: 48%;
  }

  .announcement {
    top: 49.5%;
    left: 44%;
    width: 52%;
  }

  .announcement h2 {
    font-size: clamp(2rem, 4.15vw, 2.8rem);
    letter-spacing: .28em;
  }

  .announcement p {
    margin-top: 1.4rem;
    font-size: clamp(.7rem, 1.35vw, .9rem);
    letter-spacing: .27em;
  }

  .pulse {
    top: 68.2%;
    left: 49%;
    width: 43%;
    height: 9%;
  }

  .brand {
    top: 83.5%;
    left: 61%;
    width: 15%;
  }
}

@media (max-width: 700px) {
  .experience {
    height: 100svh;
    min-height: 700px;
  }

  .environment { background-position: 27% center; }

  .manifestation {
    background-position: 22% center;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 35%, rgba(0, 0, 0, .94) 45%, transparent 66%);
    mask-image: linear-gradient(to bottom, #000 0 35%, rgba(0, 0, 0, .94) 45%, transparent 66%);
  }

  .atmosphere {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .1) 32%, rgba(3, 6, 5, .86) 52%, #020404 100%),
      radial-gradient(circle at 47% 26%, transparent 0 17%, rgba(0, 0, 0, .38) 69%);
  }

  .identity {
    top: 45.5%;
    left: 4%;
    width: 92%;
  }

  .announcement {
    top: 65.2%;
    left: 4%;
    width: 92%;
  }

  .announcement h2 {
    font-size: clamp(1.85rem, 10vw, 2.65rem);
    letter-spacing: .2em;
  }

  .announcement p {
    margin-top: .8rem;
    font-size: clamp(.68rem, 2.75vw, .84rem);
    letter-spacing: .16em;
  }

  .pulse {
    top: 80.6%;
    left: 9%;
    width: 82%;
    height: 6.7%;
  }

  .brand {
    top: 87.8%;
    left: 34%;
    width: 32%;
  }

  .brand p {
    margin-top: .32rem;
    font-size: clamp(.39rem, 1.7vw, .53rem);
    letter-spacing: .18em;
  }
}

@media (max-height: 720px) and (min-width: 701px) {
  .experience { min-height: 620px; }
}

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