/* ============================================================ 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} }