:root {
  color-scheme: light;
  --paper: #faf9f7;
  --ink: #171717;
  --reveal: 1;
  --travel: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
::selection { background: #b9ffdf; color: #121714; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 29px;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-radius: 5px;
  color: var(--ink);
  transition: opacity .2s;
}
.brand img { display: block; width: 132px; height: auto; transition: filter .6s; }
.brand:hover { opacity: .65; }
.social {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #17171720;
  background: #faf9f7b3;
  color: var(--ink);
  backdrop-filter: blur(12px);
  transition: color .4s, background .4s, border-color .4s, transform .2s;
}
.social:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }
body[data-dark="true"] .brand { color: #f4f2ed; }
body[data-dark="true"] .brand img { filter: invert(1); }
body[data-dark="true"] .social { color: #f4f2ed; background: #12161565; border-color: #ffffff26; }
body[data-dark="true"] .social:hover { color: #090d0d; background: #f4f2ed; }

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 0;
  background: var(--paper);
  overflow: hidden;
}
.hero-film {
  width: min(100%, 1600px, calc((100svh - 105px) * 1.777778));
  pointer-events: none;
  user-select: none;
  transform: translateY(-3%);
}
.hero-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.scroll-cue {
  position: absolute;
  bottom: max(37px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  min-width: 92px;
  min-height: 52px;
  padding: 4px 12px;
  color: #6b6965;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .1em;
  transition: color .2s;
}
.scroll-cue:hover { color: #111; }
.scroll-arrow { height: 24px; overflow: hidden; }
.scroll-arrow svg { display: block; animation: invite 2.4s ease-in-out infinite; }

.scene-transition {
  height: clamp(110px, 21svh, 210px);
  background: linear-gradient(180deg, #faf9f7, #a3aaa5 25%, #343c39 57%, #070a0b);
}
.mystery {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: #070a0b;
  color: #f3f5ef;
  scroll-margin-top: 0;
}
.atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.haze {
  position: absolute;
  width: 86vw;
  height: 83%;
  top: 11%;
  opacity: .45;
  mix-blend-mode: screen;
  will-change: transform;
  animation: atmosphere 21s ease-in-out infinite alternate;
}
.haze-violet { left: -34%; background: radial-gradient(ellipse at center, #38345680, #201e3620 40%, transparent 68%); }
.haze-green { right: -35%; top: 25%; background: radial-gradient(ellipse at center, #2b684780, #14332825 43%, transparent 68%); animation-delay: -11s; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .7; }
.eclipse-position {
  position: absolute;
  left: 50%;
  top: 43%;
  width: clamp(240px, 34vw, 470px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateY(calc(var(--travel) * -24px)) scale(calc(.88 + var(--reveal) * .12));
}
.eclipse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(-24deg);
  animation: levitate 9s ease-in-out infinite;
}
.eclipse-aura {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 75deg, transparent 8%, #86ffc743 24%, transparent 44%, #9e91ff40 66%, transparent 88%);
  filter: blur(30px);
  animation: breathe 6s ease-in-out infinite alternate;
}
.eclipse-edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 75deg, #0a0e12 7%, #588d7160 13%, #c5ffe1 23%, #40634a 33%, #0a0e12 43%, #30333d 58%, #b9aef9 68%, #41405b 76%, #0a0e12 86%);
  box-shadow: -10px -2px 36px #9989ff0d, 14px 10px 42px #9bffcd12;
}
.eclipse-core {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 24% 17%, #1d2023, #101417 29%, #070a0c 61%, #040808 86%);
  box-shadow: inset -5px -4px 15px #000, inset 3px 3px 12px #9b96c30a;
}
.eclipse-core::after {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #141c191f, transparent 75%);
}
.eclipse-glint {
  position: absolute;
  top: 75%;
  left: 83%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d8ffea;
  box-shadow: 0 0 12px 3px #c7ffe883, 0 0 40px 12px #92ffbf24;
  opacity: .85;
  animation: glimmer 5s ease-in-out infinite alternate;
}
.floor-glow {
  position: absolute;
  top: 77%;
  left: 50%;
  width: min(80vw, 750px);
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #6e8a6f15, #6e8a6f04 35%, transparent 67%);
  filter: blur(15px);
}
.reveal {
  position: relative;
  z-index: 3;
  padding: 0 22px;
  width: 100%;
  margin-top: clamp(200px, 28vw, 340px);
  text-align: center;
  opacity: calc(.18 + var(--reveal) * .82);
  transform: translateY(calc((1 - var(--reveal)) * 32px));
}
h1 {
  margin: 0;
  font-size: clamp(58px, 9.1vw, 132px);
  font-weight: 600;
  letter-spacing: -.065em;
  line-height: 1.03;
  text-wrap: balance;
  text-shadow: 0 6px 40px #070a0b90;
}
.title-period { color: #b9d9c8; }
.mystery:not(.is-visible) .haze,
.mystery:not(.is-visible) .eclipse,
.mystery:not(.is-visible) .eclipse-aura,
.mystery:not(.is-visible) .eclipse-glint { animation-play-state: paused; }

@keyframes invite { 0%, 100% { transform: translateY(-2px); opacity: .4; } 50% { transform: translateY(4px); opacity: .9; } }
@keyframes levitate { 0%, 100% { transform: translateY(0) rotate(-24deg); } 50% { transform: translateY(-13px) rotate(-20deg); } }
@keyframes breathe { from { opacity: .45; transform: scale(.97) rotate(-3deg); } to { opacity: .85; transform: scale(1.08) rotate(9deg); } }
@keyframes atmosphere { from { transform: translate(-2%, 3%) rotate(-8deg); } to { transform: translate(8%, -4%) rotate(8deg); } }
@keyframes glimmer { from { opacity: .4; } to { opacity: 1; } }

@media (min-width: 1800px) { .site-header { padding: 30px 40px; } }
@media (max-width: 600px) {
  .site-header { padding: 18px 20px; }
  .brand img { width: 118px; }
  .social { width: 42px; height: 42px; }
  .hero { padding: 0; min-height: 100svh; }
  .hero-film { width: 135%; max-width: none; transform: translateY(-2%); }
  .scroll-cue { bottom: max(45px, env(safe-area-inset-bottom)); font-size: 10px; }
  .mystery { min-height: 100svh; }
  .eclipse-position { top: 43%; width: min(67vw, 320px); }
  .haze { width: 140vw; }
  .haze-violet { left: -90%; }
  .haze-green { right: -93%; }
  .reveal { margin-top: 225px; padding: 0 15px; }
  h1 { font-size: clamp(48px, 12.4vw, 74px); white-space: nowrap; }
}
@media (max-height: 530px) and (orientation: landscape) {
  .site-header { padding: 12px 22px; }
  .hero { padding: 0; }
  .hero-film { width: min(90vw, 650px, calc((100svh - 70px) * 1.777778)); }
  .scroll-cue { bottom: 12px; flex-direction: row; }
  .mystery { min-height: 140svh; }
  .eclipse-position { width: 240px; }
  .reveal { margin-top: 230px; }
  h1 { font-size: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .eclipse-position { transform: translate(-50%, -50%); }
  .reveal { opacity: 1; transform: none; }
}