/* ============================================================
   B2 CREATE — pop-up home, modern flow (2026-10-08)
   Replaces the print cues the user read as "old newspaper":
   dot grid, black rules, boxed grid, grey tilted photos, black
   ticker bars, hard colour blocks between sections.
   Everything is scoped to body.has-atmos, set by home-flow.js.
   ============================================================ */

/* one living background: home-flow.js mixes --atmos between sections */
.home-atmos { --atmos: #f3efe7; --glow: 1; position: fixed; inset: 0; z-index: -1; background: var(--atmos); pointer-events: none; overflow: hidden; }
.home-atmos .glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: calc(var(--glow) * 0.7); }
.home-atmos .g1 { width: 58vmax; height: 58vmax; left: -16vmax; top: -18vmax; background: #FFE9E0; }
.home-atmos .g2 { width: 52vmax; height: 52vmax; right: -18vmax; bottom: -20vmax; background: #c8dbdc; }
@media (prefers-reduced-motion: no-preference) {
  .home-atmos .g1 { animation: atmos-drift 26s ease-in-out infinite alternate; }
  .home-atmos .g2 { animation: atmos-drift 32s ease-in-out infinite alternate-reverse; }
}
@keyframes atmos-drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); } }

body.has-atmos { background: #f3efe7; background-image: none; }
body.has-atmos main > section, body.has-atmos main > .ticker { background: transparent !important; }

/* frosted header that reads over every tone */
body.has-atmos .nav { background: rgba(243, 239, 231, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid rgba(5, 20, 20, 0.08); }
body.has-atmos .masthead-bar { background: transparent; border-bottom-color: rgba(5, 20, 20, 0.08); }

/* tickers: light marquee text that fades at the edges, no black bars */
body.has-atmos .ticker { border: 0; color: rgba(5, 20, 20, 0.5); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
body.has-atmos .ticker-track { padding: 26px 0; font-size: 12px; letter-spacing: 0.32em; }
body.has-atmos .ticker-track span::after { opacity: 0.4; }

/* section heads: hairline instead of a heavy rule */
body.has-atmos .spread-head { border-bottom: 1px solid rgba(5, 20, 20, 0.12); padding-bottom: 22px; margin-bottom: 40px; }

/* "Three ways in": three soft glass cards instead of a black-boxed grid */
body.has-atmos #what .grid-3 { border: 0; gap: clamp(14px, 1.6vw, 22px); }
body.has-atmos #what .grid-3 > * { border: 0 !important; border-radius: 26px; overflow: hidden; isolation: isolate; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(5, 20, 20, 0.04), 0 26px 60px -38px rgba(5, 20, 20, 0.32); transition: transform 0.7s var(--spring), box-shadow 0.6s var(--ease), background 0.6s var(--ease); }
body.has-atmos #what .grid-3 > *::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 233, 224, 0.9), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(200, 219, 220, 0.8), transparent 60%); opacity: 0; transition: opacity 0.6s var(--ease); }
body.has-atmos #what .grid-3 > *:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(5, 20, 20, 0.04), 0 40px 80px -40px rgba(5, 20, 20, 0.38); }
body.has-atmos #what .grid-3 > *:hover::before { opacity: 1; }
body.has-atmos #what .grid-3 .no { font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(5, 20, 20, 0.32); font-size: 40px; top: 18px; right: 22px; }
body.has-atmos #what .pill, body.has-atmos #cta .pill { border: 1px solid rgba(5, 20, 20, 0.16); background: rgba(255, 255, 255, 0.55); }
body.has-atmos #what .grid-3 > *:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }

/* the matter strip sits in the deep tone without a hard frame */
body.has-atmos #matter-sec .matter-strip { border: 1px solid rgba(243, 239, 231, 0.14); border-radius: 26px; background: #051414; box-shadow: 0 40px 90px -50px rgba(5, 20, 20, 0.7); }

/* footer: hairline, no heavy rule */
body.has-atmos footer { border-top: 1px solid rgba(5, 20, 20, 0.12); }

/* each section rises softly into place as it arrives (Chromium, Safari 26+; others keep the reveal) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    body.has-atmos main > section:not(#cover) > :is(.spread-head, .grid-3, .scroller, .matter-head, .matter-strip) { animation: flow-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes flow-rise { from { opacity: 0; transform: translate3d(0, 64px, 0) scale(0.975); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  }
}
@media (max-width: 1080px) { body.has-atmos #what .grid-3 > * { min-height: 0; } }