/* SkyElk — teaser. Dark-committed by design. */

:root {
  --bg:        #06080C;
  --bg-lift:   #0A0E14;
  --gold:      #C8A44E;
  --gold-soft: #E0C888;
  --frost:     #4A9EAD;
  --ink:       #E8E4DD;
  --ink-dim:   #7E7871;
  --ink-faint: #4C4842;

  --serif: "Cormorant Garamond", "Iowan Old Style", "New York", Georgia, serif;
  --mono:  "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

body {
  cursor: default;
  animation: bodyIn 1200ms var(--ease) both;
}
@keyframes bodyIn { from { opacity: 0 } to { opacity: 1 } }

/* ---------- field canvas ---------- */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  animation: fieldIn 3600ms var(--ease) 600ms forwards;
}
@keyframes fieldIn { to { opacity: 1 } }

/* radial vignette + a low warm floor so the field never feels flat */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(200,164,78,0.055), transparent 62%),
    radial-gradient(130% 110% at 50% 50%, transparent 34%, rgba(6,8,12,0.58) 78%, rgba(6,8,12,0.90) 100%);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grainDrift 6s steps(6) infinite;
  will-change: transform;
}
@keyframes grainDrift {
  0%   { transform: translate(0, 0) }
  20%  { transform: translate(-6px, 4px) }
  40%  { transform: translate(4px, -8px) }
  60%  { transform: translate(-8px, -4px) }
  80%  { transform: translate(6px, 6px) }
  100% { transform: translate(0, 0) }
}

/* pointer halo */
.halo {
  position: fixed;
  top: 0; left: 0;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,78,0.10), rgba(200,164,78,0.03) 42%, transparent 70%);
  opacity: 0;
  transition: opacity 700ms var(--ease);
  will-change: transform;
}
.halo.is-live { opacity: 1; }

/* ---------- stage ---------- */

.stage {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px);
  text-align: center;
}

/* ---------- mark ---------- */

.mark {
  position: relative;
  width: clamp(148px, 21vmin, 232px);
  aspect-ratio: 1;
  margin-bottom: clamp(22px, 3.4vmin, 40px);
}
/* warm glow sits behind the mark, centred on it, so the mark itself carries no shadow */
.mark::before {
  content: "";
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,78,0.16), rgba(200,164,78,0.04) 40%, transparent 64%);
  opacity: 0;
  animation: zhIn 2200ms var(--ease) 900ms forwards, glowPulse 9s ease-in-out 3100ms infinite alternate;
  pointer-events: none;
}
@keyframes glowPulse { from { opacity: 0.7 } to { opacity: 1 } }

.mark-img {
  position: absolute;
  inset: 17%;
  width: 66%;
  height: 66%;
  display: block;
  overflow: visible;
  user-select: none;
}
/* Living star. The mark never rotates and carries no shadow (brand rule);
   instead each ray has its own life: it grows out of the centre in sequence,
   breathes on its own clock, and leans a little toward the pointer (field.js). */
/* viewBox origin sits at the star's centre, so every scale() pivots there without transform-origin */
.mark-img .ray,
.mark-img .ray-lean,
.mark-img .ray-tw {
  transform-origin: 0 0;
}
.mark-img .ray {
  opacity: 0;
  transform: scale(0.12);
  animation: rayIn 1600ms var(--ease) calc(700ms + var(--i) * 120ms) forwards;
}
@keyframes rayIn { to { opacity: 1; transform: scale(1) } }
.mark-img .ray-lean { will-change: transform; }
.mark-img .ray-tw {
  animation: twinkle var(--dur, 9s) ease-in-out var(--ph, 0s) infinite alternate;
}
@keyframes twinkle {
  from { transform: scale(0.985); opacity: 0.88 }
  to   { transform: scale(1.03);  opacity: 1 }
}

.mark-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mark-ring .ring {
  fill: none;
  stroke: rgba(200,164,78,0.30);
  stroke-width: 0.5;
  transform-origin: 100px 100px;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: ringDraw 2600ms var(--ease-io) 400ms forwards;
}
.mark-ring .ring-b {
  stroke: rgba(232,228,221,0.10);
  stroke-dasharray: 4 9;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: ringFade 1800ms var(--ease) 1500ms forwards, ringSpin 64s linear infinite;
}
@keyframes ringDraw { to { stroke-dashoffset: 0 } }
@keyframes ringFade { to { opacity: 1 } }
@keyframes ringSpin { to { transform: rotate(360deg) } }

.ring-orbit {
  transform-origin: 100px 100px;
  opacity: 0;
  animation: ringFade 1400ms var(--ease) 2400ms forwards, ringSpin 26s linear infinite;
}
.orbit-dot {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 5px rgba(200,164,78,0.85));
}

/* ---------- wordmark ---------- */

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 10.5vmin, 118px);
  line-height: 1;
  letter-spacing: 0.30em;
  color: var(--ink);
  display: flex;
  justify-content: center;
}
.wordmark .ch:last-child { letter-spacing: 0 } /* drop trailing tracking so the flex box centres on the glyphs */

.wordmark .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) scale(0.97);
  filter: blur(10px);
  animation: chIn 1500ms var(--ease) forwards;
}
.wordmark .ch:nth-child(1) { animation-delay: 1150ms }
.wordmark .ch:nth-child(2) { animation-delay: 1240ms }
.wordmark .ch:nth-child(3) { animation-delay: 1330ms }
.wordmark .ch:nth-child(4) { animation-delay: 1420ms }
.wordmark .ch:nth-child(5) { animation-delay: 1510ms }
.wordmark .ch:nth-child(6) { animation-delay: 1600ms }
@keyframes chIn {
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) }
}

/* ---------- 天鹿 ---------- */

.zh {
  margin-top: clamp(12px, 2vmin, 20px);
  display: flex;
  gap: 0.9em;
  font-family: var(--serif);
  font-size: clamp(12px, 1.5vmin, 15px);
  letter-spacing: 0;
  color: var(--ink-dim);
}
.zh span {
  opacity: 0;
  animation: zhIn 1600ms var(--ease) forwards;
}
.zh span:nth-child(1) { animation-delay: 2000ms }
.zh span:nth-child(2) { animation-delay: 2120ms }
@keyframes zhIn { to { opacity: 1 } }

/* ---------- hairline ---------- */

.rule {
  margin: clamp(22px, 4vmin, 42px) 0;
  width: min(340px, 52vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,78,0.42), transparent);
  transform: scaleX(0);
  animation: ruleIn 1800ms var(--ease) 2200ms forwards;
}
@keyframes ruleIn { to { transform: scaleX(1) } }

/* ---------- rotator ---------- */

.rotator {
  position: relative;
  width: min(620px, 84vw);
  height: 4.2em;
  opacity: 0;
  animation: zhIn 1600ms var(--ease) 2600ms forwards;
}
.rotator .line {
  position: absolute;
  inset: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 2.15vmin, 21px);
  line-height: 1.62;
  letter-spacing: 0.012em;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(9px);
  filter: blur(6px);
  transition:
    opacity 1400ms var(--ease),
    transform 1400ms var(--ease),
    filter 1400ms var(--ease);
  pointer-events: none;
}
.rotator .line.is-on {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- corners ---------- */

.corners {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.corner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: zhIn 2000ms var(--ease) 3000ms forwards;
}
.corner.tl { top: clamp(20px, 3.4vw, 40px); left:  clamp(20px, 3.4vw, 40px) }
.corner.tr { top: clamp(20px, 3.4vw, 40px); right: clamp(20px, 3.4vw, 40px) }
.corner.bl { bottom: clamp(20px, 3.4vw, 40px); left:  clamp(20px, 3.4vw, 40px) }
.corner.br { bottom: clamp(20px, 3.4vw, 40px); right: clamp(20px, 3.4vw, 40px) }

.corner a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 320ms var(--ease), border-color 320ms var(--ease);
}
.corner a:hover { color: var(--gold-soft); border-bottom-color: rgba(200,164,78,0.42) }
.corner a:focus-visible { outline: 1px solid rgba(200,164,78,0.6); outline-offset: 4px; border-radius: 2px }

.dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(200,164,78,0.5);
  animation: pulse 3.4s var(--ease-io) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,164,78,0.45); opacity: 1 }
  70%  { box-shadow: 0 0 0 9px rgba(200,164,78,0);  opacity: 0.55 }
  100% { box-shadow: 0 0 0 0 rgba(200,164,78,0);    opacity: 1 }
}

/* ---------- narrow ---------- */

@media (max-width: 640px) {
  .corner.tl, .corner.tr { font-size: 9px }
  .corner.bl, .corner.br { font-size: 9px }
  .rotator { height: 7.5em }
  .wordmark { letter-spacing: 0.22em }
}

@media (max-height: 560px) {
  .mark { width: clamp(100px, 16vmin, 140px) }
  .rule { margin: 16px 0 }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 200ms !important;
  }
  .grain { animation: none }
  #field { opacity: 1 }
  .mark-img .ray { opacity: 1; transform: none }
  .mark-img .ray-tw { animation: none }
  .halo { display: none }
}