/* The front door: one board, two worlds. The sea is "Who I am" (/uni/), the circuit board and the drone are
   "My work" (/work/). home.js draws both on one canvas and moves the gold seam between them; this file lays out
   the header, the two door links over the canvas, and the footer. Loads after ../styles.css (tokens, header bits). */

body.home { min-height: 100svh; display: grid; grid-template-rows: auto minmax(520px, 1fr) auto; }
.h-top { height: var(--top-h); display: flex; align-items: center; gap: 8px; padding-inline: var(--m); }
.h-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.h-mark svg { flex: none; }
.h-name { display: grid; line-height: 1.15; }
.h-name b { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.h-name span { font-size: var(--step-small); color: var(--muted); }

/* ---------- The board ---------- */
.portal { --split: 50%; --sea: #e9eae2; position: relative; margin-inline: var(--m); overflow: hidden; isolation: isolate; background: var(--board); color: #ebece5; }
.p-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hole { position: absolute; z-index: 4; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); transition: background-color 300ms ease; }
.hole.h1 { left: 12px; top: 12px; } .hole.h2 { right: 12px; top: 12px; } .hole.h3 { left: 12px; bottom: 12px; } .hole.h4 { right: 12px; bottom: 12px; }

/* ---------- The two doors: each is one big link over its half, and follows the seam ---------- */
.door { position: absolute; z-index: 2; top: 0; bottom: 0; display: flex; align-items: flex-end; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.door-uni { left: 0; width: var(--split); }
.door-work { left: var(--split); right: 0; }
.door:focus-visible { outline: 3px solid var(--gold); outline-offset: -10px; }
html:not(.js) .door-uni { background: linear-gradient(#174a38, #0f3628 30%, #0a2419 70%, #05120c); }

.door-in { display: grid; justify-items: start; width: 100%; max-width: 36rem; padding: clamp(28px, 4vw, 64px); padding-bottom: clamp(36px, 5.5vw, 80px); transition: opacity 450ms ease, transform 600ms var(--ease-out); }
.door-kick { font-family: var(--display); font-stretch: 110%; font-weight: 700; font-size: var(--step-small); color: var(--gold); }
.door-work .door-kick { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: 0.01em; }
.door-work .door-kick::before { content: "> "; color: var(--signal); }
.door-h { margin-top: 10px; font-size: clamp(2.75rem, 1.2rem + 5.2vw, 6.25rem); line-height: 0.92; letter-spacing: -0.045em; text-wrap: nowrap; }
.door-h > span { color: #ebece5; }
.door-ripple, .door-code { display: inline-block; padding-block: 0.06em; }
.door-p { margin-top: 16px; max-width: 26em; color: #c2d2c6; font-size: var(--step-body); line-height: 1.45; }
.door-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; min-height: 52px; padding: 0 22px; background: var(--gold); color: var(--ink-green); font-weight: 700; transition: background-color 200ms ease, transform 140ms var(--ease-out); }
.door-go svg { transition: transform 300ms var(--ease-out); }
.door:active .door-go { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .door-uni:hover .door-go svg { transform: translateY(4px); }
  .door-work:hover .door-go svg { transform: translateX(5px); }
  .door:hover .door-go { background: #ebece5; }
}

/* Pointing at one side quiets the other. */
.lean-uni .door-work .door-in, .lean-work .door-uni .door-in { opacity: 0.38; }
.lean-uni .door-uni .door-in { transform: translateY(-6px); }
.lean-work .door-work .door-in { transform: translateY(-6px); }
.rippling .door-ripple { filter: url(#h-ripple); }

/* The tag that rides the seam. home.js places it. */
.seam-tag { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--gold); color: var(--ink-green); font-family: var(--display); font-stretch: 110%; font-weight: 800; font-size: 0.875rem; white-space: nowrap; pointer-events: none; transition: opacity 300ms ease; }
html:not(.js) .seam-tag { display: none; }
.seam-tag span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .seam-tag .st-l { animation: nudge-l 1.6s var(--ease-out) infinite; }
  .seam-tag .st-r { animation: nudge-r 1.6s var(--ease-out) infinite; }
  .is-stack .seam-tag .st-l { animation-name: nudge-u; }
  .is-stack .seam-tag .st-r { animation-name: nudge-d; }
  @keyframes nudge-l { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(-3px); } }
  @keyframes nudge-r { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(3px); } }
  @keyframes nudge-u { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }
  @keyframes nudge-d { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
}

/* On the way out, the words step aside so the chosen world can fill the board. */
.portal.leaving .door-in, .portal.leaving .seam-tag { opacity: 0; transition: opacity 220ms ease; }

.h-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 14px var(--m) 16px; font-size: var(--step-small); color: var(--muted); }

/* ---------- Phones: the work board on top, the sea underneath, and the seam becomes the sea's surface ---------- */
@media (max-width: 760px) {
  body.home { grid-template-rows: auto minmax(560px, 1fr) auto; }
  .door-uni { left: 0; right: 0; top: var(--split); bottom: 0; width: auto; }
  .door-work { left: 0; right: 0; top: 0; bottom: auto; height: var(--split); }
  .door-in { padding: 22px 24px 26px; }
  .door-h { margin-top: 6px; font-size: clamp(2.4rem, 1.4rem + 5vw, 3.4rem); }
  .door-p { margin-top: 10px; font-size: 1rem; }
  .door-go { margin-top: 16px; min-height: 46px; padding: 0 18px; }
  .h-name span { display: none; }
  .h-name b { font-size: 0.9375rem; white-space: nowrap; }
  .h-top .top-socials { margin-left: 0; padding-left: 4px; }
  .door-p { display: none; }
}