@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&family=Playfair+Display:ital,wght@1,500&display=swap');

:root {
  --ink: #f4f0e8;
  --muted: #a7a2ad;
  --night: #08080b;
  --lime: #d9ff62;
  --violet: #9d75ff;
  --coral: #ff786d;
  --mx: 50vw;
  --my: 30vh;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 84% 12%, rgba(157, 117, 255, .11), transparent 28rem),
    var(--night);
  font-family: "DM Sans", system-ui, sans-serif;
  cursor: default;
}

a { color: inherit; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(217, 255, 98, .09), transparent 68%);
  transform: translate(calc(var(--mx) - 50%), calc(var(--my) - 50%));
  transition: transform .25s ease-out;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem clamp(1.25rem, 4vw, 4rem);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 600;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(244, 240, 232, .45);
  border-radius: 50%;
}

.status { display: flex; align-items: center; gap: .65rem; margin: 0; color: var(--muted); }
.status span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 1rem var(--lime); animation: pulse 2s ease-in-out infinite; }

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(90vw, 1050px);
  text-align: center;
}

.eyebrow, .section-number {
  margin: 0 0 1.2rem;
  color: var(--lime);
  font-size: clamp(.7rem, 1vw, .8rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(5rem, 15vw, 13rem); font-weight: 500; letter-spacing: -.085em; line-height: .82; }
.word { display: inline-flex; }
.word > span { display: inline-block; opacity: 0; transform: translateY(1em) rotate(7deg); animation: letter-in 1s cubic-bezier(.16, 1, .3, 1) forwards; }
.word > span:nth-child(2) { animation-delay: .06s; }
.word > span:nth-child(3) { animation-delay: .12s; }
.word > span:nth-child(4) { animation-delay: .18s; }
.word > span:nth-child(5) { animation-delay: .24s; }
.word > span:nth-child(6) { animation-delay: .3s; }
.word > span:nth-child(7) { animation-delay: .36s; }
.word > span:nth-child(8) { animation-delay: .42s; }
.word .dot { color: var(--lime); }

.intro { margin: 2.25rem auto 2.8rem; color: #c9c4cc; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.6; }
.reveal { opacity: 0; transform: translateY(1.5rem); animation: reveal .9s .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.intro.reveal { animation-delay: .85s; }
.scroll-link.reveal { animation-delay: 1s; }

.scroll-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .45rem .45rem .45rem 1.2rem;
  border: 1px solid rgba(244, 240, 232, .25);
  border-radius: 4rem;
  font-size: .78rem;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .3s, background .3s;
}
.scroll-link:hover { border-color: var(--lime); background: rgba(217, 255, 98, .06); }
.scroll-arrow { display: grid; width: 2.55rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--night); background: var(--lime); font-size: 1.1rem; animation: nudge 1.7s ease-in-out infinite; }

.orbital-stage {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(76vw, 62rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform .3s ease-out;
}

.hero-letter {
  position: absolute;
  inset: 12%;
  display: grid;
  place-items: center;
  color: rgba(244, 240, 232, .018);
  font-family: Georgia, serif;
  font-size: min(58vw, 46rem);
  line-height: 1;
  text-shadow: 0 0 4rem rgba(157, 117, 255, .08);
}

.halo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 232, .12);
}
.halo::before, .halo::after { content: ""; position: absolute; width: .52rem; aspect-ratio: 1; border-radius: 50%; }
.halo-one { inset: 8%; animation: orbit 28s linear infinite; }
.halo-one::before { top: 12%; left: 12%; background: var(--coral); box-shadow: 0 0 1.5rem var(--coral); }
.halo-one::after { right: 4%; bottom: 25%; background: var(--lime); box-shadow: 0 0 1.5rem var(--lime); }
.halo-two { inset: 22%; border-style: dashed; border-color: rgba(157, 117, 255, .2); animation: orbit-reverse 20s linear infinite; }
.halo-two::before { right: -4px; top: 50%; background: var(--violet); box-shadow: 0 0 1.5rem var(--violet); }

.spark { position: absolute; border-radius: 50%; filter: blur(1px); }
.spark-one { top: 14%; left: 22%; width: 7rem; height: 7rem; background: rgba(255, 120, 109, .13); animation: float 8s ease-in-out infinite; }
.spark-two { right: 12%; bottom: 17%; width: 11rem; height: 11rem; background: rgba(157, 117, 255, .13); animation: float 10s -3s ease-in-out infinite; }
.spark-three { left: 25%; bottom: 13%; width: 5rem; height: 5rem; background: rgba(217, 255, 98, .08); animation: float 7s -5s ease-in-out infinite; }
.side-note { position: absolute; right: 1.5rem; bottom: 8rem; z-index: 4; margin: 0; color: #6f6b75; font-size: .62rem; letter-spacing: .25em; transform: rotate(90deg) translateX(100%); transform-origin: right bottom; }

.moment {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: clamp(6rem, 12vw, 12rem) clamp(1.5rem, 10vw, 10rem);
  background: var(--ink);
  color: var(--night);
  border-radius: 3rem 3rem 0 0;
}
.moment::after { content: ""; position: absolute; top: 12%; right: -10vw; width: 38vw; aspect-ratio: 1; border: 1px solid rgba(8, 8, 11, .12); border-radius: 50%; box-shadow: 0 0 0 6vw rgba(157, 117, 255, .07), 0 0 0 12vw rgba(217, 255, 98, .05); }
.moment-track { position: relative; z-index: 2; max-width: 72rem; }
.scroll-reveal { opacity: 0; transform: translateY(3rem); transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
.moment .section-number { color: #7059b1; }
.moment h2, .closing h2 { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: clamp(3.5rem, 9vw, 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .91; }
.moment h2 em { color: #7059b1; font-family: "Playfair Display", Georgia, serif; font-weight: 500; }
.moment-copy { width: min(100%, 30rem); margin: 4rem 0 0 auto; color: #5e5a63; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.65; }

.marquee { position: relative; z-index: 3; overflow: hidden; padding: 1.1rem 0; color: var(--night); background: var(--lime); transform: rotate(-1.5deg) scale(1.02); }
.marquee-track { display: flex; width: max-content; align-items: center; gap: 1.5rem; font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 600; letter-spacing: .05em; animation: ticker 25s linear infinite; }
.marquee-track i { font-style: normal; }

.closing { position: relative; min-height: 92svh; display: grid; place-content: center; overflow: hidden; padding: 7rem 1.5rem 3rem; text-align: center; }
.closing .section-number { margin-bottom: 2.5rem; }
.closing h2 { position: relative; z-index: 2; }
.closing h2 span { color: var(--violet); font-family: "Playfair Display", Georgia, serif; font-style: italic; }
.closing > p:last-child { margin-top: 4rem; color: var(--muted); font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; }
.signature { position: absolute; top: 50%; left: 50%; color: rgba(217, 255, 98, .035); font-family: Georgia, serif; font-size: min(85vw, 48rem); transform: translate(-50%, -50%) rotate(-10deg); }

footer { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 1.5rem clamp(1.25rem, 4vw, 4rem); border-top: 1px solid rgba(244, 240, 232, .13); color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
footer p { margin: 0; }
footer a { text-decoration: none; }

@keyframes letter-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .4; transform: scale(.75); } }
@keyframes nudge { 50% { transform: translateY(.2rem); } }
@keyframes float { 50% { transform: translate(1.5rem, -2rem) scale(1.12); } }

@media (max-width: 700px) {
  .site-header { padding-top: 1.2rem; }
  .status { font-size: 0; gap: 0; }
  .status::after { content: "GEWOON SHERREN"; font-size: .62rem; }
  .status span { margin-right: .5rem; }
  .hero-copy { margin-top: 1rem; }
  h1 { font-size: clamp(4.2rem, 24vw, 7.5rem); }
  .intro { margin-top: 1.7rem; }
  .orbital-stage { width: 135vw; }
  .side-note { display: none; }
  .moment { min-height: 82svh; padding-top: 8rem; border-radius: 2rem 2rem 0 0; }
  .moment h2, .closing h2 { font-size: clamp(3.2rem, 15vw, 5.5rem); }
  .moment-copy { margin-top: 3rem; }
  .closing { min-height: 80svh; }
  footer { gap: 2rem; }
}

@media (pointer: coarse) { .cursor-glow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .word > span, .reveal, .scroll-reveal { opacity: 1; transform: none; }
}