@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/cormorant-garamond-latin.woff2') format('woff2');
}

:root {
  --bg: #000;
  --mx: 50vw;
  --my: 50vh;
  --reveal-opacity: 0;
  --reveal-core: clamp(28px, 2.6vw, 50px);
  --reveal-mid: clamp(60px, 5vw, 96px);
  --reveal-soft: clamp(88px, 7vw, 134px);
  --reveal-edge: clamp(105px, 8.4vw, 160px);
}

*,::before,::after { box-sizing: border-box; }
html,body { background: var(--bg); width: 100%; min-height: 100%; margin: 0; }
body {
  color: #fff;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  overflow: hidden;
}
.hero {
  isolation: isolate;
  background: #000;
  width: 100vw;
  height: 100svh;
  min-height: 560px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle 210px at var(--mx) var(--my), #ffffff06, #ffffff02 42%, transparent 72%);
  opacity: var(--reveal-opacity);
  position: absolute;
  inset: 0;
}
.atmosphere {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(#ffffff02, #0000 30%, #00000059), radial-gradient(at 50% 52%, #ffffff03, #0000 58%);
  position: absolute;
  inset: 0;
}
.atmosphere::after {
  content: '';
  opacity: .018;
  filter: contrast(170%);
  mix-blend-mode: screen;
  background-image: repeating-radial-gradient(circle at 0 0, #fff9 0 .3px, #0000 .8px 1.7px);
  background-size: 3px 3px;
  position: absolute;
  inset: 0;
}
.title-wrap { z-index: 2; pointer-events: none; place-items: center; display: grid; position: absolute; inset: 0; }
.title {
  letter-spacing: -.066em;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: 'Cormorant Garamond', 'Bodoni 72', 'Bodoni MT', Didot, 'Times New Roman', serif;
  font-size: clamp(7rem, 17.3vw, 20.75rem);
  font-weight: 400;
  line-height: .705;
  display: flex;
  position: absolute;
  inset: 0;
  transform: translateY(-.7vh);
}
.title > span:last-child { transform: translate(1.2vw); }
.title--shadow { color: #030303; text-shadow: 0 -1px #ffffff02, 0 14px 38px #ffffff02; }
.title--glimpse {
  color: #2c2c2b;
  -webkit-text-fill-color: #2c2c2b;
  opacity: .78;
  -webkit-mask-image: radial-gradient(190px at 17% 43%, #000, #0000006b 43%, #0000 74%), radial-gradient(135px at 49% 45%, #000, #00000057 38%, #0000 76%), radial-gradient(165px at 64% 64%, #000, #0000005c 42%, #0000 76%);
  mask-image: radial-gradient(190px at 17% 43%, #000, #0000006b 43%, #0000 74%), radial-gradient(135px at 49% 45%, #000, #00000057 38%, #0000 76%), radial-gradient(165px at 64% 64%, #000, #0000005c 42%, #0000 76%);
}
.title--reveal {
  color: #f4f4f2;
  -webkit-text-fill-color: #f4f4f2;
  filter: drop-shadow(0 0 10px #ffffff0e);
  opacity: var(--reveal-opacity);
  -webkit-mask-image: radial-gradient(circle var(--reveal-edge) at var(--mx) var(--my), #000 0 var(--reveal-core), #00000070 var(--reveal-mid), #00000014 var(--reveal-soft), transparent var(--reveal-edge));
  mask-image: radial-gradient(circle var(--reveal-edge) at var(--mx) var(--my), #000 0 var(--reveal-core), #00000070 var(--reveal-mid), #00000014 var(--reveal-soft), transparent var(--reveal-edge));
}
@media (hover: none),(pointer: coarse) {
  :root { --reveal-core: 28px; --reveal-mid: 56px; --reveal-soft: 84px; --reveal-edge: 100px; }
}
@media (width <= 800px) {
  .title { letter-spacing: -.075em; font-size: clamp(5.6rem, 26vw, 10rem); line-height: .74; }
  .title > span:first-child { transform: scaleX(.74); }
  .title > span:last-child { transform: scaleX(.9) translate(1vw); }
}