/* Yours Truly, - custom styles
   Use only when Tailwind utilities can't handle it.
   Keep this file thin. */

/* Smooth scrolling for in-page anchor links */
html {
  scroll-behavior: smooth;
}

/* Optional: ensure SVG logo color survives any Tailwind reset */
img[src*="logo.svg"] {
  display: block;
}

/* ------------------------------------------------------------
   Phase 4: Cinematic dual-backdrop hero (home page)
   - Logo: animated reveal via JS scroll listener (.hero-logo-bg
     just provides the paper canvas; the actual logo is a fixed-
     position #stage-logo img animated by inline JS).
   - Office photo: fixed-attachment background for parallax depth.
   - Mobile fallback: static logo backdrop (JS animation skipped),
     office bg switches to scroll attachment (iOS Safari fixed-bg
     bugs).
   ------------------------------------------------------------ */

.hero-logo-bg {
  background-color: #F0E5CD;
}

.hero-office-bg {
  background-image: url('../assets/office-home.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #3A2410;
}

@media (max-width: 768px) {
  /* Mobile: office bg parallax fallback (iOS Safari fixed-bg bugs).
     Phase 5.5 removed the previous .hero-logo-bg background-image rule
     here because it overlapped with foreground hero text on small
     viewports. Mobile now shows the seal as an inline <img class="block
     md:hidden"> in index.html's hero content stack instead. */
  .hero-office-bg {
    background-attachment: scroll;
  }
}

/* Stage logo: fixed-position img animated by JS on home page only.
   Hidden on mobile via Tailwind's `hidden md:block` so the static
   CSS backdrop above takes over there. */
#stage-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

/* ------------------------------------------------------------
   Phase 5 polish: paper-grain texture
   Subtle SVG fractal noise overlay for the carved/letterhead feel.
   Applied site-wide via body::before. Multiply blend mode tints
   the underlying content slightly, like noise on paper stock.
   Tune .paper-grain opacity if it reads as too noisy or too subtle.
   ------------------------------------------------------------ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}