/* The simpler public pages (/market, /himan-world, the 404) in the Landfall theme. Loads after base.css and theme.css.
   Centred "stage" pages: a still starfield (.sky), a big gold ring drawn in SVG, and a little copy. No images, no boxes. */

.stage { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 120px var(--gutter) 88px; overflow: clip; }
.stage .copy { position: relative; z-index: 2; max-width: 760px; display: flex; flex-direction: column; align-items: center; }
.stage .display { max-width: 11em; }
.stage .lead { max-width: 40ch; margin-inline: auto; }
.stage .shadowed, .stage .display, .stage .lead, .stage .eyebrow { text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .85), 0 0 42px rgba(0, 0, 0, .6); }
.stage .chip { margin-bottom: 26px; }
.stage .eyebrow { margin-bottom: 20px; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 14px 30px; margin-top: 38px; flex-wrap: wrap; }
.btn.big { padding: 20px 38px; font-size: 18px; min-height: 56px; }
.stage .note { margin: 34px auto 0; text-align: center; }

/* ── the ring: a gold Orbit Ring seen at a slant, with two little lights circling it ── */
.ring { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(1240px, 150vw); height: auto; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-9deg); opacity: .95; }
.ring .band { fill: none; stroke: url(#ringGold); stroke-width: 3; filter: drop-shadow(0 0 10px rgba(233, 185, 73, .55)); }
.ring .band.soft { stroke-width: 14; opacity: .10; filter: blur(6px); }
.ring .band.thin { stroke-width: 1; opacity: .55; }
.ring .light { fill: var(--gold-hi); offset-path: path("M 40 200 A 560 120 0 1 1 1160 200 A 560 120 0 1 1 40 200"); offset-rotate: 0deg;
  animation: orbit 22s linear infinite; filter: drop-shadow(0 0 6px rgba(244, 203, 106, .95)); }
.ring .light.two { animation-duration: 34s; animation-delay: -11s; opacity: .7; }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ring-wrap { animation: sway 18s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.halo { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 185, 73, .13), rgba(233, 185, 73, 0)); }
@media (max-width: 860px), (max-aspect-ratio: 124/100) {
  .ring { width: 190vw; }
  .stage { padding: 104px 20px 64px; }
  .btn.big { padding: 18px 30px; }
}

/* ── HiMan World: a neon skyline under the ring, its light slowly warming and cooling like a mood ── */
.stage.city { padding-bottom: 38vh; }
.stage.city .ring { top: 30%; }
.skyline { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 36vh; min-height: 220px; display: flex; align-items: flex-end; gap: 3px; padding: 0 2px; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 22%); mask-image: linear-gradient(transparent 0, #000 22%); }
.skyline i { position: relative; flex: 1 1 0; min-width: 14px; background: linear-gradient(#0b0c14, #05060a); border-top: 1px solid rgba(120, 220, 255, .55);
  box-shadow: 0 -10px 26px -8px rgba(90, 200, 255, .22); }
.skyline i::before { content: ""; position: absolute; inset: 8px 3px 0; background-image: radial-gradient(circle, rgba(255, 214, 140, .85) 0 1px, transparent 1.6px); background-size: 8px 10px;
  opacity: .5; animation: flicker 7s steps(1, end) infinite; animation-delay: var(--d, 0s); }
.skyline i:nth-child(3n) { border-top-color: rgba(233, 185, 73, .6); box-shadow: 0 -10px 26px -8px rgba(233, 185, 73, .2); }
.skyline i:nth-child(5n) { border-top-color: rgba(220, 130, 255, .5); box-shadow: 0 -10px 26px -8px rgba(200, 120, 255, .2); }
@keyframes flicker { 0%, 100% { opacity: .5; } 38% { opacity: .22; } 52% { opacity: .62; } 77% { opacity: .35; } }
.mood-glow { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 56vh; pointer-events: none; }
.mood-glow.warm { background: radial-gradient(80% 100% at 50% 100%, rgba(233, 185, 73, .26), rgba(233, 185, 73, 0) 70%); animation: warm 26s ease-in-out infinite alternate; }
.mood-glow.cool { background: radial-gradient(80% 100% at 50% 100%, rgba(80, 190, 255, .24), rgba(80, 190, 255, 0) 70%); animation: warm 26s ease-in-out infinite alternate-reverse; }
@keyframes warm { from { opacity: .15; } to { opacity: 1; } }

.teasers { position: relative; z-index: 2; padding: 20px var(--gutter) 110px; }
.teasers ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 56px; }
.teasers li { border-top: 1px solid var(--line); padding-top: 22px; }
.teasers .k { display: block; margin-bottom: 14px; font: 300 12px/1 Jura; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.teasers .h3 { margin: 0 0 10px; }
.teasers p { margin: 0; color: var(--muted); font-size: 16px; max-width: 32ch; }
.finale { position: relative; z-index: 2; padding: 10px var(--gutter) 120px; text-align: center; }
.finale .cta-row { margin-top: 0; }
@media (max-width: 860px) {
  .teasers ul { grid-template-columns: 1fr; gap: 34px; }
  .teasers { padding-bottom: 80px; }
  .stage.city { padding-bottom: 30vh; }
  .skyline { height: 28vh; min-height: 170px; }
}

/* ── 404: the ring drifts and a little light slips off it ── */
.drift { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(1000px, 140vw); transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none; opacity: .5; }
.drift .light.away { fill: var(--gold-hi); offset-path: none; animation: slip 9s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(244, 203, 106, .95)); }
@keyframes slip { 0%, 12% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(210px, -230px); opacity: .9; } 100% { transform: translate(300px, -330px); opacity: 0; } }
.nf-num { margin: 0 0 6px; font: 300 clamp(18px, 2vw, 22px)/1 Jura; letter-spacing: .5em; color: var(--gold); padding-left: .5em; }

@media (prefers-reduced-motion: reduce) {
  .ring .light, .ring-wrap, .mood-glow, .skyline i::before, .drift .light.away { animation: none; }
  .mood-glow.warm { opacity: .6; } .mood-glow.cool { opacity: .4; }
}

/* base.css's `header.top { position: relative; z-index: 2 }` outranks theme.css's `.top` (fixed, z-index 6), which would leave the
   header in the flow and under the page content (the phone menu then shows behind the headline). Same specificity, loaded later. */
header.top { position: fixed; z-index: 6; }
@media (max-width: 860px), (max-aspect-ratio: 124/100) { .ring { opacity: .7; } }