/* ============================================================================
   traversed.com.au — standalone stylesheet (not Tailwind). Intro: empty ->
   large centred logoblock -> shrinks while the description fades in underneath.
   Outro: logoblock returns to the top, the rest fades, and the contact footer
   slides up. No inline styles (strict CSP); element positions are set via the
   CSSOM, which CSP permits. All resources local — no CDN, fonts, or analytics.
============================================================================ */
:root{
  --base:#05080f;
  --surface-0:#0f1626; --navy:#16243f;
  --accent-900:#1b3a6d; --accent-700:#244b86; --accent-500:#4d8df5;
  --ink:#f0f3f9; --ink-soft:#b5bccb; --ink-mute:#828997;
  --squiggle:#93b8f5; --orange:#f97316; --orange-400:#fb8a3c;
  --strategic:#8fb8fb; --operational:#e3a786;
  --border-strong:#2a3b59; --good:#7fd1a0;
}
@font-face{ font-family:'American Typewriter'; src:url('/assets/fonts/AmericanTypewriter.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:'American Typewriter'; src:url('/assets/fonts/AmericanTypewriter-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Saira'; src:url('/assets/fonts/saira/saira-v23-latin-300.woff2') format('woff2');     font-weight:300; font-display:swap; }
@font-face{ font-family:'Saira'; src:url('/assets/fonts/saira/saira-v23-latin-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Saira'; src:url('/assets/fonts/saira/saira-v23-latin-500.woff2') format('woff2');     font-weight:500; font-display:swap; }
@font-face{ font-family:'Saira'; src:url('/assets/fonts/saira/saira-v23-latin-600.woff2') format('woff2');     font-weight:600; font-display:swap; }
@font-face{ font-family:'Saira'; src:url('/assets/fonts/saira/saira-v23-latin-700.woff2') format('woff2');     font-weight:700; font-display:swap; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--base); scroll-behavior:smooth; }
body{
  background:transparent; color:var(--ink);
  font-family:'Saira','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(125% 125% at 88% 110%, #142a47 0%, #0e1d33 27%, #091523 51%, #060b15 76%, #04060c 100%);
}
.serif{ font-family:'American Typewriter','Iowan Old Style',Georgia,serif; }
.tm{ font-size:.42em; font-weight:400; vertical-align:super; letter-spacing:0; }
.em{ color:var(--ink); font-weight:600; }

/* fixed chrome — progress + hint + legend (no top-left brand) */
.progress{
  position:fixed; left:0; top:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent-500),var(--squiggle)); z-index:50; transition:width .35s ease;
  opacity:0;
}
.progress.on{ opacity:1; }
.hint{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:40;
  font-size:12px; color:var(--ink-mute); letter-spacing:.04em; user-select:none; transition:opacity .4s; opacity:0;
}
.hint.on{ opacity:1; }
.hint kbd{ font-family:inherit; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:1px 7px; color:var(--ink-soft); }

#legend{
  position:fixed; left:16px; bottom:14px; z-index:46;
  width:190px; display:flex; flex-direction:column; gap:3px;
  max-height:82vh; overflow-y:auto; scrollbar-width:none; opacity:0; transition:opacity 1s ease;
}
#legend.on{ opacity:1; }
#legend::-webkit-scrollbar{ display:none; }
.leg{
  display:none; align-items:baseline; gap:9px; width:100%;
  background:none; border:0; margin:0; padding:4px 5px; border-radius:7px;
  text-align:left; cursor:pointer; color:inherit; transition:opacity .35s ease, background .2s ease;
}
.leg.in3{ display:flex; opacity:.42; }       /* 3-item window: previous / current / next */
.leg.in3.current{ opacity:1; }
.leg:hover{ background:rgba(255,255,255,.07); }
.legn{ font-family:'Saira',monospace; font-size:10px; letter-spacing:.12em; color:var(--accent-500); flex:0 0 auto; }
.legt{ font-size:10.5px; line-height:1.18; color:var(--ink-soft); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.leg.current .legt{ color:var(--orange); font-weight:600; }

/* persistent CONTACT badge (top-right) — jumps to the last section + form */
#contact-badge{
  position:fixed; top:16px; right:18px; z-index:55;
  font-family:'Saira',ui-sans-serif,system-ui,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:9px 17px; cursor:pointer;
  opacity:0; transition:opacity .8s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
#contact-badge.on{ opacity:1; }
#contact-badge:hover{ background:var(--orange); color:#1a0a00; border-color:var(--orange); }

/* persistent corner logo block (bottom-right) — shown from the second section */
#corner-logo{
  position:fixed; right:18px; bottom:14px; z-index:46;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:5px; text-align:right; user-select:none; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}
#corner-logo.on{ opacity:.92; }
#corner-logo .lb-mark .wlogo{ width:34px; }
#corner-logo .lb-mark .cr{ font-size:7px; margin-right:1px; }
#corner-logo .cl-wordmark{ font-family:'American Typewriter','Iowan Old Style',Georgia,serif; font-weight:500; font-size:13px; line-height:1.05; color:var(--orange); margin:0; white-space:nowrap; }
#corner-logo .cl-byline{ font-size:7.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3; margin:0; white-space:nowrap; }

/* tall canvas */
#canvas{ position:relative; width:min(1040px,94vw); margin:0 auto; }
#wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }

.anchor{
  position:absolute; z-index:2; width:min(560px,86vw);
  opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;
}
.anchor.show{ opacity:1; transform:none; }
.anchor h2{
  margin:0 0 14px; font-family:'American Typewriter','Iowan Old Style',Georgia,serif;
  font-weight:500; line-height:1.08; letter-spacing:0; font-size:clamp(32px,4.2vw,52px); color:var(--orange);
}
.anchor p{ margin:0; font-size:clamp(18px,2vw,23px); line-height:1.5; color:var(--ink-soft); }

/* ── logoblock (used by the opener + the closing slide) ─────────────── */
.logoblock{ display:flex; flex-direction:column; align-items:center; gap:12px; transform-origin:center top; transition:transform .85s cubic-bezier(.4,0,.2,1); }
.lb-mark{ position:relative; display:inline-block; }
.lb-mark .wlogo{ width:132px; height:auto; display:block; }
.lb-mark .cr{ position:absolute; bottom:2px; right:100%; margin-right:2px; font-size:14px; color:var(--ink-soft); font-weight:400; opacity:1; white-space:nowrap; }
.lb-byline{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); line-height:1.4; }
.lb-wordmark{ font-family:'American Typewriter','Iowan Old Style',Georgia,serif; font-weight:500; font-size:32px; line-height:1.05; color:var(--orange); }

/* opener (page 1) — centred; logoblock then description underneath */
.anchor.hero{ width:min(720px,92vw); text-align:center; transition:opacity 1s ease, transform 1s ease; }
.anchor.hero .hero-desc{ margin:22px auto 0; max-width:560px; font-size:18px; line-height:1.56; color:var(--ink-soft); transition:opacity .85s ease .1s; }
/* intro: logoblock scaled up, description hidden */
.anchor.hero.big .logoblock{ transform:scale(1.7); }
.anchor.hero.big .hero-desc{ opacity:0; }

/* closing slide — logoblock only, much bigger and centred. When shown it is a
   FIXED, viewport-centred overlay filling the space above the contact footer, so
   it is dead-centre horizontally and vertically regardless of scroll position or
   viewport height (the previous scroll-based centring drifted by viewport size).
   The JS clears the canvas-flow inline left/top/width so this rule governs. */
.anchor.closing{ width:min(860px,94vw); text-align:center; }
.anchor.closing.show{
  position:fixed; left:0; right:0; top:0; bottom:max(188px, 25vh);
  width:auto; margin:0; transform:none; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.anchor.closing .logoblock{ transform:scale(1.5); transform-origin:center center; }
.anchor.closing .lb-wordmark{ white-space:nowrap; }
.anchor.closing .closing-tag{ margin-top:18px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }

/* hand-drawn arrow connectors */
.arrow{ color:var(--orange); opacity:0; clip-path:inset(0 0 100% 0);
        transition:clip-path 1s cubic-bezier(.45,.05,.3,1), opacity .55s ease; }
.arrow.show{ opacity:.96; clip-path:inset(0 0 0% 0); }

/* ── contact footer (the / dock design) — slides up from the bottom ── */
#contact-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:25vh; min-height:188px;
  background:linear-gradient(180deg, var(--surface-0), var(--navy));
  border-top:1px solid var(--border-strong);
  display:flex; align-items:center; overflow-y:auto;
  transform:translateY(100%); transition:transform .6s cubic-bezier(.4,0,.2,1);
}
#contact-footer.up{ transform:translateY(0); }
.cf-inner{ width:100%; margin:0; padding:14px clamp(24px,4vw,64px); display:flex; align-items:center; gap:32px; }
.cf-brand{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.cf-center{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:36px; }
.cf-brand .lb-mark .wlogo{ width:54px; }
.cf-byline{ font-size:8.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink); line-height:1.4; margin:0; white-space:nowrap; }
.cf-wordmark{ font-family:'American Typewriter','Iowan Old Style',Georgia,serif; font-weight:500; font-size:18px; line-height:1.06; color:var(--orange); margin:0; white-space:nowrap; }
.cf-title{ flex:0 1 auto; min-width:0; }
.cf-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--operational); margin:0 0 7px; }
.cf-title h2{ font-family:'American Typewriter','Iowan Old Style',Georgia,serif; font-weight:500; font-size:clamp(20px,2.4vw,26px); line-height:1.12; color:var(--ink); margin:0 0 7px; }
.cf-title p{ font-size:13px; line-height:1.45; color:var(--ink-soft); margin:0; max-width:260px; }

#cf-form{ display:grid; gap:10px; flex:0 1 560px; min-width:0; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cf-field{ background:rgba(255,255,255,.04); border:1px solid var(--border-strong); padding:9px 12px; font-family:inherit; font-weight:300; font-size:14px; color:var(--ink); width:100%; border-radius:7px; }
.cf-field::placeholder{ color:var(--ink-mute); }
.cf-field:focus{ outline:none; border-color:var(--accent-500); box-shadow:0 0 0 2px rgba(77,141,245,.22); }
textarea.cf-field{ resize:none; }
.cf-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
#cf-status{ font-size:12px; color:var(--ink-mute); margin:0; }
#cf-status.ok{ color:var(--good); }
#cf-status.err{ color:var(--operational); }
.cf-send{ background:var(--orange); color:#1a0a00; border:0; border-radius:7px; padding:10px 22px; font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:background .2s; }
.cf-send:hover{ background:var(--orange-400); }
.cf-send:disabled{ opacity:.6; cursor:default; }
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cf-skip{ position:absolute; left:-9999px; }
.cf-skip:focus{ left:16px; top:16px; z-index:70; background:var(--accent-500); color:#05080f; border-radius:6px; padding:8px 12px; font-size:13px; }

@media (max-width:760px){
  .cf-inner{ flex-direction:column; align-items:stretch; gap:10px; }
  .cf-brand{ display:none; }
  .cf-center{ flex-direction:column; align-items:stretch; gap:10px; }
  #contact-footer{ height:auto; min-height:0; }
  #corner-logo{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .anchor,.arrow,.logoblock,#contact-footer{ transition:none !important; }
  .arrow{ clip-path:none !important; }
  html{ scroll-behavior:auto; }
}