/* About Hannan page. Transform/opacity animations only, all paused with reduced motion. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/caveat-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Hero ---------- */
.ab-hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - 70px); display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; text-align: center; padding-top: 28px; padding-bottom: 28px; }
.ab-grain { position: absolute; inset: -60px; z-index: -1; background: url('/assets/grain-dark.png') repeat; opacity: .9; pointer-events: none; }
.ab-hero[data-theme="light"] .ab-grain { background-image: url('/assets/grain-light.png'); }
.ab-tag { justify-self: start; font-size: var(--step-small); font-weight: 600; color: var(--soft-dark); }
.ab-hero[data-theme="light"] .ab-tag, .ab-hero[data-theme="light"] .ab-intro { color: var(--soft-light); }

.ab-stage { position: relative; width: min(440px, 78vw); aspect-ratio: 1; align-self: center; margin: 12px 0; }
.ab-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05); }

.ab-stickers { position: absolute; inset: -10%; display: block; pointer-events: none; }
.stk { position: absolute; display: inline-block; padding: 8px 14px; font: 800 clamp(.85rem, .7rem + .5vw, 1.1rem)/1 "Figtree", sans-serif; white-space: nowrap; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--paper); color: var(--ink); }
.stk:nth-child(3n+1) { background: var(--lime); }
.stk:nth-child(3n+2) { background: #111111; color: var(--paper); border-color: var(--paper); box-shadow: 3px 3px 0 var(--lime); }
.stk-1 { left: 2%; top: 18%; --r: -10deg; } .stk-2 { right: 0; top: 10%; --r: 8deg; } .stk-3 { right: -6%; top: 46%; --r: -6deg; }
.stk-4 { left: -8%; top: 52%; --r: 7deg; } .stk-5 { left: 10%; bottom: 6%; --r: -4deg; } .stk-6 { right: 6%; bottom: 10%; --r: 10deg; }
.stk-7 { left: 40%; top: -2%; --r: 4deg; } .stk-8 { right: -4%; top: 76%; --r: -8deg; }
.stk { transform: rotate(var(--r)); }

.ab-title { font: 700 clamp(3.5rem, 2rem + 8vw, 9rem)/.9 "Caveat", cursive; letter-spacing: 0; margin-top: 8px; }
.ab-title .ch { display: inline-block; }
.ab-intro { max-width: 52ch; margin-top: 14px; font-size: var(--step-lead); line-height: 1.45; color: var(--soft-dark); }
.ab-scroll { margin-top: 26px; font-size: var(--step-small); font-weight: 700; text-decoration: none; position: relative; padding-bottom: 28px; }
.ab-scroll::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 20px; background: currentColor; transform-origin: top; }

/* ---------- Story ---------- */
.ab-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ab-clock { position: sticky; top: 110px; }
.ab-clock-label { font-size: var(--step-small); font-weight: 700; color: var(--soft-dark); }
.ab-story[data-theme="light"] .ab-clock-label, .ab-story[data-theme="light"] .ab-ch p { color: var(--soft-light); }
.ab-clock-time { font: 900 clamp(3.5rem, 2rem + 6vw, 8rem)/.9 "Epilogue", sans-serif; letter-spacing: -0.05em; margin: 4px 0 28px; font-variant-numeric: tabular-nums; }
.ab-clock-you { font: 700 clamp(2rem, 1.2rem + 3vw, 3.5rem)/1 "Caveat", cursive; color: var(--lime); min-height: 1em; }
.ab-story[data-theme="light"] .ab-clock-you { color: var(--ink); }
.ab-h2 { font-size: var(--step-head); margin-bottom: 28px; }
.ab-h2-gap { margin-top: clamp(48px, 6vw, 80px); }
.ab-ch { padding: clamp(28px, 5vh, 56px) 0; border-top: 1px solid rgba(128,128,128,.3); opacity: .72; transition: opacity 400ms ease; }
.ab-ch.on { opacity: 1; }
.ab-ch-hour { font: 700 1.6rem/1 "Caveat", cursive; color: var(--lime); margin-bottom: 8px; }
.ab-story[data-theme="light"] .ab-ch-hour { color: var(--ink); }
.ab-ch h3 { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); letter-spacing: -0.03em; }
.ab-ch p { margin-top: 10px; max-width: 46ch; color: var(--soft-dark); font-size: var(--step-lead); line-height: 1.45; }

/* ---------- Facts ---------- */
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ab-card { padding: clamp(22px, 2.6vw, 32px); background: var(--grey); color: var(--ink); }
.ab-facts[data-theme="dark"] .ab-card { background: #1e1e1c; color: var(--paper); }
.ab-card h3 { font-size: clamp(1.5rem, 1rem + 1vw, 2rem); letter-spacing: -0.03em; margin-bottom: 10px; }
.ab-card a { font-weight: 700; }
.ab-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ab-rules li { padding: 16px 0; border-top: 1px solid rgba(128,128,128,.3); font-size: var(--step-lead); }
.ab-rules b { display: block; }
.ab-socials { margin-top: 28px; }

/* ---------- CTA ---------- */
.ab-cta { text-align: center; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.ab-cta-title { font: 700 clamp(4rem, 2rem + 9vw, 10rem)/.85 "Caveat", cursive; letter-spacing: 0; }
.ab-cta p { margin: 16px auto 0; max-width: 40ch; font-size: var(--step-lead); }
.ab-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* living grain: a few jittery steps, composited */
  .ab-grain { animation: grain 0.9s steps(5) infinite; will-change: transform; }
  @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); } 60% { transform: translate(-12px, 30px); } 80% { transform: translate(26px, 8px); } }
  /* title writes itself in, letter by letter */
  .js .ab-title .ch { opacity: 0; transform: translateY(40%) rotate(-8deg); animation: write 600ms cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
  @keyframes write { to { opacity: 1; transform: none; } }
  .js .ab-intro, .js .ab-scroll { animation: ab-fade 700ms ease 1.2s both; }
  @keyframes ab-fade { from { opacity: 0; transform: translateY(12px); } }
  /* stage pops in, ring turns slowly, sun breathes */
  .js .ab-stage { animation: ab-pop 900ms cubic-bezier(.34,1.56,.64,1) 100ms both; }
  @keyframes ab-pop { from { opacity: 0; transform: scale(.85); } }
  @keyframes ab-spin { to { transform: rotate(360deg); } }
  @keyframes ab-breathe { 50% { transform: scale(1.05); } }
  /* stickers slap on, then float */
  .js .stk { animation: stick 500ms cubic-bezier(.34,1.56,.64,1) both, bob var(--d, 6s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * 90ms + 500ms), calc(var(--i, 0) * -0.7s); }
  @keyframes stick { from { opacity: 0; transform: scale(1.8) rotate(calc(var(--r) * 3)); } to { opacity: 1; transform: rotate(var(--r)); } }
  @keyframes bob { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-10px); } }
  .stk:nth-child(2n) { --d: 7.5s; } .stk:nth-child(3n) { --d: 5.2s; }
  .ab-scroll::after { animation: drip 1.6s ease-in-out infinite; }
  @keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
  .ab-clock-time, .ab-clock-you { transition: opacity 250ms; }
  .ab-clock.swap .ab-clock-time, .ab-clock.swap .ab-clock-you { opacity: 0; }
  .js .ab-card, .js .ab-rules li { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
  .js .is-in .ab-card, .js .is-in .ab-rules li { opacity: 1; transform: none; }
  .js .is-in .ab-card:nth-child(2) { transition-delay: 80ms; } .js .is-in .ab-card:nth-child(3) { transition-delay: 160ms; }
  .js .ab-cta-title .ch { display: inline-block; }
}
.about-page .is-paused *, .about-page .is-paused { animation-play-state: paused !important; }

@media (max-width: 900px) {
  .ab-story { grid-template-columns: 1fr; }
  .ab-clock { position: sticky; top: 64px; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; padding: 12px 0; background: inherit; }
  .ab-clock-time { font-size: 2.25rem; margin: 0; }
  .ab-clock-you { font-size: 1.75rem; }
  .ab-grid, .ab-rules { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ab-stage { margin-top: 36px; }
  .stk-8 { right: -2%; top: 72%; }
  .stk { padding: 6px 10px; }
  .stk-3 { right: -2%; } .stk-4 { left: -2%; }
}

/* ---------- Interactive moon / sun ---------- */
.ab-stage { --lx: .55; --ly: -.35; --tx: 0deg; --ty: 0deg; }
.ab-orb { position: absolute; inset: 4%; display: block; padding: 0; border: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; }
.ab-orb:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
.ab-ring-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-ring-text text { font: 800 15.5px "Epilogue", sans-serif; letter-spacing: .14em; fill: currentColor; }
.ab-tilt { position: absolute; inset: 17%; display: block; transform: perspective(700px) rotateX(var(--ty)) rotateY(var(--tx)); transition: transform 500ms cubic-bezier(.16,1,.3,1); }
.ab-sun { position: absolute; inset: 0; display: block; border-radius: 50%; background: var(--lime); overflow: hidden; transition: transform 300ms cubic-bezier(.34,1.56,.64,1); }
.ab-orb:hover .ab-sun { transform: scale(1.04); }
.ab-orb:active .ab-sun { transform: scale(.96); }
/* The shadow sits opposite the "light" (your cursor), so the lit side always faces the mouse. */
.ab-shade { position: absolute; inset: -2%; border-radius: 50%; background: #111111; opacity: 0; transform: translate(calc(var(--lx) * -62%), calc(var(--ly) * -62%)); transition: transform 450ms cubic-bezier(.16,1,.3,1), opacity 400ms; }
.ab-hero[data-theme="dark"] .ab-shade { opacity: 1; }
.ab-hint { margin-top: 6px; font-size: var(--step-small); font-weight: 600; color: var(--soft-dark); }
.ab-hero[data-theme="light"] .ab-hint { color: var(--soft-light); }
.ab-hint-touch { display: none; }
@media (hover: none) { .ab-hint-mouse { display: none; } .ab-hint-touch { display: inline; } }
.ab-stickers { transform: translate(var(--sx, 0px), var(--sy, 0px)); transition: transform 600ms cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion: no-preference) {
  .ab-ring-text { animation: ab-spin 40s linear infinite; }
  .ab-orb:hover .ab-ring-text { animation-duration: 12s; }
  @keyframes ab-spin { to { transform: rotate(360deg); } }
}

/* ---------- Blast box: every build flies out ---------- */
.ab-blast { margin-top: 8px; padding: clamp(24px, 3vw, 40px); background: #1e1e1c; color: var(--paper); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.ab-facts[data-theme="light"] .ab-blast { background: var(--grey); color: var(--ink); }
.ab-blast-title { font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem); letter-spacing: -0.03em; }
.ab-box { position: relative; width: 168px; height: 150px; border: 0; background: none; cursor: pointer; color: var(--ink); font: 900 1.25rem/1 "Epilogue", sans-serif; }
.ab-box-body { position: absolute; left: 0; right: 0; bottom: 22px; height: 96px; display: grid; place-items: center; background: var(--lime); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--paper); }
.ab-box-lid { position: absolute; left: -8px; right: -8px; top: 18px; height: 26px; background: var(--lime); border: 3px solid var(--ink); transform-origin: 0 100%; transition: transform 500ms cubic-bezier(.34,1.56,.64,1); }
.ab-box-cta { position: absolute; left: 0; right: 0; bottom: 0; font: 700 .8125rem/1 "Figtree", sans-serif; color: var(--lime); }
.ab-facts[data-theme="light"] .ab-box-cta { color: var(--ink); }
.ab-box:hover .ab-box-lid { transform: rotate(-12deg) translateY(-6px); }
.ab-box:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
.ab-gigs { grid-column: 1 / -1; display: none; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ab-gig { display: inline-block; padding: 8px 12px; font: 700 .875rem/1.2 "Figtree", sans-serif; text-decoration: none; border: 2px solid currentColor; color: inherit; }
.ab-gig-bots { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.ab-gig-software { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.ab-gig:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 3px 3px 0 var(--lime); }
.ab-blast-say { grid-column: 1 / -1; display: none; font-size: 1.125rem; }
.ab-blast-say a { font-weight: 800; color: inherit; }
.ab-blast.open .ab-gigs { display: flex; }
.ab-blast.open .ab-blast-say { display: block; }
.ab-blast.open .ab-box-lid { transform: translateY(-60px) rotate(-25deg); opacity: 0; transition: transform 500ms ease-out, opacity 500ms; }
.ab-blast.open .ab-box-cta { visibility: hidden; }
.ab-blast.open .ab-box { animation: ab-shake 400ms; }
@keyframes ab-shake { 25% { transform: rotate(-6deg) scale(1.08); } 50% { transform: rotate(5deg) scale(.95); } 75% { transform: rotate(-3deg) scale(1.04); } }
.ab-gigs li { position: relative; will-change: transform; }
.ab-gigs.physics { padding-bottom: 40px; }
.ab-gigs.physics li { z-index: 3; }
.lg { position: absolute; top: 100%; width: 6px; height: 0; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.lg-l { left: 32%; } .lg-r { right: 32%; }
.legs .lg { opacity: 1; }
.lg i { position: absolute; left: 0; top: -2px; width: 6px; height: 11px; background: var(--ink); border: 1.5px solid var(--lime); border-radius: 3px; transform-origin: 50% 2px; }
.lg b { position: absolute; left: -1.5px; top: 8px; width: 6px; height: 11px; background: var(--ink); border: 1.5px solid var(--lime); border-radius: 3px; transform-origin: 50% 2px; }
.lg b::after { content: ""; position: absolute; left: -2px; bottom: -5px; width: 11px; height: 6px; background: var(--lime); border-radius: 6px 6px 2px 2px; }
.face-left .lg b::after { left: -5px; }
.walking .lg-l i { animation: ab-thigh 320ms ease-in-out infinite alternate; }
.walking .lg-r i { animation: ab-thigh 320ms ease-in-out infinite alternate-reverse; }
.walking .lg-l b { animation: ab-shin 320ms ease-in-out infinite alternate; }
.walking .lg-r b { animation: ab-shin 320ms ease-in-out infinite alternate-reverse; }
.face-left .lg { scale: -1 1; }
@keyframes ab-thigh { from { rotate: 30deg; } to { rotate: -30deg; } }
@keyframes ab-shin { 0% { rotate: -5deg; } 50% { rotate: -45deg; } 100% { rotate: 0deg; } }
.ab-gigs li.walking .ab-gig { animation: ab-bob 260ms ease-in-out infinite alternate; }
@keyframes ab-leg { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }
@keyframes ab-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.ab-blast.open .ab-blast-say { animation: ab-fly-say 600ms 3.5s both; }
@keyframes ab-fly-say { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ab-blast.open .ab-blast-say { animation: none; } }
.ab-blast.open .ab-box-body { animation: ab-boom 500ms forwards; }
@keyframes ab-boom { 40% { transform: scale(1.25); box-shadow: 0 0 0 30px rgba(220,245,34,.35); } 100% { transform: scale(1); } }
@media (max-width: 640px) { .ab-blast { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Scroll scenes ---------- */
.ab-hero { overflow: clip; }
.ab-pin { display: contents; }
.scenes .ab-hero { display: block; height: 145svh; padding: 0; }
.scenes .ab-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: center; padding: 90px var(--m) 28px; overflow: visible; }
.scenes .ab-stage { scale: calc(1 + var(--p, 0) * .3); translate: 0 calc(var(--p, 0) * 8vh); z-index: 0; }
.scenes .ab-title, .scenes .ab-hint, .scenes .ab-intro, .scenes .ab-tag, .scenes .ab-scroll { position: relative; z-index: 1; opacity: clamp(0, calc(1 - var(--p, 0) * 1.8), 1); translate: 0 calc(var(--p, 0) * -8vh); }

.ab-works { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.ab-track { display: grid; gap: 8px; }
.ab-num { font: 900 .875rem/1 "Epilogue", sans-serif; color: var(--lime); letter-spacing: .1em; margin-bottom: 14px; }
.ab-works .ab-card { background: #1e1e1c; color: var(--paper); }
.ab-works[data-theme="light"] .ab-card { background: var(--grey); color: var(--ink); }
.ab-works[data-theme="light"] .ab-num { color: var(--ink); }
.ab-works-bar { display: none; }
.scenes .ab-works { height: calc(100svh + var(--dist, 0px)); padding: 0 var(--m); }
.scenes .ab-works-pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 80px 0 40px; }
.scenes .ab-track { display: flex; gap: 0; width: max-content; translate: calc(var(--p, 0) * var(--dist, 0px) * -1) 0; }
.scenes .ab-works .ab-card { width: min(62vw, 820px); min-height: 52svh; padding: clamp(32px, 4vw, 56px); border-left: 1px solid rgba(255,255,255,.12); background: transparent; display: flex; flex-direction: column; }
.scenes .ab-works[data-theme="light"] .ab-card { border-color: rgba(0,0,0,.14); }
.scenes .ab-works .ab-card h3 { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); margin-bottom: 20px; }
.scenes .ab-works .ab-card p:not(.ab-num) { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); max-width: 32ch; }
.scenes .ab-works-bar { display: block; width: 180px; height: 3px; background: rgba(255,255,255,.15); align-self: center; }
.scenes .ab-works[data-theme="light"] .ab-works-bar { background: rgba(0,0,0,.15); }
.ab-works-bar span { display: block; height: 100%; width: 100%; background: var(--lime); transform-origin: left; scale: var(--p, 0) 1; }
.ab-works[data-theme="light"] .ab-works-bar span { background: var(--ink); }

.js .ab-works .ab-card { opacity: 1; transform: none; }
.ab-pin .ab-stage { animation-play-state: running !important; }

.scenes .ab-stage, .scenes .ab-stickers, .scenes .ab-tilt { overflow: visible; }