/* Homepage showcase – 7 chapters on desktop + phone (components/lunaris/DeviceShowcase.tsx) */

.ds {
  --ds-bg: #120a0f;
  --ds-ink: #f6eee6;
  --ds-muted: rgba(246, 238, 230, .68);
  --ds-gold: #e3a35a;
  position: relative; overflow: clip; isolation: isolate;
  padding: clamp(80px, 11vw, 140px) 0 clamp(70px, 9vw, 120px);
  background: var(--ds-bg); color: var(--ds-ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* colours come from the shown work (--g1..3, --g-img set by DeviceShowcase) and blend over when it changes */
@property --g1 { syntax: '<color>'; inherits: true; initial-value: #9b2335; }
@property --g2 { syntax: '<color>'; inherits: true; initial-value: #e8913c; }
@property --g3 { syntax: '<color>'; inherits: true; initial-value: #9a8fd0; }
.ds { transition: --g1 1.6s ease, --g2 1.6s ease, --g3 1.6s ease; }
.ds-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 32% at 22% 30%, color-mix(in srgb, var(--g1) 45%, transparent), transparent 70%),
    radial-gradient(36% 30% at 78% 46%, color-mix(in srgb, var(--g2) 30%, transparent), transparent 70%),
    radial-gradient(44% 34% at 56% 86%, color-mix(in srgb, var(--g3) 26%, transparent), transparent 72%); }
.ds-glow::after { content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background: var(--g-img) center / cover; filter: blur(60px) saturate(1.2); transition: background-image 1.2s ease; }
.ds-tabs__bar { background: linear-gradient(90deg, var(--g1), var(--g2)) !important; }
.ds-head { position: relative; max-width: 820px; margin: 0 auto; padding: 0 20px; text-align: center; }
.ds-kicker { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--ds-gold); }
.ds-head h2 { margin: 0; font-size: clamp(36px, 6.4vw, 72px); line-height: 1.04; font-weight: 600; letter-spacing: -.01em; }
.ds-lead { margin: 22px auto 0; max-width: 600px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--ds-muted); }

/* ---------- 3D scene ---------- */
.ds-scene { position: relative; margin: clamp(40px, 6vw, 80px) auto 0; width: min(1120px, 94vw); }
/* each device gets its own perspective; no shared 3D depth sorting, so the phone always floats in front */
.ds-rig { position: relative; perspective: 2200px; perspective-origin: 50% 30%; padding-bottom: 6%; }
.ds-desk { position: relative; width: 80%; transform-style: preserve-3d; transform-origin: 60% 50%; }
.ds-desk__body { position: relative; padding: 1.1%; border-radius: 18px; background: linear-gradient(160deg, #26262b, #0b0b0e 40%); border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 60px 120px rgba(0, 0, 0, .65), 0 20px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ds-desk__glass { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #000; container-type: inline-size; }
.ds-desk__glass::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1), transparent 34%, transparent 70%, rgba(255, 255, 255, .04)); }
.ds-desk__neck { width: 13%; height: clamp(30px, 6vw, 74px); margin: 0 auto; background: linear-gradient(90deg, #8d8d93, #d7d7dc 45%, #7c7c82); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.ds-desk__foot { width: 32%; height: clamp(6px, .9vw, 11px); margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #d9d9de, #8a8a90); box-shadow: 0 18px 30px rgba(0, 0, 0, .5); }

.ds-phone { position: absolute; right: 2%; bottom: -4%; width: 25%; transform-style: preserve-3d; transform-origin: 40% 50%; z-index: 4; }
.ds-phone::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -9%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(18px); z-index: -1; animation: ds-shadow 6.5s ease-in-out infinite; }
@keyframes ds-shadow { 50% { transform: scale(.82); opacity: .6; } }
.ds-phone__body { padding: 3.4%; border-radius: 15% / 7.2%; background: linear-gradient(150deg, #3a3a40, #101013 45%, #1d1d22); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 90px rgba(0, 0, 0, .7), 0 0 0 1px #000, inset 0 0 0 1.5px rgba(255, 255, 255, .06); }
.ds-phone__glass { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 12.5% / 5.8%; background: #000; container-type: inline-size; }
.ds-phone__glass::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .14), transparent 30%); }
.ds-phone__island { position: absolute; z-index: 6; top: 1.8%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.ds-fade { position: absolute; inset: 0; }
.ds-floor { position: absolute; left: 10%; right: 10%; bottom: -2%; height: 60px; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 70%); filter: blur(10px); }

/* ---------- a screen ---------- */
.ds-screen { position: absolute; inset: 0; overflow: hidden; color: #fff; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--tone, #2e131d); }
.ds-screen__bg { position: absolute; inset: 0; }
.ds-screen__bg img, .ds-screen__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ds-drift 18s ease-in-out infinite alternate; }
@keyframes ds-drift { from { transform: scale(1.04); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.ds-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 30%, transparent 55%, rgba(0, 0, 0, .55)); }
.ds-screen.is-light { color: #2a1d20; }
.ds-screen.is-light::after { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%); }
.ds-screen__ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; }
.ds-bar { display: flex; align-items: center; justify-content: space-between; flex: none; }
.ds-bar__nav { display: flex; gap: 2.4cqw; }
.ds-bar__nav i { font-style: normal; font-weight: 600; opacity: .85; }

.ds-art { position: relative; display: block; overflow: hidden; background: #2a1d20; box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .45); }
.ds-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-k { margin: 0; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .82; }
.ds-t { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.08; }
.ds-s { margin: 0; opacity: .85; line-height: 1.45; }
.ds-btn { display: inline-block; align-self: flex-start; border-radius: 999px; background: #fff; color: #2a1d20; font-weight: 700; white-space: nowrap; }
.ds-btn--navy { background: #1f2140; color: #fff; }
.ds-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
.ds-c { flex: 1; min-height: 0; display: flex; }
.ds-c figure { margin: 0; }
.ds-c figcaption { line-height: 1.35; opacity: .9; }
.ds-c__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; opacity: .85; }
.ds-c__trust li::before { content: '✦ '; color: var(--ds-gold, #e3a35a); }

/* phone layout (portrait) */
.ds-screen--phone .ds-screen__ui { padding: 13cqw 6.5cqw 7cqw; }
.ds-screen--phone .ds-bar .lx-logo { font-size: 4.6cqw; }
.ds-screen--phone .ds-c { flex-direction: column; gap: 4.5cqw; padding-top: 6cqw; }
.ds-screen--phone .ds-k { font-size: 2.6cqw; }
.ds-screen--phone .ds-t { font-size: 8.4cqw; }
.ds-screen--phone .ds-s { font-size: 3.5cqw; }
.ds-screen--phone .ds-btn { font-size: 3.2cqw; padding: 2.8cqw 4.6cqw; }
.ds-screen--phone .ds-c__text { display: grid; gap: 2.6cqw; }
.ds-screen--phone .ds-c--hero { justify-content: flex-end; }
.ds-screen--phone .ds-c--hero .ds-c__frame { width: 74cqw; align-self: center; margin-bottom: auto; margin-top: 4cqw; }
.ds-screen--phone .ds-c--motiv .ds-c__frame { width: 100%; aspect-ratio: 4 / 5 !important; margin-top: auto; }
.ds-screen--phone .ds-c__pair { display: grid; gap: 5cqw; }
.ds-screen--phone .ds-c__pair figure { display: grid; grid-template-columns: 42cqw 1fr; gap: 4cqw; align-items: center; font-size: 3.2cqw; }
.ds-screen--phone .ds-c__pair b { display: block; font-size: 4.4cqw; font-family: 'Playfair Display', serif; margin-bottom: 1cqw; }
.ds-screen--phone .ds-c--whole { justify-content: center; text-align: center; }
.ds-screen--phone .ds-c--whole .ds-c__frame { width: 70cqw; align-self: center; box-shadow: 0 3cqw 6cqw rgba(60, 35, 20, .35); }
.ds-screen--phone .ds-c__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; font-size: 3cqw; }
.ds-screen--phone .ds-c__cards figcaption { margin-top: 2cqw; font-family: 'Playfair Display', serif; font-size: 3.6cqw; }
.ds-screen--phone .ds-c--cards .ds-btn { align-self: center; margin-top: auto; }
.ds-screen--phone .ds-c--foot { align-items: center; justify-content: center; text-align: center; }
.ds-screen--phone .ds-c__logo { font-size: 6cqw; }
.ds-screen--phone .ds-c__trust { gap: 2cqw 4cqw; font-size: 3cqw; }

/* desktop layout (landscape) */
.ds-screen--desk .ds-screen__ui { padding: 2.4cqw 5cqw 3.4cqw; }
.ds-screen--desk .ds-bar .lx-logo { font-size: 1.7cqw; }
.ds-screen--desk .ds-bar__nav { font-size: 1.15cqw; }
.ds-screen--desk .ds-c { align-items: center; gap: 5cqw; padding-top: 1.5cqw; }
.ds-screen--desk .ds-k { font-size: 1cqw; }
.ds-screen--desk .ds-t { font-size: 3.9cqw; }
.ds-screen--desk .ds-s { font-size: 1.45cqw; max-width: 34cqw; }
.ds-screen--desk .ds-btn { font-size: 1.25cqw; padding: 1.1cqw 2cqw; }
.ds-screen--desk .ds-c__text { display: grid; gap: 1.3cqw; flex: 1; min-width: 0; }
.ds-screen--desk .ds-c__frame { flex: none; height: 46cqw; width: auto; max-width: 46cqw; }
.ds-screen--desk .ds-c--hero .ds-c__frame { height: auto; width: 44cqw; }
.ds-screen--desk .ds-c--motiv .ds-c__frame { width: 36cqw; height: auto; aspect-ratio: 5 / 4 !important; }
.ds-screen--desk .ds-c--detail { gap: 4cqw; }
.ds-screen--desk .ds-c__pair { display: flex; gap: 3cqw; flex: none; }
.ds-screen--desk .ds-c__pair figure { width: 21cqw; font-size: 1.15cqw; }
.ds-screen--desk .ds-c__pair figcaption { margin-top: 1.2cqw; }
.ds-screen--desk .ds-c__pair b { display: block; font-family: 'Playfair Display', serif; font-size: 1.7cqw; }
.ds-screen--desk .ds-c--whole .ds-c__frame { width: 34cqw; height: auto; margin-left: 6cqw; box-shadow: 0 2cqw 4cqw rgba(60, 35, 20, .35); }
.ds-screen--desk .ds-c--cards { gap: 4cqw; }
.ds-screen--desk .ds-c__cards { display: flex; gap: 2.4cqw; flex: none; font-size: 1.2cqw; }
.ds-screen--desk .ds-c__cards figure { width: 15cqw; }
.ds-screen--desk .ds-c__cards figcaption { margin-top: 1cqw; font-family: 'Playfair Display', serif; font-size: 1.35cqw; }
.ds-screen--desk .ds-c--cards .ds-btn { align-self: flex-end; }
.ds-screen--desk .ds-c--foot { flex-direction: column; justify-content: center; gap: 2cqw; text-align: center; }
.ds-screen--desk .ds-c__logo { font-size: 2.4cqw; }
.ds-screen--desk .ds-c__trust { gap: 1cqw 3cqw; font-size: 1.3cqw; }

/* ---------- chapter selector: floating glass bar, sticky at the bottom of the screen ---------- */
.ds-nav { position: sticky; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 10; width: fit-content; max-width: min(1120px, calc(100vw - 24px)); margin: calc(-1 * clamp(70px, 8vw, 110px)) auto 0; padding: 12px 12px 10px; display: grid; gap: 8px; justify-items: center; text-align: center;
  border-radius: 26px; background: rgba(22, 12, 18, .55); border: 1px solid rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.ds-after { margin: 26px 0 0; text-align: center; }
.ds-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ds-tabs button { position: relative; display: inline-flex; gap: 7px; align-items: baseline; padding: 9px 15px 11px; border: 1px solid rgba(246, 238, 230, .18); border-radius: 999px; background: rgba(255, 255, 255, .04);
  color: var(--ds-muted); font: 600 14px 'Plus Jakarta Sans', sans-serif; cursor: pointer; overflow: hidden; transition: color .3s, background .3s, border-color .3s; }
.ds-tabs button span { font-size: 11px; letter-spacing: .12em; color: var(--ds-gold); }
.ds-tabs button:hover { color: var(--ds-ink); border-color: rgba(246, 238, 230, .4); }
.ds-tabs button.is-on { color: #1c1016; background: var(--ds-ink); border-color: var(--ds-ink); }
.ds-tabs button.is-on span { color: #9b2335; }
.ds-tabs__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #9b2335, #e8913c); transform-origin: left; animation: ds-progress linear forwards; }
.ds-tabs__bar.is-paused { animation-play-state: paused; }
@keyframes ds-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ds-caption { margin: 0; max-width: 720px; padding: 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--ds-muted); }
.ds-caption b { color: var(--ds-ink); font-weight: 700; margin-right: 4px; }
.ds-live { color: var(--ds-ink); font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(246, 238, 230, .4); padding-bottom: 3px; transition: border-color .3s; }
.ds-live:hover { border-color: var(--ds-gold); }

/* ---------- filmstrip ---------- */
.ds-strip { margin-top: clamp(70px, 9vw, 120px); }
.ds-strip__label { text-align: center; }
/* three phones, symmetric: the outer ones slightly turned, the middle one larger and raised */
.ds-strip__row { list-style: none; margin: 30px auto 0; padding: 30px 16px 40px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3.4vw, 54px); }
.ds-mini button { display: grid; gap: 14px; justify-items: center; padding: 0; border: 0; background: none; color: var(--ds-muted); cursor: pointer; font: 600 13px 'Plus Jakarta Sans', sans-serif; transition: transform .6s cubic-bezier(.22, 1, .36, 1), color .3s; }
.ds-mini--0 button { transform: rotate(-5deg) translateY(14px); }
.ds-mini--2 button { transform: rotate(5deg) translateY(14px); }
.ds-mini button:hover { transform: translateY(-12px) rotate(0); color: var(--ds-ink); }
.ds-mini__glass { position: relative; display: block; width: clamp(150px, 15vw, 205px); aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 13% / 6%; container-type: inline-size;
  border: 5px solid #121216; outline: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px rgba(0, 0, 0, .55); }
.ds-mini__label b { color: var(--ds-gold); font-size: 11px; letter-spacing: .12em; margin-right: 4px; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .ds-scene { width: 100vw; }
  .ds-rig { perspective: 1400px; }
  /* phone = the main figure, centred; the monitor small in front of its lower edge, also centred */
  .ds-rig { padding: 0; height: 178vw; }
  .ds-phone { left: 18vw; right: auto; top: 8vw; bottom: auto; width: 64vw; transform-origin: 50% 50%; z-index: 4; }
  .ds-phone::after { display: none; }
  .ds-desk { position: absolute; left: 22vw; top: 128vw; width: 56vw; z-index: 6; transform-origin: 50% 50%; }
  .ds-desk__body { border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
  .ds-desk__neck { height: 6vw; }
  .ds-floor { left: 20%; right: 20%; bottom: 0; }
  .ds-nav { width: calc(100vw - 20px); padding: 10px 0 8px; border-radius: 20px; margin-top: 10px; }
  .ds-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding: 0 10px; scrollbar-width: none; }
  .ds-tabs::-webkit-scrollbar { display: none; }
  .ds-tabs button { white-space: nowrap; padding: 10px 14px 12px; font-size: 13px; }
  .ds-caption { padding: 0 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-screen__bg img, .ds-screen__bg video { animation: none; }
  .ds-tabs__bar { animation: none; transform: scaleX(1); }
}

/* ---------- the real page inside the devices ---------- */
.ds-live-frame { position: absolute; inset: 0; overflow: hidden; }
.ds-live-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #120a0f; opacity: 0; transition: opacity .9s ease; }
.ds-live-frame iframe.is-ready { opacity: 1; }
.ds-live-frame__fallback { position: absolute; inset: 0; transition: opacity .9s ease; }
.ds-live-frame.is-ready .ds-live-frame__fallback { opacity: 0; }
.ds-mini--1 .ds-mini__glass { width: clamp(180px, 18.5vw, 250px); }
@media (max-width: 760px) {
  .ds-strip__row { gap: 3vw; padding: 24px 10px 30px; }
  .ds-mini__glass { width: 27vw; border-width: 3px; }
  .ds-mini--1 .ds-mini__glass { width: 31vw; }
  .ds-mini button { font-size: 11px; gap: 10px; }
  .ds-mini--0 button { transform: rotate(-4deg) translateY(10px); }
  .ds-mini--2 button { transform: rotate(4deg) translateY(10px); }
}

/* ---------- phones: lighter scene (graphics memory) ----------
   Chrome on Android drops layers while scrolling when a section needs too many large ones at once –
   parts of the devices disappeared. On small screens: no filmstrip, no blurred backdrop image,
   no backdrop blur on the bar, no real 3D perspective. */
@media (max-width: 760px) {
  .ds-strip, .ds-strip.is-off { display: none; }
  .ds-glow::after { display: none; }
  .ds-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(24, 13, 20, .94); }
  .ds-rig { perspective: none; }
  .ds-desk, .ds-phone { transform-style: flat; }
  .ds-desk__glass::after, .ds-phone__glass::after { display: none; }
}

/* ---------- the "desktop" is a slim display panel: no neck, no foot – more room for the screen ---------- */
.ds-desk__neck, .ds-desk__foot { display: none; }
.ds-desk__body { padding: .7%; border-radius: 14px; background: linear-gradient(160deg, #2c2c32, #0d0d10 45%, #1a1a1f); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .55), 0 18px 36px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
.ds-desk__glass { border-radius: 8px; }
.ds-floor { bottom: -4%; }
@media (min-width: 761px) {
  .ds-desk { width: 86%; }
  .ds-rig { padding-bottom: 10%; }
  .ds-phone { width: 24%; right: 0; bottom: 0; }
}
/* hero (compact): the panel takes almost the full column, the phone floats over its lower right corner */
.ds--compact .ds-desk { width: 93%; }
.ds--compact .ds-phone { width: 25%; right: -1%; bottom: -2%; }
.ds--compact .ds-rig { padding-bottom: 18%; }
.ds--compact .ds-nav { margin-top: 10px; }
@media (max-width: 760px) {
  .ds-rig { padding-bottom: 0; }
  .ds-desk { top: 118vw; }
  .ld > .ds .ds-rig, .ds:not(.ds--compact) .ds-rig { height: 166vw; }
}