/* Blaze Living themes: site layer. Tokens come from living-tokens.js (mirrors the app's LivingThemes.kt). */
.living-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; overflow: hidden;
  background: linear-gradient(180deg, var(--living-g1), var(--living-g2) 55%, var(--living-g3)); }
.living-bg canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
html[data-living] .living-bg { display: block; }
html[data-living] body { background: transparent; }
html[data-living] .section--alt, html[data-living] .footer { background: var(--living-alt); }
html[data-living] .nav { background: var(--nav-bg); }
html[data-living] .lg-ring { stroke: var(--living-halo); }
html[data-living] .lg-hglow stop:nth-child(3) { stop-color: var(--living-halo); }
html[data-living] .lg-drop:first-of-type { fill: var(--living-drop); fill-opacity: .55; }

/* Nav button */
.living-open { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text); cursor: pointer; }
.living-open:hover { background: var(--bg-alt); }
.living-open svg { width: 19px; height: 19px; }

/* Showcase + picker */
.lt { text-align: center; overflow-x: clip; }
.lt__stage { position: relative; height: 470px; margin: 38px auto 0; perspective: 1400px; max-width: 900px; }
.lt__card { position: absolute; left: 50%; top: 0; width: 210px; height: 430px; margin-left: -105px; border: 0; padding: 0;
  background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.lt__card:focus-visible { outline: none; }
.lt__card:focus-visible .phone { box-shadow: 0 0 0 3px var(--accent), var(--shadow-lg); }
.phone { position: relative; width: 100%; height: 100%; border-radius: 34px; padding: 9px; background: #0c0c0e;
  box-shadow: var(--shadow-lg); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden; color: #fff; text-align: left; }
.phone__screen.is-light { color: #1d1d1f; }
.phone__notch { position: absolute; top: 8px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 10px; background: #0c0c0e; z-index: 2; }
.phone__time { position: absolute; top: 9px; left: 18px; font-size: 11px; font-weight: 600; }
.phone__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone__orb { position: absolute; top: 58px; left: 50%; width: 120px; height: 120px; margin-left: -60px; }
.phone__orb svg { width: 100%; height: 100%; display: block; }
.phone__hi { position: absolute; top: 184px; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.phone__bub { position: absolute; left: 14px; right: 14px; padding: 9px 11px; border-radius: 14px; font-size: 10.5px; line-height: 1.35; }
.phone__bub--me { top: 236px; left: 54px; color: #fff; }
.phone__bub--ai { top: 284px; right: 46px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.is-light .phone__bub--ai { background: rgba(255,255,255,.7); }
.phone__bar { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 34px; border-radius: 17px; background: rgba(255,255,255,.12); font-size: 10.5px; line-height: 34px; padding-left: 14px; opacity: .85; }
.is-light .phone__bar { background: rgba(255,255,255,.7); }
.lt__nav { position: absolute; top: 190px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; z-index: 50;
  display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--arrow, var(--accent)); }
.lt__nav svg { width: 20px; height: 20px; }
.lt__nav--prev { left: 4px; } .lt__nav--next { right: 4px; }
.lt__meta { margin-top: 18px; min-height: 64px; }
.lt__name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.lt__sub { margin-top: 4px; color: var(--text-2); font-size: 15px; }
.lt__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.lt__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 22px auto 0; max-width: 760px; }
.lt__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.lt__chip i { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.lt__chip[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--accent) inset; }
.lt__wx { margin-top: 10px; color: var(--text-2); font-size: 14px; min-height: 20px; }
@media (max-width: 640px) {
  .lt__stage { height: 400px; }
  .lt__card { width: 176px; height: 360px; margin-left: -88px; }
  .lt__card .phone { width: 210px; height: 430px; transform: scale(.838); transform-origin: 0 0; } /* same layout as desktop, just smaller */
  .lt__nav { top: 158px; }
}
@media (prefers-reduced-motion: reduce) { .lt__card { transition: none; } }

/* Scenes: a painted backdrop under the particles, veiled so text stays readable. */
html[data-scene] .living-bg { background: linear-gradient(var(--scene-veil), var(--scene-veil)), var(--scene-img) center / cover no-repeat, var(--living-g1); }
.lt__groups { margin: 26px auto 0; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lt__groups > div { min-width: 0; }
.lt__gh { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-align: center; }
.lt__groups .lt__chips { margin-top: 0; }
.lt__chips--scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; max-width: 980px; }
.lt__tile { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: center; }
.lt__tile i { display: block; width: 100%; height: 86px; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--line) inset, 0 6px 16px rgba(0,0,0,.18); transition: transform .2s ease, box-shadow .2s ease; }
.lt__tile:hover i { transform: translateY(-2px); }
.lt__tile[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--accent), 0 8px 20px rgba(0,0,0,.25); }
.lt__tile:focus-visible { outline: none; } .lt__tile:focus-visible i { box-shadow: 0 0 0 3px var(--accent); }
@media (prefers-reduced-motion: reduce) { .lt__tile i { transition: none; } .lt__tile:hover i { transform: none; } }
html[data-scene] main :is(h1, h2, h3, p, .lt__name, .lt__sub, .lt__tile) { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
html[data-scene][data-theme="light"] main :is(h1, h2, h3, p, .lt__name, .lt__sub, .lt__tile) { text-shadow: 0 1px 10px rgba(255,255,255,.85); }
html[data-scene] main :is(.card, .btn, button, input, form, .phone) :is(h1, h2, h3, p) { text-shadow: none; }

/* ---- Phones: swipeable theme strips, lighter effects ---- */
@media (max-width: 760px) {
  .lt__groups { gap: 16px; margin-top: 18px; }
  .lt__groups .lt__chips { position: relative; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 8px; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .lt__groups .lt__chips::-webkit-scrollbar { display: none; }
  .lt__chip { flex: none; scroll-snap-align: start; min-height: 44px; }
  .lt__chips--scenes { display: flex; gap: 10px; }
  .lt__tile { flex: none; width: 128px; scroll-snap-align: start; }
  .lt__tile i { width: 128px; height: 80px; box-shadow: 0 0 0 1px var(--line) inset; }
  .lt__row .btn { min-height: 44px; }
  .lt__nav { width: 44px; height: 44px; }
  .phone__bub--ai { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.16); }
}
@media (max-width: 380px) {
  .lt__stage { height: 360px; }
  .lt__card { width: 160px; height: 328px; margin-left: -80px; }
  .lt__card .phone { transform: scale(.762); }
  .lt__nav { top: 142px; }
}
@media (min-width: 900px) { .lt__chips--scenes { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Buttons: hovering shows the current theme inside (living.js adds .btn-fx) */
.has-fx { position: relative; isolation: isolate; overflow: hidden; }
.btn-fx { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .28s ease; pointer-events: none; background-size: cover !important; }
.btn-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-on .btn-fx { opacity: 1; }
.has-fx.fx-on { color: #fff !important; border-color: transparent !important; text-shadow: 0 1px 3px rgba(0,0,0,.55); filter: none !important; box-shadow: 0 0 0 1.5px var(--accent) inset, 0 6px 18px rgba(0,0,0,.18); transition: color .28s ease, box-shadow .28s ease; }
.has-fx.fx-on.fx-light { color: #1d1d1f !important; text-shadow: 0 1px 2px rgba(255,255,255,.8); }