/* Psychaic: white gallery ground, chrome and steel structure, sky for air, oxblood as a signature, midnight at night. */
:root {
  --ground: #FFFFFF;
  --soft: #F3F4F5;
  --ink: #141619;
  --muted: #4A4F55;
  --line: #D3D7DB;
  --steel: #A7ADB4;
  --accent: #5A0B16;
  --accent-ink: #FFFFFF;
  --sky: #9CCBEA;
  --display: 'Michroma', sans-serif;
  --text: 'Jost', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #23264A;
    --soft: #1C1F3D;
    --ink: #F4F6F8;
    --muted: #C3C9D2;
    --line: #3D4270;
    --steel: #8E96A3;
    --accent: #B8D2E6;
    --accent-ink: #141619;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.6 var(--text); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(720px, 100% - 32px); }

/* Header: fixed; see-through over the intro sky, solid once the page content starts */
.top { position: fixed; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.top.solid { background: var(--ground); border-bottom-color: var(--line); }
.top:not(.solid) { color: #141619; --steel: #8C939A; }
.top:not(.solid) nav a { color: #2A2E33; }
.top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
.logo { position: relative; display: inline-flex; align-items: center; padding: 10px 22px; text-decoration: none; transform-origin: center; will-change: transform; }
.logo span { position: relative; font: 15px var(--display); letter-spacing: 0.3em; margin-right: -0.3em; }
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit ellipse { fill: none; stroke: var(--steel); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.orbit circle { fill: #5A0B16; }
@media (prefers-color-scheme: dark) { .top.solid .orbit circle { fill: #C4253C; } }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav a { font: 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 12px 10px; color: var(--muted); }
nav a:hover { color: var(--ink); }

/* Shared */
.label { font: 500 12px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
h1, h2, h3 { font-family: var(--text); font-weight: 500; line-height: 1.12; margin: 0 0 18px; }
h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 400; }
h1 em { font-style: normal; color: var(--accent); }
h2 { font-size: clamp(32px, 4vw, 46px); }
h3 { font-size: 30px; }
.lede, .section-lede { font-size: 20px; color: var(--muted); max-width: 34em; }
.note { font: 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.button { display: inline-block; margin-top: 12px; padding: 16px 22px; background: var(--accent); color: var(--accent-ink); font: 500 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.button:hover { filter: brightness(1.15); }
.section { padding: 96px 0; border-top: 1px solid var(--line); }
.soft { background: var(--soft); }

/* Intro: a white room, a chrome planet, then sky, ring and ground arrive as you scroll.
   Without the intro-on class (reduced motion, no script) it is simply the finished scene. */
.intro { position: relative; height: 100svh; }
.intro-on .intro { height: 640svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #FFFFFF; --orb: min(40svh, 52vw); }
@media (max-width: 760px) { .stage { --orb: min(36svh, 34vw); } }
.sky { position: absolute; inset: 0; background: linear-gradient(#7FA7C9, #A9C8E0 45%, #D6E7F1 72%); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#5A0B16, #4A0812); }
.ground svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ground line { stroke: #2E050C; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.shadow { position: absolute; left: 50%; top: 4%; width: calc(var(--orb) * 1.1); height: calc(var(--orb) * 0.09); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#1E0307 30%, transparent 70%); opacity: .7; }
.planet { position: absolute; left: 50%; top: 44%; width: calc(var(--orb) * 2.8); transform: translate(-50%, -50%); overflow: visible; }
.ring { fill: none; stroke: #5A0B16; stroke-width: 5; stroke-linecap: round; }
.seams path { fill: none; stroke: #FFFFFF; stroke-width: 0.8; }
.hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; font: 11px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #6E747B; opacity: 0; }
.intro-on .hint { opacity: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section { scroll-margin-top: 80px; }

/* The four doorways that arrive in the held scene. Each one links to its page. */
.thing { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: #141619; }
.thing .art { display: block; width: 100%; transform-origin: 50% 100%; }
.thing svg { width: 100%; height: auto; overflow: visible; }
.thing::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4px; height: 10px; border-radius: 50%; background: radial-gradient(rgba(20, 2, 6, .65), transparent 70%); z-index: -1; }
.tag { font: 500 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; background: rgba(255, 255, 255, .82); padding: 6px 9px; white-space: nowrap; transition: background-color .2s, color .2s; }
.thing:hover .tag, .thing:focus-visible .tag { background: #5A0B16; color: #FFFFFF; }
/* Labels stay out of the picture until you point at an orb. On touch screens, where there is
   no pointing, they show as small plain text instead of boxes so visitors still know what's what. */
@media (hover: hover) {
  .tag { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s, background-color .2s, color .2s; }
  .thing:hover .tag, .thing:focus-visible .tag { opacity: 1; transform: none; }
  .thing-about .svg-tag { opacity: 0; transition: opacity .25s; }
  .thing-about:hover .svg-tag, .thing-about:focus-visible .svg-tag { opacity: 1; }
}
@media (hover: none) {
  .tag { background: none; color: rgba(255, 255, 255, .78); padding: 0; font-size: 10px; }
  .thing-about .svg-tag { fill: rgba(20, 22, 25, .6); }
}
.thing:focus-visible { outline: none; }
.thing:hover .art, .thing:focus-visible .art { filter: drop-shadow(0 0 10px rgba(156, 203, 234, .9)); }
.orb-link::after { display: none; }
.orb-shop { left: 9%; bottom: 7%; width: min(18svh, 21vw); }
.orb-transmissions { left: 31%; bottom: 17%; width: min(10svh, 13vw); }
.orb-work { right: 9%; bottom: 5%; width: min(21svh, 24vw); }
.orb-body { animation: bob 6s ease-in-out infinite; }
.orb-shadow { transform-box: fill-box; transform-origin: center; animation: breathe 6s ease-in-out infinite; }
.orb-transmissions .orb-body, .orb-transmissions .orb-shadow { animation-delay: -2s; }
.orb-work .orb-body, .orb-work .orb-shadow { animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
@keyframes breathe { 50% { transform: scale(.88); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .orb-body, .orb-shadow { animation: none; } }
.thing-about { cursor: pointer; }
.thing-about .halo { fill: none; stroke: #5A0B16; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.svg-tag { font: 500 13px var(--mono); letter-spacing: .22em; fill: #141619; }
.thing-about:hover .svg-tag, .thing-about:focus-visible .svg-tag { fill: #5A0B16; }
.thing-about:focus-visible circle:last-of-type { stroke: #5A0B16; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .thing-about .halo { animation: none; } }
.stage-foot { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; font: 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.portal-veil { position: fixed; z-index: 50; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none; transform: scale(0); transition: transform .65s cubic-bezier(.7, 0, .3, 1); }

/* Inner pages */
.page main { min-height: 70svh; }
.page-first { border-top: 0; padding-top: 150px; }
.page-about { --ground: #5A0B16; --soft: #5A0B16; --ink: #FFFFFF; --muted: #F1DADD; --line: rgba(255, 255, 255, .22); --steel: #D3A9B0; --accent: #9CCBEA; }
.page-about .top.solid .orbit circle, .page-about .orbit circle { fill: #FFFFFF; }
.page-about h2 { font-size: clamp(40px, 6vw, 72px); font-weight: 400; }
.page-about main p { font-size: 21px; }

/* Product */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 48px; }
.product img { width: 100%; border: 1px solid var(--line); }
.facts { margin: 24px 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.facts dd { margin: 0; }
.buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.price { font-size: 34px; font-weight: 500; }
.soon { display: inline-flex; align-items: center; gap: 10px; font: 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 12px 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #5A0B16; }
@media (prefers-color-scheme: dark) { .dot { background: #C4253C; } }

/* Work */
.work-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: 56px; align-items: center; }
.vessel { max-width: 320px; justify-self: center; }

/* Footer */
footer { border-top: 1px solid var(--line); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 32px 0 40px; flex-wrap: wrap; }
.foot p { margin: 0; font: 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.palette { display: flex; }
.palette i { width: 28px; height: 10px; border: 1px solid var(--line); }
.palette .chrome { background: linear-gradient(160deg, #F4F6F8, #B9BFC6 30%, #5D636A 55%, #E6E9EC 75%, #8C939A); }

/* Phones */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .top .wrap { padding: 10px 0; }
  .logo { padding: 8px 16px; }
  .logo span { font-size: 12px; }
  nav a { padding: 10px 6px; font-size: 11px; letter-spacing: .08em; }
  .product, .work-grid { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 64px 0; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}