:root {
  --orange: #ef7f1a;
  --stage-max: 1680px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* All block SVGs share the same viewBox — one size fits all */
  --block: 26%;
  /* Logo & glow optical center (mockup is above geometric middle) */
  --core-y: 40%;
  /* Glow nudge vs logo: negative = up, positive = down */
  --glow-shift-y: -1.6%;
}

@font-face {
  font-family: "MicraDi";
  src: url("../assets/fonts/MicraDi.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arial";
  src: url("../assets/fonts/Arial.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arial";
  src: url("../assets/fonts/Arial-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.stage {
  position: relative;
  width: min(100vw, var(--stage-max), calc(100dvh * 1.78));
  aspect-ratio: 16 / 9;
  max-height: 100dvh;
  overflow: hidden;
  background: #000;
  /* inline-size only — size containment locks height and breaks mobile scroll */
  container-type: inline-size;
}

/* ===== Core ===== */
.core {
  --core-w: 36%;
  position: absolute;
  left: 50%;
  top: var(--core-y);
  translate: -50% -50%;
  width: var(--core-w);
  aspect-ratio: 1;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: visible;
  animation: fade-in 0.9s var(--ease) both;
}

.stage__glow {
  grid-area: 1 / 1;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  /* Full stage width, keep 16:9 — no stretch */
  width: 100cqw;
  height: auto;
  max-width: none;
  aspect-ratio: 16 / 9;
  translate: -50% calc(-50% + var(--glow-shift-y));
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: contrast(1.18) brightness(1.06) saturate(1.08);
}

.core__logo {
  grid-area: 1 / 1;
  width: 72%;
/*  width: 92%;*/
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.core__logo.is-ready {
  opacity: 1;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Blocks (normalized monolithic SVGs) ===== */
.node {
  --delay: 0.25s;
  --hit-left: 0%;
  --hit-top: 0%;
  --hit-width: 100%;
  --hit-height: 100%;
  position: absolute;
  width: var(--block);
  z-index: 5;
  animation: fade-up 0.65s var(--ease) var(--delay) backwards;
  transition: opacity 0.5s ease;
  /* Hit-testing only via .node__hit (frame), not pointer lines */
  pointer-events: none;
}

.node__block {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: filter 0.35s ease;
  pointer-events: none;
}

.node__hit {
  position: absolute;
  left: var(--hit-left);
  top: var(--hit-top);
  width: var(--hit-width);
  height: var(--hit-height);
  border-radius: 7%;
  pointer-events: auto;
}

/* Connecting lines / dots inside inline SVG */
.block-pointer {
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.node--tl {
  --delay: 0.25s;
  left: 5%;
  top: 12%;
}

.node--tr {
  --delay: 0.35s;
  right: 5%;
  top: 12%;
}

.node--bl {
  --delay: 0.45s;
  left: 5%;
  top: 51%;
}

.node--br {
  --delay: 0.55s;
  right: 5%;
  top: 51%;
}

.node--bc {
  --delay: 0.65s;
  left: 50%;
  bottom: 1%;
  top: auto;
  translate: -50% 0;
}

/* Subtle hover — only on devices with real hover */
@media (hover: hover) and (pointer: fine) {
  .stage:has(.node:hover) .node:not(:hover),
  .stage:has(.node:focus-visible) .node:not(:focus-visible) {
    opacity: 0.65;
  }

  .node:hover .node__block,
  .node:focus-visible .node__block {
    filter:
      brightness(1.1)
      drop-shadow(0 0 6px rgba(239, 127, 26, 0.35))
      drop-shadow(0 0 14px rgba(239, 127, 26, 0.2));
  }

  .node:hover .block-pointer,
  .node:focus-visible .block-pointer {
    filter: brightness(1.25);
  }
}

.node:focus-visible {
  outline: none;
}

.node:focus-visible .node__block {
  outline: 2px solid rgba(239, 127, 26, 0.65);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .core,
  .node {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .node,
  .node__block,
  .block-pointer {
    transition: none;
  }
}

@media (max-width: 720px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    display: block;
  }

  .stage {
    width: 100%;
    max-height: none;
    aspect-ratio: auto;
    min-height: 100dvh;
    padding: 1.2rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    overflow: visible;
    container-type: normal;
  }

  .stage__glow {
    /* Compact ring around the logo — not full page height */
    width: 300%;
    height: auto;
    aspect-ratio: 16 / 9;
    inset: auto;
    left: 50%;
    top: 50%;
    translate: -50% calc(-50% + var(--glow-shift-y));
    object-fit: contain;
    opacity: 0.95;
  }

  .core {
    --core-w: min(70vw, 280px);
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    width: var(--core-w);
    order: 3;
    margin: 0.5rem 0;
  }

  .node {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    translate: none !important;
    width: 100% !important;
    max-width: 420px;
  }

  .node--tl { order: 1; }
  .node--tr { order: 2; }
  .node--bl { order: 4; }
  .node--br { order: 5; }
  .node--bc { order: 6; }

  /* Hide pointer lines on mobile; viewBox switches to card via JS */
  .block-pointer {
    display: none;
  }
}