/* Heyben v2 — one responsive stylesheet.
   Breakpoints match the Claude Design canvas widths used for the three exports:
     base (no query)            → mobile canvas  (390 × 844)
     @media (min-width: 820px)  → tablet canvas  (820 × 1180)
     @media (min-width: 1440px) → desktop canvas (1440 × 900, Claude Design default)
   Desktop is canonical for content and section order; the other two only change sizing/spacing. */

@font-face{font-family:'PP Mondwest';src:url('fonts/PPMondwest-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'PP NeueBit';src:url('fonts/PPNeueBit-Bold.otf') format('opentype');font-weight:700;font-display:swap}

/* Single-screen page: the document itself never scrolls. This also stops iOS Safari from scrolling toward
   position:fixed elements parked off-screen (dock nodes before they pop in, the side panel, the eagle canvas). */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;background:#121212}
a{color:#FFFFFF}
a:hover{color:#FFFFFF}

@keyframes tkNoise{0%{background-position:0 0}12.5%{background-position:-46px 31px}25%{background-position:23px -59px}37.5%{background-position:-71px -12px}50%{background-position:52px 44px}62.5%{background-position:-18px 67px}75%{background-position:64px -27px}87.5%{background-position:-38px -52px}100%{background-position:0 0}}
@keyframes heroCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes liveDot{0%,100%{opacity:1}50%{opacity:0.25}}

/* ---------- Hero ---------- */
/* 100svh = the visible viewport with the mobile browser toolbar shown; 100vh stays as the fallback */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#121212 url('assets/noise-white.png') repeat;animation:tkNoise 0.5s steps(1) infinite;color:#FFFFFF;overflow:hidden}

/* ---------- Ben avatar + speech bubble (top-left) ---------- */
.ben{position:absolute;top:16px;left:16px;z-index:8}
/* animated pixel portrait: 240×288 canvas frames, shown at the old avatar height (width follows the 5:6 frame) */
.ben-avatar{display:block;height:40px;width:auto;image-rendering:pixelated;cursor:pointer}
.ben-bridge{position:absolute;left:0;top:100%;width:120px;height:22px;display:none}
.ben.is-open .ben-bridge{display:block}
.bubble{position:absolute;left:0;top:calc(100% + 20px);width:358px;max-width:calc(100vw - 32px);transition:opacity .12s steps(2,end),transform .12s steps(2,end);opacity:0;transform:translateY(-6px);pointer-events:none}
.ben.is-open .bubble{opacity:1;transform:translateY(0);pointer-events:auto}

/* pixel speech tail */
.bubble-tail{position:absolute;background:#F4F1E8}
.bubble-tail-1{left:18px;top:-18px;width:2px;height:20px}
.bubble-tail-2{left:20px;top:-12px;width:6px;height:2px}
.bubble-tail-3{left:26px;top:-6px;width:6px;height:2px}
.bubble-tail-4{left:32px;top:0;width:6px;height:2px;z-index:2}
.bubble-tail-5{left:24px;top:-10px;width:2px;height:6px}
.bubble-tail-6{left:30px;top:-4px;width:2px;height:6px}
.bubble-tail-fill{position:absolute;background:#121212;z-index:1}
.bubble-tail-fill-1{left:20px;top:-10px;width:4px;height:12px}
.bubble-tail-fill-2{left:24px;top:-4px;width:6px;height:6px}

/* pixel-rounded frame: cream outer, dark inner */
.bubble-frame{position:absolute;inset:0;background:#F4F1E8;clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px),0 12px,6px 12px,6px 6px,12px 6px)}
.bubble-frame-inner{inset:2px;background:#121212}

.bubble-body{position:relative;z-index:2;padding:20px 22px 22px;font-family:'Geist Mono',monospace;font-size:14px;line-height:1.7;color:#FFFFFF;text-wrap:pretty}
.bubble-head{display:flex;align-items:center;gap:8px;font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:24px;line-height:1.05;letter-spacing:0.01em;color:#FFFFFF}
.bubble-sub{margin-top:6px;font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:24px;line-height:1.05;letter-spacing:0.01em;color:#FFFFFF}
.bubble-rule{height:1px;background:rgba(255,255,255,0.12);margin:16px 0 14px}
.bubble-body p{margin:12px 0 0}
.bubble-body p:first-of-type{margin:0}

.tenkara-link{color:inherit;text-decoration:none;display:inline-flex}
.tenkara-link img{display:block;height:18px;opacity:1}
.logo-link{color:inherit;text-decoration:none}
.logo-link img{display:inline-block;height:16px;vertical-align:-2px;opacity:0.95}
.text-link{color:#4D79F6;text-decoration:none;border-bottom:1px dashed rgba(77,121,246,0.6)}
.text-link:hover{color:#FFFFFF;border-color:#FFFFFF}

/* hover preview cards */
.tk-logolink{position:relative;display:inline}
.tk-tip{position:absolute;left:0;bottom:calc(100% + 12px);transform:translateY(6px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:30}
.tk-logolink:hover .tk-tip{opacity:1;transform:translateY(0)}
.tk-tip-down{bottom:auto;top:calc(100% + 12px);transform:translateY(-6px)}

.tip-card{display:block;width:300px;background:#1B1B1B;border:1px solid rgba(255,255,255,0.14);border-radius:8px;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
.tip-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#242424}
.tip-dot{width:8px;height:8px;border-radius:50%}
.tip-dot-r{background:#FF5F57}
.tip-dot-y{background:#FEBC2E}
.tip-dot-g{background:#28C840}
.tip-url{margin-left:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.02em;color:#FFFFFF}
.tip-frame{display:block;position:relative;width:300px;height:188px;background:#101010}
.tip-frame iframe{width:1250px;height:784px;transform:scale(0.24);transform-origin:0 0;border:0;pointer-events:none}
.tip-video{display:block;position:relative;width:300px;height:169px;background:#101010}
.tip-video img{display:block;width:300px;height:169px;object-fit:cover}
.tip-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:48px;height:34px;background:#FF0000;border-radius:8px}
.tip-play-tri{width:0;height:0;border-left:14px solid #FFFFFF;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.tip-article{display:block;padding:18px 18px 20px;background:#101010;text-align:left}
.tip-masthead{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:700}
.tip-masthead-rs{font-style:italic;font-size:21px;letter-spacing:0.01em;color:#D32531}
.tip-masthead-ft{font-size:17px;letter-spacing:0.04em;color:#1665CF}
.tip-masthead-wwd{font-size:19px;letter-spacing:0.14em;color:#F0EDE4}
.tip-kicker{display:block;margin-top:10px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.22em;color:#FFFFFF}
.tip-headline{display:block;margin-top:8px;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:14.5px;line-height:1.35;color:#F0EDE4}
.tip-cta{display:block;margin-top:12px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.08em;color:#FFFFFF}

/* ---------- Live clock (top-right) ---------- */
.clock{position:absolute;top:16px;right:16px;height:40px;display:flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.08em;color:#FFFFFF}
.clock-dot{width:8px;height:8px;background:#4D79F6;box-shadow:0 0 8px rgba(77,121,246,0.8);animation:liveDot 1.2s steps(1) infinite}

/* ---------- Headline ---------- */
.title{margin:0;padding:0 12px;font-weight:400;font-family:'PP Mondwest',serif;font-size:40px;line-height:1.25;letter-spacing:0.02em;color:#FFFFFF;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.hey{display:inline-block;min-height:1.25em;white-space:pre}
.letter{display:inline-block;cursor:default;transition:transform .08s steps(2,end);transform:none}
.letter:hover{transform:translateY(calc(var(--up) * -1px)) rotate(calc(var(--rot) * 1deg))}
.caret{display:inline-block;width:0;margin-left:2px;font-weight:300;animation:heroCaret 0.9s steps(1) infinite}
.hey .caret{color:#FFFFFF}
.caret.is-hidden{visibility:hidden}

.paper{position:relative;display:inline-block;font-size:26px;padding:10px 26px 14px 28px;color:#F4F1E8;transform:rotate(-2deg)}
.paper-chalk{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.wiz{position:relative;display:inline-block}
.wiz-ghost{visibility:hidden}
.wiz-typed{position:absolute;left:0;top:0;white-space:pre}
.wiz .caret{color:#F4F1E8}

/* ---------- Dock (fixed bottom) ---------- */
.dock{position:fixed;left:0;right:0;bottom:16px;display:flex;align-items:flex-end;justify-content:center;z-index:5;pointer-events:none}
.dock-inner{display:flex;align-items:flex-end;pointer-events:auto;padding:28px 24px 8px}
.node{position:relative;margin:0 -12px;cursor:pointer;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.6));transition:transform .2s steps(3,end),opacity .2s steps(3,end);z-index:1;opacity:0;transform:translateY(90px) rotate(0deg) scale(1);
  /* button reset */
  background:none;border:0;padding:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.dock-inner.is-done .node{transition:transform .05s steps(1,end),opacity .2s steps(3,end)}
.node-paper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#F4F1E8 url('assets/paper.png') repeat}
.node-icon{display:block;width:34px;height:34px;image-rendering:pixelated}
.node-tex{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:0.85;background:url('assets/paper-photo-texture.avif') no-repeat;background-size:640px auto}

/* ---------- Eagle flyby canvas + hover speech bubble ---------- */
.eagle{position:fixed;left:0;top:0;width:110px;height:auto;image-rendering:pixelated;pointer-events:none;z-index:4;opacity:0}
.eagle.is-flying{pointer-events:auto;cursor:pointer}
.eagle-bubble{position:fixed;left:0;top:0;transform:translate(-50%,-100%) translateY(-22px);z-index:6;pointer-events:none;transition:opacity .12s steps(2,end);display:none}
.eagle-bubble.is-open{display:block}
.eagle-bubble-text{position:relative;z-index:2;padding:12px 18px 14px;font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:24px;line-height:1.05;letter-spacing:0.01em;color:#FFFFFF;white-space:nowrap}
/* Ben's stepped tail mirrored vertically and centered: tip at bottom-center, stepping up-right into the frame */
.eagle-tail{position:absolute;left:50%;bottom:0;width:0;height:0}
.eagle-tail-1{left:-1px;bottom:-18px;width:2px;height:20px}
.eagle-tail-2{left:1px;bottom:-12px;width:6px;height:2px}
.eagle-tail-3{left:7px;bottom:-6px;width:6px;height:2px}
.eagle-tail-4{left:13px;bottom:0;width:6px;height:2px;z-index:2}
.eagle-tail-5{left:5px;bottom:-10px;width:2px;height:6px}
.eagle-tail-6{left:11px;bottom:-4px;width:2px;height:6px}
.eagle-tail-fill-1{left:1px;bottom:-10px;width:4px;height:12px}
.eagle-tail-fill-2{left:5px;bottom:-4px;width:6px;height:6px}

/* ---------- Side panel ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,0.45);transition:opacity .3s ease;z-index:9;opacity:0;pointer-events:none}
.scrim.is-open{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;bottom:0;width:100vw;max-width:100vw;background:#171717;border-left:1px solid rgba(255,255,255,0.12);box-shadow:-24px 0 60px rgba(0,0,0,0.55);z-index:10;overflow-y:auto;transition:transform .32s cubic-bezier(.2,.8,.2,1);transform:translateX(100%)}
.panel.is-open{transform:translateX(0)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.1)}
.panel-tag{font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:18px;line-height:1;letter-spacing:0.08em;color:#FFFFFF}
.panel-close{background:none;border:none;padding:0;color:#FFFFFF;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.panel-close:hover{color:#FFFFFF}
.panel-close svg{display:block;shape-rendering:crispEdges}
.panel-body{padding:24px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:0;text-align:left}
.panel-icon{display:block;width:40px;height:40px;image-rendering:pixelated;margin-bottom:18px}
.panel-logo-wrap{display:flex;justify-content:flex-start;width:100%}
.panel-logo{display:block;width:auto;max-width:100%;margin:4px auto 2px 0;align-self:flex-start}
.panel-title{font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:32px;line-height:1.02;letter-spacing:0.03em;color:#FFFFFF}
.panel-text{margin-top:16px;font-family:'Geist Mono',monospace;font-size:13.5px;line-height:1.75;color:#FFFFFF;white-space:pre-line;max-width:100%}
.panel-rows{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.panel-row{display:flex;align-items:flex-start;gap:12px}
.panel-row img{display:block;width:16px;height:16px;image-rendering:pixelated;flex:none;margin-top:3px;filter:invert(1)}
.panel-row span{font-family:'Geist Mono',monospace;font-size:13.5px;line-height:1.6;color:#FFFFFF}
.panel-link{display:flex;width:100%;align-self:stretch;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,0.25);font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:21px;line-height:1;letter-spacing:0.06em;color:#FFFFFF;text-decoration:none;border-bottom:none;transition:color .15s ease}
.panel-link.is-first{margin-top:26px;padding-top:16px}
.panel-link:hover{color:#4D79F6;border-color:#4D79F6}

/* Whereabouts city routing: serpentine dotted S-curve, zigzag stops, pixel plane */
.route{margin-top:22px;width:100%}
.route-label{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:#FFFFFF;text-transform:uppercase}
.route-box{position:relative;margin-top:14px;width:100%}
.route-svg{position:absolute;inset:0;overflow:visible}
.route-row{position:absolute;height:46px;display:flex;align-items:center;gap:16px}
.route-dot{position:relative;z-index:1;display:block;width:10px;height:10px;flex:none;background:#3A3A3A}
.route-dot.is-visited{background:#FFFFFF}
.route-dot.is-current{background:#4D79F6}
.route-name{font-family:'PP NeueBit',sans-serif;font-weight:700;font-size:26px;line-height:1;letter-spacing:0.02em;white-space:nowrap;color:#6E6E6E}
.route-name.is-visited{color:#D0D0D0}
.route-name.is-current{color:#FFFFFF}
.route-plane{position:absolute;width:20px;height:20px;image-rendering:pixelated;filter:invert(1);z-index:2;pointer-events:none}

/* =====================================================================
   Tablet — matches the 820px canvas
   ===================================================================== */
@media (min-width: 820px){
  .ben{top:32px;left:32px}
  .ben-avatar{height:48px}
  .bubble{width:380px;max-width:calc(100vw - 64px)}

  .clock{top:32px;right:32px;height:48px;gap:10px;font-size:13px}

  .title{padding:0 24px;font-size:64px;gap:14px}
  .paper{font-size:48px;padding:12px 44px 20px 48px}

  .dock{bottom:24px}
  .node{margin:0 -10px}

  .eagle{width:150px}

  .panel{width:420px;max-width:92vw}
  .panel-head{padding:20px 28px}
  .panel-body{padding:32px 28px}
  .panel-icon{width:48px;height:48px;margin-bottom:22px}
  .panel-title{font-size:40px}
  .panel-text{max-width:371px}
}

/* =====================================================================
   Desktop — matches the 1440px canvas (canonical)
   ===================================================================== */
@media (min-width: 1440px){
  .bubble{width:420px;max-width:calc(100vw - 80px)}

  .title{font-size:96px;gap:18px}
  .paper{font-size:72px;padding:16px 56px 26px 60px}

  .eagle{width:200px}

  .panel-text{max-width:none;width:371px;height:71px}
}