/* ============================================================
   PE ATMOSPHERE — design-study concept wiring for djproud.com
   Implements creative-concepts-study-2026-09-24.md on the site:
     concept 3 — ambient glow-fields instead of flat gradients
     concept 1 — heritage-forward engraved type system
     concept 5 — one-message type-as-hero composition
     concept 4 — restrained kinetic typography
   Pair with pe-letterforms.css (loads first). Pure atmosphere +
   letterform treatment; layout and copy untouched. Everything is
   non-invasive: inset glows paint over section backgrounds but
   under their content; all motion honors prefers-reduced-motion.
   ============================================================ */

/* ---- CONCEPT 3: ambient glow-fields ---------------------------------
   Smoky, layered candlelight / club-haze fields. inset box-shadow
   renders above a section's own background but below its content,
   so these classes drop onto ANY section without knowing its bg. */
.pe-glow-warm{ /* candlelight field — weddings, testimonials, about */
  box-shadow:
    inset 0 0 220px rgba(212,165,72,.10),
    inset 0 90px 190px rgba(240,214,150,.07),
    inset 0 -90px 190px rgba(120,60,10,.09),
    inset 40px 0 160px rgba(232,180,90,.05),
    inset -40px 0 160px rgba(232,180,90,.05);
}
.pe-glow-haze{ /* club-haze field — nightlife, residencies, energy */
  box-shadow:
    inset 0 0 240px rgba(150,90,220,.10),
    inset 0 80px 200px rgba(120,140,255,.08),
    inset 0 -80px 200px rgba(30,10,60,.14),
    inset 60px 0 180px rgba(232,180,90,.05),
    inset -60px 0 180px rgba(80,200,255,.05);
}
.pe-glow-ember{ /* hot center field — CTA bands, final conversion */
  box-shadow:
    inset 0 0 200px rgba(255,190,90,.14),
    inset 0 -70px 180px rgba(160,80,10,.12),
    inset 0 40px 120px rgba(255,240,200,.06);
}

/* ---- drifting bokeh: slow candlelit specks over hero fields --------
   Apply .pe-bokeh to a hero/banner wrapper; direct children lift
   above the particle layer automatically. */
.pe-bokeh{position:relative;overflow:hidden;isolation:isolate}
.pe-bokeh::after{
  content:"";position:absolute;inset:-6%;z-index:0;pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(7px 7px at 12% 30%,rgba(255,220,150,.55),transparent 70%),
    radial-gradient(5px 5px at 28% 68%,rgba(255,200,120,.45),transparent 70%),
    radial-gradient(9px 9px at 46% 22%,rgba(255,230,170,.4),transparent 70%),
    radial-gradient(6px 6px at 63% 58%,rgba(255,210,140,.5),transparent 70%),
    radial-gradient(4px 4px at 78% 34%,rgba(255,225,160,.55),transparent 70%),
    radial-gradient(8px 8px at 88% 72%,rgba(255,200,110,.42),transparent 70%),
    radial-gradient(5px 5px at 35% 86%,rgba(255,215,140,.5),transparent 70%),
    radial-gradient(6px 6px at 58% 88%,rgba(255,225,165,.45),transparent 70%);
  filter:blur(1.2px);
  animation:pe-bokeh-drift 28s ease-in-out infinite alternate;
}
.pe-bokeh>*{position:relative;z-index:1}
@keyframes pe-bokeh-drift{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2%,-2%,0) scale(1.04)}
}

/* ---- CONCEPT 1: heritage-forward engraved type ----------------------
   Coin-like engraved serif for "20+ years" badges, testimonial
   section headers, method numbers — history that reads as craft. */
.pe-heritage{
  font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
  color:#e9d6a4;
  /* engraved incision: dark cut below, warm light catching the rim */
  text-shadow:
    0 2px 1px rgba(0,0,0,.85),
    0 -1px 1px rgba(255,244,214,.28),
    0 0 26px rgba(212,165,72,.25);
  letter-spacing:.05em;
}
.pe-heritage--caps{
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78em;
}
/* medallion badge: the engraved coin itself */
.pe-coin{
  display:inline-flex;align-items:center;justify-content:center;
  width:5.4em;height:5.4em;border-radius:50%;
  font-family:"Bodoni Moda",Georgia,serif;
  color:#f0d98c;font-size:1rem;line-height:1.1;text-align:center;
  border:2px solid rgba(212,165,72,.85);
  outline:1px solid rgba(212,165,72,.4);outline-offset:5px;
  background:
    radial-gradient(circle at 50% 32%,rgba(255,240,200,.16),transparent 55%),
    radial-gradient(circle at 50% 120%,rgba(60,36,4,.5),transparent 60%),
    #0c0d10;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.9),
    inset 0 -2px 6px rgba(255,240,200,.12),
    0 0 34px rgba(212,165,72,.35),
    0 10px 30px rgba(0,0,0,.6);
  text-shadow:0 2px 1px rgba(0,0,0,.9),0 -1px 1px rgba(255,244,214,.3);
}
.pe-coin small{display:block;font-size:.42em;letter-spacing:.24em;text-transform:uppercase;color:#cbb26a;margin-top:.4em}

/* ---- CONCEPT 5: type-as-hero ----------------------------------------
   One oversized metallic line IS the message. Pair with .pe-metal
   on the heading itself; this sets the composition scale. */
.pe-typehero{
  font-size:clamp(3.4rem,9.5vw,8.6rem);
  line-height:.9;
  letter-spacing:-.045em;
  max-width:12ch;
  text-wrap:balance;
}
.pe-typehero--sub{
  font-size:clamp(1.05rem,2vw,1.5rem);
  letter-spacing:.02em;
  max-width:52ch;
  opacity:.92;
}

/* ---- CONCEPT 4: restrained kinetic typography ------------------------
   Package tier names and flagship lines respond on hover/scroll;
   body copy stays stable. Variable-font axes when available,
   weight + tracking shift when not. */
@media (prefers-reduced-motion:no-preference){
  .pe-kinetic{transition:font-weight .45s ease,letter-spacing .45s ease}
  .pe-kinetic:hover{font-weight:800;letter-spacing:-.01em}
  @supports (font-variation-settings:"wght" 600){
    .pe-kinetic{font-variation-settings:"wght" 600}
    .pe-kinetic:hover{font-variation-settings:"wght" 800}
  }
  /* breathes on scroll: headline tightens slightly as it travels */
  @supports (animation-timeline:view()){
    .pe-scroll-kinetic{
      animation:pe-scroll-tighten linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes pe-scroll-tighten{
  from{letter-spacing:.015em}
  to{letter-spacing:-.03em}
}

/* ---- reduced motion: freeze the field, keep the light -------------- */
@media (prefers-reduced-motion:reduce){
  .pe-bokeh::after{animation:none}
  .pe-kinetic,.pe-scroll-kinetic{animation:none!important;transition:none!important}
}

/* ============ BUTTON SYSTEM — town mirror (Pass 2, 2026-10-19) ============
   The 19 town pages load fonts + letterforms + this sheet only (no
   pe-polish, no pe-main), and their inline template .btn-primary was the
   flat 135deg slab: no shadow at rest, no hover lift, no press, no
   disabled face (Pass-2 probes: box-shadow "none", transition "all").
   This block mirrors the pe-main v23 SATIN grade + the polish §1B press/
   disabled behavior verbatim, so the primary button is the same physical
   object on every page. This sheet loads LAST in the town head, so it
   wins ties against the inline template styles without !important. */
@keyframes pe-btn-glow {
  0%,100% { box-shadow:0 0 0 1px rgba(24,14,2,.9), inset 0 -3px 8px rgba(74,42,4,.45), 0 10px 26px rgba(0,0,0,.55), 0 0 26px rgba(232,195,108,.22); }
  50%     { box-shadow:0 0 0 1px rgba(24,14,2,.95), inset 0 -3px 8px rgba(74,42,4,.45), 0 12px 30px rgba(0,0,0,.55), 0 0 44px rgba(232,195,108,.42); }
}
.btn { transition:transform .22s cubic-bezier(.2,.7,.25,1.15), box-shadow .25s ease, filter .25s ease, background-color .25s ease, border-color .25s ease; }
.btn-primary {
  /* Pass 4 (2026-10-21): bottom stop lifted #96701a -> #ae8a2a so the
   * label holds WCAG >= 4.5:1 against EVERY stop of the gradient
   * (measured: 7.7 / 5.8 / 5.07). Visually the same gold standard. */
  background:linear-gradient(180deg,#d3a94e 0%,#bd8f32 45%,#ae8a2a 100%);
  color:#2a1d05;
  border:1px solid rgba(74,50,8,.9);
  text-shadow:0 1px 0 rgba(255,246,214,.6), 0 -1px 1px rgba(60,38,0,.4);
  box-shadow:0 0 0 1px rgba(24,14,2,.9), inset 0 -3px 8px rgba(74,42,4,.45), 0 10px 26px rgba(0,0,0,.55), 0 0 26px rgba(232,195,108,.22);
}
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn-primary:active {
  transform:translateY(2px);
  box-shadow:0 0 0 1px rgba(24,14,2,.95), inset 0 -1px 3px rgba(74,42,4,.5), inset 0 3px 8px rgba(60,38,4,.35), 0 4px 10px rgba(0,0,0,.5), 0 0 14px rgba(232,195,108,.18);
  transition-duration:.06s;
}
@media (min-width:701px) and (prefers-reduced-motion:no-preference) {
  .city-hero .btn-primary, .hero .btn-primary { animation:pe-btn-glow 4.5s ease-in-out infinite; }
}
.btn-ghost {
  border:1px solid rgba(232,195,108,.7); color:#fff;
  background:linear-gradient(180deg,rgba(232,195,108,.2),rgba(232,195,108,.05));
  box-shadow:inset 0 0 0 1px rgba(20,12,2,.5), inset 0 1px 0 rgba(255,235,180,.35), 0 4px 16px rgba(0,0,0,.5);
}
.btn-ghost:hover {
  border-color:rgba(246,219,156,.95);
  background:linear-gradient(180deg,rgba(232,195,108,.34),rgba(232,195,108,.1));
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(20,12,2,.5), inset 0 1px 0 rgba(255,235,180,.5), 0 8px 24px rgba(0,0,0,.55), 0 0 34px rgba(232,195,108,.4);
}
.btn-ghost:active { transform:translateY(1px); box-shadow:inset 0 3px 8px rgba(10,6,0,.5), 0 3px 8px rgba(0,0,0,.5); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { cursor:not-allowed; }
/* Pass 4 (2026-10-21 — owner screenshot: "Buttons look dark"): the old
 * disabled face was dark olive (#7d652c->#5d4a1e) under near-black text
 * at 75% — contrast ~1.3:1, an unreadable slab (it gates the booking
 * wizard's Continue and the date-confirm submit). A disabled primary
 * must still READ: muted grey-gold ground, full-strength dark label.
 * Measured vs #241a06 text: 6.7:1 (top stop) / 4.9:1 (bottom stop).
 * pe-polish.css carries the same face with !important for the index. */
.btn-primary:disabled, .btn-primary[disabled], .btn-primary[aria-disabled="true"] {
  background:linear-gradient(180deg,#b3a06e,#9c8753);
  color:#241a06;
  box-shadow:inset 0 2px 6px rgba(30,20,4,.4), inset 0 -1px 0 rgba(255,240,200,.22);
  text-shadow:none; transform:none; filter:none;
}
.btn-ghost:disabled, .btn-ghost[disabled] { opacity:.6; box-shadow:none; transform:none; }
.btn:focus-visible { outline:2px solid #f1d18b; outline-offset:3px; }

/* ============ LETTER-CRAFT — town display letters (Pass 2, 2026-10-19) ====
   Barry's letter bar (2026-10-19 00:55): every letter handcrafted, placed,
   real. Pass-2 probes (300% crops + computed styles) found the town H1 —
   the biggest letters on 19 pages — set in flat off-white with ZERO
   text-shadow layers, while the price numeral further down the same page
   carries the full 5-layer cast stack. This adds the missing architecture
   to .page-hero h1 (23 pages share the class): top light, seat, base,
   drop, and a whisper of house-gold glow. Color and type are untouched. */
.page-hero h1 {
  text-shadow:
    0 -1px 1px rgba(255,255,255,.35),
    0 1px 0 rgba(30,20,4,.45),
    0 2px 0 rgba(10,6,0,.55),
    0 10px 24px rgba(0,0,0,.7),
    0 0 26px rgba(240,214,150,.16);
}

/* ============ B-1 (Wave 2, 2026-10-19): town section grounds ============
   Town content sections sat directly on the flat body ground (Pass-2 §2.4:
   1.8 layers/section). Every town section now carries a ground of its own —
   a top candlelight wash — plus the house hairline frame between sections.
   Scoped by the town-only .town-grid marker so no other template moves.
   Pricing and FAQ sections take the ground only (PS-13 money calm, PS-10
   reassurance); glow fields ride on the Why / Enhancements / Kind Words
   sections (pe-glow-warm) and the CTA band (pe-glow-ember) in the pages. */
body:has(.town-grid) main .section{
  background-image:radial-gradient(1100px 480px at 50% -6%, rgba(212,165,72,.055), transparent 62%);
  border-top:1px solid rgba(212,165,72,.13);
}
body:has(.town-grid) main .section:first-of-type{border-top:0}