/* =============================================================================
   Residency — a pitch in seven beats: giant centred statements over a full-
   window live G1. The deck is pointer-transparent except for the cards, so a
   drag on the visible robot always reaches the WebGL canvas and a drag on a
   card always swipes.
   ========================================================================== */

:root{
  --bg:#0a0c12;
  --ink:#eef2fa;
  --muted:#96a2b7;
  --glass:rgba(14,18,27,.78);
  --glass-hi:rgba(30,37,52,.72);
  --line:rgba(255,255,255,.10);
  --line-hi:rgba(255,255,255,.18);
  --accent:#ffd24a;          /* signal yellow — the workpieces, and the offer */
  --accent-deep:#e3b224;     /* pressed / hover */
  --blue:#6f9dff;            /* work light blue — page chrome, rim light */
  --bad:#ff6b6b;
  --ok:#5fd39b;
  --pad:16px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --card-h:60svh;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior:none;
}
a{color:var(--accent)}
code{font:500 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- stage ---------- */
#stage{position:fixed; inset:0; z-index:0}
#viewport{position:absolute; inset:0}
#viewport canvas{display:block}
#scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 6%, transparent 38%, rgba(6,8,13,.5) 100%),
    linear-gradient(to top, rgba(6,8,13,.97) 0%, rgba(6,8,13,.9) 34%,
                    rgba(6,8,13,.42) 58%, transparent 76%);
}

/* Swipe surface under the robot. Sits above the stage so it takes the touch,
   below the deck so cards, links and buttons still work normally. Phones only:
   on desktop the pointer has the arrows and the keyboard. */
#swipezone{position:fixed; left:0; right:0; bottom:0; top:62%; z-index:10; display:none}
@media (max-width:899px){ #swipezone{display:block} }

/* ---------- top bar ---------- */
.topbar{
  position:fixed; z-index:30; top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--pad) 10px;
  background:linear-gradient(to bottom, rgba(6,8,13,.86), rgba(6,8,13,0));
}
.brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:none; border:0; padding:0; color:var(--ink); text-align:left; cursor:pointer;
}
.brand__mark{font-weight:700; font-size:18px; letter-spacing:-.015em}
.brand__accent{color:var(--accent)}
.brand__sub{font-size:11px; color:var(--muted); letter-spacing:.01em}
.topbar__actions{display:flex; gap:8px; flex-shrink:0}
.pill{
  display:inline-block; text-decoration:none; line-height:1.25;
  border:1px solid var(--line-hi); background:var(--glass); color:var(--ink);
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:500;
  cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.pill:hover{background:var(--glass-hi)}
.pill--primary{background:var(--accent); border-color:var(--accent); color:#221a02; font-weight:650}
.pill--primary:hover{background:var(--accent-deep)}
@media (max-width:520px){ .pill:not(.pill--primary){display:none} }

/* ---------- deck ---------- */
.deck{position:fixed; inset:0; z-index:20; pointer-events:none; overflow:hidden}
.track{display:flex; height:100%; width:100%; transition:transform .52s cubic-bezier(.4,.02,.2,1)}
.slide{
  flex:0 0 100%; height:100%; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0 var(--pad);
}

/* the card: one centred statement in the lower third, on every viewport */
.card{
  pointer-events:auto;
  width:100%; max-width:980px;
  max-height:var(--card-h);
  margin:0 0 calc(var(--safe-b) + 84px);
  padding:0 2px 0 0;              /* no panel — the scrim below carries legibility */
  overflow-y:auto; overscroll-behavior:contain;
  text-shadow:0 1px 14px rgba(6,8,13,.95), 0 0 34px rgba(6,8,13,.75);
}
.card.is-clipped{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
}
.card::-webkit-scrollbar{width:6px}
.card::-webkit-scrollbar-thumb{background:var(--line-hi); border-radius:3px}

/* ---------- the statement: kicker, BAM, one quiet line ---------- */
.statement{text-align:center}
.kicker{
  margin:0 0 14px; font:650 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}
.statement h2{
  margin:0; font-size:clamp(34px,10.5vw,112px); line-height:.98; letter-spacing:-.035em;
  font-weight:800; color:var(--ink);
  text-shadow:0 2px 18px rgba(6,8,13,.95), 0 10px 50px rgba(0,0,0,.75);
}
.statement h2 em{font-style:normal; color:var(--accent)}
.statement .sub{
  margin:18px auto 0; max-width:34em; font-size:16px; line-height:1.5; color:var(--muted);
}

/* ---------- hero ---------- */
.slide--hero{align-items:flex-end}
.hero{
  pointer-events:auto; text-align:center; padding:0 8px; max-width:760px;
  margin-bottom:calc(var(--safe-b) + 104px);
  text-shadow:0 1px 14px rgba(6,8,13,.95), 0 0 34px rgba(6,8,13,.75);
}
.eyebrow{margin:0 0 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.hero h1{
  margin:0; font-size:clamp(56px,15vw,150px); line-height:.92; letter-spacing:-.045em; font-weight:800;
  text-shadow:0 8px 40px rgba(0,0,0,.7);
}
.hero__lede{margin:16px 0 10px; font-size:clamp(18px,4.6vw,26px); line-height:1.3; color:var(--ink)}
.hero__lede b{color:var(--accent)}
.hero__sub{margin:0 auto 22px; max-width:470px; font-size:14px; color:var(--muted)}
.hero__hint{margin:14px 0 0; font-size:11.5px; color:var(--muted); letter-spacing:.02em}
.startbtn{
  display:inline-block; text-decoration:none;
  border:0; border-radius:999px; background:var(--accent); color:#221a02;
  font:650 15px/1 inherit; padding:14px 26px; cursor:pointer;
  box-shadow:0 10px 30px rgba(255,210,74,.26);
}
.startbtn:hover{background:var(--accent-deep)}
.startbtn--ghost{
  background:var(--glass); color:var(--ink); border:1px solid var(--line-hi);
  box-shadow:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.startbtn--ghost:hover{background:var(--glass-hi)}
.endcta{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:24px; flex-wrap:wrap}

/* ---------- nav ---------- */
.navarrow{
  position:fixed; z-index:31; bottom:calc(var(--safe-b) + 22px);
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-hi); background:var(--glass); cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.navarrow::before{
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
}
.navarrow.prev{left:var(--pad)} .navarrow.prev::before{transform:translateX(2px) rotate(135deg)}
.navarrow.next{right:var(--pad)} .navarrow.next::before{transform:translateX(-2px) rotate(-45deg)}
.dots{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 34px); display:flex; gap:7px;
}
.dots button{
  width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.28);
}
.dots button.is-on{background:var(--accent); transform:scale(1.35)}
.swipehint{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 52px); margin:0;
  font-size:11px; letter-spacing:.1em; color:var(--muted); pointer-events:none;
  transition:opacity .4s; animation:pulse 2.4s ease-in-out infinite;
}
.swipehint[hidden]{display:none}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.95}}
.status{
  position:fixed; z-index:31; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 76px); margin:0; font-size:11.5px; color:var(--muted);
  pointer-events:none;
}
.status:empty{display:none}

.footnote{
  position:absolute; left:var(--pad); right:var(--pad);
  bottom:calc(var(--safe-b) + 8px); margin:0; pointer-events:auto;
  font-size:10.5px; line-height:1.5; color:var(--muted); opacity:.75;
  text-align:center; text-shadow:0 1px 12px rgba(6,8,13,.95);
}

/* ---------- portrait: the footnote stacks under the card ---------- */
@media (max-width:899px){
  .slide--end{flex-direction:column; align-items:stretch; justify-content:flex-end}
  .slide--end .card{margin-bottom:14px; max-height:none}
  .slide--end .footnote{
    position:static; left:auto; right:auto; bottom:auto;
    margin:0 0 calc(var(--safe-b) + 78px);
  }
}

/* ---------- desktop: same centred composition, more air ---------- */
@media (min-width:900px){
  :root{--card-h:min(70svh,640px)}
  .card{margin-bottom:calc(var(--safe-b) + 96px)}
  .hero{max-width:860px}
  .statement .sub{font-size:17px}
  #scrim{background:
    radial-gradient(120% 85% at 50% 8%, transparent 40%, rgba(6,8,13,.42) 100%),
    linear-gradient(to top, rgba(6,8,13,.96) 0%, rgba(6,8,13,.82) 22%,
                    rgba(6,8,13,.30) 46%, transparent 66%);}
  .dots{bottom:calc(var(--safe-b) + 26px)}
  .navarrow{bottom:calc(var(--safe-b) + 18px)}
  .swipehint,.status{bottom:calc(var(--safe-b) + 46px)}
}

@media (prefers-reduced-motion:reduce){
  .track{transition:none}
  .swipehint{animation:none}
}