:root {
  color-scheme: light;
  --ink: #142019;
  --muted: #66776c;
  --paper: #f8f5ec;
  --line: rgba(20, 32, 25, 0.1);
  --grid-dot: rgba(20, 32, 25, 0.22);
  --grid-line: rgba(20, 32, 25, 0.05);
  --toggle-bg: rgba(255, 255, 255, 0.72);
  --toggle-border: rgba(20, 32, 25, 0.16);
  --toggle-shadow: rgba(57, 75, 64, 0.16);
  --beam: rgba(235, 174, 72, 0.24);
  --sweep-wash: rgba(255, 244, 210, 0.46);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f8f2df;
  --muted: rgba(226, 232, 219, 0.72);
  --paper: #07100d;
  --grid-dot: rgba(226, 232, 219, 0.14);
  --grid-line: rgba(226, 232, 219, 0.035);
  --toggle-bg: rgba(11, 19, 16, 0.72);
  --toggle-border: rgba(226, 232, 219, 0.18);
  --toggle-shadow: rgba(0, 0, 0, 0.24);
  --beam: rgba(128, 194, 255, 0.22);
  --sweep-wash: rgba(90, 135, 180, 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  cursor: grab;
  background:
    radial-gradient(circle at 71% 44%, rgba(92, 161, 181, 0.2), transparent 34rem),
    radial-gradient(circle at 88% 76%, rgba(216, 171, 84, 0.16), transparent 28rem),
    linear-gradient(120deg, #fbf7ee 0%, #f2eee3 47%, #eef5ef 100%);
  transition: background 680ms ease;
}

.hero::before,
.hero::after {
  position: absolute;
  inset: -24%;
  z-index: -2;
  content: "";
  pointer-events: none;
  opacity: 0;
}

.hero::before {
  background:
    radial-gradient(circle at 13% 12%, var(--sweep-wash) 0 5rem, transparent 20rem),
    conic-gradient(from 218deg at 13% 12%, transparent 0 22deg, var(--beam) 33deg, transparent 48deg 360deg);
  filter: blur(2px);
  transform: translate3d(-12%, -10%, 0) rotate(-8deg) scale(0.76);
}

.hero::after {
  background: radial-gradient(circle at 72% 43%, transparent 0 18rem, rgba(255, 255, 255, 0.24) 22rem, transparent 34rem);
  mix-blend-mode: screen;
}

:root.is-shifting[data-shift="to-dark"] .hero::before {
  animation: night-sweep 1180ms cubic-bezier(0.2, 0.9, 0.26, 1) both;
}

:root.is-shifting[data-shift="to-light"] .hero::before {
  animation: day-sweep 1180ms cubic-bezier(0.2, 0.9, 0.26, 1) both;
}

:root.is-shifting .hero::after {
  animation: globe-glint 1180ms ease both;
}

html.is-dragging .hero {
  cursor: grabbing;
}

:root[data-theme="dark"] .hero {
  background:
    radial-gradient(circle at 70% 42%, rgba(83, 150, 170, 0.2), transparent 34rem),
    radial-gradient(circle at 86% 74%, rgba(218, 165, 78, 0.1), transparent 30rem),
    linear-gradient(122deg, #07100d 0%, #0d1a15 48%, #030504 100%);
}

#globe {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.paper {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(248, 245, 236, 0.94) 0%, rgba(248, 245, 236, 0.56) 31%, rgba(248, 245, 236, 0.02) 68%);
  transition: opacity 680ms ease, filter 680ms ease;
}

.paper::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle, var(--grid-dot) 0 1.15px, transparent 1.45px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-position: 2px 2px, 0 0, 0 0;
  background-size: 16px 16px, 64px 64px, 64px 64px;
  mask-image:
    radial-gradient(ellipse at 73% 44%, transparent 0 23rem, rgba(0, 0, 0, 0.18) 24rem, #000 26rem),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.95) 55%, rgba(0, 0, 0, 0.74) 100%);
  mask-composite: intersect;
}

:root[data-theme="dark"] .paper {
  opacity: 0.72;
  filter: invert(1) hue-rotate(165deg) saturate(0.42);
}

.celestial-transition {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.celestial-transition::before {
  position: absolute;
  top: clamp(70px, 13vh, 128px);
  left: -10vw;
  width: 78vw;
  height: clamp(150px, 26vh, 260px);
  content: "";
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 46%, rgba(255, 255, 255, 0.46), transparent 18%),
    linear-gradient(100deg, transparent 0%, rgba(255, 223, 147, 0.02) 16%, var(--beam) 46%, rgba(255, 255, 255, 0.2) 58%, transparent 82%);
  filter: blur(10px);
  opacity: 0;
  transform: translate3d(-20%, -18%, 0) rotate(-8deg) scale(0.8);
}

:root.is-shifting .celestial-transition::before {
  animation: light-trail 1180ms cubic-bezier(0.2, 0.92, 0.24, 1) both;
}

.sweep-sun,
.sweep-moon {
  position: absolute;
  top: clamp(45px, calc(3.2vw + 27px), 61px);
  left: clamp(45px, calc(3.8vw + 27px), 81px);
  display: block;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  will-change: transform, opacity, filter;
}

.sweep-sun {
  width: clamp(96px, 13vw, 172px);
  height: clamp(96px, 13vw, 172px);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.96) 0 7%, transparent 20%),
    radial-gradient(circle at 50% 50%, #ffe7a6 0 22%, #e6a747 42%, rgba(230, 167, 71, 0.26) 63%, transparent 72%);
  box-shadow:
    0 0 60px rgba(230, 167, 71, 0.42),
    0 0 150px rgba(230, 167, 71, 0.18);
  filter: blur(0.3px);
}

.sweep-sun::before {
  position: absolute;
  inset: -24%;
  content: "";
  border-radius: inherit;
  background: repeating-conic-gradient(from 8deg, rgba(230, 167, 71, 0.36) 0 5deg, transparent 5deg 18deg);
  mask-image: radial-gradient(circle, transparent 0 42%, #000 44%, transparent 66%);
}

.sweep-moon {
  width: clamp(84px, 11vw, 148px);
  height: clamp(84px, 11vw, 148px);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.96) 0 7%, transparent 13%),
    radial-gradient(circle at 70% 72%, rgba(132, 152, 166, 0.34) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 68%, rgba(132, 152, 166, 0.22) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 50%, #eff4f5 0 45%, #aebfc7 78%, #7c95a7 100%);
  box-shadow:
    inset -18px -10px 24px rgba(67, 83, 95, 0.3),
    0 0 72px rgba(130, 193, 255, 0.36),
    0 0 150px rgba(130, 193, 255, 0.16);
}

:root.is-shifting[data-shift="to-light"] .sweep-sun,
:root.is-shifting[data-shift="to-dark"] .sweep-moon {
  animation: celestial-pass 1180ms cubic-bezier(0.2, 0.92, 0.24, 1) both;
}

.mode-toggle {
  position: absolute;
  top: clamp(18px, 3.2vw, 34px);
  left: clamp(18px, 3.8vw, 54px);
  z-index: 4;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--toggle-border);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.78), transparent 34%),
    var(--toggle-bg);
  box-shadow:
    0 18px 42px var(--toggle-shadow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(18px);
  transition: transform 220ms ease, border-color 420ms ease, background 420ms ease;
}

.mode-toggle:hover {
  transform: translateY(-1px) scale(1.03);
}

.mode-toggle:focus-visible {
  outline: 2px solid #2f8d78;
  outline-offset: 4px;
}

.sun,
.moon {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
}

.sun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0a94d;
  box-shadow:
    0 0 0 8px rgba(224, 169, 77, 0.12),
    0 0 34px rgba(224, 169, 77, 0.5);
}

.sun::before {
  position: absolute;
  inset: -12px;
  content: "";
  border-radius: 50%;
  background:
    linear-gradient(#e0a94d, #e0a94d) 50% 0 / 2px 8px no-repeat,
    linear-gradient(#e0a94d, #e0a94d) 50% 100% / 2px 8px no-repeat,
    linear-gradient(90deg, #e0a94d, #e0a94d) 0 50% / 8px 2px no-repeat,
    linear-gradient(90deg, #e0a94d, #e0a94d) 100% 50% / 8px 2px no-repeat;
  opacity: 0.9;
}

.moon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8eef2;
  box-shadow:
    inset -8px -3px 0 #9ab0bd,
    0 0 32px rgba(154, 176, 189, 0.46);
  opacity: 0;
  transform: translateY(30px) rotate(-35deg) scale(0.72);
}

:root[data-theme="dark"] .sun {
  opacity: 0;
  transform: translateY(-30px) rotate(35deg) scale(0.72);
}

:root[data-theme="dark"] .moon {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

.copy {
  position: absolute;
  left: clamp(22px, 5vw, 76px);
  bottom: clamp(34px, 7vw, 92px);
  z-index: 2;
  width: min(620px, calc(100vw - 44px));
  transition: color 520ms ease;
}

h1 {
  max-width: 9.2ch;
  margin: 0;
  color: var(--ink);
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(4.6rem, 9.2vw, 10.1rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 0 14px 34px rgba(35, 48, 39, 0.12);
  text-wrap: balance;
}

:root[data-theme="dark"] h1 {
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
}

p {
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.7vw, 1.34rem);
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .hero {
    background:
      radial-gradient(circle at 50% 28%, rgba(92, 161, 181, 0.22), transparent 20rem),
      linear-gradient(180deg, #f8f5ec 0%, #f0f4ee 54%, #fbf7ee 100%);
  }

  .paper {
    background: linear-gradient(180deg, rgba(248, 245, 236, 0.05) 0%, rgba(248, 245, 236, 0.18) 42%, rgba(248, 245, 236, 0.94) 80%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, #000 52%, rgba(0, 0, 0, 0.9) 100%);
  }

  .paper::before {
    background:
      radial-gradient(circle, var(--grid-dot) 0 1.1px, transparent 1.42px),
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-position: 2px 2px, 0 0, 0 0;
    background-size: 16px 16px, 52px 52px, 52px 52px;
    mask-image:
      radial-gradient(ellipse at 50% 31%, transparent 0 15rem, rgba(0, 0, 0, 0.22) 15.8rem, #000 17rem),
      linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, #000 58%, rgba(0, 0, 0, 0.9) 100%);
  }

  .copy {
    bottom: 34px;
  }

  h1 {
    max-width: 8.8ch;
    font-size: clamp(4rem, 18vw, 6.4rem);
  }
}

@keyframes celestial-pass {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.14);
    filter: blur(3px);
  }

  18% {
    opacity: 0.94;
    filter: blur(0);
  }

  68% {
    opacity: 0.8;
    transform: translate(-50%, -50%) translate3d(42vw, 20vh, 0) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(65vw, 28vh, 0) scale(1.72);
    filter: blur(8px);
  }
}

@keyframes night-sweep {
  0% {
    opacity: 0;
    transform: translate3d(-16%, -12%, 0) rotate(-12deg) scale(0.72);
  }

  34% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(20%, 7%, 0) rotate(4deg) scale(1.18);
  }
}

@keyframes day-sweep {
  0% {
    opacity: 0;
    transform: translate3d(-12%, -10%, 0) rotate(-8deg) scale(0.76);
  }

  38% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate3d(24%, 8%, 0) rotate(5deg) scale(1.28);
  }
}

@keyframes globe-glint {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.92);
  }

  45% {
    opacity: 0.62;
    transform: scale(1.08);
  }
}

@keyframes light-trail {
  0% {
    opacity: 0;
    transform: translate3d(-24%, -18%, 0) rotate(-10deg) scale(0.78);
  }

  28% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(38%, 14%, 0) rotate(5deg) scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root.is-shifting[data-shift] .hero::before,
  :root.is-shifting .hero::after,
  :root.is-shifting .sweep-sun,
  :root.is-shifting .sweep-moon,
  :root.is-shifting .celestial-transition::before {
    animation-duration: 700ms;
  }
}