/* ============================================================
   CodePossum — the "pizazz" layer (20 Sep 2026)
   Aurora drift · 3D hero · living art · liquid moments ·
   scroll inertia · kinetic variable type.
   All progressive: unsupported engines and reduced-motion
   visitors get the calm version. Nothing here loads or stores.
   ============================================================ */

/* ---------- Aurora drift (ambient, pure CSS) ---------- */
@keyframes auroraDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.5deg) scale(1); }
  50%  { transform: translate3d(2.5%, 2%, 0) rotate(2.5deg) scale(1.07); }
  100% { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.5deg) scale(1); }
}
@keyframes orbFloat {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  100% { transform: translate3d(9%, 7%, 0) scale(1.18); }
}
.hero-bg::after { animation: auroraDrift 38s ease-in-out infinite; transform-origin: 62% 38%; }
.aurora { position: absolute; inset: -14%; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; }
.aurora i:nth-child(1) {
  width: 44%; aspect-ratio: 1; left: 3%; top: -8%;
  background: radial-gradient(circle at 35% 35%, rgba(4, 117, 254, .34), rgba(4, 117, 254, 0) 70%);
  animation: orbFloat 34s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 36%; aspect-ratio: 1; right: 5%; bottom: -12%;
  background: radial-gradient(circle at 60% 40%, rgba(88, 158, 255, .32), rgba(88, 158, 255, 0) 72%);
  animation: orbFloat 46s ease-in-out -10s infinite alternate-reverse;
}

/* navy bands get a slow wash of their own */
.section--navy { position: relative; overflow: clip; }
.section--navy::after {
  content: "";
  position: absolute; inset: -35%;
  background:
    radial-gradient(560px 480px at 26% 30%, rgba(4, 117, 254, .32), transparent 70%),
    radial-gradient(640px 520px at 78% 72%, rgba(80, 150, 255, .24), transparent 72%);
  animation: auroraDrift 42s ease-in-out infinite;
  pointer-events: none;
}
.section--navy > .container { position: relative; z-index: 1; }

/* ---------- Hero as a 3D still-frame ---------- */
.hero-art { perspective: 1500px; }
.hero-art-scene { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.chip-layer { position: absolute; inset: 0; transform: translateZ(70px); transform-style: preserve-3d; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-art { animation: sda-hero3d linear both; animation-timeline: view(); animation-range: entry -18% cover 46%; }
  }
}
@keyframes sda-hero3d { from { transform: rotateX(7deg) translateY(30px); } to { transform: none; } }

/* ---------- Living art ---------- */
.frame-glow {
  position: absolute; inset: -14%; z-index: -1; border-radius: 44px;
  background: radial-gradient(58% 55% at 50% 45%, rgba(4, 117, 254, .22), rgba(4, 117, 254, 0) 72%);
  filter: blur(22px);
  animation: glowPulse 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.art-card img, .cta-art img { filter: saturate(.76) contrast(1.02); transition: filter .55s var(--ease); }
.art-card:hover img, .art-card:focus-within img, .cta-art:hover img { filter: saturate(1) contrast(1.02); }
.addr-caret {
  display: inline-block; width: 2px; height: 1.02em; margin-left: 3px; vertical-align: -.14em;
  background: var(--blue-text);
  animation: caretBlink 1.15s steps(1) infinite;
}
@keyframes caretBlink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }

/* ---------- Liquid moments ---------- */
.btn--secondary:active { transform: translateY(1px) scale(.97); }
.cta-art.is-wobble img { animation: wobble .55s ease-in-out; }
@keyframes wobble {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-2.6deg) scale(1.02); }
  55% { transform: rotate(2.2deg) scale(1.012); }
  80% { transform: rotate(-1deg) scale(1.004); }
}

/* ---------- Scroll inertia (velocity skew + stretch) ---------- */
main .inertia { transform: skewY(var(--skew, 0deg)) scaleY(var(--stretch, 1)); transform-origin: 50% 50%; }

/* ---------- Kinetic type (variable-font weight) ---------- */
.main-nav a:hover, .main-nav a:focus-visible { font-variation-settings: 'wght' 880; }
.btn:hover, .btn:focus-visible { font-variation-settings: 'wght' 890; }
h1.display { font-variation-settings: 'wght' 890; }

/* ---------- Reduced motion: everything here goes calm ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::after, .aurora i, .section--navy::after { animation: none; }
  .frame-glow { animation: none; }
  .addr-caret { animation: none; }
  .hero-art { animation: none; }
  main .inertia { transform: none; }
  .cta-art.is-wobble img { animation: none; }
  .art-card img, .cta-art img { transition: none; }
}

/* ============================================================
   Bento services (#9)
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bento-tile {
  position: relative; display: grid; gap: 12px; align-content: start;
  padding: clamp(22px, 2.6vw, 30px);
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-s); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.bento-tile--hero { grid-column: span 2; grid-row: span 2; }
.bento-tile h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.14rem; line-height: 1.3; }
.bento-tile p { color: var(--muted); font-size: .96rem; }
.bento-tile .link-more { margin-top: 4px; }
.bento-visual { border-radius: 16px; background: var(--mist); border: 1px solid var(--line); padding: 16px; margin-bottom: 4px; }

.mini-browser { border-radius: 10px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.mini-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: var(--mist-2); }
.mini-bar span { width: 7px; height: 7px; border-radius: 50%; background: #cddcf2; }
.mini-bar span:first-child { background: #f3b6b0; }
.mini-bar span:nth-child(2) { background: #f6d7a8; }
.mini-bar span:nth-child(3) { background: #a8e2bd; }
.mini-url { flex: 1; height: 8px; border-radius: 999px; background: #eef4fd; }
.mini-body { position: relative; padding: 14px; display: grid; gap: 9px; }
.mini-hero-line { height: 10px; border-radius: 999px; background: #dfe9f8; width: 78%; }
.mini-hero-line.short { width: 52%; }
.mini-btn { width: 76px; height: 22px; border-radius: 999px; background: var(--blue-cta); }
.mini-img { height: 56px; border-radius: 8px; background: linear-gradient(120deg, #e8f1ff, #d2e3fd); }
.mini-cursor {
  position: absolute; left: 16%; top: 66%; width: 13px; height: 13px;
  background: var(--blue); clip-path: polygon(0 0, 100% 38%, 58% 58%, 38% 100%);
  transition: transform .7s var(--ease);
}
.bento-tile--hero:hover .mini-cursor { transform: translate(96px, -30px); }

.mini-term {
  display: grid; gap: 6px; margin-top: 4px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.mini-term b { color: var(--blue-text); }
.mini-term .term-line { color: var(--ink); }
.mini-term .term-line::after {
  content: ""; display: inline-block; width: 7px; height: .95em; margin-left: 4px; vertical-align: -.12em;
  background: var(--blue-text); animation: caretBlink 1.15s steps(1) infinite;
}
.term-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.term-status i { width: 8px; height: 8px; border-radius: 50%; background: #2fae74; animation: statusPulse 2.4s ease-in-out infinite; }
@keyframes statusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53, 192, 126, .45); } 50% { box-shadow: 0 0 0 6px rgba(53, 192, 126, 0); } }

.mini-health { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.mini-health .hd-dot { width: 9px; height: 9px; border-radius: 50%; background: #2fae74; animation: statusPulse 2.8s ease-in-out infinite; flex: 0 0 auto; }
.mini-health .hd-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.mini-health .hd-bar i { display: block; height: 100%; width: 92%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-cta), #74b3ff); animation: healthSweep 4.5s ease-in-out infinite alternate; }
@keyframes healthSweep { from { width: 86%; } to { width: 97%; } }

.mini-chart { display: flex; align-items: flex-end; gap: 7px; height: 64px; padding: 10px 12px; background: var(--mist); border: 1px solid var(--line); border-radius: 12px; margin-top: 4px; }
.mini-chart i { flex: 1; height: calc(var(--h, .6) * 100%); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--blue), #7db4ff); transform-origin: bottom; transition: transform .5s var(--ease); }
.bento-tile:hover .mini-chart i { transform: scaleY(1.12); }
.bento-tile:hover .mini-chart i:nth-child(2) { transition-delay: .06s; }
.bento-tile:hover .mini-chart i:nth-child(3) { transition-delay: .12s; }
.bento-tile:hover .mini-chart i:nth-child(4) { transition-delay: .18s; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-tile--hero { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .bento-tile--hero { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-term .term-line::after, .mini-health .hd-dot, .term-status i, .mini-health .hd-bar i { animation: none; }
  .mini-cursor, .mini-chart i { transition: none; }
  .bento-tile:hover .mini-chart i { transform: none; }
}

/* Glow borders that follow the cursor ([data-glow]) */
[data-glow]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(4, 117, 254, .5), rgba(4, 117, 254, 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
[data-glow]:hover::after, [data-glow]:focus-visible::after { opacity: 1; }

/* ============================================================
   View-transition choreography (same-document)
   ============================================================ */
#fitResult .fit-result-card { view-transition-name: fit-result; }
.showcase-panel:not([hidden]) { view-transition-name: showcase-panel; }
dialog.brief-dialog[open] { view-transition-name: brief-dialog; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(fit-result) { animation: vt-fade-out .28s ease both; }
  ::view-transition-new(fit-result) { animation: vt-pop-in .5s var(--ease) both; }
  ::view-transition-old(brief-dialog) { animation: vt-fade-out .25s ease both; }
  ::view-transition-new(brief-dialog) { animation: vt-pop-in .4s var(--ease) both; }
  ::view-transition-old(showcase-panel) { animation: vt-fade-out .3s ease both; }
  ::view-transition-new(showcase-panel) { animation: vt-rise-in .45s var(--ease) both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-pop-in { from { opacity: 0; transform: scale(.965) translateY(12px); } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(16px); } }

/* ============================================================
   Night shift — auto dark mode (prefers-color-scheme only;
   no toggle, nothing stored)
   ============================================================ */
.brand-word--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #eaf1fb;
    --muted: #a3b4cc;
    --mist: #0b1322;
    --mist-2: #101b2f;
    --line: rgba(148, 184, 240, .16);
    --line-2: rgba(148, 184, 240, .30);
    --blue-text: #7fb2ff;
    --link: #8ab7ff;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .5);
    --shadow-m: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 44px -20px rgba(0, 0, 0, .6);
    --shadow-l: 0 6px 12px rgba(0, 0, 0, .45), 0 36px 90px -36px rgba(0, 0, 0, .7);
  }
  body { background: #070d18; }
  .site-header { background: rgba(7, 13, 24, .6); }
  .site-header.is-scrolled { background: rgba(7, 13, 24, .9); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .85); }
  .card, .faq details, .form-card, .side-card, .bento-tile, .fit-card { background: #0d1626; }
  .nav-drop { background: #0d1730; }
  .ticker { background: #0b1322; }
  .ticker-item { color: #9fb0c6; }
  .ticker-item .brace { color: #7fb2ff; }
  input, select, textarea { background: #0d1626; color: var(--ink); }
  .btn--secondary { background: #101c31; border-color: var(--line-2); color: var(--ink); }
  .fit-opt span { background: #101c31; }
  .fit-opt input:checked + span { background: #eaf1fb; border-color: #eaf1fb; color: #0b1322; }
  .hero-bg::before {
    background-image:
      radial-gradient(rgba(120, 170, 255, .20) 1.5px, transparent 1.5px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  }
  .hero-watermark { color: rgba(110, 160, 255, .07); }
  .aurora i { opacity: .75; }
  .icon-chip { background: #12233f; color: #7fb2ff; }
  .bl-chip { color: #9cc2ff; }
  dialog.brief-dialog { background: #0d1626; color: var(--ink); }
  .brief-meter-bar { background: #101b2f; }
  .site-footer { background: #070d18; }
  .brand-word { display: none; }
  .brand-word--light { display: block; }

  /* "Paper" panels stay light on purpose — the brand art lives there.
     Re-pin their tokens (and text color, since `color` inherits as a
     computed value) so light-panel interiors keep light-theme colors. */
  .browser, .app-frame, .hero-art-frame, .art-card, .mock-site,
  .phone-frame, .mini-browser {
    --ink: #15181d;
    --muted: #4c5766;
    --line: #e2eaf7;
    --line-2: #d4e2f7;
    --mist: #f2f7ff;
    --mist-2: #e8f1ff;
    --blue-text: #0464d8;
    --link: #0457c4;
    color: #15181d;
  }
  .float-chip { color: #15181d; }

  /* targeted dark fixes (from the axe dark audit) */
  .showcase-switch button { background: #101c31; border-color: var(--line-2); }
  .showcase-switch button[aria-pressed="true"] { background: #eaf1fb; color: #0b1322; }
  .legal-nav a[aria-current="page"], .chip-label--blue, .idea-chip { color: #7fb2ff; }
  .prose p, .prose ul, .prose ol { color: #c9d5e8; }
  dialog.brief-dialog #dialogClose { background: #101c31; border-color: var(--line-2); color: var(--ink); }
  input::placeholder, textarea::placeholder { color: #8fa3c0; }
  input, select, textarea { border-color: var(--line-2); }
  .field input[type="text"], .field input[type="email"], .field textarea, .field select { background: #0d1626; color: var(--ink); }
  .nav-burger { background: #101c31; border-color: var(--line-2); }
  @media (max-width: 940px) { .main-nav { background: #0d1730; } }
  .chip-label:not(.chip-label--blue):not(.chip-label--coral) { background: #101c31; border-color: var(--line-2); }
  .idea-chip { background: #101c31; }
  .demo-step.is-running { background: #12233f; border-color: var(--blue); }
  .demo-result { background: #101c31; }
  .step-num { background: #101c31; }
  .placeholder-box { background: #101c31; border-color: var(--line-2); }
  .placeholder-box .ph-tag { color: #f2938a; }
  .no-send-note { color: #c9d5e8; }
  .side-steps .ss-num { color: #7fb2ff; }
  .app-frame .chip-label:not(.chip-label--blue):not(.chip-label--coral),
  .browser .chip-label:not(.chip-label--blue):not(.chip-label--coral) {
    background: #fff; border-color: #d4e2f7; color: #4c5766;
  }
  .app-frame .chip-label--blue, .browser .chip-label--blue { color: #0464d8; }
}