/* Ming's zodiac prologue: a shallow metal disc, followed by a measured
   camera handoff. Articulated creature motion lives in animals.css. */
body.intro-active { overflow: hidden; }
#zodiac-intro {
  --intro-navy: #071322;
  --intro-gold: #dfbd7d;
  --intro-cream: #f0ddb5;
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  padding: max(20px, env(safe-area-inset-top)) 5% max(25px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  --handoff-duration: 3200ms;
  color: var(--intro-cream);
  opacity: 1;
}
#zodiac-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 42%, #162c3a 0, #0b1c2c 34%, var(--intro-navy) 72%);
  opacity: 1;
  pointer-events: none;
}
#zodiac-intro::after {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid #c8a36814;
  pointer-events: none;
}
#zodiac-intro .intro-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 30px;
  position: relative;
  z-index: 2;
  color: var(--intro-gold);
  font-family: var(--serif, Georgia, serif);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: .22em;
}
#zodiac-intro .intro-top .intro-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#zodiac-intro .intro-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
#zodiac-intro .intro-top small {
  display: block;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 7px;
  letter-spacing: .21em;
  opacity: .65;
  margin-top: 5px;
}
#zodiac-intro #skip-intro,
#zodiac-intro #intro-motion {
  padding: 11px 2px 11px 14px;
  flex: none;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #b5b7a9;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 10px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s ease;
}
#zodiac-intro #intro-motion { padding-left: 2px; }
#zodiac-intro #skip-intro:hover,
#zodiac-intro #intro-motion:hover { color: var(--intro-cream); }
#zodiac-intro .intro-stage {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}
#zodiac-intro .intro-wheel-wrap {
  --intro-rest-x: 10deg;
  --intro-rest-y: -6deg;
  position: relative;
  flex: none;
  width: min(70svh, 600px, 90vw, calc(100svh - 300px));
  aspect-ratio: 1;
  transform-origin: 50% 50%;
  transform: perspective(1400px) translateY(8px) rotateX(20deg) rotateY(-11deg) rotateZ(-2deg);
  transform-style: preserve-3d;
}
#zodiac-intro .intro-wheel-wrap::before {
  content: '';
  position: absolute;
  inset: 7%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #000810b3 18%, #0009108f 44%, #010a1530 65%, transparent 75%);
  opacity: .75;
  transform: translateZ(-45px) translateY(39px) scale(.97, .86);
  filter: blur(10px);
}
#zodiac-intro .intro-wheel-wrap::after {
  content: '';
  position: absolute;
  inset: 3.9%;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(125deg, #a88a4f 0%, #796037 24%, #2b291f 43%, #b49555 73%, #3c3525 100%);
  border: 1px solid #a98c51;
  box-shadow: 0 2px 0 #c0a469, 0 4px 0 #51452d, 0 7px 0 #8b7040, 0 10px 0 #342e23, 0 12px 0 #152022, 0 23px 35px #000811b0;
  transform: translateZ(-15px) translateY(7px);
  opacity: 1;
}
#zodiac-intro .intro-wheel-wrap > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  transform: translateZ(1px);
  backface-visibility: hidden;
  filter: drop-shadow(0 3px 2px #000a1459);
}
#zodiac-intro .zodiac-cast-rim { pointer-events: none; }
#zodiac-intro .zodiac-name-ring { paint-order: stroke fill; }
#zodiac-intro .zodiac-year-ring { text-shadow: 0 1px 1px #000b1599; }
#zodiac-intro .intro-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  width: min(100%, 680px);
  padding: 0 12px;
}
#zodiac-intro .intro-copy .eyebrow {
  justify-content: center;
  color: #baa77f;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 8px;
  letter-spacing: .23em;
  margin: 0 0 10px;
}
#zodiac-intro .intro-copy h1 {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--intro-cream);
}
#zodiac-intro .intro-copy h1 em {
  color: var(--intro-gold);
  font-weight: 400;
}
#zodiac-intro .intro-copy p:not(.eyebrow) {
  margin: 10px auto 0;
  max-width: 460px;
  color: #a2afa9;
  font-size: 11px;
  line-height: 1.6;
}
#zodiac-intro .intro-enter {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 46px;
  min-width: 210px;
  margin: 16px 0 0;
  padding: 13px 24px;
  border: 1px solid #c8a365a8;
  border-radius: 2px;
  color: var(--intro-cream);
  background: linear-gradient(110deg, #a7864523, #b4975810);
  font-family: var(--sans, Arial, sans-serif);
  font-size: 11px;
  letter-spacing: .07em;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#zodiac-intro .intro-enter:hover {
  background: #bc9d5829;
  border-color: var(--intro-gold);
  box-shadow: 0 0 35px #d8b46c13;
}
#zodiac-intro .intro-enter span { font-size: 18px; color: var(--intro-gold); }
#zodiac-intro button:focus-visible,
#zodiac-intro a:focus-visible {
  outline: 2px solid var(--intro-cream);
  outline-offset: 5px;
}

/* Transform origins for SVG artwork are owned by the artwork. In particular,
   the yin-yang spins about the fixed 300,300 view-box centre. */
#zodiac-intro .zodiac-year-ring { transform-box: view-box; transform-origin: 300px 300px; }
#zodiac-intro .zodiac-yinyang { opacity: 1; }
#zodiac-intro .zodiac-outer-disc { opacity: 1; filter: blur(0); }
#zodiac-intro.intro-awake:not(.intro-zoom) .intro-wheel-wrap {
  animation: ming-wheel-settle 1.15s cubic-bezier(.2, .7, .2, 1) both;
}
#zodiac-intro.intro-awake .zodiac-year-ring { animation: ming-ring-drift 20s ease-in-out infinite; }
#zodiac-intro.intro-awake .zodiac-yinyang { animation: ming-yinyang-turn 42s linear infinite; }
#zodiac-intro.intro-awake .intro-wheel-wrap::before { animation: ming-wheel-breath 7s ease-in-out infinite; }
@keyframes ming-wheel-settle {
  from { transform: perspective(1400px) translateY(8px) rotateX(20deg) rotateY(-11deg) rotateZ(-2deg); }
  to { transform: perspective(1400px) translateY(0) rotateX(var(--intro-rest-x)) rotateY(var(--intro-rest-y)) rotateZ(-1deg); }
}
@keyframes ming-ring-drift {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@keyframes ming-yinyang-turn { to { transform: rotate(360deg); } }
@keyframes ming-wheel-breath {
  0%, 100% { opacity: .65; }
  50% { opacity: .8; }
}

/* The camera travels toward the inner disc while the outer metalwork dissolves.
   Only the last, small central disc meets the hero; no wheel is flung offscreen. */
#zodiac-intro.intro-zoom { pointer-events: none; }
#zodiac-intro.intro-zoom::before {
  animation: ming-backdrop-dissolve var(--handoff-duration) ease-in-out both;
}
#zodiac-intro.intro-zoom::after { opacity: 0; transition: opacity calc(var(--handoff-duration) * .28) ease; }
#zodiac-intro.intro-zoom .intro-wheel-wrap {
  z-index: 3;
  animation: ming-wheel-handoff var(--handoff-duration) cubic-bezier(.4, 0, .2, 1) both;
  will-change: transform;
}
#zodiac-intro.intro-zoom .intro-wheel-wrap::before,
#zodiac-intro.intro-zoom .intro-wheel-wrap::after {
  opacity: 0;
  animation: none;
  transition: opacity calc(var(--handoff-duration) * .42) ease calc(var(--handoff-duration) * .1);
}
#zodiac-intro.intro-zoom .zodiac-outer-disc {
  opacity: 0;
  filter: blur(2px);
  transition: opacity calc(var(--handoff-duration) * .52) ease calc(var(--handoff-duration) * .12), filter calc(var(--handoff-duration) * .55) ease calc(var(--handoff-duration) * .12);
}
#zodiac-intro.intro-zoom .zodiac-yinyang {
  opacity: 0;
  transition: opacity calc(var(--handoff-duration) * .32) ease calc(var(--handoff-duration) * .68);
}
#zodiac-intro.intro-zoom .intro-top,
#zodiac-intro.intro-zoom .intro-copy {
  animation: ming-copy-depart calc(var(--handoff-duration) * .26) ease-in-out both;
}
@keyframes ming-backdrop-dissolve {
  0%, 12% { opacity: 1; }
  52% { opacity: .72; }
  100% { opacity: 0; }
}
@keyframes ming-wheel-handoff {
  0% { transform: var(--handoff-start); }
  100% { transform: perspective(1400px) translate3d(var(--handoff-x, 0px), var(--handoff-y, 0px), 0) rotateX(0) rotateY(0) rotateZ(0) scale(var(--handoff-scale, 1.65)); }
}
@keyframes ming-copy-depart {
  to { opacity: 0; transform: translateY(-5px); }
}

@media (max-width: 600px) {
  #zodiac-intro { padding-left: 7%; padding-right: 7%; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  #zodiac-intro .intro-top { font-size: 22px; }
  #zodiac-intro .intro-stage { gap: 23px; }
  #zodiac-intro .intro-wheel-wrap { --intro-rest-x: 8deg; --intro-rest-y: -5deg; width: min(70svh, 600px, 90vw, calc(100svh - 280px)); }
  #zodiac-intro .intro-wheel-wrap::after { box-shadow: 0 2px 0 #bda268, 0 4px 0 #574a2f, 0 6px 0 #89713f, 0 8px 0 #1b2422, 0 17px 24px #000811a0; transform: translateZ(-11px) translateY(5px); }
  #zodiac-intro .intro-copy { padding: 0; max-width: 340px; }
  #zodiac-intro .intro-copy h1 { font-size: 26px; line-height: 1.16; }
  #zodiac-intro .intro-copy .eyebrow { font-size: 7px; letter-spacing: .2em; margin-bottom: 12px; }
  #zodiac-intro .intro-copy p:not(.eyebrow) { font-size: 10px; max-width: 280px; margin-top: 11px; }
  #zodiac-intro .intro-enter { margin-top: 18px; min-width: 220px; min-height: 48px; }
}
@media (max-height: 650px) {
  #zodiac-intro { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #zodiac-intro .intro-stage { gap: 10px; }
  #zodiac-intro .intro-wheel-wrap { width: min(70svh, 600px, 90vw, calc(100svh - 215px)); }
  #zodiac-intro .intro-copy h1 { font-size: 26px; }
  #zodiac-intro .intro-copy .eyebrow { margin-bottom: 5px; font-size: 7px; }
  #zodiac-intro .intro-copy p:not(.eyebrow) { margin-top: 5px; font-size: 9px; }
  #zodiac-intro .intro-enter { min-height: 42px; margin-top: 10px; padding-block: 9px; }
}
@media (max-width: 480px) {
  .topbar .about-button { display: none; }
  #zodiac-intro .intro-controls { gap: 10px; }
  #zodiac-intro #skip-intro { padding-left: 2px; }
}

/* Finish entrance states instead of freezing an animation's first frame. */
#zodiac-intro.intro-still,
#zodiac-intro.intro-still *,
#zodiac-intro.intro-still *::before,
#zodiac-intro.intro-still *::after,
body.motion-paused #zodiac-intro,
body.motion-paused #zodiac-intro *,
body.motion-paused #zodiac-intro *::before,
body.motion-paused #zodiac-intro *::after {
  animation: none !important;
  transition: none !important;
}
#zodiac-intro.intro-still .intro-wheel-wrap,
body.motion-paused #zodiac-intro .intro-wheel-wrap {
  transform: perspective(1400px) rotateX(var(--intro-rest-x)) rotateY(var(--intro-rest-y)) rotateZ(-1deg);
}
#zodiac-intro.intro-still.intro-zoom,
body.motion-paused #zodiac-intro.intro-zoom { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #zodiac-intro,
  #zodiac-intro *,
  #zodiac-intro *::before,
  #zodiac-intro *::after {
    animation: none !important;
    transition: none !important;
  }
  #zodiac-intro.intro-zoom { opacity: 0; visibility: hidden; }
}