:root {
  --abyss: #061320;
  --deep: #0a2438;
  --glacier: #15476a;
  --ice: #a9e4f5;
  --frost: #eaf6fc;
  --mist: #7fa6bd;
  --line: rgba(169, 228, 245, 0.22);
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STZhongsong", "SimSun", serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--abyss);
  color: var(--frost);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(169, 228, 245, 0.35);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 2px;
}

#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.skip {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--deep);
  color: var(--frost);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: top 0.25s ease;
}

.skip:focus-visible {
  top: 1rem;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(3.5rem, 8vh, 5.5rem) 1.5rem clamp(5rem, 9vh, 6.5rem);
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 71% 15%, rgba(234, 246, 252, 0.5) 0, rgba(234, 246, 252, 0.12) 3.2%, rgba(234, 246, 252, 0) 9%),
    radial-gradient(120% 90% at 78% 8%, rgba(111, 216, 232, 0.18), rgba(111, 216, 232, 0) 55%),
    radial-gradient(95% 75% at 10% 88%, rgba(122, 140, 220, 0.14), rgba(122, 140, 220, 0) 62%),
    linear-gradient(180deg, #030b15 0%, #06182a 46%, #0a2438 78%, #0b2a42 100%);
}

.scene__aurora {
  position: absolute;
  width: min(72vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
}

.scene__aurora--a {
  top: -24%;
  left: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(111, 216, 232, 0.75), rgba(111, 216, 232, 0) 66%);
  animation: drift-a 48s ease-in-out infinite alternate;
}

.scene__aurora--b {
  top: -10%;
  right: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(159, 168, 240, 0.6), rgba(159, 168, 240, 0) 66%);
  opacity: 0.24;
  animation: drift-b 62s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to { transform: translate3d(6%, 5%, 0) scale(1.08); }
}

@keyframes drift-b {
  to { transform: translate3d(-5%, 7%, 0) scale(1.12); }
}

.scene__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: screen;
  pointer-events: none;
}

.scene__photo.is-lost {
  display: none;
}

.scene__peaks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(210px, 40vh, 400px);
  display: block;
}

.scene__peaks .peak--far {
  fill: #0c2740;
  opacity: 0.85;
}

.scene__peaks .peak--near {
  fill: #071827;
}

.scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(6, 19, 32, 0), rgba(6, 19, 32, 0.9) 72%, #061320);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(760px, 100%);
  gap: clamp(1.4rem, 3.4vh, 2.2rem);
  text-align: center;
}

.emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.emblem__ring {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 88px);
  aspect-ratio: 1;
  border: 1px solid rgba(169, 228, 245, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(169, 228, 245, 0.14), rgba(169, 228, 245, 0) 72%);
  box-shadow:
    0 0 34px rgba(109, 216, 232, 0.18),
    inset 0 0 22px rgba(169, 228, 245, 0.08);
}

.emblem__ring svg {
  width: 46%;
  color: var(--ice);
  filter: drop-shadow(0 0 8px rgba(169, 228, 245, 0.55));
  animation: spin-slow 80s linear infinite;
}

.emblem__line {
  width: 1px;
  height: clamp(30px, 5vh, 52px);
  background: linear-gradient(180deg, rgba(169, 228, 245, 0.65), rgba(169, 228, 245, 0));
}

.hero__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 10vw, 5.6rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  background: linear-gradient(180deg, #ffffff 0%, #e2f5fd 36%, #a9e4f5 64%, #6db8d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__tagline {
  margin: 0;
  font-size: clamp(0.88rem, 2.4vw, 1.05rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: rgba(234, 246, 252, 0.82);
}

.hero__wave {
  display: inline-block;
  animation: wave 3.6s ease-in-out infinite;
  transform-origin: 70% 72%;
}

@keyframes wave {
  0%, 42%, 100% { transform: rotate(0deg); }
  50%, 58% { transform: rotate(16deg); }
  54% { transform: rotate(6deg); }
  62% { transform: rotate(10deg); }
  70% { transform: rotate(0deg); }
}

.hero__rule {
  width: min(620px, 100%);
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 228, 245, 0), rgba(169, 228, 245, 0.5), rgba(169, 228, 245, 0));
}

.menu {
  display: flex;
  width: min(660px, 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.menu__item {
  flex: 1;
  padding: 1rem 0.4rem;
  color: var(--mist);
  text-decoration: none;
  font-size: clamp(0.78rem, 2.4vw, 0.95rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
  transition: color 0.3s ease, background 0.3s ease;
}

.menu__item + .menu__item {
  border-left: 1px solid var(--line);
}

.menu__item:hover,
.menu__item:focus-visible {
  color: var(--frost);
  background: rgba(169, 228, 245, 0.08);
}

.hero__credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(1.6rem + env(safe-area-inset-bottom));
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: rgba(127, 166, 189, 0.85);
}

.js .emblem {
  animation: emblem-in 1.1s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero__name {
  animation: frost-in 1.3s 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero__tagline {
  animation: rise 0.9s 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero__rule {
  animation: grow-x 0.9s 1.05s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .menu {
  animation: rise 0.9s 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.js .hero__credit {
  animation: fade-in 0.9s 1.5s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes emblem-in {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: none; }
}

@keyframes grow-x {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}

@keyframes frost-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    filter: blur(16px) drop-shadow(0 0 0 rgba(169, 228, 245, 0));
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0) drop-shadow(0 0 30px rgba(169, 228, 245, 0.28));
  }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

/* ---------- reveal ---------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.9s ease;
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- intro ---------- */

.intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.2rem, 5.5vh, 3.6rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4rem, 12vh, 7rem) 1.5rem;
  text-align: center;
}

.medallion {
  position: relative;
  width: clamp(126px, 26vw, 176px);
  aspect-ratio: 1;
  margin: 0;
}

.medallion__glow {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 216, 232, 0.3), rgba(109, 216, 232, 0) 62%);
  animation: breathe 7s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

.medallion__rim,
.medallion__crop {
  position: absolute;
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

.medallion__rim {
  inset: 0;
  background: conic-gradient(from 210deg,
    rgba(234, 246, 252, 0.98),
    rgba(140, 210, 235, 0.6) 26%,
    rgba(196, 242, 253, 0.95) 52%,
    rgba(64, 124, 165, 0.65) 76%,
    rgba(234, 246, 252, 0.92));
}

.medallion__crop {
  inset: 2px;
  overflow: hidden;
  background: var(--deep);
  display: grid;
  place-items: center;
}

.medallion__crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.medallion__crop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 19, 32, 0) 55%, rgba(6, 19, 32, 0.42));
}

.medallion__sigil {
  display: none;
  position: absolute;
  inset: 0;
}

.medallion.no-media .medallion__crop img {
  display: none;
}

.medallion.no-media .medallion__sigil {
  display: grid;
  place-items: center;
}

.medallion__sigil svg {
  width: 62%;
  color: rgba(207, 238, 255, 0.88);
  filter: drop-shadow(0 0 12px rgba(169, 228, 245, 0.55));
  animation: spin-slow 70s linear infinite;
}

.intro__lead {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.6vw, 1.9rem);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-shadow: 0 0 28px rgba(169, 228, 245, 0.16);
}

.intro__sub {
  margin: 0.9rem 0 0;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--mist);
}

/* ---------- reel ---------- */

.reel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(3.6rem, 9vh, 6.5rem) clamp(1.1rem, 5vw, 3rem);
  background: radial-gradient(80% 62% at 50% 42%, rgba(21, 71, 106, 0.38), rgba(21, 71, 106, 0) 70%);
}

.reel__frame {
  position: relative;
  width: min(960px, 100%);
  padding: 2px;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  background: linear-gradient(155deg,
    rgba(234, 246, 252, 0.55),
    rgba(109, 184, 214, 0.16) 30%,
    rgba(169, 228, 245, 0.42) 55%,
    rgba(23, 70, 105, 0.5) 82%,
    rgba(234, 246, 252, 0.4));
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 44px rgba(111, 216, 232, 0.12));
}

.reel__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  background:
    radial-gradient(90% 80% at 50% 30%, rgba(21, 71, 106, 0.55), rgba(3, 9, 15, 0.9) 75%),
    #03090f;
  cursor: pointer;
}

.reel__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease 0.1s;
}

.reel__screen.is-ready video {
  opacity: 1;
}

.reel__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  padding: 1.5rem;
  text-align: center;
  color: #9cbfd4;
  font-size: clamp(0.82rem, 2.4vw, 0.95rem);
  letter-spacing: 0.08em;
  line-height: 2;
}

.reel__screen.is-ready .reel__fallback {
  display: none;
}

.reel__fallback svg {
  width: clamp(52px, 12vw, 76px);
  color: rgba(169, 228, 245, 0.5);
  animation: spin-slow 90s linear infinite;
}

.reel__fallback code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  color: var(--ice);
  background: rgba(169, 228, 245, 0.08);
  border: 1px solid rgba(169, 228, 245, 0.16);
  padding: 0.12em 0.5em;
  border-radius: 2px;
}

.reel__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(6, 19, 32, 0.55);
  color: var(--ice);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.reel__screen.is-ready .reel__sound {
  display: grid;
}

.reel__sound:hover {
  background: rgba(12, 39, 64, 0.8);
  border-color: rgba(169, 228, 245, 0.5);
}

.reel__sound svg {
  width: 19px;
  height: 19px;
}

.reel__sound .ic-on {
  display: none;
}

.reel__screen.is-sound .ic-on {
  display: block;
}

.reel__screen.is-sound .ic-off {
  display: none;
}

.reel__pauseicon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -17px 0 0 9px;
  border-left: 28px solid rgba(234, 246, 252, 0.88);
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  filter: drop-shadow(0 0 18px rgba(169, 228, 245, 0.7));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.reel__screen.is-paused .reel__pauseicon {
  opacity: 1;
}

/* ---------- quote ---------- */

.quote {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(4.5rem, 13vh, 9rem) clamp(1.1rem, 5vw, 3rem);
  background: radial-gradient(70% 55% at 50% 55%, rgba(21, 71, 106, 0.28), rgba(21, 71, 106, 0) 72%);
}

.quote__flurry {
  position: absolute;
  top: 45%;
  left: 50%;
  width: clamp(300px, 56vw, 620px);
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--ice);
  opacity: 0.04;
  pointer-events: none;
  animation: spin-slow 200s linear infinite;
}

.quote__frame {
  position: relative;
  width: min(880px, 100%);
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.4rem, 6vw, 4.5rem);
  border: 1px solid var(--line);
  background: linear-gradient(180deg,
    rgba(234, 246, 252, 0.045),
    rgba(234, 246, 252, 0.012) 58%,
    rgba(234, 246, 252, 0.032));
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.6),
    inset 0 0 70px rgba(169, 228, 245, 0.05);
  text-align: center;
}

.qc {
  position: absolute;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(169, 228, 245, 0.55);
}

.qc--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.qc--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.qc--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.qc--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.quote__text {
  margin: 0;
}

.quote__text p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.7vw, 3.05rem);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
  text-shadow: 0 0 32px rgba(169, 228, 245, 0.18);
}

.quote__text cite {
  display: block;
  margin-top: clamp(2rem, 5vh, 3rem);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--mist);
}

/* ---------- about ---------- */

.about {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72vh;
  min-height: 72svh;
  padding: clamp(4rem, 12vh, 8rem) 1.5rem calc(4rem + env(safe-area-inset-bottom));
  text-align: center;
  background: radial-gradient(60% 50% at 50% 100%, rgba(21, 71, 106, 0.3), rgba(21, 71, 106, 0) 75%);
}

.about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__flake {
  width: 42px;
  height: auto;
  color: rgba(169, 228, 245, 0.6);
  filter: drop-shadow(0 0 12px rgba(169, 228, 245, 0.35));
  animation: spin-slow 90s linear infinite;
}

.about__line {
  margin: 1.8rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-shadow: 0 0 28px rgba(169, 228, 245, 0.16);
}

.about__sign {
  margin: 1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  color: var(--mist);
}

/* ---------- responsive ---------- */

@media (max-width: 620px) {
  .hero {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .hero__name {
    letter-spacing: 0.3em;
    text-indent: 0.3em;
  }

  .hero__tagline {
    letter-spacing: 0.24em;
    text-indent: 0.24em;
  }

  .menu {
    flex-wrap: wrap;
  }

  .menu__item {
    flex: 1 1 50%;
    padding: 0.9rem 0.3rem;
  }

  .menu__item:nth-child(3) {
    border-left: 0;
  }

  .menu__item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .reel__frame {
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  }

  .reel__screen {
    aspect-ratio: 4 / 3;
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
  }

  .quote__frame {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .quote__text p {
    font-size: clamp(1.12rem, 5vw, 1.5rem);
    line-height: 2;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
  }

  .intro__lead {
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
  }

  .reel__fallback {
    padding: 1rem;
    font-size: 0.8rem;
  }

  .reel__fallback code {
    font-size: 0.85em;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scene__aurora--a,
  .scene__aurora--b,
  .medallion__glow,
  .medallion__sigil svg,
  .emblem__ring svg,
  .hero__wave,
  .quote__flurry,
  .reel__fallback svg,
  .about__flake {
    animation: none;
  }

  .js .emblem,
  .js .hero__name,
  .js .hero__tagline,
  .js .hero__rule,
  .js .menu,
  .js .hero__credit {
    animation: none;
    filter: none;
  }

  .hero__name {
    filter: drop-shadow(0 0 30px rgba(169, 228, 245, 0.28));
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}