/* Scene theme.. Everything is scoped under html[data-theme="scene"]. */
/* Good luck trying to customize or understand this theme. I forgor too how it works.*/
/* No one actually knows how this works. */
@keyframes ptvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ptvSparkFade {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(.3); }
}

/* Pixel-art GIFs (stand in for text headings and buttons) */
[data-theme="scene"] .scene-gif {
  display: inline-block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* Page shell */
[data-theme="scene"] .page-body {
  /* sky lives on the ::before below so its image-rendering doesn't leak onto every img */
  background: none;
  /* bare text sits on the dark sky, so it must be light; if the background ever goes
     pale again, darken this to #14193e or the text vanishes */
  color: #e3ebf7;
  font-family: 'Special Elite', monospace;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.5 9.5 22 12 14.5 14.5 12 22 9.5 14.5 2 12 9.5 9.5Z' fill='%23e035ad' stroke='%231b2036' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, auto;
}

/* Background image: Pixabay #7728691 by lesiakower, Pixabay Content License
   (no attribution required). The file is its true 180x120 size on purpose:
   the hi-res download is ~67MB unpacked for zero extra detail, and
   image-rendering: pixelated scales it up identically. Don't swap in the big file. */
[data-theme="scene"] .page-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/background/mountains-pixabay-7728691.png") center center / cover no-repeat, #1b2350;
  image-rendering: pixelated;
}
[data-theme="scene"] a { color: #b73590; }
[data-theme="scene"] a:visited { color: #b73590; }
/* brightest blue from the sky picture; the marquee's pale ice is 1.7:1 on the
   pale cards (invisible), this reads at 4.5:1 */
[data-theme="scene"] a:hover { color: #445be5; }
[data-theme="scene"] ::selection {
  background: #b31298;
  color: #e3ebf7;
}
/* the sparkle cursor is decorative only; interactive elements still need the hand */
[data-theme="scene"] a,
[data-theme="scene"] button,
[data-theme="scene"] select {
  cursor: pointer;
}
[data-theme="scene"] .button-textarea {
  cursor: text;
}

/* Marquee ticker (scene-only, hidden in classic) */
.scene-marquee { display: none; }
[data-theme="scene"] .scene-marquee {
  display: block;
  /* opaque deep indigo from the sky: text over the busy pixel background needs a solid bar */
  background: #14193e;
  border-top: 2px solid #b7d1ff;
  border-bottom: 2px solid #b7d1ff;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
}
.scene-marquee-track {
  display: inline-flex;
  gap: 40px;
  padding-left: 40px;
  animation: ptvMarquee 24s linear infinite;
}
/* must stay scoped: this font-family is the one thing here that could leak a
   scene webfont into the classic theme */
[data-theme="scene"] .scene-marquee-track span {
  font-family: 'Special Elite', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b7d1ff;
}

/* Header */
/* opaque lilac bar with dark text; readability was worst here before. To go dark
   again, use #14193e / #050714 and flip the text colours back to pale #e3ebf7 */
[data-theme="scene"] .site-header {
  background: linear-gradient(180deg, #e4e1f4, #d1cdec);
  border-bottom: 3px solid #14193e;
}
/* Title image above the brand: 420x108 with transparent edges, so the negative
   bottom margin is what pulls it tight against the nav. Resize via width (scales
   up chunky above 420px); remove the <img> in _includes/header.liquid to delete.
   Live tuner: https://claude.ai/code/artifact/6fb10ac5-1832-4cd0-9ca8-0cfbcf614414 */
[data-theme="scene"] .scene-title-ribbon {
  display: block;
  width: 420px;
  margin: 0 auto -22px auto;
}
[data-theme="scene"] .site-nav-list { font-family: 'Special Elite', monospace; }
[data-theme="scene"] .site-nav-sep { display: none; }
[data-theme="scene"] .site-nav-link { color: #612557; border-bottom: 2px solid transparent; }
[data-theme="scene"] .site-nav-link:hover { color: #c92598; }
[data-theme="scene"] .site-nav-link.is-active { color: #c92598; border-bottom-color: #c92598; }
[data-theme="scene"] .site-nav-list li:not(.site-nav-sep)::after {
  content: '\2726';
  color: #d156ac;
  font-size: 9px;
  margin-left: 8px;
}

/* Footer */
[data-theme="scene"] .site-footer {
  background: linear-gradient(180deg, #d1cdec, #c0bae3);
  border-top: 3px solid #14193e;
}
[data-theme="scene"] .site-footer-inner { color: #612557; font-family: 'Special Elite', monospace; }
[data-theme="scene"] .site-footer-inner a { color: #882077; }
[data-theme="scene"] .site-footer-inner a:hover { color: #14193e; }
[data-theme="scene"] .site-footer-note { display: none; }

/* Mobile tab bar + "More" sheet (structure and breakpoints live in style.css).
   Tab text uses #882077 rather than the brighter #c92598: on the lilac bar the
   brighter pink only reaches ~3.9:1, the deeper purple passes 4.5:1. */
[data-theme="scene"] :focus-visible { outline-color: #14193e; }
[data-theme="scene"] .mobile-tabbar {
  background: linear-gradient(180deg, #d1cdec, #c0bae3);
  border-top: 3px solid #14193e;
}
[data-theme="scene"] .mobile-tab {
  color: #612557;
  font-family: 'Special Elite', monospace;
}
[data-theme="scene"] .mobile-tab:hover { color: #882077; }
[data-theme="scene"] .mobile-tab.is-active {
  color: #882077;
  box-shadow: inset 0 3px 0 #882077;
}
[data-theme="scene"] .mobile-sheet {
  background: #e4e1f4;
  color: #1b2036;
  border: none;
  border-top: 3px solid #14193e;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5);
  font-family: 'Special Elite', monospace;
}
[data-theme="scene"] .mobile-sheet::backdrop { background: rgba(5, 7, 20, 0.55); }
[data-theme="scene"] .mobile-sheet-grip { background: #7781ab; }
[data-theme="scene"] .mobile-sheet-title { color: #b31298; }
[data-theme="scene"] .mobile-sheet-close {
  background: #ecebf7;
  border: 2px dashed #7781ab;
  color: #1b2036;
  font-family: 'Special Elite', monospace;
}
[data-theme="scene"] .mobile-sheet-list a { color: #612557; border-bottom-color: #b9b4d6; }
[data-theme="scene"] .mobile-sheet-list a:hover { color: #882077; }

/* Torn-paper panels */
[data-theme="scene"] .panel {
  position: relative;
  background: #ecebf7;
  color: #1b2036;
  /* torn edges; vertical values must stay px, not %: % is a share of card height
     and grows into huge spikes over the text on tall pages */
  clip-path: polygon(
    0% 12px, 4% 0, 9% 8px, 14% 0, 20% 8px, 26% 0, 32% 8px, 38% 0, 44% 8px,
    50% 0, 56% 8px, 62% 0, 68% 8px, 74% 0, 80% 8px, 86% 0, 92% 8px, 96% 0,
    100% 12px,
    100% calc(100% - 12px), 96% 100%, 90% calc(100% - 8px), 84% 100%,
    78% calc(100% - 8px), 72% 100%, 66% calc(100% - 8px), 60% 100%,
    54% calc(100% - 8px), 48% 100%, 42% calc(100% - 8px), 36% 100%,
    30% calc(100% - 8px), 24% 100%, 18% calc(100% - 8px), 12% 100%,
    6% calc(100% - 8px), 0% 100%);
  padding: 40px 42px 34px;
  box-shadow: 0 16px 36px rgba(0,0,0,.5);
  margin-bottom: 40px;
}
[data-theme="scene"] .panel:last-child { margin-bottom: 0; }
[data-theme="scene"] .panel:nth-of-type(odd) { transform: rotate(-0.4deg); }
[data-theme="scene"] .panel:nth-of-type(even) { transform: rotate(0.4deg); }
[data-theme="scene"] .panel::before {
  content: '';
  position: absolute;
  top: -14px; left: 36px;
  width: 96px; height: 28px;
  background: linear-gradient(100deg, rgba(224,53,173,.55), rgba(224,53,173,.32));
  transform: rotate(-7deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
[data-theme="scene"] .panel:nth-of-type(even)::before {
  left: auto; right: 56px;
  width: 80px; height: 26px;
  background: linear-gradient(100deg, rgba(183,209,255,.6), rgba(183,209,255,.35));
  transform: rotate(5deg);
}

/* Post and guide cards sit straight: the tilt swings tall cards sideways
   (67px of drift top to bottom on the ~9500px GrapheneOS guide). Entry-list
   panels (home, blog, guides, category pages) get tall the same way, so they
   sit straight too; short cards and sidebar boxes keep the wobble.
   Delete this block to tilt them again. */
[data-theme="scene"] .panel:has(.post-body),
[data-theme="scene"] .panel:nth-of-type(odd):has(.post-body),
[data-theme="scene"] .panel:nth-of-type(even):has(.post-body),
[data-theme="scene"] .panel:has(.entry),
[data-theme="scene"] .panel:nth-of-type(odd):has(.entry),
[data-theme="scene"] .panel:nth-of-type(even):has(.entry) {
  transform: none;
}

/* Titles / copy */
[data-theme="scene"] .page-title,
[data-theme="scene"] .diary-title,
[data-theme="scene"] .subsection-title,
[data-theme="scene"] .entry-title,
[data-theme="scene"] .post-title,
[data-theme="scene"] .project-card-title,
[data-theme="scene"] .category-card-title {
  font-family: 'Permanent Marker', cursive;
  font-weight: normal;
}
[data-theme="scene"] .page-subtitle,
[data-theme="scene"] .lede,
[data-theme="scene"] .diary-text,
[data-theme="scene"] .entry-summary,
[data-theme="scene"] .post-body,
[data-theme="scene"] .guide-summary,
[data-theme="scene"] .guide-footnote,
[data-theme="scene"] .project-card-desc,
[data-theme="scene"] .category-card-desc,
[data-theme="scene"] .category-card-count,
[data-theme="scene"] .entry-empty {
  color: #383f5e;
}
[data-theme="scene"] .entry-meta,
[data-theme="scene"] .post-meta { color: #965081; }
[data-theme="scene"] .lede--signoff,
[data-theme="scene"] .diary-text--signoff {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 20px;
  color: #b31298;
}
[data-theme="scene"] .lede--signoff {
  font-size: 22px;
  display: inline-block;
  transform: rotate(-1deg);
}
/* bow GIF tiles along the bottom edge as an entry divider */
[data-theme="scene"] .entry {
  border-bottom: none;
  padding-bottom: 30px;
  background-image: url("/assets/gifs/pinkbowhearts-separator.gif");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 21px;
}
[data-theme="scene"] .entry:last-of-type { background-image: none; }
[data-theme="scene"] .entry-title a,
[data-theme="scene"] .category-card-title a { color: #1b2036; }
[data-theme="scene"] .entry-link,
[data-theme="scene"] .view-all a,
[data-theme="scene"] .pager-link,
[data-theme="scene"] .breadcrumb-back a,
[data-theme="scene"] .project-card-link,
[data-theme="scene"] .post-tags a {
  color: #b31298;
}
[data-theme="scene"] .pager-link.is-disabled,
[data-theme="scene"] .project-card-link.is-disabled { color: #7781ab; }
[data-theme="scene"] .pager-link.is-disabled .scene-gif { opacity: .3; }

/* The 404 friend */
[data-theme="scene"] .scene-404-gif {
  display: block;
  margin: 4px auto 18px;
}

/* GIF sidebar titles skip the wavy underline */
[data-theme="scene"] .sidebar-box-title--gif {
  text-decoration: none;
  line-height: 0;
}
[data-theme="scene"] .section-divider,
[data-theme="scene"] .post-tags,
[data-theme="scene"] .filter-row a { border-color: #b6bcd6; }
[data-theme="scene"] .section-divider { display: none; }
/* wavy underline from the original design, replacing the base theme's thin rule */
[data-theme="scene"] .section-title {
  border-bottom: none;
  font-size: 24px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #b31298;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
[data-theme="scene"] .filter-row a,
[data-theme="scene"] .breadcrumb-back a { color: #383f5e; }
[data-theme="scene"] .filter-sep { color: #7781ab; }

/* Per-category hover effects, matched by link slug. To add one, copy a block
   below and swap the slug for the new category. */
@keyframes sceneFlagSweep { to { background-position: 200% center; } }
[data-theme="scene"] a[href*="/categories/transition/"]:hover {
  background-image: linear-gradient(90deg,
    #5BCEFA, #F5A9B8, #FFFFFF, #F5A9B8, #5BCEFA,
    #F5A9B8, #FFFFFF, #F5A9B8, #5BCEFA);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* thin dark outline: the flag's white and pale-blue stripes would otherwise
     disappear against the cream card */
  -webkit-text-stroke: 0.4px rgba(27,32,54,.55);
  animation: sceneFlagSweep 3s linear infinite;
}

/* "Travel": sunset sweep, same trick as the flag above */
[data-theme="scene"] a[href*="/categories/travel/"]:hover {
  background-image: linear-gradient(90deg,
    #f2913a, #e8556d, #a45bc4, #4f7fd4, #e8556d, #f2913a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sceneFlagSweep 4s linear infinite;
}

/* "Privacy": the ciphertext scramble itself is done by scene-effects.js; this is just the look */
[data-theme="scene"] a[href*="/categories/privacy/"]:hover {
  color: #2f6b5e;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
}

/* "Cybersecurity": green-on-black terminal. Colours only, no font swap, so the
   word keeps its width and doesn't shove the layout around */
[data-theme="scene"] a[href*="/categories/cybersecurity/"]:hover {
  background: #06170f;
  color: #24e07f;
  box-shadow: 0 0 0 3px #06170f;
  text-shadow: 0 0 6px rgba(36,224,127,.8);
}

/* "Tech": small chromatic-aberration glitch */
[data-theme="scene"] a[href*="/categories/tech/"]:hover {
  color: #1b2036;
  text-shadow: -1.5px 0 rgba(232,53,110,.85), 1.5px 0 rgba(47,200,214,.85);
}

/* "Personal": softens into the handwriting used for the asides */
[data-theme="scene"] a[href*="/categories/personal/"]:hover {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: #b31298;
}
[data-theme="scene"] a[href*="/categories/personal/"]:hover::after {
  content: ' \2665';
}

/* CTA buttons */
[data-theme="scene"] .btn {
  border: 2px dashed #1b2036;
  background: #dad8ee;
  color: #1b2036;
  font-family: 'Special Elite', monospace;
}

/* Cards (projects / categories / empty state) */
[data-theme="scene"] .project-card,
[data-theme="scene"] .category-card,
[data-theme="scene"] .empty-card {
  background: transparent;
  border: 2px dashed #7781ab;
  box-shadow: none;
}
[data-theme="scene"] .project-card-thumb {
  background: #d1cee8;
  border-bottom: 2px dashed #7781ab;
  color: #7781ab;
  font-family: 'Special Elite', monospace;
}
[data-theme="scene"] .tag,
[data-theme="scene"] .code-pill { background: #d1cee8; color: #383f5e; }
[data-theme="scene"] .guide-callout {
  background: #ecebf7;
  border: 2px dashed #7781ab;
}
[data-theme="scene"] .guide-callout select { border-color: #7781ab; }

/* About page: outlined box on the torn paper, same dashed-card blue as the project
   cards. Also survives the Halloween reskin, since that only repaints the paper. */
[data-theme="scene"] .profile-card {
  background: transparent;
  border: 2px solid #7781ab;
}
[data-theme="scene"] .profile-card-name {
  font-family: 'Special Elite', monospace;
  font-size: 22px;
  letter-spacing: 1px;
  color: #1b2036;
}
[data-theme="scene"] .profile-card-flag { border-color: #7781ab; }

/* Sidebar boxes */
[data-theme="scene"] .sidebar-box {
  position: relative;
  background: #ecebf7;
  color: #1b2036;
  border: none;
  /* px, not %: see the note on .panel above */
  clip-path: polygon(
    0% 14px, 10% 0, 25% 10px, 40% 0, 55% 10px, 70% 0, 85% 10px, 100% 0,
    100% calc(100% - 14px), 90% 100%, 75% calc(100% - 10px), 60% 100%,
    45% calc(100% - 10px), 30% 100%, 15% calc(100% - 10px), 0% 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  margin-bottom: 28px;
}
[data-theme="scene"] .sidebar-box:last-child { margin-bottom: 0; }
[data-theme="scene"] .sidebar-box:nth-of-type(3n+1) { transform: rotate(-1.2deg); }
[data-theme="scene"] .sidebar-box:nth-of-type(3n+2) { transform: rotate(0.9deg); }
[data-theme="scene"] .sidebar-box:nth-of-type(3n+3) { transform: rotate(-0.7deg); }
[data-theme="scene"] .sidebar-box::before {
  content: '';
  position: absolute;
  top: -11px; left: 20px;
  width: 64px; height: 22px;
}
[data-theme="scene"] .sidebar-box:nth-of-type(3n+1)::before { background: linear-gradient(100deg, rgba(224,53,173,.55), rgba(224,53,173,.32)); transform: rotate(-6deg); }
[data-theme="scene"] .sidebar-box:nth-of-type(3n+2)::before { left: 24px; background: linear-gradient(100deg, rgba(183,209,255,.6), rgba(183,209,255,.35)); transform: rotate(-5deg); }
[data-theme="scene"] .sidebar-box:nth-of-type(3n+3)::before { left: 22px; background: linear-gradient(100deg, rgba(179,18,152,.55), rgba(179,18,152,.32)); transform: rotate(-6deg); }
[data-theme="scene"] .sidebar-box-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 14px;
  color: #b31298;
  border-bottom: none;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #b31298;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
[data-theme="scene"] .sidebar-box-text,
[data-theme="scene"] .contact-text,
[data-theme="scene"] .medialog-item,
[data-theme="scene"] .now-item,
[data-theme="scene"] .changelog-item,
[data-theme="scene"] .archive-item,
[data-theme="scene"] .sidebar-box-list { color: #383f5e; }
[data-theme="scene"] .medialog-kind,
[data-theme="scene"] .now-label { color: #965081; }
[data-theme="scene"] .medialog-date,
[data-theme="scene"] .medialog-note,
[data-theme="scene"] .changelog-date { color: #596491; }
[data-theme="scene"] .sidebar-box-hint {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 14px;
  color: #b31298;
}
[data-theme="scene"] .contact-text a,
[data-theme="scene"] .archive-item a,
[data-theme="scene"] .sidebar-box-list a { color: #b31298; }
[data-theme="scene"] .sidebar-box-fade {
  background: linear-gradient(transparent, #ecebf7);
}
/* temporary out-of-order placard (see shoutbox.liquid). Base --color-brand is the
   classic rust and clashes with the lavender card, so recolour everything to orchid */
[data-theme="scene"] .shoutbox-offline {
  background: #dad8ee;
  border: 2px dashed #b31298;
}
[data-theme="scene"] .shoutbox-offline::before,
[data-theme="scene"] .shoutbox-offline::after {
  background: repeating-linear-gradient(-45deg,
    #b31298 0 7px, transparent 7px 14px);
}
[data-theme="scene"] .shoutbox-offline-sign {
  font-family: 'Permanent Marker', cursive;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 1px;
  color: #b31298;
}
[data-theme="scene"] .shoutbox-offline-text { color: #383f5e; }
[data-theme="scene"] .visitor-counter {
  background: #050714;
  border: 2px solid #b31298;
}
[data-theme="scene"] .visitor-counter a {
  color: #e035ad;
  text-shadow: 0 0 6px rgba(224,53,173,.4);
  font-size: 14px;
  letter-spacing: 3px;
}
[data-theme="scene"] .linkback-item { border-color: #7781ab; background: #fff; }
[data-theme="scene"] .button-textarea { background: #d1cee8; border: 1px dashed #7781ab; color: #383f5e; }
[data-theme="scene"] .button-note,
[data-theme="scene"] .button-hint { color: #596491; }

/* Mouse-trail sparkles (appended by scene-effects.js) */
.scene-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  font-size: 14px;
  transform: translate(-50%, -50%);
  animation: ptvSparkFade .75s ease-out forwards;
}

@media (max-width: 767px) {
  /* post/guide straightening lives outside this query so phones match desktops.
     42px card padding inside a 40px gutter left only ~196px of text (~25 chars)
     on a 360px phone, so padding drops here */
  [data-theme="scene"] .panel { padding: 28px 18px 24px; }
  [data-theme="scene"] .panel::before { left: 20px; }
  [data-theme="scene"] .panel:nth-of-type(even)::before { left: auto; right: 24px; }
}

/* reduced-motion: stop the decorative marquee and colour sweeps. The sparkle trail
   is NOT handled here; scene-effects.js skips attaching the listener, because
   stopping the animation in CSS left solid stars stuck on screen. */
@media (prefers-reduced-motion: reduce) {
  .scene-marquee-track {
    animation: none;
  }
  [data-theme="scene"] a[href*="/categories/transition/"]:hover,
  [data-theme="scene"] a[href*="/categories/travel/"]:hover {
    animation: none;
  }
}