/* Graph home — galaxy disc
   Faint constellation, logo veil */

@keyframes graphPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

body.graph-home {
  margin: 0;
  min-height: 100%;
  background: #030303;
  color: var(--text);
  overflow-x: hidden;
}

body.graph-home .site-nav {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0));
  border-bottom-color: transparent;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}

body.graph-home .site-nav.is-scrolled {
  background: rgba(5, 5, 5, 0.78);
}

.graph-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  overflow: clip;
  background: radial-gradient(1200px 800px at 50% 45%, #0b0f0b 0%, #060706 45%, #030303 100%);
}

.graph-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.graph-stage canvas.is-grabbing {
  cursor: grabbing;
}

.graph-stage canvas.is-hot {
  cursor: pointer;
}

.graph-grain,
.graph-vignette,
.graph-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.graph-grain {
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.graph-vignette {
  background: radial-gradient(ellipse 70% 60% at 50% 48%, transparent 20%, rgba(3, 3, 3, 0.28) 70%, rgba(3, 3, 3, 0.72) 100%);
}

.graph-glow {
  background:
    radial-gradient(ellipse 40% 32% at 50% 46%, rgba(57, 255, 20, 0.03), transparent 62%),
    radial-gradient(ellipse 28% 22% at 72% 28%, rgba(57, 255, 20, 0.02), transparent 70%);
  opacity: 0.7;
  transition: opacity 1.2s var(--ease);
}

body.is-intro .graph-glow {
  opacity: 0.4;
}

.graph-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.graph-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 14px);
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 245, 247, 0.78);
  font-family: "Space Grotesk", var(--serif), sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  will-change: transform;
  transition: color 0.2s var(--ease), opacity 0.45s var(--ease), text-shadow 0.2s var(--ease);
}

.graph-label.is-hub {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 247, 0.94);
}

.graph-label.is-live {
  opacity: 1;
}

.graph-label.is-dim {
  opacity: 0.18;
}

.graph-label.is-hot,
.graph-label:hover,
.graph-label.is-on {
  color: #39ff14;
  text-shadow: 0 0 24px rgba(57, 255, 20, 0.55);
}

.graph-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 3;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 0.85s var(--ease);
}

.graph-badge.is-on {
  opacity: 1;
  pointer-events: auto;
}

.graph-badge img {
  height: clamp(56px, 8vw, 96px);
  width: auto;
  max-width: none;
  display: block;
  filter: drop-shadow(0 0 18px rgba(57, 255, 20, 0.18));
}

.graph-tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -140%);
  padding: 6px 12px;
  background: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(57, 255, 20, 0.45);
  border-radius: 6px;
  font-family: "Space Grotesk", var(--sans), system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #ffffff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 0 18px rgba(57, 255, 20, 0.25);
}

.graph-tip.is-on {
  opacity: 1;
}

.graph-hud {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 16px;
  pointer-events: none;
}

.graph-hint {
  margin: 0;
  font-family: "Space Grotesk", var(--sans), system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9ca3af;
  opacity: 0;
  animation: none;
}

.graph-hint.is-on {
  opacity: 1;
  animation: graphPulse 5s ease-in-out infinite;
}

.graph-controls {
  position: absolute;
  z-index: 5;
  left: 20px;
  bottom: 16px;
  display: flex;
  gap: 0.5rem;
}

.graph-ctrl {
  appearance: none;
  border: 1px solid rgba(57, 255, 20, 0.28);
  background: rgba(10, 14, 10, 0.62);
  color: rgba(201, 209, 201, 0.78);
  font-family: "Space Grotesk", var(--sans), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.graph-ctrl:hover {
  color: #39ff14;
  border-color: #39ff14;
  background: rgba(57, 255, 20, 0.06);
}

.graph-skip.is-gone {
  display: none;
}

.graph-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  z-index: 5;
  font-family: "Space Grotesk", var(--sans), system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(156, 163, 175, 0.9);
  text-decoration: none;
  text-align: center;
}

.graph-scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  margin: 0.45rem auto 0;
  background: linear-gradient(to bottom, #39ff14, transparent);
}

body.graph-home.is-graph-modal .graph-scroll {
  opacity: 0;
  pointer-events: none;
}

/* Full-screen intro under the site header. The veil is the black plate.
   At the handoff it opens from the center while the last grains, on the
   canvas above it, are still leaving. The home underneath arrives with them. */
@property --veil-open {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --veil-feather {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.logo-intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

body.graph-home.is-home-enter .logo-intro {
  pointer-events: none;
}

.logo-intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.logo-intro-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #030303;
  pointer-events: none;
  --veil-open: 0%;
  --veil-feather: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--veil-open), #000 calc(var(--veil-open) + var(--veil-feather)));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--veil-open), #000 calc(var(--veil-open) + var(--veil-feather)));
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 1;
}

body.graph-home.is-home-enter .logo-intro-veil {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.graph-home.is-home-enter.is-iris .logo-intro-veil {
  --veil-open: 155%;
  --veil-feather: 42%;
  opacity: 0;
  transition:
    --veil-open 1.55s cubic-bezier(0.7, 0, 0.22, 1),
    --veil-feather 1.15s ease,
    opacity 0.55s ease 1s;
}

.logo-intro canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Keep the support line and the CTAs inside the first screen.
   The headline min-height in site.css otherwise grows the hero
   past the viewport and the bottom sits below the fold.
   The middle row still absorbs leftover height so the phrase
   sits on the bottom of that row, same as amazing.lat, instead
   of floating in the vertical center at taller viewports. */
body.graph-home .ed-hero {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  padding-bottom: 5.5rem;
  box-sizing: border-box;
}
body.graph-home .ed-hero-inner {
  min-height: 0;
  height: 100%;
  gap: clamp(1.25rem, 3vh, 3rem);
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.graph-home .ed-hero-headline {
  min-height: 0;
  align-self: stretch;
  align-items: flex-end;
}
body.graph-home .ed-hero-bottom {
  position: relative;
  z-index: 4;
}

/* Home waits dark and low, then settles as the veil opens.
   brightness(1) is only the fade. is-video-flat drops it afterwards:
   a filter left on the box makes Chrome stop painting the video until scroll. */
body.graph-home .ed-hero .video-bg {
  transform: none;
  filter: none;
}

body.graph-home.is-home-enter:not(.is-video-flat) .ed-hero .video-bg {
  transform: scale(1);
  filter: brightness(1) saturate(1);
  transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1), filter 1.55s ease;
}

body.graph-home.is-video-flat .ed-hero .video-bg {
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

body.graph-home .ed-hero-top,
body.graph-home .ed-hero-headline,
body.graph-home .ed-hero-bottom,
body.graph-home .ed-hero-controls {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

body.graph-home .ed-hero-scroll {
  opacity: 1;
}

body.graph-home .ed-hero-top {
  transition: opacity 0.75s ease 0.48s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.42s;
}

body.graph-home .ed-hero-headline {
  transform-origin: left bottom;
  transition:
    opacity 0.8s ease 0.82s,
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.74s;
}

body.graph-home .ed-hero-bottom,
body.graph-home .ed-hero-controls {
  transition: opacity 0.8s ease 0.95s, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.88s;
}

body.graph-home .ed-hero-scroll {
  transition: opacity 0.8s ease 0.95s;
}

body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero .video-bg {
  transform: scale(1.07);
  filter: brightness(0.55) saturate(0.8);
}

body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-top {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
}

body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-headline {
  opacity: 0;
  transform: translate3d(0, 2.6rem, 0) scale(0.98);
}

body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-bottom,
body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-controls {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
}

body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-scroll {
  opacity: 0;
}

body.graph-home .ed-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 38% at 50% 50%, rgba(57, 255, 20, 0.28), transparent 70%);
  opacity: 0;
}

body.graph-home.is-home-enter .ed-hero::before {
  animation: homeEnterBloom 1.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes homeEnterBloom {
  0% { opacity: 0.85; }
  40% { opacity: 0.28; }
  100% { opacity: 0; }
}

body.is-intro-snap .logo-intro,
body.is-intro-snap .logo-intro-veil,
body.is-intro-snap .ed-hero .video-bg,
body.is-intro-snap .ed-hero-top,
body.is-intro-snap .ed-hero-headline,
body.is-intro-snap .ed-hero-bottom,
body.is-intro-snap .ed-hero-controls,
body.is-intro-snap .ed-hero-scroll,
body.is-intro-snap .ed-hero::before {
  transition: none !important;
  animation: none !important;
}

@media (max-width: 720px) {
  body.graph-home.is-logo-intro:not(.is-home-enter) .ed-hero-headline {
    transform: translate3d(0, 1.6rem, 0) scale(0.985);
  }
}

/* Short phones: the 2.5rem floor wraps into the eyebrow. Keep a hero size that still clears it. */
@media (max-width: 860px) and (max-height: 720px) {
  body.graph-home .ed-hero-line {
    font-size: clamp(1.75rem, 8.2vw, 2.05rem);
  }
}

@media (max-width: 860px) and (max-height: 660px) {
  body.graph-home .ed-hero {
    padding-top: 5.75rem;
  }
  body.graph-home .ed-hero-top {
    margin-bottom: 0.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.graph-home .ed-hero-top,
  body.graph-home .ed-hero-headline,
  body.graph-home .ed-hero-bottom,
  body.graph-home .ed-hero-controls,
  body.graph-home .ed-hero-scroll,
  body.graph-home .ed-hero .video-bg,
  body.graph-home .logo-intro,
  body.graph-home .logo-intro-veil,
  body.graph-home .ed-hero::before {
    transition-delay: 0s !important;
    animation: none !important;
  }
  body.graph-home.is-home-enter .ed-hero .video-bg {
    filter: none !important;
    transform: none !important;
  }
}

html:has(body.is-logo-intro),
body.is-logo-intro {
  overflow: hidden;
}

.home-below {
  position: relative;
  z-index: 2;
  background: #030303;
}

body.graph-home .site-foot {
  background: #030303;
}

body.graph-home.is-graph-modal .graph-tip {
  opacity: 0;
}

.graph-modal {
  position: absolute;
  z-index: 6;
  top: 5.6rem;
  right: 1.25rem;
  width: min(400px, calc(100vw - 2.5rem));
  display: block;
  background: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}

.graph-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.graph-modal-card {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 8.2rem);
  overflow: auto;
  background: linear-gradient(160deg, rgba(10, 14, 10, 0.97), rgba(6, 8, 6, 0.97));
  border: 1px solid rgba(57, 255, 20, 0.5);
  box-shadow: 0 0 40px rgba(57, 255, 20, 0.18), inset 0 0 24px rgba(57, 255, 20, 0.05);
  padding: 28px 28px 24px;
  font-family: "Space Grotesk", var(--sans), system-ui, sans-serif;
  color: #ffffff;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.graph-modal-scan {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #39ff14, transparent);
  opacity: 0.8;
}

.graph-modal-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.graph-modal-esc {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  color: #9ca3af;
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  padding: 0;
  transition: color 0.15s var(--ease);
}

.graph-modal-esc:hover {
  color: #39ff14;
}

.graph-modal-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 10px 0 2px;
  text-shadow: 0 0 18px rgba(57, 255, 20, 0.35);
}

.graph-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}

.graph-modal-tag {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #050505;
  background: #39ff14;
  padding: 3px 8px;
  font-weight: 700;
}

.graph-modal-lvl {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #39ff14;
  border: 1px solid rgba(57, 255, 20, 0.5);
  padding: 3px 8px;
}

.graph-modal-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.7rem;
}

.graph-modal-title em {
  font-style: normal;
  color: #39ff14;
  font-weight: 300;
}

.graph-panel-lede {
  font-size: 14px;
  line-height: 1.65;
  color: #c9d1c9;
  margin: 0 0 1.1rem;
}

.graph-panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.2rem;
}

.graph-chip {
  appearance: none;
  border: 1px solid rgba(57, 255, 20, 0.28);
  background: rgba(57, 255, 20, 0.04);
  color: #c9d1c9;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}

.graph-chip:hover {
  color: #39ff14;
  border-color: #39ff14;
}

.graph-panel-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

@media (max-width: 767px) {
  .graph-labels,
  .graph-badge,
  .graph-hud,
  .graph-tip {
    display: none;
  }

  .graph-stage canvas,
  .graph-stage canvas.is-hot,
  .graph-stage canvas.is-grabbing {
    cursor: default;
  }
}

@media (max-width: 820px) {
  .graph-label {
    font-size: 0.7rem;
  }

  .graph-label.is-hub {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.9);
  }

  .graph-badge img {
    height: clamp(56px, 16vw, 84px);
  }

  .graph-hud {
    right: 14px;
    bottom: 5.4rem;
  }

  .graph-controls {
    left: auto;
    right: 14px;
    bottom: auto;
    top: 5.1rem;
  }

  .graph-modal {
    top: auto;
    right: 0.7rem;
    left: 0.7rem;
    bottom: 5.4rem;
    width: auto;
    transform: translateY(16px);
  }

  .graph-modal.is-open {
    transform: none;
  }

  .graph-modal-card {
    width: 100%;
    max-height: 42vh;
    padding: 20px 18px 16px;
  }

  body.graph-home.is-graph-modal .whatsapp-float {
    visibility: hidden;
  }

  .graph-modal-name {
    font-size: 1.35rem;
    margin: 8px 0 2px;
  }

  .graph-modal-title {
    font-size: 1rem;
  }

  .graph-panel-lede {
    font-size: 13px;
    margin: 0 0 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .graph-hint,
  .graph-tip,
  .graph-modal {
    animation: none;
    transition: none;
  }
}