/* =============================================================================
   Landing motion layer (2026-09-23)
   Adds depth and a living product demo on top of premium.css without touching copy,
   prices or checkout. Every effect is progressive: without JS or with reduced motion
   the page renders its complete static state.
   ============================================================================= */

/* ---------- Hero: generated background ---------- */
.lp-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.lp-field.is-on { opacity: 1; }
.lp-floor { /* soft floor so the field fades into the next section (.hero::after is taken by ds-noise) */
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ds-bg-0));
}

/* ---------- Hero: headline line reveal ---------- */
.lp-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lp-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.lp-lines-on .lp-line > span { transform: none; }
.lp-line:nth-child(2) > span { transition-delay: .12s; }
.lp-line:nth-child(3) > span { transition-delay: .24s; }
.hero-h1 .ds-text-gradient {
  background-size: 220% 100%;
  animation: lp-gold-sheen 7s ease-in-out 1.4s infinite;
}
@keyframes lp-gold-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Hero: Prompt Studio player ---------- */
.brief-preview { position: relative; transition: box-shadow .6s ease, border-color .6s ease; }
.brief-preview.is-playing { border-color: #ebce8d38; box-shadow: 0 32px 80px #0006, 0 0 0 1px #ebce8d10, 0 0 90px rgba(255,199,0,.07); }
.bp-stages { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; padding: 14px 22px 0; }
.bp-stages li { position: relative; font: 600 10px var(--ds-font-body); letter-spacing: .06em; text-transform: uppercase; color: #7d7f7a; padding-top: 9px; transition: color .35s ease; }
.bp-stages li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: #ffffff14; }
.bp-stages li::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; border-radius: 2px; background: linear-gradient(90deg, #ffc700, #ffd84a); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bp-stages li.is-done, .bp-stages li.is-active { color: #ebce8d; }
.bp-stages li.is-done::after, .bp-stages li.is-active::after { transform: scaleX(1); }
.bp-stages li.is-active::after { box-shadow: 0 0 12px rgba(255,199,0,.55); }

.brief-preview__idea { min-height: 7.4em; }
#briefIdea.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: #ffc700; animation: lp-caret .9s steps(1) infinite; }
@keyframes lp-caret { 50% { opacity: 0; } }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 26px; }
.bp-chips span { font: 500 11px var(--ds-font-body); color: #d9c38d; border: 1px solid #ebce8d33; background: #ebce8d0d; border-radius: 999px; padding: 4px 9px; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.bp-chips span.is-in { opacity: 1; transform: none; }

/* Rows of the prompt sheet are always in the DOM (stable height); the player only fades them. */
.brief-preview.is-armed #briefTitle,
.brief-preview.is-armed #briefDetails > * { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), background-color .9s ease; }
.brief-preview.is-armed #briefTitle.is-in,
.brief-preview.is-armed #briefDetails > .is-in { opacity: 1; transform: none; }
.brief-preview.is-armed #briefDetails > dd.is-fresh { background-color: rgba(255,199,0,.16); border-radius: 3px; }

.bp-review { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; font: 500 10px var(--ds-font-body); color: #59695e; letter-spacing: .02em; min-height: 18px; }
.bp-review b { font-weight: 700; color: #3e4f47; text-transform: uppercase; letter-spacing: .08em; margin-right: 2px; }
.bp-review span { display: inline-flex; align-items: center; gap: 4px; opacity: .35; transition: opacity .3s ease, color .3s ease; }
.bp-review span::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; transition: background-color .3s ease, border-color .3s ease; }
.bp-review span.is-ok { opacity: 1; color: #2f6b4f; }
.bp-review span.is-ok::before { background: #2f6b4f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/8px no-repeat; border-color: #2f6b4f; }
.brief-preview__foot button.is-ready { border-color: #284638; background: #284638; color: #f1ede2; box-shadow: 0 0 0 4px #28463822; transition: all .4s ease; }

.bp-controls { position: absolute; right: 16px; top: 13px; display: flex; gap: 8px; align-items: center; }
.bp-pause { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ffffff1f; background: #ffffff08; color: #cfcfca; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bp-pause:hover { border-color: #ebce8d66; color: #ebce8d; }
.bp-pause:focus-visible { outline: 2px solid #ffc700; outline-offset: 2px; }
.bp-pause svg { width: 11px; height: 11px; }
.brief-preview.has-player .brief-preview__bar span { margin-right: 38px; }

/* ---------- Cards: cursor spotlight ---------- */
@media (pointer: fine) {
  .lp-spot { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,199,0,.075), transparent 45%); }
  /* Premium cards paint their gradient border with background layers - keep them under the light. */
  .ds-card--premium.lp-spot {
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,199,0,.075), transparent 45%) padding-box,
      linear-gradient(var(--ds-bg-2), var(--ds-bg-2)) padding-box,
      linear-gradient(135deg, var(--ds-accent-tint), transparent 30%, transparent 70%, var(--ds-accent-tint)) border-box;
  }
}

/* ---------- Primary CTA: magnetic ---------- */
.lp-magnet { transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ---------- Pipeline: steps light up in sequence ---------- */
.pipeline .pipe-step .num { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, background-color .45s ease, color .45s ease; }
.pipeline.lp-pipe-armed .pipe-step .num { background: rgba(255,255,255,.04); border-color: rgba(255,199,0,.2); color: #8b7a4c; }
.pipeline.lp-pipe-armed .pipe-step:not(:last-child)::before { transform: scaleY(0); transform-origin: top; transition: transform .5s ease; }
.pipeline .pipe-step.is-lit .num { background: var(--ds-accent); color: #171717; border-color: var(--ds-accent); box-shadow: 0 0 22px var(--ds-accent-glow); transform: scale(1.06); }
.pipeline .pipe-step.is-lit:not(:last-child)::before { transform: scaleY(1); }

/* ---------- Coach Mode tile: fills the tall tile with a live call ---------- */
.bento-hero .coach-demo { margin-top: 0; flex: 1; justify-content: center; }
.coach-orb { position: relative; width: 132px; height: 132px; margin: var(--ds-space-6) auto var(--ds-space-5); }
.coach-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,199,0,.35); animation: lp-ring 3.2s cubic-bezier(.2,.7,.2,1) infinite; }
.coach-orb i:nth-child(2) { animation-delay: 1.05s; }
.coach-orb i:nth-child(3) { animation-delay: 2.1s; }
.coach-orb b { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe27a, #ffc700 45%, #b88f00 100%); box-shadow: 0 0 40px rgba(255,199,0,.45), inset 0 -8px 18px rgba(0,0,0,.25); animation: lp-breathe 2.4s ease-in-out infinite; }
@keyframes lp-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes lp-breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
.coach-demo .coach-wave { justify-content: center; }
.coach-demo.is-live .coach-bubble { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.coach-demo.is-live .coach-bubble.is-in { opacity: 1; transform: none; }

/* ---------- Stats: tabular digits while counting ---------- */
[data-stat] { font-variant-numeric: tabular-nums; }

/* ---------- Final CTA: living border ---------- */
@property --lp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
/* A dedicated element: .final-cta-card already uses ::before (ds-aurora) and ::after (ds-noise). */
.final-cta-card > .lp-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 1; pointer-events: none;
  background: conic-gradient(from var(--lp-angle), transparent 0 55%, rgba(255,199,0,.85) 70%, rgba(139,92,246,.6) 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: lp-spin 6s linear infinite;
}
@keyframes lp-spin { to { --lp-angle: 360deg; } }

/* ---------- Section ambience: breaks the flat graphite between long sections ---------- */
#efekty, #funkcje, #cennik { background-image: radial-gradient(55% 38% at 12% 0%, rgba(255,199,0,.055), transparent 70%), radial-gradient(45% 32% at 92% 18%, rgba(139,92,246,.05), transparent 70%); }

/* ---------- Reduced motion: complete static state ---------- */
@media (prefers-reduced-motion: reduce) {
  .lp-field { display: none; }
  .lp-line > span { transform: none !important; transition: none !important; }
  .hero-h1 .ds-text-gradient, .coach-orb i, .coach-orb b, .final-cta-card > .lp-ring { animation: none !important; }
  .lp-magnet { transform: none !important; }
  .brief-preview.is-armed #briefTitle, .brief-preview.is-armed #briefDetails > * { opacity: 1 !important; transform: none !important; }
  .coach-demo.is-live .coach-bubble { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   Text diet visuals (2026-09-23)
   ============================================================================= */
/* Template catalog: icon tiles instead of paragraphs */
.lp-tile__ic { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ds-accent); background: linear-gradient(145deg, rgba(255,199,0,.16), rgba(255,199,0,.03)); border: 1px solid rgba(255,199,0,.22); box-shadow: 0 0 0 0 rgba(255,199,0,0); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.lp-tile__ic svg { width: 24px; height: 24px; }
.template-catalog__item:hover .lp-tile__ic, .template-catalog__item:focus-visible .lp-tile__ic { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 10px 30px -8px rgba(255,199,0,.45); }
.template-catalog__item h3 { font-size: 19px; }
@media (max-width: 540px) {
  .template-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-catalog__item { padding: 20px 12px; gap: 10px; }
  .template-catalog__item h3 { font-size: 15px; }
  .template-catalog__action { font-size: 11px; }
}

/* One prompt, three models */
.lp-trio { padding-top: 24px; }
.lp-trio h3 { margin-bottom: 22px; }
.lp-trio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lp-trio__item { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--ds-line-2); background: #0b0b0d; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, box-shadow .45s ease; }
.lp-trio__item:hover { transform: translateY(-6px); border-color: rgba(255,199,0,.35); box-shadow: 0 24px 60px -20px rgba(255,199,0,.25); }
.lp-trio__media { aspect-ratio: 16 / 10; background: #111; }
.lp-trio__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lp-trio__item figcaption { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--ds-line-2); font-size: 13px; color: var(--ds-fg-3); }
.lp-trio__item figcaption b { color: var(--ds-fg-1); font: 600 15px var(--ds-font-display); }
.lp-trio__foot { display: flex; align-items: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.lp-trio__foot .output-note { margin: 0; max-width: 560px; }
@media (max-width: 900px) { .lp-trio__grid { grid-template-columns: 1fr; } }
.template-catalog__action { justify-content: flex-end; color: var(--ds-accent); font-size: 16px; }
.template-catalog__item:hover .template-catalog__action span { transform: translate(3px, -3px); }
.template-catalog__action span { transition: transform .3s ease; display: inline-block; }

/* =============================================================================
   Film: how it works and why (2026-09-23)
   Without JS: a readable storyboard of cards. With JS (.is-film): a timed film.
   ============================================================================= */
.lp-film-section .section-head { margin-bottom: 28px; }
.lp-film__stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lp-scene { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 28px 22px; border-radius: 16px; border: 1px solid var(--ds-line-2); background: radial-gradient(120% 90% at 50% 0%, #1b1a17 0%, #0d0d10 70%); overflow: hidden; }
.lp-scene__cap { margin: 0; text-align: center; font: 600 clamp(15px, 1.7vw, 22px)/1.35 var(--ds-font-display); letter-spacing: -.02em; color: var(--ds-fg-1); max-width: 34ch; }

/* Film mode */
.lp-film.is-film { position: relative; }
.lp-film.is-film .lp-film__stage { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 22px; border: 1px solid rgba(255,199,0,.18); background: radial-gradient(90% 80% at 50% 0%, #1d1b16 0%, #0b0b0e 65%); box-shadow: 0 40px 100px -30px rgba(0,0,0,.8), 0 0 120px -40px rgba(255,199,0,.25); overflow: hidden; }
.lp-film.is-film .lp-scene { position: absolute; inset: 0; border: 0; border-radius: 0; background: none; padding: 5% 6% 4.5%; justify-content: space-between; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.lp-film.is-film .lp-scene.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.lp-film.is-film .lp-scene > :first-child { margin-top: auto; margin-bottom: auto; } /* centred in the space above the caption, keeps its own display */
.lp-film.is-film .lp-scene [style*="--at"] { opacity: 0; }
.lp-film.is-film .lp-scene.is-active [style*="--at"] { animation: lp-film-in .7s cubic-bezier(.2,.7,.2,1) var(--at) forwards; }
.lp-film.is-film .lp-scene.is-active .lp-scene__cap { animation: lp-film-in .7s cubic-bezier(.2,.7,.2,1) .15s both; }
.lp-film.is-paused * { animation-play-state: paused !important; }
@keyframes lp-film-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Scene 1: chat without a brief */
.lp-chat { display: flex; flex-direction: column; gap: 10px; width: min(640px, 100%); margin: 0 auto; }
.lp-chat__msg { padding: 10px 14px; border-radius: 14px; font-size: clamp(13px, 1.35vw, 17px); line-height: 1.45; max-width: 80%; }
.lp-chat__msg--me { align-self: flex-end; background: #2a2616; color: #f1e3b5; border: 1px solid rgba(255,199,0,.25); }
.lp-chat__msg--ai { align-self: flex-start; background: #17171b; border: 1px solid var(--ds-line-2); color: var(--ds-fg-3); display: flex; gap: 12px; align-items: center; }
.lp-chat__msg--ai em { font-style: normal; font-size: .9em; }
.lp-bland { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; flex-shrink: 0; }
.lp-bland i { height: 8px; border-radius: 2px; background: #3a3a40; grid-column: span 3; }
.lp-bland i:nth-child(2) { grid-column: span 2; } .lp-bland i:nth-child(3) { grid-column: span 1; background: #2c2c31; }
.lp-bland b { height: 18px; border-radius: 3px; background: #2a2a2f; }
.lp-chat__round { align-self: center; margin-top: 6px; font: 700 12px var(--ds-font-mono); letter-spacing: .12em; text-transform: uppercase; color: #ff8a65; display: inline-flex; gap: 8px; align-items: center; }
.lp-roll { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; }
.lp-roll span { display: block; line-height: 1.2em; }
.lp-film.is-film .lp-scene.is-active .lp-roll span { animation: lp-roll 2.2s steps(1) 5s forwards; }
@keyframes lp-roll { 0% { transform: translateY(0); } 33% { transform: translateY(-100%); } 66%, 100% { transform: translateY(-200%); } }

/* Scene 2: the idea */
.lp-app { width: min(720px, 100%); margin: 0 auto; border-radius: 14px; border: 1px solid var(--ds-line-2); background: #141417; padding: 0 0 18px; overflow: hidden; }
.lp-app__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--ds-line-2); font-size: 12px; color: var(--ds-fg-3); }
.lp-app__bar span { width: 9px; height: 9px; border-radius: 50%; background: #2e2e33; }
.lp-app__bar strong { margin-left: 8px; font-weight: 600; color: var(--ds-fg-2); }
.lp-app__label { display: block; padding: 16px 18px 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-fg-3); }
.lp-app__input { margin: 0 18px; min-height: 4.4em; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,199,0,.35); background: #0f0f12; font: 500 clamp(13px, 1.4vw, 17px)/1.5 var(--ds-font-body); color: var(--ds-fg-1); box-shadow: 0 0 0 4px rgba(255,199,0,.06); }
.lp-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: #ffc700; animation: lp-caret .9s steps(1) infinite; }
.lp-app__btn { margin: 14px 18px 0 auto; width: max-content; padding: 9px 16px; border-radius: 10px; background: var(--ds-accent); color: #161616; font-weight: 700; font-size: 14px; }

/* Scene 3: interview */
.lp-qs { display: grid; gap: 12px; width: min(760px, 100%); margin: 0 auto; }
.lp-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ds-line-2); background: #141417; font-size: clamp(12px, 1.3vw, 15px); }
.lp-q > span { color: var(--ds-fg-1); font-weight: 600; }
.lp-q > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lp-q i { font-style: normal; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ds-line-2); color: var(--ds-fg-3); font-size: .88em; white-space: nowrap; }
.lp-q i.is-pick { border-color: rgba(255,199,0,.25); }
.lp-film.is-film .lp-scene.is-active .lp-q i.is-pick { animation: lp-pick .45s ease var(--pick) forwards; }
.lp-film:not(.is-film) .lp-q i.is-pick { background: var(--ds-accent); color: #161616; border-color: var(--ds-accent); }
@keyframes lp-pick { to { background: var(--ds-accent); color: #161616; border-color: var(--ds-accent); box-shadow: 0 0 22px rgba(255,199,0,.4); } }

/* Scene 4: prompt + review */
.lp-scene--prompt > .lp-doc { width: min(760px, 100%); }
.lp-film.is-film .lp-scene--prompt { flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; column-gap: 4%; row-gap: 5%; }
.lp-film.is-film .lp-scene--prompt > .lp-doc { margin: 0; }
.lp-film.is-film .lp-scene--prompt .lp-scene__cap { flex-basis: 100%; }
.lp-doc { flex: 1 1 58%; max-width: 560px; border-radius: 12px; background: #eeede5; color: #263c33; padding: 18px 20px; display: grid; gap: 10px; }
.lp-doc__sec { display: flex; gap: 12px; align-items: baseline; font-size: clamp(12px, 1.25vw, 15px); }
.lp-doc__sec b { font: 800 .8em var(--ds-font-mono); letter-spacing: .08em; background: #263c33; color: #eeede5; padding: 3px 7px; border-radius: 4px; flex-shrink: 0; }
.lp-doc__lines { display: grid; gap: 7px; margin-top: 4px; }
.lp-doc__lines i { height: 7px; border-radius: 4px; background: #cfd3c8; }
.lp-doc__lines i:nth-child(2) { width: 86%; } .lp-doc__lines i:nth-child(3) { width: 93%; } .lp-doc__lines i:nth-child(4) { width: 64%; }
.lp-review { flex: 0 1 30%; min-width: 200px; display: grid; gap: 9px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--ds-line-2); background: #141417; font-size: 12px; }
.lp-review strong { font: 700 11px var(--ds-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ds-accent); margin-bottom: 2px; }
.lp-review div { display: grid; grid-template-columns: 94px 1fr; gap: 10px; align-items: center; color: var(--ds-fg-2); }
.lp-review i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ffc700, #ffd84a); transform-origin: left; }
.lp-film.is-film .lp-scene.is-active .lp-review i { animation: lp-bar 1s cubic-bezier(.2,.7,.2,1) var(--at) both; }
@keyframes lp-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scene 5: three models */
.lp-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; width: 100%; align-items: start; }
.lp-windows figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ds-line-2); background: #0b0b0d; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }
.lp-windows figcaption { padding: 7px 10px; font: 600 12px var(--ds-font-body); color: var(--ds-fg-2); border-bottom: 1px solid var(--ds-line-2); }
.lp-windows img { display: block; width: 100%; height: auto; }
.lp-film.is-film .lp-scene.is-active .lp-windows figure:nth-child(2) { transform-origin: bottom; }

/* Scene 6: end card */
.lp-end { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lp-end__line { margin: 0; font: 800 clamp(28px, 5vw, 64px)/1.05 var(--ds-font-display); letter-spacing: -.045em; color: var(--ds-fg-1); }
.lp-end__line--gold { background: linear-gradient(90deg, #ffc700, #ffe27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-end .ds-btn { margin-top: 26px; }

/* Controls */
.lp-film__bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.lp-film__chapters { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lp-film__chapters button { width: 100%; background: none; border: 0; padding: 8px 0 0; cursor: pointer; text-align: left; font: 600 11px var(--ds-font-body); letter-spacing: .04em; color: var(--ds-fg-3); position: relative; }
.lp-film__chapters button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: #ffffff17; }
.lp-film__chapters button span { position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px; background: var(--ds-accent); width: var(--p, 0%); }
.lp-film__chapters button.is-on, .lp-film__chapters button:hover { color: var(--ds-fg-1); }
.lp-film__chapters button:focus-visible, .lp-film__play:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.lp-film__play { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ds-line-2); background: #ffffff08; color: var(--ds-fg-1); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-film__play svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .lp-film.is-film .lp-film__stage { aspect-ratio: auto; height: 600px; }
  .lp-doc__lines { display: none; }
  .lp-doc { padding: 14px 16px; gap: 8px; }
  .lp-review { gap: 6px; padding: 12px 14px; }
  .lp-film.is-film .lp-scene { padding: 7% 5% 6%; }
  .lp-windows { grid-template-columns: 1fr; gap: 10px; width: 78%; margin: 0 auto; }
  .lp-windows figure:nth-child(n+2) { display: none; }
  .lp-film.is-film .lp-scene--prompt { flex-direction: column; flex-wrap: nowrap; gap: 14px; }
  .lp-review { width: 100%; }
  .lp-q { flex-direction: column; align-items: flex-start; }
  .lp-q > div { justify-content: flex-start; }
  .lp-film__chapters button { font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-film.is-film .lp-scene [style*="--at"], .lp-film.is-film .lp-scene .lp-scene__cap { opacity: 1 !important; animation: none !important; }
  .lp-film.is-film .lp-scene .lp-q i.is-pick { background: var(--ds-accent); color: #161616; }
  .lp-film.is-film .lp-scene .lp-review i, .lp-film.is-film .lp-scene .lp-roll span { animation: none !important; }
}