/* domain - Decommissioned Observatory / Dark-Mode Futurism */

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

:root{
  --deep-carbon:#0f0d0b;
  --warm-soot:#1a1714;
  --aged-parchment:#d4cdc0;
  --dust-gray:#6b6560;
  --tarnished-ochre:#b8956a;
  --patina-teal:#4a7c78;
  --faded-mauve:#8b6b7a;
  --ember-rust:#a85a3c;
}

html{scroll-behavior:smooth}

body{
  font-family:'Inter',sans-serif;
  background:var(--deep-carbon);
  color:var(--aged-parchment);
  overflow-x:hidden;
  line-height:1.72;
  letter-spacing:0.005em;
}

/* Aurora Background (Plane 0) */
.aurora-field{
  position:fixed;
  inset:0;
  z-index:0;
  opacity:0.35;
  background:
    conic-gradient(from 0deg at 25% 30%,#2a4a4e,transparent 40%),
    conic-gradient(from 180deg at 70% 60%,#3e2a42,transparent 40%),
    conic-gradient(from 90deg at 50% 80%,rgba(184,149,106,0.3),transparent 40%);
  animation:auroraSpin 180s linear infinite;
  will-change:transform;
}

@keyframes auroraSpin{
  to{transform:rotate(360deg)}
}

/* Grid Dot Overlay */
.grid-dots{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(180,170,155,0.06) 1px,transparent 1px);
  background-size:24px 24px;
}

/* Scroll Progress Indicator */
.scroll-progress{
  position:fixed;
  top:0;
  right:0;
  width:2px;
  height:100%;
  z-index:100;
  background:transparent;
  pointer-events:none;
}
.scroll-progress::after{
  content:'';
  display:block;
  width:100%;
  background:var(--tarnished-ochre);
  transform-origin:top;
  transform:scaleY(0);
  transition:transform 50ms linear;
  height:100%;
}

/* Content Column (Plane 1) */
.content-column{
  max-width:720px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}

/* Floating Isometric Icons (Plane 2) */
.floating-iso{
  position:fixed;
  z-index:3;
  pointer-events:none;
  opacity:0.12;
}
.floating-iso svg{
  width:100%;
  height:100%;
}
.iso-1{
  width:120px;top:15%;right:10%;
  animation:isoDrift1 60s ease-in-out infinite;
  transform:rotateX(55deg) rotateZ(45deg);
}
.iso-2{
  width:80px;top:45%;left:5%;
  animation:isoDrift2 45s ease-in-out infinite;
  opacity:0.08;
}
.iso-3{
  width:100px;top:70%;right:8%;
  animation:isoDrift3 50s ease-in-out infinite;
  opacity:0.15;
}

@keyframes isoDrift1{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-30px) rotate(3deg)}
}
@keyframes isoDrift2{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(20px) translateY(-20px)}
}
@keyframes isoDrift3{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-25px) rotate(-2deg)}
}

/* Station Sections */
.station{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:4rem 0;
}
.station + .station{
  margin-top:clamp(6rem,12vh,10rem);
}

/* Hero Station */
.hero-station{
  min-height:100vh;
  align-items:center;
  text-align:center;
}

.hero-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(4rem,10vw,8rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--aged-parchment);
}

.hero-signal{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--dust-gray);
  margin-top:24px;
}

.blink-cursor{
  display:inline-block;
  width:8px;
  height:1em;
  background:var(--dust-gray);
  margin-left:4px;
  vertical-align:text-bottom;
  animation:blink 800ms step-end infinite;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* Station Header */
.station-header{
  display:flex;
  align-items:flex-start;
  gap:24px;
  margin-bottom:24px;
}

.iso-icon{
  flex:0 0 80px;
  width:80px;
  height:80px;
}

.station-text{
  flex:1;
}

.station-id{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--dust-gray);
  margin-bottom:8px;
}

.station-heading{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--aged-parchment);
}

.station-body{
  font-family:'Inter',sans-serif;
  font-size:clamp(1rem,1.15vw,1.15rem);
  font-weight:400;
  line-height:1.72;
  max-width:65ch;
  color:var(--aged-parchment);
}

/* Skeleton Loading */
.skeleton-wrap{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  padding:4rem 0;
  z-index:5;
  transition:opacity 0.3s ease;
}
.station.revealed .skeleton-wrap{
  opacity:0;
  pointer-events:none;
}

.skeleton-bar{
  height:20px;
  background:var(--warm-soot);
  border-radius:0;
  position:relative;
  overflow:hidden;
}
.skeleton-bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(168,90,60,0.08),transparent);
  animation:skeletonShimmer 1.8s ease-in-out infinite;
}
.skeleton-hero{height:60px;width:60%}
.sk-short{width:30%}
.sk-long{width:80%}
.sk-mid{width:55%}

@keyframes skeletonShimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Station Content */
.station-content{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 0.6s ease-out,transform 0.6s ease-out;
  position:relative;
  z-index:6;
}
.station.revealed .station-content{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media(max-width:768px){
  .floating-iso{display:none}
  .station-header{
    flex-direction:column;
    gap:16px;
  }
  .iso-icon{
    flex:0 0 60px;
    width:60px;
    height:60px;
  }
}