/* GIGACHAD mode: a cinematic monochrome detour through the clubhouse. */
body.chad-mode { background:#090909; --accent-primary:#fff; --accent-hover:#d9d9d9; --text-primary:#f5f5f2; --bg-secondary:#171717; --border-color:#444; }
body.chad-mode::before { background:radial-gradient(ellipse at 75% 10%,#ffffff0d,transparent 65%); }
.chad-mode .site-header, .chad-mode nav, .chad-mode footer, .chad-mode #ambient-background, .chad-mode #bonk-character { filter:grayscale(1); }
.chad-mode nav .tab.active { background:#eee; color:#090909; border-color:#eee; }
#donate { position:relative; background:#111; border-color:#444; }
.chad-hero { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:stretch; overflow:hidden; border:1px solid #444; background:radial-gradient(ellipse at 15% 50%,#242424,transparent 65%),#0b0b0b; color:#f4f4f1; }
.chad-portrait { position:relative; grid-column:2; grid-row:1; min-width:0; min-height:320px; overflow:hidden; container-type:size; background:radial-gradient(ellipse,#333,#0b0b0b 75%); }
.chad-portrait img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(1); }
.chad-portrait::before { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,#0b0b0b,transparent 14%),linear-gradient(0deg,#000b,transparent 25%,transparent 85%,#0008); }
.chad-frame { position:absolute; z-index:2; inset:14px; pointer-events:none; background:linear-gradient(#ffffff80,#ffffff80) left top / 26px 1px no-repeat,linear-gradient(#ffffff80,#ffffff80) left top / 1px 26px no-repeat,linear-gradient(#ffffff80,#ffffff80) right bottom / 26px 1px no-repeat,linear-gradient(#ffffff80,#ffffff80) right bottom / 1px 26px no-repeat; }
.chad-frame > span { position:absolute; top:8px; left:10px; font:9px ui-monospace,monospace; letter-spacing:2px; color:#eee; text-shadow:0 1px 5px #000; }
.chad-shots { position:absolute; left:10px; bottom:22px; display:grid; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:2px; color:#fff; text-shadow:0 1px 6px #000; }
.chad-shots span { grid-area:1 / 1; }
.chad-shots .chad-shot-ailice { opacity:0; }
.chad-timeline { position:absolute; left:10px; right:10px; bottom:10px; height:2px; background:#ffffff30; overflow:hidden; }
.chad-timeline::after { content:''; display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.chad-copy { grid-column:1; grid-row:1; position:relative; z-index:1; min-width:0; align-self:center; padding:26px 30px; }
#donate .chad-copy .eyebrow { display:flex; gap:10px; align-items:center; color:#bfbfbf; font:700 10px/1.6 ui-monospace,monospace; letter-spacing:1.5px; }
.chad-status { flex-shrink:0; width:6px; height:6px; border-radius:50%; background:#f5f5f5; box-shadow:0 0 14px #fff8; }
#donate .chad-copy h2 { color:#f5f5f2; font:900 clamp(58px,6.8vw,88px)/.85 Impact,'Arial Narrow',sans-serif; letter-spacing:-3px; margin:18px 0 16px; border:0; padding:0; text-transform:uppercase; }
.chad-copy h2 > span { display:block; color:transparent; -webkit-text-stroke:1px #fff; }
#donate .chad-copy > p { max-width:320px; margin:0; color:#c6c6c6; font-size:15px; line-height:1.55; }
.chad-copy > p strong { color:white; }
.chad-donate { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:48px; margin-top:20px; padding:10px 20px; border:1px solid #eee; background:#eee; color:#111; text-decoration:none; font:800 15px/1.5 ui-monospace,monospace; }
.chad-donate:hover { background:#fff; border-color:#fff; box-shadow:0 0 24px #ffffff20; }
.chad-seal { position:absolute; z-index:2; bottom:36px; right:24px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; width:80px; height:80px; border:1px solid #bcbcbc; border-radius:50%; outline:1px dashed #888; outline-offset:-5px; transform:rotate(-12deg); background:#1118; color:#eee; font:700 8px/1.3 ui-monospace,monospace; letter-spacing:1px; pointer-events:none; }
.chad-seal svg { width:23px; height:23px; fill:currentColor; }
.chad-seal::after { content:'✦'; position:absolute; right:-10px; top:0; font-size:19px; }
.chad-caption { grid-column:1 / -1; padding:10px 20px; border-top:1px solid #333; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font:9px/1.6 ui-monospace,monospace; letter-spacing:1.5px; color:#bfbfbf; }
.chad-caption strong { color:white; font-size:10px; }
.chad-ticker { grid-column:1 / -1; height:28px; overflow:hidden; display:flex; border-top:1px solid #555; background:#eee; color:#101010; white-space:nowrap; }
.chad-ticker > span { flex-shrink:0; display:block; min-width:100%; padding:7px 15px; text-align:center; font:800 10px/1.2 ui-monospace,monospace; letter-spacing:3px; }
.chad-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 0 20px; }
#donate .chad-tools p { margin:0; color:#aaa; font:10px/1.6 ui-monospace,monospace; letter-spacing:.5px; }
.chad-controls { display:flex; flex-wrap:wrap; gap:8px; }
.chad-controls button { background:transparent; color:#eee; border:1px solid #555; padding:10px 12px; font:700 10px ui-monospace,monospace; letter-spacing:.5px; min-height:44px; cursor:pointer; }
.chad-controls button:hover { background:#eee; color:#111; }
.chad-controls button[aria-pressed="true"] { border-color:#ddd; }
.chad-mode .support-card { position:relative; overflow:hidden; background:#141414; border-color:#444; border-radius:0; color:#f5f5f5; }
.chad-mode .support-card .eyebrow, .chad-mode .support-card p { color:#b9b9b9; }
.chad-mode .support-card h3, .chad-mode .support-action { color:#fff; }
.chad-mode .support-action { border-color:#444; }
.chad-mode .support-card:hover { background:#1e1e1e; border-color:#ddd; }
.support-art { display:grid; place-items:center; width:76px; height:76px; margin-top:28px; border:1px solid #454545; border-radius:50%; background:radial-gradient(circle,#ffffff12,transparent 75%); color:#eee; }
.support-art svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.chad-mode .support-foot, .chad-mode .support-foot > div { border-color:#444; }
.chad-mode .support-foot p, .chad-mode .support-foot strong, .chad-mode .support-foot .eyebrow { color:#ddd; }
.chad-mode .outline-button { color:#eee; border-color:#777; }
/* Aim each face at the viewport center and clamp travel to the image edges.
   Container height keeps the same framing through desktop and phone crops. */
@keyframes chad-camera {
  0% { transform:translate3d(0,clamp(calc(100cqh - 108%),calc(47cqh - 23.76%),0px),0) scale(1.08); animation-timing-function:linear; }
  34% { transform:translate3d(0,clamp(calc(100cqh - 114%),calc(44cqh - 25.08%),0px),0) scale(1.14); animation-timing-function:cubic-bezier(.76,0,.24,1); }
  40% { transform:translate3d(0,clamp(calc(100cqh - 110%),calc(50cqh - 77%),0px),0) scale(1.10); animation-timing-function:linear; }
  88% { transform:translate3d(0,clamp(calc(100cqh - 118%),calc(47cqh - 82.6%),0px),0) scale(1.18); animation-timing-function:cubic-bezier(.76,0,.24,1); }
  96%,100% { transform:translate3d(0,clamp(calc(100cqh - 108%),calc(47cqh - 23.76%),0px),0) scale(1.08); }
}
@keyframes chad-focus { 0%,34%,40%,88%,96%,100% { filter:grayscale(1) blur(0); } 37%,92% { filter:grayscale(1) blur(2px); } }
@keyframes chad-shot { 0%,35%,96%,100% { opacity:1; } 39%,92% { opacity:0; } }
@keyframes ailice-shot { 0%,35%,96%,100% { opacity:0; } 40%,88% { opacity:1; } }
@keyframes chad-progress { to { transform:scaleX(1); } }
@keyframes chad-title { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes chad-stamp { from { opacity:0; transform:scale(1.5) rotate(8deg); } to { opacity:1; transform:scale(1) rotate(-12deg); } }
@keyframes chad-ticker { to { transform:translateX(-100%); } }
@keyframes chad-breathe { 0%,100% { opacity:.3; } 50% { opacity:.8; } }
@media (prefers-reduced-motion:no-preference) {
  .chad-enter .chad-portrait img { inset:0 auto auto 0; height:auto; aspect-ratio:3 / 4; transform-origin:62% 0; will-change:transform; animation:chad-camera 16s linear infinite, chad-focus 16s linear infinite; }
  .chad-enter .chad-shot-chad { animation:chad-shot 16s linear infinite; }
  .chad-enter .chad-shot-ailice { animation:ailice-shot 16s linear infinite; }
  .chad-enter .chad-timeline::after { animation:chad-progress 16s linear infinite; }
  .chad-enter .chad-ticker > span { animation:chad-ticker 24s linear infinite; }
  .chad-enter .chad-status { animation:chad-breathe 3s ease-in-out infinite; }
  .chad-enter .chad-copy h2 { animation:chad-title .9s .12s cubic-bezier(.16,1,.3,1) both; }
  .chad-enter .chad-seal { animation:chad-stamp .5s .65s cubic-bezier(.16,1,.3,1) both; }
  .chad-mode .support-art { transition:transform .25s, border-color .25s; }
  .chad-mode .support-card:hover .support-art { transform:rotate(-8deg); border-color:#ddd; }
}
#donate:is(.chad-paused,.chad-suspended) .chad-hero *,
#donate:is(.chad-paused,.chad-suspended) .chad-hero *::after { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  #chad-camera-toggle, .chad-shots, .chad-timeline { display:none; }
}
@media (max-width:1000px) and (min-width:761px) {
  .chad-copy { padding:24px 20px; }
  #donate .chad-copy h2 { font-size:64px; }
  #donate .chad-copy > p { font-size:14px; }
  .support-art { grid-column:1; grid-row:2; margin:10px 0; }
  .chad-mode .support-card p { grid-row:1 / 4; }
}
@media (max-width:760px) {
  #donate { padding:16px; }
  .chad-hero { grid-template-columns:minmax(0,1fr); }
  .chad-portrait { grid-column:1; grid-row:2; height:clamp(160px,45vw,240px); min-height:0; border-top:1px solid #333; }
  .chad-portrait::before { background:linear-gradient(0deg,#000b,transparent 30%,transparent 80%,#0008); }
  .chad-copy { grid-column:1; grid-row:1; padding:20px; }
  #donate .chad-copy h2 { font-size:clamp(40px,11vw,66px); letter-spacing:-2px; margin:14px 0 12px; }
  .chad-copy h2 > span { display:inline; }
  #donate .chad-copy .eyebrow { letter-spacing:1px; font-size:9px; }
  #donate .chad-copy > p { max-width:420px; font-size:14px; }
  .chad-donate { min-height:44px; margin-top:16px; font-size:14px; }
  .chad-seal { width:66px; height:66px; bottom:34px; right:24px; font-size:6px; }
  .chad-seal svg { width:20px; height:20px; }
  .chad-caption { padding:10px 14px; font-size:8px; letter-spacing:1px; }
  .chad-caption strong { font-size:9px; }
  .chad-ticker > span { letter-spacing:1px; font-size:9px; padding-left:8px; padding-right:8px; }
  .chad-tools { align-items:flex-start; }
  .support-art { grid-column:1; grid-row:2; margin:10px 0; }
  .chad-mode .support-card p { grid-row:1 / 4; }
}
@media (max-width:580px) {
  .chad-mode .support-art { margin:24px 0 0; }
}
