/* ==========================================================================
   SCP EDITORIAL ACCENTS
   Sell Chicago Properties - original, brand-adapted editorial techniques.
   Brand-toned versions of patterns observed on reference sites (technique
   level only). All code original. Navy #1B2A4A / ink #0B1420, gold #D4A843 /
   #C9A24B, cream #FAF8F5 / bone #F2EDE3.

   Techniques:
     1. Giant bleed word   .scp-bleed / .scp-bleed__word
     2. Binary band rhythm .scp-band--navy / .scp-band--cream
     3. Tilted frame       .scp-tilt-frame
     4. Masked line-rise   .scp-mask-rise (pairs with main.js .reveal -> .visible)
   ========================================================================== */

:root {
  --scp-acc-navy: #1B2A4A;
  --scp-acc-ink: #0B1420;
  --scp-acc-gold: #C9A24B;
  --scp-acc-cream: #FAF8F5;
}

/* --------------------------------------------------------------------------
   1. GIANT BLEED WORD
   Oversized serif wordmark anchored to a section's bottom edge, bleeding past
   the container. Decorative only (aria-hidden span, never a heading). The
   parent (.scp-bleed) clips overflow so no horizontal scrollbar can appear.
   -------------------------------------------------------------------------- */
.scp-bleed {
  position: relative;
  overflow: hidden; /* hard guarantee: bleed word never widens the page */
}

.scp-bleed__word {
  position: absolute;
  left: 50%;
  bottom: -0.14em; /* let the descender line kiss the section edge */
  transform: translateX(-50%);
  margin: 0;
  z-index: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(88px, 19vw, 200px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--scp-acc-navy);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Gold variant for placement on navy / ink sections */
.scp-bleed__word--gold {
  color: var(--scp-acc-gold);
  opacity: 0.12;
}

/* Keep real content above the decorative word */
.scp-bleed > :not(.scp-bleed__word) {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. BINARY SECTION RHYTHM
   Instant navy / cream band flips with no transition for an editorial
   stop-start cadence as the reader scrolls between sections.
   -------------------------------------------------------------------------- */
.scp-band--navy {
  background-color: var(--scp-acc-navy);
  color: var(--scp-acc-cream);
  transition: none;
}

.scp-band--navy h1,
.scp-band--navy h2,
.scp-band--navy h3 {
  color: var(--scp-acc-cream);
}

.scp-band--cream {
  background-color: var(--scp-acc-cream);
  color: var(--scp-acc-ink);
  transition: none;
}

/* --------------------------------------------------------------------------
   3. TILTED EDITORIAL FRAME
   Subtle rotation, gold border, soft offset shadow. Static transform so it is
   reduced-motion safe. On hover-capable devices it straightens smoothly.
   -------------------------------------------------------------------------- */
.scp-tilt-frame {
  display: block;
  margin: 1.75rem auto;
  max-width: 100%;
  border: 3px solid var(--scp-acc-gold);
  background: var(--scp-acc-cream);
  padding: 6px;
  transform: rotate(-3deg);
  box-shadow: 14px 18px 38px rgba(11, 20, 32, 0.18);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.scp-tilt-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Alternate lean so paired figures fan apart */
.scp-tilt-frame--right {
  transform: rotate(3deg);
}

@media (hover: hover) and (pointer: fine) {
  .scp-tilt-frame:hover {
    transform: rotate(0deg);
    box-shadow: 8px 12px 30px rgba(11, 20, 32, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scp-tilt-frame {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   4. MASKED LINE-RISE HEADING
   CSS-only reveal that hooks the existing main.js IntersectionObserver: an
   element with "reveal scp-mask-rise" starts clipped + offset and settles when
   .visible lands. FAIL-OPEN: the hidden initial state is scoped under html.js,
   so without JS (no html.js class) the heading is always fully visible.
   -------------------------------------------------------------------------- */
html.js .scp-mask-rise {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transform: translateY(24px);
  /* Neutralize the inherited .reveal fade so the mask is the only effect */
  opacity: 1;
  transition: clip-path 0.75s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: clip-path, transform;
}

html.js .scp-mask-rise.visible {
  clip-path: inset(0% 0 0 0);
  -webkit-clip-path: inset(0% 0 0 0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .scp-mask-rise {
    clip-path: none;
    -webkit-clip-path: none;
    transform: none;
    transition: none;
  }
}