/* ASBO: single-screen "meet the robot" portfolio. Colours from the AI Studio by Olga logo. */
:root {
  --bg: #ECEEF6;
  --ink: rgba(18, 21, 42, 0.96);
  --ink-2: rgba(18, 21, 42, 0.6);
  --ink-3: rgba(18, 21, 42, 0.38);
  --chip: rgba(18, 21, 42, 0.06);
  --peri: #5E6DA8;
  --accent: #0B7488;
  --cyan: #00E3F8;
  --coral: #E0643A;
  --magenta: #B21F71;
  --glass: rgba(255, 255, 255, 0.72);
  --term: #12152A;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Sora', 'Inter', system-ui, sans-serif;
  --brand: 'Michroma', 'Sora', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 2.4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 30% 70%, rgba(94, 109, 168, 0.10), transparent 70%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(0, 227, 248, 0.08), transparent 70%); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--term); color: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Identity, top left */
.id { position: fixed; top: calc(var(--gutter) - 8px); left: var(--gutter); z-index: 20; display: flex; align-items: center; gap: 14px; }
.id-logo img { width: 64px; height: 64px; object-fit: contain; transition: transform 0.3s; }
.id-logo:hover img { transform: rotate(-6deg) scale(1.05); }
.id-name { font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; }
.id .mono { margin: 4px 0 0; font-size: 10px; }

/* Pill navigation, top right */
.pillnav { position: fixed; top: calc(var(--gutter) - 6px); right: var(--gutter); z-index: 20; display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 999px; box-shadow: 0 10px 30px -14px rgba(18, 21, 42, 0.25); }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 50%; color: var(--ink-2); text-decoration: none; }
.icon-btn:first-child { background: rgba(11, 116, 136, 0.12); color: var(--accent); }
.icon-btn:hover { background: var(--chip); }
.pill { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.pill:hover { color: var(--ink); }
.pill.active { background: rgba(18, 21, 42, 0.07); color: var(--ink); }

/* Stage */
.stage { position: relative; min-height: 100vh; min-height: 100svh; }
.brand-col { position: absolute; right: var(--gutter); top: 15vh; display: flex; flex-direction: column; align-items: flex-end; text-align: right; z-index: 2; }
.wordmark { margin: 0; font: 400 clamp(70px, 10.6vw, 190px)/0.95 var(--brand); letter-spacing: -0.01em; text-transform: uppercase; color: #171A2E; }
.expand { margin: 24px 4px 0 0; font: 300 clamp(22px, 2.9vw, 46px)/1.1 var(--display); letter-spacing: -0.035em; color: var(--ink-2); }
.expand b { color: var(--peri); font-weight: 600; }

.toolbar { display: flex; gap: 6px; margin-top: 18px; }
.tool { width: 34px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); border-radius: 8px; }
.tool:hover { background: var(--chip); }
.tool[aria-pressed="false"] { color: var(--ink-3); text-decoration: line-through; opacity: 0.55; }

.now { margin-top: 14px; }
.now > .mono { margin-left: 12px; font-size: 10px; }
.chip-link { border: 1px solid rgba(18, 21, 42, 0.14); background: rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 5px 14px; font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.chip-link:hover { border-color: var(--accent); color: var(--accent); }
.latest { margin: 16px 0 0; font-size: 10px; }
.latest button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--accent); }

/* Robot (positions and poses are driven by asbo.js). 76% of the screen height; the viewBox is 4:5 */
.robot-wrap { position: absolute; left: 46%; bottom: 1vh; height: 76vh; height: 76svh; aspect-ratio: 4 / 5; transform: translateX(-50%); z-index: 3; }
.robot-wrap .robot { height: 100%; width: auto; }

/* Entrance */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path 1.4s cubic-bezier(.76, 0, .24, 1); }
.intro.out { clip-path: inset(0 0 100% 0); }
.intro-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.intro-mark img { width: 84px; height: 84px; border-radius: 20px; animation: introPop 1.3s cubic-bezier(.22, 1, .36, 1) both; }
.intro-ring { position: absolute; inset: 0; width: 120px; height: 120px; transform: rotate(-90deg); }
.intro-ring circle { fill: none; stroke: var(--peri); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 352; stroke-dashoffset: 352; animation: ringDraw 2s cubic-bezier(.65, 0, .35, 1) forwards; }
.intro-word { margin: 6px 0 0; font: 300 30px var(--display); letter-spacing: -0.05em; animation: introUp 1.1s 0.5s cubic-bezier(.22, 1, .36, 1) both; }
.intro-count { margin: 0; color: var(--accent); }
@keyframes introPop { from { transform: scale(0.4) rotate(-12deg); opacity: 0; } }
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes introUp { from { transform: translateY(14px); opacity: 0; } }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

.js-intro .id, .js-intro .pillnav, .js-intro .brand-col > *, .js-intro .speech, .js-intro .card-now { opacity: 0; transform: translateY(26px); }
.js-intro .robot { opacity: 0; filter: blur(6px); }
.ui-in .id, .ui-in .pillnav, .ui-in .brand-col > *, .ui-in .speech, .ui-in .card-now { opacity: 1; transform: none; transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1); }
.ui-in .brand-col > :nth-child(2) { transition-delay: 0.25s; }
.ui-in .brand-col > :nth-child(3), .ui-in .speech { transition-delay: 0.5s; }
.ui-in .brand-col > :nth-child(4), .ui-in .card-now { transition-delay: 0.75s; }
.robot-in .robot { opacity: 1; filter: blur(0); transition: opacity 1.3s ease, filter 1.6s cubic-bezier(.22, 1, .36, 1); }
.robot { width: 100%; height: auto; display: block; overflow: visible; stroke: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.robot .happy { opacity: 0; transition: opacity 0.2s; }
.robot .open { transition: opacity 0.2s; }
.robot.near .happy { opacity: 1; }
.robot.near .open { opacity: 0; }
.rb-cheek { opacity: 0.35; transition: opacity 0.3s; }
.robot.near .rb-cheek { opacity: 0.8; }
.robot.talking .rb-mouth { animation: talk 0.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.rb-heart { animation: heart 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rb-orb { animation: orb 2.4s ease-in-out infinite; }
@keyframes talk { to { transform: scaleY(2.4); } }
@keyframes heart { 50% { transform: scale(1.35); } }
@keyframes orb { 50% { opacity: 0.55; } }
.paused *, .paused { animation-play-state: paused !important; }

/* Speech area, bottom left */
/* Chat card: frosted glass, kept well clear of the robot */
.speech { position: absolute; left: clamp(32px, 4vw, 56px); bottom: 13vh; width: min(372px, 26vw); z-index: 4; padding: 18px 20px 16px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 18px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(18, 21, 42, 0.25); }
.who { margin: 0 0 10px; color: var(--accent); font-size: 10px; }
.line { margin: 0 0 14px; min-height: 3.2em; font: 400 15.5px/1.6 var(--mono); color: var(--ink); }
.caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; margin-left: 2px; background: var(--accent); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { border: 1px solid rgba(18, 21, 42, 0.08); background: rgba(255, 255, 255, 0.7); padding: 7px 12px; border-radius: 999px; font: 400 12.5px var(--mono); color: rgba(18, 21, 42, 0.78); transition: border-color 0.2s, color 0.2s, transform 0.2s; }
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.hint { margin: 0; font-size: 10px; }
.hint kbd { font: inherit; border: 1px solid var(--ink-3); border-radius: 4px; padding: 0 4px; }
.hint button { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-3); text-decoration: underline; }

/* Small card, bottom right */
.card-now { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 6; display: flex; gap: 12px; align-items: center; padding: 10px 16px 10px 10px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 14px; box-shadow: 0 10px 30px -14px rgba(18, 21, 42, 0.25); }
.card-now .lang.mono { width: 44px; height: 44px; border-radius: 10px; background: var(--peri); color: #fff; display: grid; place-content: center; text-align: center; font-size: 9px; line-height: 1.4; letter-spacing: 0.08em; }
.card-now p { margin: 0; }
.card-now .mono { font-size: 9px; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.card-now .t { font: 500 13px var(--mono); }
.card-now .s { color: var(--ink-3); font-size: 9px; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.bars i { width: 2px; background: var(--accent); animation: bars 0.9s ease-in-out infinite alternate; }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 9px; animation-delay: 0.2s; } .bars i:nth-child(3) { height: 6px; animation-delay: 0.4s; }
@keyframes bars { to { transform: scaleY(0.4); } }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(236, 238, 246, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.overlay[hidden] { display: none; }
.close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--chip); font-size: 20px; line-height: 1; }

.terminal { position: relative; width: min(760px, 100%); height: min(560px, 86vh); height: min(560px, calc(var(--vvh, 100dvh) * 0.86)); display: flex; background: var(--term); color: #DDE1F2; border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(18, 21, 42, 0.6); overflow: hidden; font: 400 13.5px/1.65 var(--mono); }
.terminal .close { background: rgba(255, 255, 255, 0.08); color: #DDE1F2; }
.term-side { width: 34px; border-right: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 7px; }
.term-side i { width: 10px; height: 10px; border-radius: 50%; }
.term-side .r { background: #E0643A; } .term-side .y { background: #E8B04A; } .term-side .g { background: #3FBF8F; }
.term-side span { writing-mode: vertical-rl; margin-top: 18px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(221, 225, 242, 0.4); }
.term-side b { margin-top: auto; writing-mode: vertical-rl; font-weight: 400; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.term-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 18px 22px 14px; }
.term-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 30px; }
.term-log p, .term-log .go { margin: 0 0 6px; overflow-wrap: anywhere; }
.term-log .sys { color: var(--cyan); }
.term-log .sys span { color: #9BA6E0; }
.term-log .dim { color: rgba(221, 225, 242, 0.45); }
.term-log .q { margin-top: 14px; color: #fff; }
.term-log .q::before { content: '$ guest@asbo:~$ '; color: var(--cyan); }
.term-log .state { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 227, 248, 0.6); }
.term-log .a::before { content: '> '; color: var(--cyan); }
.term-log .go { display: inline-block; margin: 8px 0 4px; padding: 8px 14px; border: 1px solid rgba(0, 227, 248, 0.45); border-radius: 8px; background: rgba(0, 227, 248, 0.06); color: var(--cyan); font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.term-log .go:hover { background: rgba(0, 227, 248, 0.15); }
.term-input { display: flex; gap: 10px; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 12px; }
.term-input label { color: var(--cyan); white-space: nowrap; }
.term-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; caret-color: var(--cyan); }
.term-input input::placeholder { color: rgba(221, 225, 242, 0.25); }

.sheet { position: relative; width: min(1060px, 100%); max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px; padding: clamp(24px, 4vw, 44px); box-shadow: 0 40px 80px -30px rgba(18, 21, 42, 0.45); }
.sheet.narrow { width: min(760px, 100%); }
.sheet h2 { font: 800 clamp(30px, 4.4vw, 52px)/1 var(--sans); letter-spacing: -0.045em; margin: 0 0 18px; }
.sheet > p, .about p { color: var(--ink-2); max-width: 620px; }
.kicker { margin: 0 0 10px; color: var(--accent); }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 30px; margin-top: 28px; }
.projects img { border-radius: 10px; border: 1px solid rgba(18, 21, 42, 0.08); aspect-ratio: 16 / 10; object-fit: cover; object-position: top; margin-bottom: 14px; }
.projects h3 { margin: 4px 0 6px; font-size: 20px; letter-spacing: -0.02em; }
.projects p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }
.projects .meta { margin: 0; font-size: 10px; }
.projects .meta a { color: var(--accent); text-decoration: none; }
.projects .tags { font-size: 9.5px; }
.wip { color: var(--coral); }
.textonly { background: var(--bg); border-radius: 12px; padding: 22px; }
.about { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 30px; align-items: start; }
.about img { border-radius: 12px; }
.facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { background: var(--bg); border-radius: 999px; padding: 6px 12px; font-size: 10px; color: var(--ink-2); }
.facts b { color: var(--accent); font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.btn { display: inline-block; padding: 13px 20px; border-radius: 999px; background: var(--cyan); color: #12152A; font-weight: 500; text-decoration: none; }
.btn:hover { box-shadow: 0 10px 24px -10px rgba(0, 227, 248, 0.7); }
.btn.ghost { background: var(--bg); overflow-wrap: anywhere; }
.links { display: flex; gap: 18px; }
.links a { text-decoration: none; color: var(--accent); }

/* Phone and tablet */
@media (max-width: 860px) {
  .id .mono { display: none; }
  .pillnav .pill:not(.active):not([data-open="work"]) { display: none; }
  .id { position: absolute; }
  .id-logo img { width: 52px; height: 52px; }
  .brand-col { position: relative; right: auto; top: auto; align-items: flex-start; text-align: left; padding: 104px var(--gutter) 0; }
  .wordmark { font-size: clamp(60px, 21vw, 150px); }
  .expand { font-size: clamp(22px, 6.4vw, 36px); margin: 12px 0 0; }
  .now { display: none; }
  .robot-wrap { position: relative; left: auto; bottom: auto; transform: none; margin: 4px auto 0; height: auto; width: min(100vw, 60svh); }
  .robot-wrap .robot { width: 100%; height: auto; }
  .speech { position: relative; left: auto; bottom: auto; width: auto; margin: 8px var(--gutter) 28px; padding: 18px 18px 16px; }
  .line { font-size: 15px; }
  .card-now { position: relative; left: auto; right: auto; bottom: auto; margin: 0 var(--gutter) 32px; width: fit-content; }
  .projects { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about img { width: 120px; }
  .term-side { display: none; }
  .terminal { font-size: 12.5px; height: 82vh; height: calc(var(--vvh, 100dvh) * 0.82); }
  /* iOS Safari zooms into text fields under 16px when they get focus */
  .term-input input { font-size: 16px; }
  .term-input label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .intro, .fx { display: none; }
}