/* ============================================================
 * DAMAROS — Terrain deck. Layout for the flythrough landscape:
 * a fixed full-viewport canvas, per-station captions, and the stepped
 * navigation (arrows · dots · counter · progress). Tokens, fonts, the boot
 * loader, the brand bar, and caption typography come from journey.css.
 * ============================================================ */

html, body { height: 100%; }
body { overflow: hidden; }                 /* the journey is stepped, not scrolled */

/* no scroll/swipe/travel until the active section has fully revealed */
body.deck-nav-locked [data-hswipe],
body.deck-nav-locked .hswipe-nav { touch-action: none; pointer-events: none; }
body.deck-nav-locked .deck-nav { pointer-events: none; opacity: .55; }

/* the landscape canvas */
.deck { position: fixed; inset: 0; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }

/* ---------------- captions ---------------- */
/* One block per station; only the active one is shown. Positioning + type are
   inherited from journey.css (.cap / .cap--center / .cap--right / .cap-title …). */
.deck-caps { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.deck-caps .cap { opacity: 0; visibility: hidden; transition: none; content-visibility: hidden; }
.deck-caps .cap.cap--active { opacity: 1; visibility: visible; content-visibility: visible; }
.deck-caps .cap.cap--active a, .deck-caps .cap.cap--active button,
.deck-caps .cap.cap--active .kw, .deck-caps .cap.cap--active .chip,
.deck-caps .cap.cap--active .gstat,
.deck-caps .cap.cap--active .gap-col,
.deck-caps .cap.cap--active .es-spine-step,
.deck-caps .cap.cap--active .ps-half,
.deck-caps .cap.cap--active .ti-half,
.deck-caps .cap.cap--active .cap-box { pointer-events: auto; }
/* gentle stagger of the lines as a station resolves */
.deck-caps .cap-line { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.deck-caps .cap-line:nth-child(2) { transition-delay: .03s; }
.deck-caps .cap-line:nth-child(3) { transition-delay: .07s; }
.deck-caps .cap-line:nth-child(4) { transition-delay: .11s; }
.deck-caps .cap-line:nth-child(5) { transition-delay: .15s; }
.deck-caps .cap-line:nth-child(6) { transition-delay: .19s; }
/* legibility over bright WebGL landmarks */
.deck-caps .cap-ax, .deck-caps .cap-title, .deck-caps .cap-lead, .deck-caps .cap-support, .deck-caps .cap-body { text-shadow: 0 1px 16px rgba(5,7,11,.72), 0 0 5px rgba(5,7,11,.55); }
/* every panel is centered now — give them all a soft radial backdrop so copy stays legible over the topology */
.deck-caps .cap { isolation: isolate; }
.deck-caps .cap::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 162%; height: 192%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(5,7,11,.70), rgba(5,7,11,.34) 46%, rgba(5,7,11,0) 72%); }

/* ---------------- station navigation ---------------- */
.deck-nav { position: fixed; left: 50%; bottom: clamp(1.4rem, 4.5vh, 2.6rem); transform: translateX(-50%);
  z-index: 22; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.deck-nav > * { pointer-events: auto; }

.deck-arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(2.65rem, 6.5vw, 2.85rem); height: clamp(2.65rem, 6.5vw, 2.85rem);
  border-radius: 999px; border: 1px solid rgba(169,192,214,.28); background: rgba(12,17,24,.5);
  color: var(--steel); font-size: 1.2rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px);
  transition: color .125s var(--ease), border-color .125s var(--ease), background .125s var(--ease), transform .125s var(--ease); }
.deck-arrow:hover { color: var(--cold); border-color: var(--steel); transform: translateY(-1px); }
.deck-arrow:disabled { opacity: .3; cursor: default; transform: none; }

.deck-dots { display: flex; align-items: center; justify-content: center; gap: clamp(.45rem, 1vw, .8rem); }
/* labeled section cards — each carries a stone-blue diamond + its name so the four
   sections are visible at once and one click jumps straight there (no scrolling). */
.deck-dot { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: 0;
  border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; color: var(--dim);
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.deck-mark { display: block; width: clamp(11px, 1.15vw, 13px); height: clamp(11px, 1.15vw, 13px); flex: none;
  border: 1.5px solid rgba(169,192,214,.5); background: rgba(169,192,214,.07); transform: rotate(45deg);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.deck-label { font-family: var(--fb); font-size: clamp(.6rem, .82vw, .68rem); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: color .15s var(--ease); }
/* endpoints (home + closer) stay bare diamonds; the three content sections are text tabs */
.deck-dot--mark { padding: clamp(.32rem, .9vw, .42rem); }
.deck-dot--label { padding: clamp(.42rem, .9vw, .5rem) clamp(.7rem, 1.4vw, 1rem); border-color: rgba(169,192,214,.16);
  background: rgba(12,17,24,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.deck-dot--mark:hover .deck-mark { border-color: var(--steel); background: rgba(169,192,214,.32);
  box-shadow: 0 0 12px rgba(169,192,214,.55); transform: rotate(45deg) scale(1.16); }
.deck-dot:hover { color: var(--cold); }
.deck-dot--label:hover { border-color: rgba(169,192,214,.4); background: rgba(16,22,31,.6);
  box-shadow: 0 8px 26px rgba(5,7,11,.45); }
.deck-dot.active { color: var(--cold); }
.deck-dot--mark.active .deck-mark { background: var(--steel); border-color: var(--steel);
  box-shadow: 0 0 14px rgba(169,192,214,.78); transform: rotate(45deg) scale(1.18); }
.deck-dot--label.active { border-color: var(--steel); background: rgba(169,192,214,.12); color: var(--cold);
  box-shadow: 0 0 18px rgba(169,192,214,.28), inset 0 1px 0 rgba(232,236,240,.08); }

/* arrows: a directional sheen leans the way you will travel */
.deck-arrow { position: relative; overflow: hidden; }
.deck-arrow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity .15s var(--ease); pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--steel) 22%, transparent)); }
.deck-arrow[data-next]:hover::before { background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--steel) 26%, transparent)); opacity: 1; }
.deck-arrow[data-prev]:hover::before { background: linear-gradient(270deg, transparent 30%, color-mix(in srgb, var(--steel) 26%, transparent)); opacity: 1; }

/* a thin global progress line at the very bottom */
.deck-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 22; background: rgba(169,192,214,.1); }
.deck-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--deep), var(--steel)); transition: transform .3s var(--ease); }

/* one-time wayfinding hint, fades out on its own */
.deck-hint { position: fixed; left: 50%; bottom: clamp(4.2rem, 11vh, 6rem); transform: translateX(-50%);
  z-index: 22; font-family: var(--fb); font-size: .58rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap; pointer-events: none;
  animation: deckhint 1.2s var(--ease) 2.5s forwards; }
@keyframes deckhint { to { opacity: 0; } }

/* mobile home only — tiny Privacy link, bottom-left on diamond midline */
.deck-legal { display: none; }
@media (max-width: 820px) {
  .deck {
    --deck-nav-bottom: clamp(.7rem, 3vh, 1.4rem);
    --deck-mark-pad: clamp(.32rem, .9vw, .42rem);
    --deck-mark-size: clamp(9px, 2.4vw, 12px);
    --deck-mark-axis: calc(var(--deck-nav-bottom) + var(--deck-mark-pad) + var(--deck-mark-size) * 0.5);
    --deck-swipe-label-rise: calc(8px + 0.14rem + 0.28rem);
  }
  .deck-legal {
    display: block; position: fixed; left: var(--page-gutter);
    bottom: var(--deck-mark-axis); z-index: 22;
    transform: translateY(50%);
    font-family: var(--fb); font-size: .40rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
    line-height: 1; opacity: 0; visibility: hidden; pointer-events: none;
    transition: color .15s var(--ease), opacity .25s var(--ease), visibility .25s var(--ease);
  }
  body.deck-on-home:not(.intro-hold) .deck-legal {
    opacity: .5; visibility: visible; pointer-events: auto;
  }
  .deck-legal:hover { color: var(--steel); opacity: .82; }
}

/* mobile wayfinding — bottom-right */
.deck-swipe { display: none; }
.deck-swipe__label {
  font-family: var(--fb); font-size: .56rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cold); opacity: .7; white-space: nowrap; line-height: 1;
}
.deck-swipe__arrow {
  display: block; width: 1px; height: 8px; margin: 0 auto;
  background: linear-gradient(to top, transparent, var(--steel));
  opacity: .74; position: relative;
}
.deck-swipe__arrow::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-top: 1px solid var(--steel); border-left: 1px solid var(--steel);
  transform: rotate(45deg); transform-origin: center;
}
.deck-swipe__arrow--up { margin-bottom: .14rem; }
.deck-swipe__arrow--down {
  margin-top: .14rem;
  transform: scaleY(-1);
}
body.deck-swipe-mode-up .deck-swipe__arrow--down { display: none; }
body.deck-swipe-mode-down .deck-swipe__arrow--up { display: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 820px) {
  .deck-nav { bottom: var(--deck-nav-bottom); width: 100vw; }
  /* section navbar on one line: diamond · SPINE · SUBSTRATE · INTEL · diamond */
  .deck-dots { gap: clamp(.25rem, 1.4vw, .55rem); flex-wrap: nowrap; max-width: 100vw; }
  .deck-mark { width: clamp(9px, 2.4vw, 12px); height: clamp(9px, 2.4vw, 12px); }
  .deck-dot { gap: .42rem; }
  .deck-dot--label { padding: clamp(.36rem, 1.5vw, .5rem) clamp(.42rem, 2vw, .72rem); }
  .deck-label { font-size: clamp(.5rem, 2.2vw, .62rem); letter-spacing: .06em; }
  .deck-hint { display: none; }
  .deck-swipe {
    display: none; flex-direction: column; align-items: center;
    position: fixed; right: var(--page-gutter); z-index: 22; pointer-events: none;
    bottom: calc(var(--deck-mark-axis) - var(--deck-swipe-label-rise)); opacity: .66;
    transition: opacity .35s var(--ease);
  }
  body.deck-swipe-on .deck-swipe { display: flex; }
  body.deck-swipe--pulse .deck-swipe { animation: swipePulse 2.8s ease-in-out infinite; }
  body.deck-swipe--pulse.deck-swipe-mode-up .deck-swipe__arrow--up { animation: swipeNudgeUp 2.8s ease-in-out infinite; }
  body.deck-swipe--pulse.deck-swipe-mode-down .deck-swipe__arrow--down { animation: swipeNudgeDown 2.8s ease-in-out infinite; }
  body.deck-swipe--pulse.deck-swipe-mode-both .deck-swipe__arrow--up { animation: swipeNudgeUp 2.8s ease-in-out infinite; }
  body.deck-swipe--pulse.deck-swipe-mode-both .deck-swipe__arrow--down { animation: swipeNudgeDown 2.8s ease-in-out infinite; }
}
@keyframes swipePulse {
  0%, 100% { opacity: .66; }
  50% { opacity: 1; }
}
@keyframes swipeNudgeUp {
  0%, 100% { opacity: .7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes swipeNudgeDown {
  0%, 100% { opacity: .7; transform: scaleY(-1) translateY(0); }
  50% { opacity: 1; transform: scaleY(-1) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .deck-caps .cap, .deck-caps .cap-line { transition: none; }
  .deck-hint { animation: none; opacity: .4; }
  body.deck-swipe--pulse .deck-swipe { animation: none; opacity: .95; }
  .deck-mark, .deck-arrow::before { transition: none; }
}
@media (hover: none) {
  .deck-dot--label:hover { border-color: rgba(169,192,214,.16); background: rgba(12,17,24,.42); box-shadow: none; }
  .deck-dot--mark:hover .deck-mark { box-shadow: none; transform: rotate(45deg); }
}