/*
 * LiquidScene sets --level (0 to 1) and the glass's shape every frame. The room's
 * blur reads --level, and .is-night and .is-risen on the scene handle the rest.
 */

:root {
  --ink: #2a2118;
  --ink-soft: rgb(42 33 24 / 62%);
  --panel: rgb(255 255 255 / 32%);
  --glass-tint: rgb(255 244 228 / 20%);
  --line: rgb(255 255 255 / 55%);
}

.stage {
  font-family: 'Inter', -apple-system, sans-serif;
}

.scene {
  --level: 0;
  position: absolute;
  top: 260px;
  left: 0;
  width: 1080px;
  height: 1400px;
  overflow: hidden;
  background: #1c1712;
}

.scene.is-night {
  --ink: #f4efe8;
  --ink-soft: rgb(244 239 232 / 62%);
  --panel: rgb(20 20 28 / 42%);
  --glass-tint: rgb(14 14 22 / 52%);
  --line: rgb(255 255 255 / 26%);
}

.scene.no-anim,
.scene.no-anim * {
  transition: none !important;
  animation: none !important;
}

/* It starts out of focus, and the glass brings it in as the level rises. */
.room {
  position: absolute;
  inset: 0;
  filter: blur(calc((1 - var(--level)) * 22px));
  transform: scale(calc(1 + (1 - var(--level)) * 0.05));
}

.room__layer {
  position: absolute;
  inset: 0;
  background: var(--room-day) center / 100% 100%;
}

.room__layer--night {
  background-image: var(--room-night);
  opacity: 0;
  transition: opacity 800ms ease;
}

.scene.is-night .room__layer--night {
  opacity: 1;
}

/* LiquidScene clips this to the water's surface. Matches GLASS in liquid-scene.js. */
.glass {
  position: absolute;
  top: 380px;
  left: 40px;
  width: 1000px;
  height: 980px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 45%),
    var(--glass-tint);
  backdrop-filter: blur(26px) saturate(1.3);
  color: var(--ink);
  transition: background-color 800ms ease, color 600ms ease;
}

.edge {
  position: absolute;
  top: 380px;
  left: 40px;
  width: 1000px;
  height: 980px;
  overflow: visible;
  opacity: calc(var(--level) * 8);
  pointer-events: none;
}

.edge__line {
  fill: none;
  stroke: rgb(255 255 255 / 72%);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 5px rgb(255 255 255 / 45%));
}

.footer {
  position: absolute;
  inset: 0;
}

/* Everything inside staggers in once the glass has nearly risen. */
.reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 180ms ease, translate 180ms ease;
}

.scene.is-risen .reveal {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 520ms ease calc(var(--i) * 70ms),
    translate 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 70ms);
}

.brand {
  position: absolute;
  top: 40px;
  left: 44px;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
}

.brand__tile {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #a65f35;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.headline {
  position: absolute;
  top: 118px;
  left: 44px;
  margin: 0;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.form {
  position: absolute;
  top: 262px;
  left: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 620px;
  height: 76px;
  padding: 0 8px 0 30px;
  border-radius: 40px;
  background: rgb(24 20 16 / 72%);
  color: rgb(255 255 255 / 72%);
  font-size: 25px;
}

.form__submit {
  padding: 16px 32px;
  border-radius: 32px;
  background: #15110d;
  color: #fff;
  font-weight: 600;
}

.note {
  position: absolute;
  top: 262px;
  left: 690px;
  width: 270px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1.35;
}

.links {
  position: absolute;
  top: 362px;
  left: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 912px;
  padding: 26px 30px;
  border: 1.5px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  transition-property: opacity, translate, background-color, border-color;
}

.links__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.links__title {
  margin: 0 0 8px 14px;
  color: var(--ink-soft);
  font-size: 22px;
  font-weight: 500;
}

.link {
  padding: 6px 14px;
  border: 1.5px solid transparent;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 26px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, scale 260ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

.link.is-active {
  border-color: rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 30%);
  scale: 1.06;
}

.meta {
  position: absolute;
  top: 648px;
  left: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 912px;
  font-size: 23px;
}

.meta__status {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 500;
}

.meta__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4bd07c;
  box-shadow: 0 0 10px #4bd07c;
}

.meta__icons {
  display: flex;
  gap: 10px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 30px;
  background: var(--panel);
}

.meta__icon svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.toggle {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.toggle__track {
  position: relative;
  width: 72px;
  height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
}

.toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e6dccb);
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
  transition: translate 420ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

.scene.is-night .toggle__thumb {
  translate: 32px 0;
}

.copyright {
  position: absolute;
  top: 56px;
  right: 44px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 22px;
}

/*
 * The room shows through the letters in focus, as if they were cut through the
 * glass. Enlarging it 12% around the wordmark's center gives a slight lens effect:
 * the background sits at center - point * scale, with the point at (540, 1222.5).
 */
.wordmark {
  position: absolute;
  top: 712px;
  left: 0;
  width: 1000px;
  height: 255px;
}

.wordmark__layer {
  position: absolute;
  inset: 0;
  background: var(--room-day) -104.8px -1241.7px / 1209.6px 1568px no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: contrast(1.2) saturate(1.25) drop-shadow(0 0 1.5px #fff) drop-shadow(0 4px 6px rgb(0 0 0 / 38%));
  font-size: 350px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 255px;
  text-align: center;
}

.wordmark__layer--night {
  background-image: var(--room-night);
  opacity: 0;
  transition: opacity 800ms ease;
}

.scene.is-night .wordmark__layer--night {
  opacity: 1;
}

/* The rings that spread through the glass from a hovered link. */
.ripple {
  position: absolute;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 22px,
    rgb(255 255 255 / 38%) 28px,
    transparent 34px,
    rgb(0 0 0 / 13%) 40px,
    transparent 46px
  );
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle, #000 20%, transparent 70%);
  pointer-events: none;
  animation: ripple 1000ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes ripple {
  from {
    opacity: 1;
    scale: 0.12;
  }

  to {
    opacity: 0;
    scale: 1;
  }
}

/* The glass drop that becomes the dot of the "i". Its radius is DROP_RADIUS. */
.drop {
  position: absolute;
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / 95%), rgb(255 255 255 / 0%) 26%),
    radial-gradient(circle at 62% 74%, rgb(255 255 255 / 34%), transparent 40%),
    radial-gradient(circle, rgb(255 255 255 / 12%) 52%, rgb(70 50 30 / 42%) 100%);
  box-shadow:
    0 14px 22px rgb(0 0 0 / 26%),
    inset 0 0 0 1.5px rgb(255 255 255 / 66%);
  backdrop-filter: blur(3px) brightness(1.08);
  pointer-events: none;
  will-change: transform;
}