/* Iteration B: header artwork and scroll reveal.
   A trial for comparison with Iteration A. Not part of Clear Sky; section 4 of the brief is unchanged.
   Load after site.css (and the Clear Sky bundle). Pairs with reveal.js.
   Works under a strict Content Security Policy (style-src 'self'): no inline styles are needed. */

/* =========================================================
   Header artwork
   Decorative SVG placed with <img class="art-band__img" src="..." alt="">.
   The artwork is static: no animation, no hover, no scroll effects.
   ========================================================= */

/* Desktop band (1200px and wider): the art sits at the band's right edge at its native size.
   Text stays in .art-band__text (max 580px), which ends at least 18px before the art at 1200px
   and about 58px before it at 1280px, so no text ever sits on the artwork. */
.art-band {
  position: relative;
  overflow: hidden;
  background: var(--background);
  border-bottom: var(--border-hairline) solid var(--line);
}
.art-band__img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin-block: auto;
  display: block;
  width: 520px;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.art-band__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12) var(--gutter-desktop);
  box-sizing: border-box;
}
.art-band__text { max-width: 580px; }

/* Band heights match each artwork's native height, so the art is never cropped on desktop. */
.art-band--network { min-height: 600px; }
.art-band--defense-rings { min-height: 240px; }
.art-band--risk-lattice { min-height: 400px; }
.art-band--data-streams { min-height: 240px; }
.art-band--network, .art-band--defense-rings, .art-band--risk-lattice, .art-band--data-streams { display: flex; align-items: center; }
.art-band--network > .art-band__inner,
.art-band--defense-rings > .art-band__inner,
.art-band--risk-lattice > .art-band__inner,
.art-band--data-streams > .art-band__inner { width: 100%; }

/* Strip (narrower than 1200px, which includes phones and 200% browser zoom on most laptops):
   the same image becomes a short strip above the heading, and the text sits below it.
   .art-band--strip forces the same layout on the fixed-width phone artboards. */
@media (max-width: 1199px) {
  .art-band { display: block; min-height: 0; }
  .art-band__img {
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 120px;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-bottom: var(--border-hairline) solid var(--line);
  }
  .art-band__inner { padding: var(--space-8) var(--gutter-phone) var(--space-12); }
}
.art-band--strip { display: block; min-height: 0; }
.art-band--strip .art-band__img {
  position: static;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 120px;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-bottom: var(--border-hairline) solid var(--line);
}
.art-band--strip .art-band__inner { padding: var(--space-8) var(--gutter-phone) var(--space-12); }

/* =========================================================
   Scroll reveal
   - Visible by default. Elements are hidden only under html.js-reveal, a class that reveal.js adds
     after it has checked that reduced motion is off and IntersectionObserver exists.
   - Opacity and a 12px upward move only. 350ms, ease-out. Each element animates once.
   - Cards in the same row stagger by 60ms (.reveal-d1 to .reveal-d3).
   - .reveal-now shows an element at once, with no animation (on screen at load, focus, in-page links).
   - Never on: the header, header bands and artwork, the Home hero, the About bio, the proof-of-concept notice.
   ========================================================= */
.js-reveal .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}
.js-reveal .reveal.is-visible {
  transition:
    opacity 350ms cubic-bezier(0, 0, 0.2, 1),
    transform 350ms cubic-bezier(0, 0, 0.2, 1);
}
.js-reveal .reveal-d1.is-visible { transition-delay: 60ms; }
.js-reveal .reveal-d2.is-visible { transition-delay: 120ms; }
.js-reveal .reveal-d3.is-visible { transition-delay: 180ms; }
.js-reveal .reveal.reveal-now { transition: none; }

/* Keyboard focus: an element that has focus, or contains it, is fully visible at once. */
.js-reveal .reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Reduced motion: everything visible, no animation at all (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js-reveal .reveal,
  .js-reveal .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Print: everything visible, no transforms or transparency. */
@media print {
  .reveal,
  .js-reveal .reveal,
  .js-reveal .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}