/* extras.css - additions only. Uses the colors/fonts already defined in style.css. */

/* ---- profile hover crossfade ---- */
.photo img.photo-alt {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.22,.8,.3,1);
  pointer-events: none;
}
@media (hover: hover) {
  .photo:hover img.photo-alt { opacity: 1; transform: scale(1); }
}
.photo.is-alt img.photo-alt { opacity: 1; transform: scale(1); }

/* ---- notifications ---- */
.notif { position: fixed; z-index: 20;
  top: calc(max(6px, env(safe-area-inset-top)) + 20px);
  right: calc(max(8px, env(safe-area-inset-right)) + 72px); }
.notif-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); opacity: .35;
  transition: opacity .4s ease, color .4s ease, filter .4s ease; }
.notif-btn svg { width: 18px; height: 18px; fill: currentColor; }
.notif-btn:hover, .notif-btn:focus-visible, .notif-btn[aria-expanded="true"] {
  opacity: .95; color: var(--burnt); filter: drop-shadow(0 0 8px rgba(196,104,58,.45)); outline: none; }
.notif-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--burnt); box-shadow: 0 0 8px var(--burnt); }
.notif-dot[hidden] { display: none; }
.notif-panel { position: absolute; top: 46px; right: -60px; width: min(340px, calc(100vw - 24px));
  max-height: min(70vh, 460px); overflow-y: auto; padding: 14px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 0 28px rgba(154,43,47,.18), 0 14px 40px rgba(0,0,0,.6);
  font-family: var(--font-mono); color: var(--text);
  animation: notifIn .25s ease both; }
.notif-panel[hidden] { display: none; }
.notif-item + .notif-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.notif-date { color: var(--gold); font-size: 10px; letter-spacing: .12em; }
.notif-title { margin: 4px 0; font: 700 12px/1.3 var(--font-head); letter-spacing: .06em; color: var(--text); }
.notif-text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.notif-commit { margin-top: 6px; font-size: 10px; color: var(--burnt); opacity: .8; }
.notif-empty { margin: 0; font-size: 12px; color: var(--muted); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .notif { right: calc(max(8px, env(safe-area-inset-right)) + 66px); }
  .notif-panel { right: -52px; }
}

/* ---- kaboom ---- */
.kb-flash { position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,226,160,.95), rgba(196,104,58,.55) 35%, rgba(154,43,47,.25) 60%, transparent 75%);
  animation: kbFlash .6s ease-out forwards; }
@keyframes kbFlash { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* ---- 404 ---- */
.nf { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px; padding: 24px; text-align: center;
  position: relative; z-index: 1; }
.nf h1 { margin: 0; line-height: 1.5; }
.nf .more-btn { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .notif-panel, .kb-flash { animation: none; }
  .photo img.photo-alt { transition: opacity .3s ease; transform: none; }
}