/* cfsam.org decoration kit v1
   Uses existing site tokens: --accent, --accent-2, --ink, --muted, --panel, --panel-strong, --line. */

:root {
  --page-accent: var(--accent);
  --page-accent-secondary: var(--accent-2);
  --page-ornament: url("/assets/site-decor/ornaments/contours.svg?v=20260715e");
  --page-ornament-size: min(620px, 66vw);
  --intro-ornament-opacity: .18;
  --panel-ornament-opacity: .12;
  --card-ornament-opacity: .09;
  --daily-ornament-opacity: .38;
  --page-grain-opacity: 0.025;
  --section-rule-opacity: .46;
  --registration-opacity: .22;
  --route-rule-opacity: .42;
}

html[data-theme="dark"] {
  --intro-ornament-opacity: .15;
  --panel-ornament-opacity: .10;
  --card-ornament-opacity: .085;
  --daily-ornament-opacity: .34;
  --page-grain-opacity: 0.035;
  --section-rule-opacity: .35;
  --registration-opacity: .16;
  --route-rule-opacity: .34;
}

body[data-page="home"] {
  --page-ornament: url("/assets/site-decor/ornaments/contours.svg?v=20260715e");
}
body[data-page="today"] {
  --page-accent: #2f8d67;
  --page-accent-secondary: #c7812d;
  --page-ornament: url("/assets/site-decor/ornaments/horizon.svg?v=20260715e");
}
body[data-page="games"],
body[data-page="vector"],
body[data-page="waypoint"],
body[data-page="final-approach"] {
  --page-accent: #268c86;
  --page-accent-secondary: #c38236;
  --page-ornament: url("/assets/site-decor/ornaments/plot-grid.svg?v=20260715e");
}
body[data-page="weather"] {
  --page-accent: #397ca8;
  --page-accent-secondary: #b87632;
  --page-ornament: url("/assets/site-decor/ornaments/isobars.svg?v=20260715e");
}
body[data-page="air-traffic"] {
  --page-accent: #397ea5;
  --page-accent-secondary: #c18a3a;
  --page-ornament: url("/assets/site-decor/ornaments/airways.svg?v=20260715e");
}
body[data-page="local-airspace"] {
  --page-accent: #2d8276;
  --page-accent-secondary: #a87838;
  --page-ornament: url("/assets/site-decor/ornaments/receiver-rings.svg?v=20260715e");
}
body[data-page="launches"] {
  --page-accent: #b66b27;
  --page-accent-secondary: #397ca8;
  --page-ornament: url("/assets/site-decor/ornaments/orbit.svg?v=20260715e");
}
body[data-page="skywatch"] {
  --page-accent: #596f9e;
  --page-accent-secondary: #b9823c;
  --page-ornament: url("/assets/site-decor/ornaments/constellation.svg?v=20260715e");
}
body[data-page="space-weather"] {
  --page-accent: #7460a6;
  --page-accent-secondary: #3b9970;
  --page-ornament: url("/assets/site-decor/ornaments/solar-field.svg?v=20260715e");
}
body[data-page="events"] {
  --page-accent: #9b6f32;
  --page-accent-secondary: #397ca8;
  --page-ornament: url("/assets/site-decor/ornaments/calendar-ruling.svg?v=20260715e");
}
body[data-page="explore"],
body[data-page="about"],
body[data-page="resume"],
body[data-page="lab-notes"],
body[data-page="changelog"] {
  --page-ornament: url("/assets/site-decor/ornaments/blueprint.svg?v=20260715e");
}

body[data-page="space-weather"][data-aurora="active"] {
  --page-accent: #3b9970;
  --page-accent-secondary: #7460a6;
}

html[data-theme="dark"] body[data-page="space-weather"][data-aurora="active"] {
  --page-accent: #78d9aa;
  --page-accent-secondary: #baa6ec;
}

html[data-theme="dark"] body[data-page="today"] { --page-accent: #78d9aa; --page-accent-secondary: #efb466; }
html[data-theme="dark"] body[data-page="games"],
html[data-theme="dark"] body[data-page="vector"],
html[data-theme="dark"] body[data-page="waypoint"],
html[data-theme="dark"] body[data-page="final-approach"] { --page-accent: #63d7d0; --page-accent-secondary: #efb466; }
html[data-theme="dark"] body[data-page="weather"],
html[data-theme="dark"] body[data-page="air-traffic"] { --page-accent: #78bce4; --page-accent-secondary: #efb466; }
html[data-theme="dark"] body[data-page="local-airspace"] { --page-accent: #72d3c1; --page-accent-secondary: #e0ad68; }
html[data-theme="dark"] body[data-page="launches"] { --page-accent: #e3a15c; --page-accent-secondary: #78bce4; }
html[data-theme="dark"] body[data-page="skywatch"] { --page-accent: #aab6e7; --page-accent-secondary: #e2ad67; }
html[data-theme="dark"] body[data-page="space-weather"] { --page-accent: #baa6ec; --page-accent-secondary: #78d9aa; }
html[data-theme="dark"] body[data-page="events"] { --page-accent: #d5a464; --page-accent-secondary: #78bce4; }
html[data-theme="dark"] body[data-page="home"],
html[data-theme="dark"] body[data-page="explore"],
html[data-theme="dark"] body[data-page="about"],
html[data-theme="dark"] body[data-page="resume"],
html[data-theme="dark"] body[data-page="lab-notes"],
html[data-theme="dark"] body[data-page="changelog"] { --page-accent: #78d9aa; --page-accent-secondary: #efb466; }

.site-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
}

.site-icon-lg { width: 2rem; height: 2rem; }
.site-icon-sm { width: 1rem; height: 1rem; }

/* Intro and panel ornaments use a monochrome SVG as a CSS mask, so the same asset
   automatically follows each page accent in both themes. */
.decorated-intro,
.decorated-panel,
.decorated-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.decorated-intro > *,
.decorated-panel > *,
.decorated-card > * {
  position: relative;
  z-index: 1;
}

.decorated-intro::after,
.decorated-panel::after,
.decorated-card::after {
  position: absolute;
  z-index: 0;
  top: var(--ornament-top, -42px);
  right: var(--ornament-right, -34px);
  width: var(--ornament-width, var(--page-ornament-size));
  aspect-ratio: 3 / 2;
  background: var(--ornament-color, color-mix(in srgb, var(--page-accent) 72%, var(--ink) 28%));
  content: "";
  opacity: var(--ornament-opacity, var(--page-ornament-opacity));
  pointer-events: none;
  transform: var(--ornament-transform, none);
  -webkit-mask-image: var(--ornament-image, var(--page-ornament));
  mask-image: var(--ornament-image, var(--page-ornament));
  -webkit-mask-position: top right;
  mask-position: top right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

html[data-theme="dark"] .decorated-intro::after,
html[data-theme="dark"] .decorated-panel::after,
html[data-theme="dark"] .decorated-card::after {
  background: var(--ornament-color, var(--page-accent));
}

.decorated-intro::after {
  --ornament-width: min(760px, 72vw);
  --ornament-top: -90px;
  --ornament-right: -86px;
  --ornament-opacity: var(--intro-ornament-opacity);
}

.decorated-panel::after {
  --ornament-opacity: var(--panel-ornament-opacity);
}

.decorated-card::after {
  --ornament-width: min(340px, 72%);
  --ornament-top: -34px;
  --ornament-right: -48px;
  --ornament-opacity: var(--card-ornament-opacity);
}

.ornament-left::after {
  right: auto;
  left: var(--ornament-left, -34px);
  --ornament-transform: scaleX(-1);
}

.ornament-bottom::after {
  top: auto;
  bottom: var(--ornament-bottom, -48px);
  --ornament-transform: scaleY(-1);
}

.ornament-full::after {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* Optional paper texture. Prefer it only on large quiet areas, not every card. */
.paper-texture::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("/assets/site-decor/ornaments/paper-grain.svg?v=20260715e");
  background-repeat: repeat;
  content: "";
  opacity: var(--page-grain-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] .paper-texture::before {
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Section label + technical divider */
.section-heading[data-section-code] {
  position: relative;
  padding-top: 1.45rem;
}

.section-heading[data-section-code]::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--page-accent);
  content: attr(data-section-code);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .66rem;
  font-weight: 760;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
}

.section-heading[data-section-code]::after {
  position: absolute;
  top: .28rem;
  right: 0;
  left: min(17rem, 52%);
  height: .55rem;
  background: var(--page-accent);
  content: "";
  opacity: var(--section-rule-opacity);
  -webkit-mask: url("/assets/site-decor/dividers/heading-rule.svg?v=20260715e") center / 100% 100% no-repeat;
  mask: url("/assets/site-decor/dividers/heading-rule.svg?v=20260715e") center / 100% 100% no-repeat;
}

/* Small registration marks for feature cards. */
.registered-card {
  position: relative;
}

.registered-card::before {
  position: absolute;
  z-index: 0;
  inset: 8px;
  background: var(--page-accent);
  content: "";
  opacity: var(--registration-opacity);
  pointer-events: none;
  -webkit-mask: url("/assets/site-decor/ornaments/registration-marks.svg?v=20260715e") center / 100% 100% no-repeat;
  mask: url("/assets/site-decor/ornaments/registration-marks.svg?v=20260715e") center / 100% 100% no-repeat;
}

/* Route line that can sit between related cards or below a heading. */
.route-divider,
.timeline-divider {
  display: block;
  width: 100%;
  height: 3rem;
  background: var(--page-accent);
  opacity: var(--route-rule-opacity);
  pointer-events: none;
}

.route-divider {
  -webkit-mask: url("/assets/site-decor/dividers/route-rule.svg?v=20260715e") center / 100% 100% no-repeat;
  mask: url("/assets/site-decor/dividers/route-rule.svg?v=20260715e") center / 100% 100% no-repeat;
}

.timeline-divider {
  -webkit-mask: url("/assets/site-decor/dividers/timeline-rule.svg?v=20260715e") center / 100% 100% no-repeat;
  mask: url("/assets/site-decor/dividers/timeline-rule.svg?v=20260715e") center / 100% 100% no-repeat;
}

/* Daily generated ornament */
.daily-ornament {
  position: relative;
  min-height: 7rem;
  overflow: hidden;
  color: var(--page-accent);
  pointer-events: none;
}

.daily-ornament svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--daily-ornament-opacity);
}

.daily-ornament .daily-route {
  stroke-dasharray: 12 10;
  animation: cfsam-route-reveal 1.15s ease-out both;
}
.daily-ornament .daily-node {
  animation: cfsam-node-in .55s ease-out both;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes cfsam-route-reveal {
  from { stroke-dashoffset: 80; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes cfsam-node-in {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

/* A contained hover treatment: the card stays still while its decorative route extends. */
.decorated-card::after {
  transition: opacity .18s ease, transform .22s ease;
}
.decorated-card:hover::after,
.decorated-card:focus-within::after {
  opacity: calc(var(--card-ornament-opacity) * 1.22);
  transform: var(--ornament-transform, none) translate3d(-4px, 3px, 0);
}

html[data-theme="dark"] .decorated-card:hover::after,
html[data-theme="dark"] .decorated-card:focus-within::after {
  opacity: calc(var(--card-ornament-opacity) * 1.08);
}

@media (max-width: 820px) {
  .decorated-intro::after {
    --ornament-width: min(620px, 96vw);
    --ornament-top: -40px;
    --ornament-right: -150px;
  }
}

@media (max-width: 560px) {
  :root {
    --intro-ornament-opacity: .16;
    --panel-ornament-opacity: .095;
    --card-ornament-opacity: .075;
    --daily-ornament-opacity: .34;
  }

  html[data-theme="dark"] {
    --intro-ornament-opacity: .13;
    --panel-ornament-opacity: .07;
    --card-ornament-opacity: .06;
    --daily-ornament-opacity: .31;
  }

  .decorated-intro::after {
    --ornament-width: 350px;
    --ornament-top: -8px;
    --ornament-right: -110px;
  }
  .decorated-panel::after,
  .decorated-card::after {
    --ornament-width: 250px;
    --ornament-right: -64px;
  }
  .section-heading[data-section-code]::after {
    left: 62%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daily-ornament .daily-route,
  .daily-ornament .daily-node,
  .decorated-card::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more), (forced-colors: active) {
  .decorated-intro::after,
  .decorated-panel::after,
  .decorated-card::after,
  .registered-card::before,
  .paper-texture::before,
  .daily-ornament {
    display: none !important;
  }
  .section-heading[data-section-code]::after,
  .route-divider,
  .timeline-divider {
    opacity: .8;
  }
}