/* Perpetus — self-hosted Cormorant (wordmark) + Manrope (tagline), latin subset only. */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cormorant-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-400.woff2') format('woff2');
}

@keyframes pxCurtain {
  from { opacity: 0; filter: blur(20px) saturate(0.25); }
  to   { opacity: 1; filter: blur(0)     saturate(1); }
}

@keyframes pxRise {
  from { opacity: 0; transform: translateY(0.48em) scale(0.94); filter: blur(16px); }
  60%  { filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes pxSheen {
  0%   { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { opacity: 0.5; }
  92%  { opacity: 0; }
  100% { transform: translateX(230%) skewX(-14deg); opacity: 0; }
}

@keyframes pxGrain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@keyframes pxCueTravel {
  0%   { transform: translateY(-6px); opacity: 0; }
  30%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { transform: translateY(48px); opacity: 0; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #0b0a0a;
  color-scheme: dark;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
}

.px-scroll {
  position: relative;
  height: 340vh;
  background: #0b0a0a;
}

.px-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0b0a0a;
  animation: pxCurtain 1.5s cubic-bezier(.16, .84, .28, 1) both;
}

.px-video {
  position: absolute;
  inset: -4% -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  background: #0b0a0a;
  transform: scale(1.18);
  filter: blur(3px) saturate(0.62) contrast(1.06) brightness(0.82);
  will-change: transform, filter;
}

.px-veil-top {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 9, 0.72) 0%,
    rgba(8, 8, 9, 0.34) 34%,
    rgba(8, 8, 9, 0.42) 62%,
    rgba(8, 8, 9, 0.86) 100%
  );
}

.px-veil-dim {
  position: absolute;
  inset: 0;
  background: #08080a;
  opacity: 0.18;
  will-change: opacity;
}

.px-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 78% at 50% 46%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.px-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
}

.px-block {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  will-change: transform;
}

.px-word {
  position: relative;
  margin: 0;
  font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: #f7f5f2;
  font-size: clamp(34px, 9.5vw, 150px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-indent: 0.02em;
  display: flex;
  justify-content: center;
  will-change: letter-spacing;
}

.px-word span {
  display: inline-block;
  opacity: 0;
  animation: pxRise 1.5s cubic-bezier(.16, .84, .28, 1) both;
}

.px-word span:nth-child(1) { animation-delay: 0.14s; }
.px-word span:nth-child(2) { animation-delay: 0.22s; }
.px-word span:nth-child(3) { animation-delay: 0.30s; }
.px-word span:nth-child(4) { animation-delay: 0.38s; }
.px-word span:nth-child(5) { animation-delay: 0.46s; }
.px-word span:nth-child(6) { animation-delay: 0.54s; }
.px-word span:nth-child(7) { animation-delay: 0.62s; }
.px-word span:nth-child(8) { animation-delay: 0.70s; }

.px-sheen {
  position: absolute;
  top: -10%;
  left: 0;
  width: 34%;
  height: 120%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  animation: pxSheen 2.1s cubic-bezier(.4, 0, .2, 1) 2.2s 1 both;
}

.px-tag {
  margin: clamp(22px, 3.4vh, 44px) 0 0;
  font-family: 'Manrope', 'Segoe UI', -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: rgba(247, 245, 242, 0.9);
  font-size: clamp(16px, 1.9vw, 30px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity, transform;
}

.px-cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(
    180deg,
    rgba(247, 245, 242, 0) 0%,
    rgba(247, 245, 242, 0.6) 100%
  );
  will-change: opacity;
  overflow: hidden;
}

.px-cue::after {
  content: '';
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f7f5f2;
  box-shadow: 0 0 8px rgba(247, 245, 242, 0.8);
  animation: pxCueTravel 2.8s cubic-bezier(.4, 0, .2, 1) 2.6s infinite;
}

.px-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  animation: pxGrain 1.1s steps(2, end) infinite;
}

@media (max-width: 560px) {
  .px-scroll { height: 260vh; }

  .px-tag {
    white-space: normal;
    max-width: min(88vw, 420px);
    margin-inline: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  .px-sheen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .px-stage {
    animation: none;
    opacity: 1;
    filter: none;
  }
  .px-word span {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .px-sheen {
    animation: none;
    display: none;
  }
  .px-cue::after {
    animation: none;
    opacity: 0;
  }
  .px-grain {
    animation: none;
  }
}