/* Univa base - sohub-style skin. Fonts, reset, typography, pill buttons,
   nav v2 (pill menu panel), footer mega-panel, project cards, motion states.
   Page-specific rules live in css/<page>.css. Zero shadows, zero borders. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Varela Round";
  src: url("/fonts/varela-round.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */

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

html {
  background-color: var(--blue-deep, #11327f);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none; /* hide the page scrollbar (Firefox) */
}
/* hide the page scrollbar (Chrome / Safari / Edge) */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: var(--blue); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.on-dark :focus-visible, .deck-card :focus-visible, .footer-panel :focus-visible {
  outline-color: var(--on-dark);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-weight: 600; line-height: 1; }

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: var(--track-3);
}

.statement {
  font-size: var(--text-statement);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-7);
  text-wrap: balance;
}

/* Gradient-shimmer keyword inside statements */
.h-word {
  background: linear-gradient(90deg, var(--ink), var(--blue-bright), var(--ink));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-move 5s linear infinite;
  /* Pad the clipped background box (tight letter-spacing otherwise shaves the
     last glyph's edge, e.g. the "e" in "office"); negative margin keeps layout,
     box-decoration-break keeps it on every wrapped line. */
  padding: 0.18em 0.14em;
  margin: 0 -0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.on-dark .h-word, .deck-card .h-word {
  background: linear-gradient(90deg, var(--on-dark), var(--blue-light), var(--on-dark));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
@keyframes grad-move {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

.tagline {
  font-size: var(--text-tagline);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-5);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: var(--track-5);
}

.muted { color: var(--muted); }
.small { font-size: var(--text-small); }

/* ---------- Layout ---------- */

.container { padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.full-viewport { min-height: 100vh; min-height: 100svh; }

.section-head { margin-bottom: var(--space-head-gap); }
.section-head .eyebrow { display: block; margin-bottom: 1.25rem; }
.section-head .statement { max-width: 18ch; }

/* ---------- Two-part pill button (the signature) ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--r-pill);
  padding: 0.3rem;
  transition: transform 0.5s var(--ease-pill);
}
.pill:hover { transform: scale(1.08); }

.pill .pill-label {
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.6rem 0.55rem 2rem;
  white-space: nowrap;
}

.pill .pill-chip {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
}
.pill .pill-chip svg {
  width: 38%;
  height: auto;
  transition: transform 0.5s var(--ease-spring);
}
.pill .pill-chip svg.swap-in {
  position: absolute;
  transform: translateX(-250%);
}
.pill:hover .pill-chip svg.swap-out { transform: translateX(250%); }
.pill:hover .pill-chip svg.swap-in { transform: translateX(0); }

.pill-dark { background: var(--ink); color: var(--on-dark); }
.pill-dark .pill-chip { background: var(--chip-dark); color: var(--on-dark); }

.pill-light { background: var(--soft); color: var(--ink); }
.pill-light .pill-chip { background: var(--bg); color: var(--ink); }

/* Tag pills (inside dark cards) */
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--tag-bg);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.25rem;
  font-size: var(--text-small);
  white-space: nowrap;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Light-context tag (on ice background) */
.tag-light { background: var(--soft); color: var(--ink); }

/* Social / icon circles */
.circle {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--dark-2);
  color: var(--on-dark);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.circle:hover { transform: scale(1.1); background: var(--hover-circle); }
.circle svg { width: 40%; height: auto; }

/* ---------- Nav v2: transparent fixed header + pill menu panel ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.5vh, 2.25rem) var(--gutter);
  pointer-events: none;
}
.site-nav > * { pointer-events: auto; }

/* Official UNIVA logo replaces the text wordmark on every page (CSS-only, so no
   per-page HTML edit is needed; the nav is a shared partial). */
.nav-brand {
  display: block;
  height: clamp(1.65rem, 2.6vw, 2.35rem);
  aspect-ratio: 760 / 432;
  background: url("/univa-logo.png") left center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.nav-brand .brand-dot { display: none; }

.nav-controls { display: flex; gap: 0.6rem; align-items: center; }

/* Background-music toggle (js: /js/bgm.js) */
.bgm-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  flex: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-pill, ease), background-color 0.2s ease, color 0.2s ease;
}
.bgm-toggle:hover { transform: scale(1.08); }
.bgm-toggle svg { width: 44%; height: auto; }
.bgm-toggle .ico-off { display: none; }
.bgm-toggle.muted { color: var(--muted); }
.bgm-toggle.muted .ico-on { display: none; }
.bgm-toggle.muted .ico-off { display: block; }
.nav-controls .pill-whatsapp,
.nav-controls .pill-quiz { display: none; }
@media (min-width: 1024px) {
  .nav-controls .pill-whatsapp,
  .nav-controls .pill-quiz { display: inline-flex; }
}

/* Menu label vertical swap */
.menu-toggle .pill-label {
  position: relative;
  overflow: clip;
  display: grid;
}
.menu-toggle .pill-label span {
  grid-area: 1 / 1;
  transition: transform 0.5s var(--ease-swap);
}
.menu-toggle .pill-label .lbl-close { transform: translateY(260%); }
.menu-toggle[aria-expanded="true"] .pill-label .lbl-menu { transform: translateY(-260%); }
.menu-toggle[aria-expanded="true"] .pill-label .lbl-close { transform: translateY(0); }

/* Menu dropdown panel */
.menu-panel {
  position: fixed;
  top: var(--nav-height);
  right: var(--gutter);
  left: var(--gutter);
  z-index: 55;
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 3vh, 3rem) clamp(1.25rem, 2vw, 2rem);
  display: grid;
  gap: 0.25rem;
}
@media (min-width: 1024px) {
  .menu-panel { left: auto; width: min(34rem, 40vw); }
}
.menu-panel[hidden] { display: none; }

.menu-panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.875rem, 3.5vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--track-7);
  line-height: 1.15;
  color: var(--dark-2);
  border-radius: var(--r-card);
  padding: 0.35rem 1.5rem;
  transition: background-color 0.2s var(--ease-out);
}
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--bg); }
.menu-panel a .menu-arrow {
  width: 0;
  overflow: clip;
  transition: width 0.3s var(--ease-out);
  flex: none;
}
.menu-panel a:hover .menu-arrow { width: 1.75rem; }
.menu-panel .menu-meta {
  margin-top: 1.5rem;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--text-small);
  color: var(--dark-2);
}
.menu-panel .menu-meta a {
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.01em;
}
.menu-panel .menu-meta a:hover { background: none; text-decoration: underline; }

/* ---------- Project cards ---------- */

.pcard {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: clip;
  transition: transform 0.3s var(--ease-spring);
}
.pcard:hover { transform: scale(1.02); }
.pcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcard::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
}
.pcard .pcard-title {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  bottom: 1.25rem;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 3rem);
  font-weight: 600;
  letter-spacing: var(--track-5);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pcard .pcard-arrow {
  width: 0;
  overflow: clip;
  transition: width 0.3s var(--ease-out);
  flex: none;
}
.pcard:hover .pcard-arrow { width: clamp(1.25rem, 2vw, 2rem); }
.pcard .pcard-cat {
  position: absolute;
  z-index: 1;
  left: 1.5rem;
  top: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Footer: wordmark + dark mega-panel + extension bar ---------- */

.site-footer {
  position: relative;
  padding-top: var(--space-section);
  overflow: clip;
}

.footer-wordmark {
  position: relative;
  font-weight: 700;
  font-size: clamp(5rem, 22vw, 24rem);
  letter-spacing: var(--track-5);
  line-height: 0.8;
  text-align: center;
  color: var(--blue);
  user-select: none;
  transform: translateY(0.05em);
}
/* On the Matrix "ascend" page, join.js tags the footer letters .fwm-letter and adds a
   real .footer-flag, making the wordmark interactive (notes + fringe) like the hero. */
.footer-wordmark .fwm-letter { display: inline-block; }
.footer-flag {
  position: absolute;
  top: 4%;
  left: 57%;
  width: clamp(3.25rem, 10.4vw, 8.45rem); /* +30% */
  aspect-ratio: 4 / 3;
  background: url("/assets/my-flag.svg") center / cover no-repeat;
  border-radius: 8px;
  rotate: -8deg;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 1;
}
@keyframes fwm-fringe {
  0%, 100% { text-shadow: 0 0 transparent; }
  12% { text-shadow: -0.035em 0 rgba(255,30,90,0.9), 0.035em 0 rgba(0,200,255,0.9); }
  38% { text-shadow: 0.022em 0 rgba(255,30,90,0.8), -0.022em 0 rgba(0,200,255,0.85); }
  68% { text-shadow: -0.012em 0 rgba(255,30,90,0.6), 0.012em 0 rgba(0,200,255,0.6); }
}
.footer-wordmark .fwm-letter.fringe { animation: fwm-fringe 0.5s ease-out; }
@media (prefers-reduced-motion: reduce) { .footer-wordmark .fwm-letter.fringe { animation: none; } }

.footer-panel {
  position: relative;
  z-index: 1;
  margin-top: -2vw;
  background: linear-gradient(135deg, #2f6bff 0%, #1c4fc0 100%);
  color: var(--on-dark);
  border-radius: var(--r-panel);
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.5rem;
}
.footer-panel .footer-copyright {
  font-size: clamp(1.875rem, 6vw, 8rem);
  font-weight: 600;
  letter-spacing: var(--track-5);
  line-height: 1;
}
.footer-panel .footer-tag {
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 500;
}
.footer-panel .footer-circles {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1rem;
}
.footer-panel .footer-circles .sep { color: rgba(255, 255, 255, 0.55); }

.footer-ext {
  width: 94%;
  margin: 0 auto;
  background: var(--dark-2);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  padding: clamp(1.25rem, 3vh, 2.25rem) clamp(1rem, 3vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
@media (min-width: 1024px) { .footer-ext { width: 97%; justify-content: space-between; } }
.footer-ext .ext-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Simulation slabs (home + academy): dark panels hosting live canvas sims ---------- */

.sim-slab {
  position: relative;
  background: var(--ink);
  border-radius: var(--r-panel);
  overflow: clip;
}
/* Sims render a fixed 1180x420 logical store; the canvas keeps that ratio so
   nothing distorts. The slab grows with the canvas. */
.sim-slab canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1180 / 420;
  touch-action: none;
}
.sim-cap {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  left: 1.5rem;
  display: grid;
  gap: 0.15rem;
  pointer-events: none;
}
.sim-cap-t { color: var(--on-dark); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1.2rem); letter-spacing: var(--track-3); }
.sim-cap-s { color: var(--muted); font-size: var(--text-small); font-weight: 500; }
.sim-hint {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  right: 1.5rem;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
  pointer-events: none;
}
/* Mobile: stack caption above the canvas and the hint below it, so neither text
   block sits over the live sim. Placed AFTER the absolute base rules above so it
   wins at equal specificity (a media query alone doesn't raise specificity). */
@media (max-width: 760px) {
  .sim-slab { display: flex; flex-direction: column; }
  .sim-cap { position: static; order: 1; padding: 1rem 1.25rem 0.6rem; }
  .sim-slab canvas { order: 2; }
  .sim-hint { position: static; order: 3; padding: 0.5rem 1.25rem 1rem; text-align: left; }
}
.sim-note {
  margin-top: 1.25rem;
  max-width: 68ch;
  font-size: var(--text-small);
  line-height: 1.6;
}
.sim-seq {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 1.5rem;
  right: auto;
  color: #7ee787;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: clip;
  max-width: 60%;
  pointer-events: none;
}

/* ---------- Scroll cue + float loops ---------- */

.scroll-cue {
  color: var(--muted);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.875rem);
  animation: cue-bob 2.4s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.4rem); }
}

.float-anim { animation: float-loop 5s ease-in-out infinite; }
@keyframes float-loop {
  0%, 100% { transform: translateY(-0.5rem); }
  50% { transform: translateY(0.5rem); }
}

/* ---------- Preloader (branded intro, home only; sibling of nav) ---------- */

.preloader { display: none; }
html.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  will-change: transform;
}
/* Entry/intro splash shows the official UNIVA logo (CSS-only) on the light canvas. */
.preloader-mark {
  display: block;
  height: clamp(3rem, 9vw, 5.5rem);
  aspect-ratio: 760 / 432;
  background: url("/univa-logo.png") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.preloader-mark .brand-dot { display: none; }

/* ---------- Cross-document page transitions (View Transitions API) ----------
   Chromium animates the route change as a slide-up card over the receding old
   page; Safari/Firefox navigate normally (graceful fallback). */

@view-transition { navigation: auto; }

@keyframes vt-old-out {
  to { transform: translateY(-34%); filter: brightness(0.2) blur(14px); }
}
@keyframes vt-new-in {
  0%   { transform: translateY(100%) scale(0.86); border-radius: 3rem; }
  62%  { border-radius: 3rem; }
  100% { transform: translateY(0) scale(1); border-radius: 0; }
}

::view-transition-group(root) { animation-duration: 1s; }
::view-transition-old(root) {
  animation: vt-old-out 1s cubic-bezier(0.86, 0, 0.07, 1) both;
  z-index: 1;
}
::view-transition-new(root) {
  animation: vt-new-in 1s cubic-bezier(0.86, 0, 0.07, 1) both;
  z-index: 9999;
  overflow: clip;
}

/* ---------- Footer reveal (letters drop in; extension bar settles) ---------- */

.footer-wordmark { overflow: clip; }
.footer-letter { display: inline-block; will-change: transform; }

/* ---------- Magnetic pills: GSAP owns the transform on fine pointers ---------- */

html.has-magnetic .pill { transition: none; }

/* ---------- Motion initial states (html.js gated; no-JS sees everything) ---------- */

html.js [data-reveal="lines"] .line { display: block; overflow: clip; }
html.js [data-reveal="lines"] .line-inner {
  display: block;
  transform: translateY(115%);
  will-change: transform;
}
html.js [data-reveal="fade"] { opacity: 0; transform: translateY(28px); }
html.js [data-clip] { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  html.js [data-reveal="lines"] .line-inner { transform: none; }
  html.js [data-reveal="fade"] { opacity: 1; transform: none; }
  html.js [data-clip] { clip-path: none; }
  .h-word { animation: none; }
  .float-anim { animation: none; }
  .scroll-cue { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 404 ---------- */

.notfound-wrap { display: grid; place-items: center; }
.notfound { display: grid; gap: 1.5rem; justify-items: start; padding-block: calc(var(--nav-height) + 2rem); }
.notfound .display { letter-spacing: var(--track-5); }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* ---------- Misc ---------- */

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Footer NAP: the full postal address + phone, present on every page so the
   name/address/phone signal is consistent site wide. Smaller than the company
   line above it, since it is reference information rather than a statement. */
.footer-panel .footer-addr {
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  max-width: 44ch;
  line-height: 1.5;
}
.footer-panel .footer-addr a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-panel .footer-addr a:hover { color: #fff; }