/* ==========================================================================
   Lumiere — the film (player + one-time popup). Scenes are DOM layers driven
   by js/film.js from one clock, synced to assets/film/lumiere-film.mp3.
   ========================================================================== */
.lf { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; color: #fff;
  container-type: size; user-select: none; -webkit-user-select: none; isolation: isolate; font-family: var(--font-text); }
.lf.tall { aspect-ratio: 9 / 16; }
.lf-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.lf-scene.on { pointer-events: auto; }
.lf img { display: block; max-width: none; }
.lf-intro, .lf-looks, .lf-relight, .lf-pro, .lf-editor, .lf-watch, .lf-privacy, .lf-end { position: absolute; inset: 0; }
.lf .iphone { --w: 24cqw; }
.lf.tall .iphone { --w: 46cqw; }

/* shared text */
.lf-kicker { font: 700 1.05cqw/1 var(--font-mono); letter-spacing: .3em; color: var(--accent); text-transform: uppercase; }
.lf.tall .lf-kicker { font-size: 2.6cqw; }
.lf-big { font: 650 4.6cqw/1.02 var(--font-display); letter-spacing: -.035em; margin: 0; }
.lf.tall .lf-big { font-size: 9cqw; }
.lf-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.01em; }

/* 1 · intro */
.lf-intro { display: grid; place-items: center; }
.lf-glow { position: absolute; inset: -20%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent 70%); }
.lf-ring { position: absolute; width: 34cqw; left: 50%; top: 46%; transform: translate(-50%, -50%); overflow: visible; }
.lf.tall .lf-ring { width: 70cqw; top: 40%; }
.lf-ring circle { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 14px rgba(var(--accent-rgb), .7)); }
.lf-flare { position: absolute; left: calc(50% + 7.4cqw); top: calc(46% - 7.6cqw); width: .9cqw; height: .9cqw; margin: -.45cqw; border-radius: 50%; background: #fff;
  box-shadow: 0 0 1cqw .4cqw #fff, 0 0 3cqw 1cqw var(--accent-hi), 0 0 8cqw 3cqw rgba(var(--accent-rgb), .5); opacity: 0; }
.lf.tall .lf-flare { left: calc(50% + 15.2cqw); top: calc(40% - 15.6cqw); width: 1.8cqw; height: 1.8cqw; margin: -.9cqw; }
.lf-flare::before, .lf-flare::after { content: ""; position: absolute; left: 50%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.lf-flare::before { width: 22cqw; margin: 0 0 0 -11cqw; } .lf-flare::after { width: 10cqw; margin-left: -5cqw; transform: rotate(90deg); }
.lf-word { position: absolute; left: 0; right: 0; top: 69%; text-align: center; margin: 0; font: 700 3.2cqw/1 var(--font-mono); letter-spacing: .42em; padding-left: .42em; opacity: 0; }
.lf.tall .lf-word { top: 66%; font-size: 7cqw; }
.lf-tag { position: absolute; left: 0; right: 0; top: 76.5%; text-align: center; opacity: 0; }
.lf.tall .lf-tag { top: 72%; }

/* 2 · looks */
.lf-looks { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4cqw; padding: 0 7cqw 8cqh; }
.lf-looks .iphone { --w: 22cqw; }
.lf.tall .lf-looks { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; align-content: center; gap: 4cqw; padding: 0 0 16cqh; }
.lf.tall .lf-looks .iphone { --w: 36cqw; }
.lf.tall .lf-looks { padding-top: 8cqh; }
.lf-count b { display: block; font: 650 11cqw/.9 var(--font-display); letter-spacing: -.05em; background: linear-gradient(100deg, var(--accent), var(--accent-hi), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lf-count span { display: block; font: 500 1.9cqw/1.3 var(--font-text); color: rgba(255,255,255,.75); margin-top: 1cqw; max-width: 20cqw; }
.lf.tall .lf-count { text-align: center; } .lf.tall .lf-count b { font-size: 17cqw; } .lf.tall .lf-count span { font-size: 4.2cqw; max-width: none; }
.lf-stack { position: absolute; inset: 0; }
.lf-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lf-stack img.on { opacity: 1; }
.lf-name { justify-self: start; }
.lf-name em { display: block; font: 700 1cqw/1 var(--font-mono); letter-spacing: .26em; color: var(--accent); font-style: normal; }
.lf-name b { display: block; font: 650 3.4cqw/1.05 var(--font-display); letter-spacing: -.03em; margin-top: 1cqw; }
.lf-name span { display: block; font-size: 1.5cqw; color: rgba(255,255,255,.65); margin-top: .8cqw; }
.lf.tall .lf-name { justify-self: center; text-align: center; } .lf.tall .lf-name em { font-size: 2.4cqw; } .lf.tall .lf-name b { font-size: 7.4cqw; } .lf.tall .lf-name span { font-size: 3.6cqw; }

/* 3 · relight */
.lf-relight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 9cqh 5cqw 16cqh; }
.lf.tall .lf-relight { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); gap: 2cqh; padding: 9cqh 7cqw 23cqh; }
.lf-card { position: relative; border-radius: 1.6cqw; overflow: hidden; background: #111; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.6); }
.lf.tall .lf-card { border-radius: 3.4cqw; }
.lf-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-card .clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--w, 100%)) 0 0); }
.lf-card .line { position: absolute; top: 0; bottom: 0; left: var(--w, 100%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); }
.lf-card figcaption { position: absolute; left: 1.4cqw; bottom: 1.3cqw; right: 1.4cqw; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.lf-card figcaption b { display: block; font: 650 2.2cqw/1.1 var(--font-display); letter-spacing: -.02em; }
.lf-card figcaption span { display: block; font: 700 .85cqw/1 var(--font-mono); letter-spacing: .2em; color: var(--accent-hi); margin-top: .6cqw; text-transform: uppercase; }
.lf.tall .lf-card figcaption { left: 3cqw; bottom: 2.4cqw; } .lf.tall .lf-card figcaption b { font-size: 5.4cqw; } .lf.tall .lf-card figcaption span { font-size: 2.2cqw; }

/* 4 · portrait */
.lf-full { position: absolute; inset: 0; }
.lf-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-brk { position: absolute; transition: none; }
.lf-brk i { position: absolute; width: 2.4cqw; height: 2.4cqw; border: 2px solid var(--accent); }
.lf.tall .lf-brk i { width: 5cqw; height: 5cqw; }
.lf-brk i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .lf-brk i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.lf-brk i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .lf-brk i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.lf-chip { position: absolute; left: 50%; top: 7cqh; transform: translateX(-50%); display: flex; gap: .8cqw; align-items: center; padding: 1cqw 1.6cqw; border-radius: 99px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
  font: 700 1.05cqw/1 var(--font-mono); letter-spacing: .2em; white-space: nowrap; }
.lf-chip i { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lf.tall .lf-chip { font-size: 2.6cqw; padding: 2.2cqw 3.4cqw; gap: 1.6cqw; } .lf.tall .lf-chip i { width: 1.6cqw; height: 1.6cqw; }

/* 5 · pro */
.lf-pro { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6cqw; padding: 0 9cqw 10cqh; }
.lf-pro .iphone { --w: 21cqw; }
.lf.tall .lf-pro { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 4cqh; padding: 0 0 12cqh; }
.lf.tall .lf-pro .iphone { --w: 38cqw; }
.lf-read { display: grid; gap: 1.6cqw; }
.lf.tall .lf-read { grid-template-columns: 1fr 1fr; gap: 3cqw 8cqw; }
.lf-read div { opacity: 0; }
.lf-read em { display: block; font: 700 1cqw/1 var(--font-mono); letter-spacing: .24em; color: rgba(255,255,255,.55); font-style: normal; }
.lf-read b { display: block; font: 600 4.2cqw/1.05 var(--font-mono); letter-spacing: -.02em; }
.lf-read b.gold { color: var(--accent); }
.lf.tall .lf-read em { font-size: 2.4cqw; } .lf.tall .lf-read b { font-size: 8.4cqw; }
.lf-hist { width: 30cqw; height: 7cqw; margin-top: .6cqw; }
.lf.tall .lf-hist { grid-column: 1 / -1; width: 70cqw; height: 14cqw; }
.lf-hist path { fill: rgba(var(--accent-rgb), .28); stroke: var(--accent); stroke-width: 1.2; }

/* 6 · editor */
.lf-editor { display: flex; justify-content: center; align-items: center; gap: 5cqw; perspective: 1400px; padding-bottom: 12cqh; }
.lf-editor .iphone { --w: 18cqw; }
.lf.tall .lf-editor { gap: 4cqw; } .lf.tall .lf-editor .iphone { --w: 40cqw; }
.lf.tall .lf-ed > span { display: none; }
.lf-ed { display: grid; justify-items: center; gap: 1.6cqw; transform-style: preserve-3d; }
.lf-ed > span { font: 700 1cqw/1 var(--font-mono); letter-spacing: .2em; color: rgba(255,255,255,.7); white-space: nowrap; }
.lf.tall .lf-ed > span { font-size: 2.1cqw; letter-spacing: .12em; }

/* 7 · watch */
.lf-watch { display: flex; justify-content: center; align-items: center; gap: 9cqw; padding-bottom: 10cqh; }
.lf-watch .iphone { --w: 21cqw; }
.lf.tall .lf-watch { gap: 5cqw; } .lf.tall .lf-watch .iphone { --w: 44cqw; } .lf.tall .lf-watch .watch { --w: 36cqw; }
.lf-watch .watch { --w: 17cqw; }
.lf-watch .wscreen img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.lf-pulse { position: absolute; width: 1.2cqw; height: 1.2cqw; margin: -.6cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 2cqw .6cqw rgba(var(--accent-rgb), .7); opacity: 0; top: 45%; }
.lf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.lf-wshutter { position: absolute; left: 50%; bottom: 5%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.5); }

/* 8 · privacy */
.lf-privacy { display: grid; place-items: center; align-content: center; gap: 3cqw; text-align: center; padding-bottom: 10cqh; }
.lf-shield { width: 9cqw; height: 9cqw; color: var(--accent); filter: drop-shadow(0 0 2cqw rgba(var(--accent-rgb), .5)); }
.lf.tall .lf-shield { width: 22cqw; height: 22cqw; }
.lf-shield path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lf-plist { display: flex; gap: 4cqw; }
.lf.tall .lf-plist { flex-direction: column; gap: 3.4cqw; }
.lf-plist div { display: flex; align-items: center; gap: 1cqw; font: 600 2.4cqw/1 var(--font-text); opacity: 0; }
.lf-plist svg { width: 2.2cqw; height: 2.2cqw; color: var(--live); }
.lf.tall .lf-plist div { font-size: 6cqw; gap: 2.4cqw; } .lf.tall .lf-plist svg { width: 5.6cqw; height: 5.6cqw; }

/* 9 · end */
.lf-end { display: grid; place-items: center; align-content: center; gap: 2cqw; text-align: center; padding-bottom: 6cqh; }
.lf-end .lf-glow { inset: -10%; }
.lf-icon { width: 11cqw; height: 11cqw; border-radius: 2.6cqw; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 2cqw 8cqw -1cqw rgba(var(--accent-rgb), .6); }
.lf.tall .lf-icon { width: 26cqw; height: 26cqw; border-radius: 6cqw; }
.lf-end h2 { font: 700 2.6cqw/1 var(--font-mono); letter-spacing: .42em; padding-left: .42em; margin: 1cqw 0 0; }
.lf-end p { margin: 0; font: 400 4.6cqw/1 var(--font-serif); font-style: italic; color: var(--accent); }
.lf.tall .lf-end h2 { font-size: 6cqw; } .lf.tall .lf-end p { font-size: 10cqw; }
.lf-cta { display: flex; gap: 1.2cqw; margin-top: 1.6cqw; flex-wrap: wrap; justify-content: center; }
.lf-cta a, .lf-cta button { display: inline-flex; align-items: center; gap: .8cqw; height: 4.2cqw; padding: 0 2cqw; border-radius: 99px; font: 600 1.4cqw/1 var(--font-text); }
.lf-cta .store { background: #fff; color: #000; }
.lf-cta .ghost { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.lf-cta svg { width: 1.6cqw; height: 1.6cqw; }
.lf.tall .lf-cta { flex-direction: column; gap: 2.4cqw; } .lf.tall .lf-cta a, .lf.tall .lf-cta button { height: 10cqw; padding: 0 6cqw; font-size: 4cqw; gap: 2cqw; justify-content: center; } .lf.tall .lf-cta svg { width: 4.4cqw; height: 4.4cqw; }
.lf-soon { font: 700 1cqw/1 var(--font-mono); letter-spacing: .24em; color: rgba(255,255,255,.55); }
.lf.tall .lf-soon { font-size: 2.4cqw; }

/* subtitles + controls */
.lf-subs { position: absolute; left: 8%; right: 8%; bottom: 10.5cqh; z-index: 10; text-align: center; pointer-events: none; }
.lf-subs span { display: inline; padding: .25em .55em; border-radius: .4em; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font: 500 1.75cqw/1.75 var(--font-text); transition: opacity .3s; }
.lf.tall .lf-subs { bottom: 12cqh; left: 6%; right: 6%; } .lf.tall .lf-subs span { font-size: 4.2cqw; }
.lf-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; align-items: center; gap: 1cqw; padding: 1.4cqh 1.6cqw 1.8cqh; background: linear-gradient(transparent, rgba(0,0,0,.6));
  transition: opacity .35s; }
.lf.idle .lf-ctrl { opacity: 0; }
.lf-ctrl button { width: 3cqw; height: 3cqw; min-width: 32px; min-height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); }
.lf-ctrl button:hover { background: rgba(255,255,255,.22); }
.lf-ctrl svg { width: 45%; height: 45%; }
.lf-time { font: 600 max(11px, 1cqw)/1 var(--font-mono); color: rgba(255,255,255,.75); min-width: 7ch; text-align: center; }
.lf-bar { flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.lf-bar i { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.lf-bar i b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.lf-bar i b::after { content: ""; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.lf-tap { position: absolute; z-index: 13; right: 2cqw; top: 3cqh; display: flex; align-items: center; gap: .9cqw; height: max(38px, 3.8cqw); padding: 0 max(16px, 1.8cqw);
  border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 700 max(13px, 1.25cqw)/1 var(--font-text); box-shadow: 0 1cqw 4cqw rgba(0,0,0,.5); animation: lfPulse 2.2s ease-in-out infinite; }
.lf-tap svg { width: max(16px, 1.6cqw); height: max(16px, 1.6cqw); }
.lf.sound .lf-tap { display: none; }
@keyframes lfPulse { 50% { box-shadow: 0 0 0 .8cqw rgba(var(--accent-rgb), .25), 0 1cqw 4cqw rgba(0,0,0,.5); } }
.lf.tall .lf-tap { top: 3cqw; right: 3cqw; font-size: 3.4cqw; height: 9cqw; padding: 0 4cqw; gap: 2cqw; } .lf.tall .lf-tap svg { width: 4.4cqw; height: 4.4cqw; }

/* ---- Popup -------------------------------------------------------------------- */
html.lf-open { overflow: hidden; }
.lf-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.lf-modal.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.lf-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lf-card-pop { position: relative; width: min(1060px, 100%); max-height: calc(100svh - 32px); overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: 28px; background: color-mix(in srgb, var(--bg-3) 94%, transparent); border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 90px rgba(var(--accent-rgb), .14); transform: translateY(18px) scale(.98); transition: transform .5s var(--ease); }
.lf-modal.is-open .lf-card-pop { transform: none; }
.lf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 0 6px; }
.lf-head .eyebrow { margin-bottom: 8px; }
.lf-head h2 { margin: 0; font: 650 clamp(20px, 3vw, 30px)/1.12 var(--font-display); letter-spacing: -.02em; }
.lf-x { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .2s, transform .25s var(--ease); }
.lf-x:hover { transform: rotate(90deg); }
.lf-x svg { width: 18px; height: 18px; }
.lf-modal .lf { max-width: min(100%, calc((100svh - 190px) * 16 / 9)); margin: 0 auto; }
.lf-modal .lf.tall { width: min(100%, calc((100svh - 190px) * 9 / 16)); max-width: none; }
@media (max-width: 560px) {
  .lf-modal { padding: 10px; } .lf-card-pop { padding: 12px; gap: 10px; border-radius: 22px; } .lf-head h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .lf-tap { animation: none; } }
.lf.tall .lf-name span { display: none; }

/* layers, cartoon canvas, tabs */
.lf-layer { position: absolute; inset: 0; }
.lc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lc-end .lf-end { background: transparent; }
.lf-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lf-tabs button { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); text-align: left; transition: all .25s; }
.lf-tabs button .ic { width: 20px; height: 20px; color: var(--text-3); }
.lf-tabs button b { display: block; font: 600 14.5px/1.15 var(--font-text); color: var(--text); }
.lf-tabs button small { display: block; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }
.lf-tabs button:hover { border-color: var(--text-3); }
.lf-tabs button[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lf-tabs button[aria-selected="true"] .ic { color: var(--accent); }
.lf-modal .lf { max-width: min(100%, calc((100svh - 250px) * 16 / 9)); }
.lf-modal .lf.tall { width: min(100%, calc((100svh - 250px) * 9 / 16)); }
@media (max-width: 560px) { .lf-tabs button { flex: 1 1 0; padding: 8px 10px; } .lf-tabs button b { font-size: 13px; } }

.lf.tall .lc-end .lf-end { padding-bottom: 30cqh; }

/* Phone held sideways: the film fills the screen like a video player (rotate back for the page) */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .film-wrap .lf.lf, .lf-modal .lf.lf {
    position: fixed; inset: 0; margin: auto; z-index: 2100; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: 0 0 0 100vmax #000;
    width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16));
    width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16));
  }
  .lf-modal .lf-x { position: fixed; z-index: 2101; top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); background: rgba(0,0,0,.55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  html:has(.film-wrap .lf) { overflow: hidden; }
}