/* Entry stylesheet only. Edit visual code in styles/*.css. */
@import url("./styles/base.css?v=62");
@import url("./styles/site-sections.css?v=63");
@import url("./styles/observatory.css?v=63");
@import url("./styles/motion.css?v=62");
@import url("./styles/final-polish.css?v=100");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Mobile landscape rotation notice */
@media (max-width: 768px) and (orientation: portrait) {
  body.is-observatory-visible .mobile-rotate-notice {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(8, 9, 13, 0.96);
    backdrop-filter: blur(12px);
    z-index: 99999;
    align-items: center; justify-content: center; text-align: center;
    padding: 2rem;
  }
  body.is-observatory-visible .mobile-rotate-content {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  }
  body.is-observatory-visible .mobile-rotate-content svg {
    stroke: #71eaff; animation: phone-rotate 2.5s infinite ease-in-out;
  }
  body.is-observatory-visible .mobile-rotate-content p {
    font-size: 1.05rem; line-height: 1.5; max-width: 280px; color: #d9edf5; margin: 0;
  }
  body.is-observatory-visible .mobile-rotate-content button {
    background: transparent; border: 1px solid rgba(113, 234, 255, 0.3); color: #71eaff;
    padding: 0.6rem 1.5rem; border-radius: 6px; font-size: 0.9rem; cursor: pointer;
  }
}

.mobile-rotate-notice {
  display: none !important;
}

@keyframes phone-rotate {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
  100% { transform: rotate(90deg); }
}

/* System Activity Log Window */
.console-panel { 
  display: flex !important; 
  flex-direction: column !important;
  width: 100% !important; 
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  box-sizing: border-box !important;
  background: rgba(5, 9, 15, 0.6); 
  border-radius: 16px; 
  border: 1px solid rgba(113, 234, 255, 0.08); 
  padding: 24px; 
  box-shadow: 0 20px 40px rgba(0,0,0,0.4); 
}
.console-panel-head { margin-bottom: 12px; width: 100%; }
.console-log-scroll {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 240px;
  overflow-y: scroll;
  margin: 18px 0 0 0;
  padding-right: 14px;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 234, 255, 0.25) transparent;
}
.console-log-scroll::-webkit-scrollbar { width: 5px; }
.console-log-scroll::-webkit-scrollbar-thumb { background: rgba(113, 234, 255, 0.25); border-radius: 4px; }
.console-log-list {
  width: 100% !important;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.console-log-list li {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  font-size: 0.86rem;
  color: rgba(245, 242, 233, 0.85);
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}
.console-log-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(113, 234, 255, 0.7);
  box-shadow: 0 0 10px rgba(113, 234, 255, 0.4);
}
.console-panel-head .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #92f5a2;
  box-shadow: 0 0 12px #92f5a2;
  animation: pulse-blink 2.5s infinite ease-in-out;
  margin-right: 10px;
}
@keyframes pulse-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

/* Combined Section & Video */
.combined-section .section-copy {
  margin-bottom: 32px;
}
.video-container {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto 40px;
  height: 380px;
  border-radius: 20px;
  background: rgba(4, 10, 18, 0.6);
  border: 1px solid rgba(113, 234, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
}
.system-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.04);
  transform-origin: center center;
  pointer-events: none;
}
.combined-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
}
.combined-card {
  min-height: 96px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28) !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.combined-card span { margin-bottom: 6px; }
.combined-card h3 { font-size: 1.05rem !important; margin: 0 0 6px 0 !important; line-height: 1.2 !important; }
.combined-card p:not(.card-extra) {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  color: rgba(245, 242, 233, 0.7);
  display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}
.combined-card p.card-extra { display: none !important; }
.combined-card:hover, .combined-card:focus-within { min-height: 220px !important; z-index: 10; }
.combined-card:hover p:not(.card-extra), .combined-card:focus-within p:not(.card-extra) { -webkit-line-clamp: unset; }
.combined-card:hover p.card-extra, .combined-card:focus-within p.card-extra { display: block !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid rgba(245, 242, 233, 0.1) !important; }
@media(max-width: 1024px) { .combined-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .combined-grid { grid-template-columns: 1fr; } .combined-card:hover, .combined-card:focus-within { min-height: 180px !important; } }

/* ============================================================
   Performance pass (2026-06) — freeze always-on full-screen repaints.
   Several fixed full-viewport layers (.deep-mesh, .atmosphere, the body
   drift/dust pseudo-elements, .hero-signal) animated background-position
   on every frame, which forces a continuous full-page repaint and is the
   main cause of scroll/idle jank. Frozen here as static texture: visually
   near-identical, large CPU/GPU win. This block loads after the @imports,
   so it overrides them. To restore the motion, delete this block.
   ============================================================ */
:root { --mesh-x: 0px; --mesh-y: 0px; }
.deep-mesh,
.atmosphere,
.hero-signal,
html.cosmos-live body::before,
html.cosmos-live body::after {
  animation: none !important;
}

/* ============================================================
   Borderless video blend (2026-06) — make the "How it works"
   demo video (mp_.mp4) dissolve into the page instead of sitting
   in a framed rectangle. We drop the frame (border / shadow /
   panel background / rounded corners) and feather every edge with
   a gradient mask: one horizontal + one vertical gradient,
   intersected via mask-composite, so left/right AND top/bottom
   (and the corners) fade to transparent and the dark page shows
   through seamlessly. Tweak the % stops to widen/narrow the fade.
   To restore the old framed look, delete this block.
   ============================================================ */
.combined-section .video-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* The mask now defines the edge, so the inner video needs no frame of its own. */
.combined-section .video-container video,
.combined-section .system-video {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- Video #2: the "Observed growth" colony clip (portrait) ----
   It already had no border/background, just a top/bottom fade plus two thin
   side rails and a glow. We extend the fade to left/right (intersected), drop
   the glow, and hide the rails so it dissolves into the page on all sides too. */
#growth .growth-visual .growth-video-shell {
  box-shadow: none !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
#growth .growth-visual .growth-video-shell::before,
#growth .growth-visual .growth-video-shell::after {
  display: none !important;
}
#growth .growth-visual .growth-art {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---- The scrolling banner picture (system-stack) — just a little blend ----
   It pans vertically as you scroll and already feathers top/bottom. We add a
   gentle left/right fade so its sides ease into the page instead of cutting off.
   Keep this subtle (small % = narrow fade) since it's a full-width band. */
.image-band .wide-system-media {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 2.5%, #000 7%, #000 93%, rgba(0,0,0,.55) 97.5%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 2.5%, #000 7%, #000 93%, rgba(0,0,0,.55) 97.5%, transparent 100%);
          mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ---- First-page pulse cards: the bottom line of the expanded text was
   getting clipped by the card-extra's max-height on hover. Give it more room
   so the last row shows in full. ---- */
.pulse-strip .pulse-item:hover .card-extra,
.pulse-strip .pulse-item:focus-visible .card-extra,
.pulse-strip .pulse-item:focus-within .card-extra,
.pulse-strip .pulse-item.is-card-open .card-extra {
  max-height: 16rem !important;
}