/* A little space to play. The physics layer owns the shapes' transforms. */
.site-header--cosmic {
  background: #050609;
  color: #f6f4eb;
}
.site-header--cosmic nav a {
  color: #c8c9cf;
  background: transparent;
  border-radius: 0;
}
.site-header--cosmic nav a:nth-child(2) { clip-path: none; padding: 0 21px; }
.site-header--cosmic nav a:hover { color: #fff; background: #ffffff0a; }
.site-header--cosmic .header-cta {
  background: #f4f1e8;
  border-color: #f4f1e8;
  color: #171816;
  border-radius: 30px;
}
.site-header--cosmic .header-cta:hover { background: #ffe481; border-color: #ffe481; }
.site-header--cosmic .menu-toggle span { background: #f4f1e8; }
#main > .stack-card.hero--cosmic {
  background: #050609;
  color: #f6f4eb;
  box-shadow: none;
}
.hero--cosmic .hero-scene {
  min-height: 590px;
  max-height: none;
  background: radial-gradient(ellipse at 50% 65%, #18233030 0%, transparent 63%);
}
.cosmic-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cosmic-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 1.5px);
  height: var(--size, 1.5px);
  opacity: var(--alpha, .6);
  background: #e6edff;
  border-radius: 50%;
}
.cosmic-star:nth-child(17n) { box-shadow: 0 0 7px 1px #b4ceff40; }
.cosmic-star:nth-child(31n)::before,
.cosmic-star:nth-child(31n)::after {
  content: "";
  position: absolute;
  background: #e6edff90;
  width: 1px;
  height: 7px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.cosmic-star:nth-child(31n)::after { transform: translate(-50%, -50%) rotate(90deg); }
.hero--cosmic .project-universe { z-index: 1; overflow: hidden; }
.hero--cosmic .project-shape {
  appearance: none;
  display: block;
  position: absolute;
  left: var(--orbit-x, 0);
  top: var(--orbit-y, 0);
  right: auto;
  bottom: auto;
  width: var(--size);
  height: var(--size);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--shape-color);
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.hero--cosmic .shape-drift { display: block; animation: none !important; pointer-events: none; }
.hero--cosmic .shape-drift svg { display: block; fill: currentColor; filter: drop-shadow(0 5px 18px #0003); }
.hero--cosmic .project-shape:active,
.hero--cosmic .project-shape.is-dragging { cursor: grabbing; }
.hero--cosmic .project-shape:focus-visible { outline: 2px dashed #fff9; outline-offset: 9px; }
/* Compound silhouettes keep the same eight independent physics bodies. */
.hero--cosmic .project-star { --size: clamp(78px, 11.8vw, 165px); --shape-color: #ff303d; }
.hero--cosmic .project-square { --size: clamp(54px, 7vw, 96px); --shape-color: #ff741c; }
.hero--cosmic .project-semi { --size: clamp(94px, 12.5vw, 174px); --shape-color: #00a36c; }
.hero--cosmic .project-zigzag { --size: clamp(48px, 6.5vw, 90px); --shape-color: #ffd000; }
.hero--cosmic .project-pentagon { --size: clamp(54px, 7.2vw, 100px); --shape-color: #ff872c; }
.hero--cosmic .project-arch { --size: clamp(100px, 13.5vw, 190px); --shape-color: #2d8aff; }
.hero--cosmic .project-flower { --size: clamp(90px, 11.8vw, 164px); --shape-color: #ffa2b8; }
.hero--cosmic .project-triangle { --size: clamp(52px, 6.6vw, 92px); --shape-color: #ff741c; }
.hero--cosmic .hero-copy { padding: 0 20px 45px; position: relative; }
.hero--cosmic .hero-kicker {
  color: #a2a5b0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.6px;
  margin-bottom: 22px;
  text-shadow: 0 1px 12px #050609;
}
.hero--cosmic h1 {
  color: #ffe58a;
  font-size: clamp(76px, 13vw, 208px);
  line-height: 1.06;
  letter-spacing: -.065em;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 3px 35px #050609aa;
}
.hero--cosmic .hero-description {
  color: #eeedf1;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.55px;
  margin-top: 18px;
  text-shadow: 0 1px 15px #050609;
}
.hero--cosmic .hero-actions { margin-top: 32px; gap: 16px; }
.hero--cosmic .hero-cta {
  background: #f4f1e8;
  border: 1px solid #f4f1e8;
  color: #111511;
  font-size: 13px;
  font-weight: 600;
  min-height: 50px;
  gap: 24px;
}
.hero--cosmic .hero-cta:hover { background: #ffe58a; border-color: #ffe58a; }
.hero--cosmic .hero-build-note { color: #9a9ba5; font-size: 10px; letter-spacing: .25px; }
.hero--cosmic .cosmic-footer {
  bottom: 23px;
  left: 3%;
  right: 3%;
  gap: 14px;
  color: #a8aab4;
  font-size: 11px;
  letter-spacing: 0;
}
.cosmic-hint { display: flex; gap: 9px; align-items: center; }
.cosmic-hint > span { font-size: 20px; color: #d9c581; }
.hero--cosmic .cosmic-scroll {
  width: 38px;
  height: 38px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #e8e5dc;
  font-size: 20px;
}
.cosmic-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cosmic-controls button {
  appearance: none;
  background: transparent;
  color: #a8aab4;
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 9px 11px;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}
.cosmic-controls button:hover { background: #ffffff0a; color: #fff; }
.cosmic-controls button:focus-visible,
.hero--cosmic a:focus-visible,
.site-header--cosmic a:focus-visible { outline: 2px solid #ffe58a; outline-offset: 4px; }
.cosmic-controls button[aria-pressed="true"] { color: #ffe58a; border-color: #ffe58a45; }
.cosmic-controls button > span { font-size: 16px; margin-right: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  .hero--cosmic .hero-scene { min-height: 590px; }
  .hero--cosmic .hero-copy { padding-bottom: 35px; }
  .hero--cosmic .hero-kicker { font-size: 9px; letter-spacing: 2px; }
  .hero--cosmic .cosmic-footer { font-size: 9px; }
  .hero--cosmic .cosmic-scroll { display: none; }
}
@media (max-width: 580px) {
  .site-header--cosmic nav.is-open { background: #111319; border: 1px solid #ffffff20; }
  .site-header--cosmic nav a { color: #eee; }
  .hero--cosmic .hero-scene { min-height: 590px; }
  .hero--cosmic h1 { font-size: clamp(55px, 15.5vw, 90px); letter-spacing: -.065em; }
  .hero--cosmic .hero-copy { padding: 0 12px 28px; }
  .hero--cosmic .hero-kicker { font-size: 8px; letter-spacing: 1.6px; margin-bottom: 20px; }
  .hero--cosmic .hero-description { font-size: 20px; margin-top: 15px; }
  .hero--cosmic .hero-actions { margin-top: 25px; }
  .hero--cosmic .hero-cta { min-height: 46px; font-size: 12px; padding: 0 21px; }
  .hero--cosmic .hero-build-note { font-size: 9px; }
  .hero--cosmic .cosmic-footer { bottom: 12px; left: 5%; right: 5%; flex-wrap: wrap; justify-content: center; gap: 0; }
  .cosmic-hint { width: 100%; justify-content: center; font-size: 10px; }
  .cosmic-controls { margin-left: 0; font-size: 10px; }
}

/* The prologue, title, and desktop share one starfield and one camera. */
.workspace-stage > .cosmic-stars { z-index: 0; background: #050609; opacity: calc(1 - var(--backdrop-progress, 0)); }
.workspace-stage .website-window > .hero--cosmic {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f6f4eb;
  overflow: visible;
}
.workspace-stage .hero--cosmic .hero-scene {
  height: 100%;
  min-height: 0;
  max-height: none;
  display: grid;
  place-items: center;
  background: transparent;
}
.workspace-stage .hero-copy {
  opacity: var(--hero-opacity, 0);
  transform: translateY(var(--title-rise, 0px)) perspective(900px) translateZ(var(--title-depth, 620px)) rotateX(var(--title-tilt, 0deg));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.workspace-stage .hero--cosmic .project-universe {
  opacity: var(--shapes-opacity, 0);
  transform: perspective(900px) translateZ(var(--shapes-depth, 0px));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.workspace-stage .cosmic-footer { opacity: calc(var(--hero-opacity, 0) * var(--hero-controls-opacity, 1)); }
.workspace-stage .hero-actions { opacity: var(--hero-controls-opacity, 1); }
.workspace-stage .screen-stars { background: #050609; opacity: var(--hero-screen-opacity, 1); }
.cosmic-prologue {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: #ffe58a;
  opacity: var(--crawl-opacity, 0);
  pointer-events: none;
  overflow: hidden;
  will-change: opacity;
}
.crawl-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 72svh;
  perspective-origin: 50% 50%;
  mask-image: linear-gradient(transparent, #000 18%, #000 90%, transparent);
}
.crawl-copy {
  position: absolute;
  top: 58%;
  left: 50%;
  width: min(80%, 780px);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -.02em;
  text-align: justify;
  text-wrap: pretty;
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(var(--crawl-camera-y, 0px)) rotateX(var(--crawl-tilt, 64deg)) translateY(calc(-1 * var(--crawl-progress, 0) * var(--crawl-travel, 1400px)));
  will-change: transform;
}
.crawl-copy p { margin: 0 0 1.25em; }
.crawl-copy p:first-child { text-align: center; }
.crawl-copy strong { font-weight: 800; letter-spacing: .025em; }
.workspace-journey.is-reduced .crawl-viewport { perspective: none; mask-image: none; }
.workspace-journey.is-reduced .crawl-copy {
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 660px);
  font-size: clamp(20px, 2.4vw, 32px);
  text-align: left;
  line-height: 1.45;
  will-change: auto;
}
.workspace-journey.is-reduced .hero-copy,
.workspace-journey.is-reduced .project-universe { transform: none; }
@media (max-width: 580px) {
  .crawl-copy { width: 86%; font-size: clamp(23px, 6.2vw, 29px); line-height: 1.42; }
  .workspace-journey.is-reduced .crawl-copy { font-size: clamp(17px, 4.7vw, 22px); }
}
@media (max-height: 560px) {
  .workspace-journey.is-reduced .crawl-copy { font-size: clamp(15px, 3.3vh, 20px); width: min(90%, 780px); }
  .workspace-journey.is-reduced .crawl-copy p { margin-bottom: .65em; }
}
@media (prefers-reduced-motion: reduce) {
  .crawl-viewport { perspective: none; mask-image: none; }
  .crawl-copy { top: 50%; transform: translate(-50%, -50%); }
}

/* The computer has a silhouette while it is still out among the stars. */
.workspace-stage .laptop-frame { border-radius: 14px; }
.workspace-stage .laptop-base { opacity: var(--chrome-opacity, 1); }

/* The live website responds to its own window, not the outer browser width. */
.website-window .hero--cosmic h1 { font-size: clamp(28px, 13cqw, 208px); }
.website-window .hero--cosmic .hero-copy { width: 100%; padding: 0 12px clamp(20px, 3cqw, 45px); }
.website-window .hero--cosmic .hero-description { font-size: clamp(12px, 2.1cqw, 30px); margin-top: clamp(12px, 1.5cqw, 18px); letter-spacing: -.02em; }
.website-window .hero--cosmic .hero-actions { margin-top: clamp(18px, 2.7cqw, 32px); gap: clamp(10px, 1.4cqw, 16px); }
.website-window .hero--cosmic .hero-cta { min-height: clamp(36px, 4.2cqw, 50px); font-size: clamp(10px, 1.1cqw, 13px); padding: 0 clamp(12px, 2cqw, 26px); gap: clamp(8px, 2cqw, 24px); }
.website-window .hero--cosmic .hero-build-note { font-size: clamp(8px, .85cqw, 10px); max-width: 90%; }
.website-window .hero--cosmic .project-star { --size: clamp(44px, 11.8cqw, 165px); }
.website-window .hero--cosmic .project-square { --size: clamp(44px, 7cqw, 96px); }
.website-window .hero--cosmic .project-semi { --size: clamp(44px, 12.5cqw, 174px); }
.website-window .hero--cosmic .project-zigzag { --size: clamp(44px, 6.5cqw, 90px); }
.website-window .hero--cosmic .project-pentagon { --size: clamp(44px, 7.2cqw, 100px); }
.website-window .hero--cosmic .project-arch { --size: clamp(44px, 13.5cqw, 190px); }
.website-window .hero--cosmic .project-flower { --size: clamp(44px, 11.8cqw, 164px); }
.website-window .hero--cosmic .project-triangle { --size: clamp(44px, 6.6cqw, 92px); }
@container (max-width: 330px) {
  .website-window .hero--cosmic .hero-copy { padding-inline: 6px; }
  .website-window .hero--cosmic h1 { font-size: 13cqw; }
  .website-window .hero--cosmic .hero-cta { gap: 6px; padding-inline: 10px; }
  .website-window .hero--cosmic .hero-cta svg { width: 14px; }
  .website-window .hero--cosmic .hero-build-note { max-width: 160px; line-height: 1.5; }
  .website-window .hero--cosmic .cosmic-footer { font-size: 9px; }
}

/* A diffuse glow travels with the title. */
.hero--cosmic h1 {
  position:relative;
  isolation:isolate;
  text-shadow:0 .06em .32em #ffca541c;
}
.hero--cosmic h1::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:20%; right:20%; top:70%; height:.9em;
  background:radial-gradient(ellipse at 50% 35%, #ffd77b24 0%, #f5b74712 35%, transparent 72%);
  filter:blur(.22em);
  transform:scaleX(1.15);
}
.hero--cosmic .hero-description { position:relative; z-index:1; }

/* Tracking settles with the title's rise and depth movement. */
.website-window .hero--cosmic h1 { letter-spacing:var(--title-tracking, -.065em); }
.website-window .hero--cosmic .hero-description { letter-spacing:calc(var(--subtitle-tracking, 0em) - .55px); }

/* Reflected title light stays clipped to each shape's silhouette. */
.hero--cosmic .shape-drift { position:relative; }
.hero--cosmic .shape-drift svg.shape-light {
 position:absolute; inset:0; width:100%; height:100%;
 color:#ffe6a0; fill:currentColor; pointer-events:none;
 opacity:.34; mix-blend-mode:screen; filter:none;
 mask-image:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#000 0%,#0009 25%,transparent 70%);
}

.title-letter-slot { display:inline-block; }
.title-letter-slot > span { display:inline-block; transform-origin:50% 60%; }