/* Glass, grain, vignette, ornamental corners, parallax and ambient motion (story 4b).
   Layers over the world skins in barber.css / fallout.css; structure and markup are unchanged.
   Light: frosted glass, gold lettering, brass edge. Dark: smoked CRT glass, scanlines, phosphor glow.
   Contrast rule: every glass fill is opaque enough (0.86+ alpha) that text keeps WCAG AA even when the
   blurred scene behind it is at its brightest. The solid fill below is what unsupported browsers,
   forced-colors and reduced-transparency users get. Motion is transform/opacity only. */

/* ---------- Glass panes: solid base (the fallback) ---------- */
.hero-copy,
.band-col,
.story-text,
.contact-aside {
  position: relative;
}

[data-theme="barber"] .hero-copy,
[data-theme="barber"] .page-banner .wrap::before {
  background-color: #1b1410;
}

[data-theme="fallout"] .hero-copy,
[data-theme="fallout"] .page-banner .wrap::before {
  background-color: #070a07;
}

/* The hero copy becomes a pane sitting on the scene. */
.hero-copy {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
  margin-bottom: 2rem;
  z-index: 1;
}

[data-theme="barber"] .hero-copy {
  border: 1px solid var(--brass);
  box-shadow: inset 0 0 0 4px rgba(27, 20, 16, 0.9), inset 0 0 0 5px rgba(217, 179, 90, 0.55),
    inset 0 1px 0 rgba(255, 238, 190, 0.35), 0 18px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="fallout"] .hero-copy {
  border: 2px solid #2d5a38;
  border-radius: 10px;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(77, 255, 122, 0.18),
    0 0 26px rgba(77, 255, 122, 0.14), 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* Inner page banners: a pane behind the heading block. */
.page-banner .wrap {
  position: relative;
  isolation: isolate;
}

.page-banner .wrap::before {
  content: "";
  position: absolute;
  inset: 1rem var(--frame-x);
  z-index: -1;
  max-width: 46rem;
  pointer-events: none;
}

[data-theme="barber"] .page-banner .wrap::before {
  border: 1px solid var(--brass);
  box-shadow: inset 0 0 0 4px rgba(27, 20, 16, 0.9), inset 0 0 0 5px rgba(217, 179, 90, 0.5);
}

[data-theme="fallout"] .page-banner .wrap::before {
  border: 2px solid #2d5a38;
  border-radius: 10px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85), 0 0 22px rgba(77, 255, 122, 0.12);
}

/* Lower band, story and contact plates: brass-edged paper, or phosphor-lit steel. */
[data-theme="barber"] .band-col,
[data-theme="barber"] .story-text,
[data-theme="barber"] .contact-aside {
  border: 1px solid var(--brass);
  box-shadow: inset 0 0 0 5px var(--paper-hi), inset 0 0 0 6px rgba(181, 138, 60, 0.9),
    inset 0 1px 0 #fff8e0, 0 12px 26px rgba(30, 24, 18, 0.2);
}

[data-theme="fallout"] .band-col,
[data-theme="fallout"] .story-text,
[data-theme="fallout"] .contact-aside {
  border-color: #3a5a40;
  box-shadow: inset 0 0 0 1px var(--steel-hi), inset 0 0 28px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(77, 255, 122, 0.08), 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* ---------- Glass: blur where supported ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="barber"] .hero-copy,
  [data-theme="barber"] .page-banner .wrap::before {
    background-color: rgba(27, 20, 16, 0.88);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }

  [data-theme="fallout"] .hero-copy,
  [data-theme="fallout"] .page-banner .wrap::before {
    background-color: rgba(7, 10, 7, 0.88);
    -webkit-backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
    backdrop-filter: blur(10px) brightness(0.8) saturate(1.2);
  }

  [data-theme="barber"] .band-col,
  [data-theme="barber"] .story-text,
  [data-theme="barber"] .contact-aside {
    background-color: rgba(244, 232, 204, 0.86);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
  }

  [data-theme="fallout"] .band-col,
  [data-theme="fallout"] .story-text,
  [data-theme="fallout"] .contact-aside {
    background-color: rgba(14, 19, 15, 0.88);
    -webkit-backdrop-filter: blur(8px) brightness(0.85);
    backdrop-filter: blur(8px) brightness(0.85);
  }
}

/* Reduced transparency and forced colours keep the solid panes. */
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  [data-theme="barber"] .hero-copy,
  [data-theme="barber"] .page-banner .wrap::before { background-color: #1b1410; }
  [data-theme="fallout"] .hero-copy,
  [data-theme="fallout"] .page-banner .wrap::before { background-color: #070a07; }
  [data-theme="barber"] .band-col,
  [data-theme="barber"] .story-text,
  [data-theme="barber"] .contact-aside { background-color: var(--paper-hi); }
  [data-theme="fallout"] .band-col,
  [data-theme="fallout"] .story-text,
  [data-theme="fallout"] .contact-aside { background-color: var(--steel); }
  .hero-copy,
  .band-col,
  .story-text,
  .contact-aside,
  .page-banner .wrap::before {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Something to blur: soft light behind the sections of every page. */
main {
  position: relative;
}

[data-theme="barber"] main {
  background-image:
    radial-gradient(ellipse 40% 30% at 12% 62%, rgba(217, 179, 90, 0.28), transparent 70%),
    radial-gradient(ellipse 35% 28% at 88% 85%, rgba(122, 31, 34, 0.12), transparent 70%),
    linear-gradient(115deg, transparent 38%, rgba(255, 244, 205, 0.35) 46%, transparent 54%);
}

[data-theme="fallout"] main {
  background-image:
    radial-gradient(ellipse 40% 30% at 14% 64%, rgba(77, 255, 122, 0.1), transparent 70%),
    radial-gradient(ellipse 35% 28% at 86% 88%, rgba(232, 163, 58, 0.1), transparent 70%);
}

/* ---------- Ornamental corners: ::after draws top-left and bottom-right, ::before is its mirror ---------- */
.hero-copy::before,
.hero-copy::after,
.band-col::before,
.band-col::after,
.story-text::before,
.story-text::after,
.contact-aside::before,
.contact-aside::after {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: 0 0, 100% 100%;
}

.hero-copy::before,
.band-col::before,
.story-text::before,
.contact-aside::before {
  transform: scaleX(-1);
}

[data-theme="barber"] .hero-copy::before,
[data-theme="barber"] .hero-copy::after,
[data-theme="barber"] .band-col::before,
[data-theme="barber"] .band-col::after,
[data-theme="barber"] .story-text::before,
[data-theme="barber"] .story-text::after,
[data-theme="barber"] .contact-aside::before,
[data-theme="barber"] .contact-aside::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23b58a3c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 32V8Q2 2 8 2h24'/%3E%3Cpath d='M8 26V12Q8 8 12 8h14'/%3E%3Cpath d='M14 14q4 0 4 4t-4 4'/%3E%3C/g%3E%3Ccircle cx='5' cy='5' r='2' fill='%23d9b35a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23b58a3c' stroke-width='1.6' stroke-linecap='round' transform='rotate(180 17 17)'%3E%3Cpath d='M2 32V8Q2 2 8 2h24'/%3E%3Cpath d='M8 26V12Q8 8 12 8h14'/%3E%3Cpath d='M14 14q4 0 4 4t-4 4'/%3E%3C/g%3E%3Ccircle cx='29' cy='29' r='2' fill='%23d9b35a'/%3E%3C/svg%3E");
}

[data-theme="fallout"] .hero-copy::before,
[data-theme="fallout"] .hero-copy::after,
[data-theme="fallout"] .band-col::before,
[data-theme="fallout"] .band-col::after,
[data-theme="fallout"] .story-text::before,
[data-theme="fallout"] .story-text::after,
[data-theme="fallout"] .contact-aside::before,
[data-theme="fallout"] .contact-aside::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M2 22V2h20' fill='none' stroke='%234dff7a' stroke-width='2'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23b8741e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M32 12v20H12' fill='none' stroke='%234dff7a' stroke-width='2'/%3E%3Ccircle cx='25' cy='25' r='2' fill='%23b8741e'/%3E%3C/svg%3E");
}

/* ---------- Grain and vignette: fixed, inert, drawn over the page ---------- */
html::before,
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

/* Grain: letterpress paper tooth in light, film noise in dark. */
html::before {
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="fallout"]::before {
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 1 0 0 0 0 0.45 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vignette: worn paper edges; CRT tube falloff with fine scanlines. Corners only. */
html::after {
  background: radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(58, 38, 22, 0.2) 100%);
}

html[data-theme="fallout"]::after {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.32) 100%);
}

/* ---------- Hero parallax (classes and variables are set by js/motion.js) ---------- */
.hero.has-parallax .hero-scene {
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--sy, 0) * 36px + var(--py, 0) * -8px), 0) scale(1.07);
  will-change: transform;
}

.hero.has-parallax .hero-copy {
  transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--sy, 0) * -10px), 0);
  will-change: transform;
}

/* ---------- Scroll reveals (transform and opacity only) ---------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--rv-delay, 0ms);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Ambient motion ---------- */
/* Light: a sunbeam through the shop window that slowly breathes (dust is the existing .scene-motes). */
[data-theme="barber"] .hero::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  right: 20%;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0, rgba(255, 236, 170, 0.16) 40%, rgba(255, 236, 170, 0.05) 70%, transparent 100%);
  transform: skewX(-14deg);
  animation: beam-breathe 9s ease-in-out infinite;
}

/* Dark: a band of CRT static rolls down the hero. */
[data-theme="fallout"] .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(77, 255, 122, 0.06) 60%, transparent);
  animation: static-roll 7s linear infinite;
}

[data-theme="fallout"] .hero-copy {
  animation: glass-flicker 5.5s steps(1, end) infinite;
}

@keyframes beam-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes static-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 430%, 0); }
}

/* Under 3 Hz and under 10% luminance change (DESIGN.md section 13). */
@keyframes glass-flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 0.94; }
  50% { opacity: 1; }
  81% { opacity: 0.96; }
  82% { opacity: 1; }
}

.hero.is-paused::after,
.hero.is-paused .hero-copy {
  animation-play-state: paused;
}

/* ---------- Reduced motion: no parallax, no reveals, no ambient loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero.has-parallax .hero-scene,
  .hero.has-parallax .hero-copy,
  .js-reveal .reveal {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .hero::after,
  .hero-copy {
    animation: none !important;
  }
}