/* Use the phone demo's note and chat components in the hero. */
.cinema-companion{position:absolute;right:2.5%;top:24%;width:clamp(250px,19vw,300px);border:4px solid var(--extension-accent);border-radius:12px;background:var(--b-device);color:var(--ink);overflow:hidden;box-shadow:0 12px 30px color-mix(in oklch,var(--ink) 26%,transparent)}
.cinema-session{padding:16px 16px 12px}
.cinema-session h2{margin:0;font:400 22px/1.15 "DM Serif",Georgia,serif}
.cinema-session h2>span{font:400 11px/1.3 "DM Sans",sans-serif;margin-left:5px;white-space:nowrap;color:var(--cream)}
.cinema-session .phone-sync{margin-top:10px;gap:12px}
.cinema-connection{font-size:11px;color:var(--cream)}
.cinema-companion .phone-body{border-radius:0;padding:14px 20px 19px}
.cinema-companion .message:last-child{margin-bottom:0}
.demo-intro{display:block}
.demo-intro h2{max-width:none}
@media(max-width:1200px){
 .cinema-companion{position:relative;right:auto;top:auto;width:calc(100% - 64px);max-width:365px;margin:24px auto 0}
}
@media(max-width:620px){
 .cinema-companion{width:calc(100% - 40px);margin-top:20px}
 .cinema-session{padding:14px 16px 12px}
 .cinema-companion .phone-body{padding:13px 17px 19px}
}

/* Phones: a wide view of the room, as on desktop: both curtains, the aisle and the screen's angle. */
@media(max-width:620px){
 .cinema-scene{aspect-ratio:1.28}
 .cinema-art{transform:none;object-position:76% center}
 .cinema-screen-title{left:53.3%;top:51.7%;width:88%;padding:0}
 .cinema-screen-mark{width:49px}
 .cinema-wordmark{font-size:clamp(25px,8.1vw,46px)}
}

/* The original teal artwork remains the dark-mode asset. */
.cinema-art-light{display:none}
html[data-theme=light] .cinema-art-dark{display:none}
html[data-theme=light] .cinema-art-light{display:block}

/* Mobile opening leads from the theatre into the proposition. */
@media(max-width:620px){.cinema-companion{display:none}.cinema-opening{padding-bottom:0}}

/* Keep each film and its host note together on phones and tablets. */
@media(max-width:1000px){
 .genre-film,.genre-film:nth-child(even){grid-template-columns:minmax(150px,28%) minmax(0,1fr);gap:28px;align-items:start}
 .genre-film .genre-poster,.genre-film:nth-child(even) .genre-poster{grid-column:1;grid-row:1;width:100%;max-width:220px;margin:0}
 .genre-film .genre-caption,.genre-film:nth-child(even) .genre-caption{grid-column:2;grid-row:1;padding:0}
 .genre-caption h3{font-size:34px;line-height:1.1;text-wrap:initial}
 .programme-host-note p{font-size:20px;line-height:1.45}
}
@media(max-width:620px){
 .genre-film,.genre-film:nth-child(even){display:grid;grid-template-columns:clamp(100px,28vw,160px) minmax(0,1fr);column-gap:20px;row-gap:10px;padding-bottom:28px;margin-bottom:28px}
 .genre-film .genre-poster,.genre-film:nth-child(even) .genre-poster{grid-column:1;grid-row:1 / 3;align-self:start;margin:0;max-width:none}
 .genre-film .genre-caption,.genre-film:nth-child(even) .genre-caption{display:contents}
 .genre-caption h3{grid-column:2;grid-row:1;align-self:end;font-size:clamp(25px,5.4vw,32px);line-height:1.12;margin:0}
 .genre-caption h3>span{display:block;margin:7px 0 0;font-size:12px}
 .genre-caption .genre-credit{grid-column:2;grid-row:2;align-self:start;font-size:13px;line-height:1.4;margin:0}
 .programme-host-note{grid-column:1 / -1;grid-row:3;margin:10px 0 0;padding:18px 0 0;max-width:none}
 .programme-host-note p{font-size:20px;line-height:1.4;margin:0}
 .programme-host-note footer{font-size:13px;margin-top:12px}
}

/* Demonstration film nights with host identity and notes. */
.screening-host{display:flex;align-items:center;gap:12px;margin-top:24px}
.host-initials{display:grid;place-items:center;flex:0 0 40px;height:40px;border:1px solid var(--extension-rule);border-radius:50%;color:var(--extension-accent);font:600 13px/1 "DM Sans",sans-serif}
.screening-host p{margin:0;font:400 14px/1.4 "DM Sans",sans-serif}
.screening-host strong{font-weight:600}
.screening-host>div>span{display:block;margin-top:3px;font:400 12px/1.4 "DM Sans",sans-serif;color:var(--extension-muted)}
.genre-film .programme-host-note{margin-top:18px;padding-top:0;border-top:0}
@media(max-width:620px){
 .screening-host{grid-column:1 / -1;grid-row:3;margin-top:12px;padding-top:18px;border-top:1px solid var(--extension-rule)}
 .genre-film .programme-host-note{grid-row:4;margin:4px 0 0;padding:0}
 }

.genre-caption>.screening-demo{margin:20px 0 0;font:400 12px/1.5 "DM Sans",sans-serif;color:var(--extension-muted)}
@media(max-width:620px){.genre-caption>.screening-demo{grid-column:1 / -1;grid-row:5;margin:8px 0 0}}

/* Let the unframed screen branding occupy more of the projection. */
.cinema-screen-mark{width:clamp(44px,5.5vw,88px)}
.cinema-wordmark{font-size:clamp(24px,3.85vw,66px)}
@media(max-width:620px){
 .cinema-screen-mark{width:clamp(28px,9vw,56px);margin-bottom:clamp(6px,1.8vw,11px)}
 .cinema-wordmark{font-size:clamp(27px,8.85vw,55px)}
}

/* A shallow, level pinch follows the screen without tilting the lettering. */
.cinema-wordmark>span>span{display:inline-block;text-indent:0;transform-origin:center}
.cinema-wordmark>span>span:nth-child(2),.cinema-wordmark>span>span:nth-child(8){transform:scaleY(.99)}
.cinema-wordmark>span>span:nth-child(3),.cinema-wordmark>span>span:nth-child(7){transform:scaleY(.975)}
.cinema-wordmark>span>span:nth-child(4),.cinema-wordmark>span>span:nth-child(6){transform:scaleY(.96)}
.cinema-wordmark>span>span:nth-child(5){transform:scaleY(.95)}
.cinema-screen-mark{transform:scaleY(.95)}

/* Projected, not printed: the title is light on the screen. No dark shadow (light
   cannot cast one on the surface it lands on); a soft cream bloom instead, screen
   blending so the screen's texture shows through, a faint hotspot behind the title,
   and slightly softened edges. */
.cinema-screen-title{text-shadow:0 0 1px color-mix(in oklch,var(--cream) 50%,transparent),0 0 18px color-mix(in oklch,var(--cream) 28%,transparent);mix-blend-mode:screen;opacity:.92}
.cinema-screen-title::before{content:"";position:absolute;inset:-45% -30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,color-mix(in oklch,var(--cream) 13%,transparent),transparent 65%)}
.cinema-screen-mark{filter:drop-shadow(0 0 10px color-mix(in oklch,var(--cream) 30%,transparent)) blur(.2px)}
.cinema-wordmark{filter:blur(.25px)}

/* v51: the demo pins while the phone's chat fills. Dev's note swoops in from the
   right, sits spotlit over the chat, fades, and a saved toast lets the reader open
   it again. app.js adds .is-sequence; without JS the phone shows the note inline.
   Values: durations and space from src/styles/tokens.scss (fades at the design
   system's 400ms for things that appear); the swoop takes the design system's
   --ease and its 1200ms slow transform (components/bundle.css), toast colours, radius,
   shadow and 28px inset from the Marquee design system (prototype/design-system,
   Toast), card radius from design/marquee/tokens.css. */
.demo-section{--demo-fast:160ms;--demo-normal:240ms;--demo-slow:400ms;--demo-space-xs:.5rem;--demo-space-sm:.75rem;--demo-space-md:1rem;--demo-space-xl:2rem;--demo-toast:#eef3e4;--demo-toast-fg:#23493c;--demo-toast-border:#26473b30;--demo-shadow-toast:0 8px 35px #00000033;--demo-radius-bubble:8px;--demo-swoop:1200ms;--demo-swoop-ease:cubic-bezier(.32,.72,0,1);--demo-radius-card:12px;--demo-toast-inset:28px}
.demo-runway,.next-note,.note-saved{display:none}
.demo-section.is-sequence .demo-runway{display:block;grid-column:1/-1;height:var(--demo-runway,320svh)}
.demo-section.is-sequence .is-pinned{position:sticky;top:var(--demo-pin-top,96px);align-self:start}
/* Next note: a small label in the phone's clock row until the note fires. */
.demo-section.is-sequence .next-note{display:inline-flex;align-items:center;gap:var(--demo-space-xs);font-size:11px;color:inherit;transition:opacity var(--demo-normal) ease}
.demo-section.is-sequence.is-note-fired .next-note{opacity:0;visibility:hidden}
/* The chat fills the screen; the newest messages sit at the bottom. */
.demo-section.is-sequence .phone-body{position:relative;overflow:hidden}
.demo-section.is-sequence .room-chat{border-top:0;margin-top:0;padding-top:0}
.demo-section.is-sequence .messages{display:flex;flex-direction:column;justify-content:flex-end;height:var(--demo-chat-h,auto);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--demo-space-xl));mask-image:linear-gradient(to bottom,transparent,#000 var(--demo-space-xl));transition:padding-bottom var(--demo-normal) ease}
.demo-section.is-sequence.is-saved .messages{padding-bottom:var(--demo-saved-clear,64px)}
.demo-section.is-sequence .message{flex-shrink:0}
.demo-section.is-sequence .message:last-child{margin-bottom:0}
.demo-section.is-sequence .message[data-step]:not(.is-shown){display:none}
.demo-section.is-sequence .message.is-shown.is-new{animation:demo-message-in var(--demo-normal) ease-out both}
@keyframes demo-message-in{from{opacity:0;transform:translateY(var(--demo-space-xs))}to{opacity:1;transform:none}}
/* Spotlight: the chat dims behind the note. */
.demo-section.is-sequence .phone-body:after{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in oklch,var(--ink) 28%,transparent);opacity:0;pointer-events:none;transition:opacity var(--demo-slow) ease}
.demo-section.is-sequence.is-note-open .phone-body:after{opacity:1}
/* The note: off-screen right before it fires, swoops in, then fades where it sits. */
.demo-section.is-sequence .host-note{position:absolute;left:var(--demo-space-sm);right:var(--demo-space-sm);top:var(--demo-space-md);z-index:2;padding:var(--demo-space-md);border:1px solid var(--b-paper-border);border-radius:var(--demo-radius-card);background:var(--b-card);opacity:0;visibility:hidden;transform:none;transition:transform var(--demo-swoop) var(--demo-swoop-ease),opacity var(--demo-slow) ease,visibility 0s linear var(--demo-slow)}
.demo-section.is-sequence:not(.is-note-fired) .host-note{transform:translateX(calc(100% + var(--demo-space-md) * 2))}
.demo-section.is-sequence.is-note-open .host-note{opacity:1;visibility:visible;transform:none;transition:transform var(--demo-swoop) var(--demo-swoop-ease),opacity var(--demo-slow) ease-out,visibility 0s}
.demo-section.is-sequence.is-note-open .host-note .moment-marker{animation:demo-note-fire .9s ease-out 1}
@keyframes demo-note-fire{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--b-focus) 70%,transparent);transform:scale(1.6)}100%{box-shadow:0 0 0 10px transparent;transform:scale(1)}}
/* Saved: the design system's toast, which reopens the note. */
.demo-section.is-sequence .note-saved{display:inline-flex;align-items:center;gap:var(--demo-space-sm);position:absolute;left:50%;bottom:var(--demo-toast-inset);z-index:3;max-width:calc(100% - var(--demo-space-md) * 2);padding:15px 22px;border:1px solid var(--demo-toast-border);border-radius:var(--demo-radius-bubble);background:var(--demo-toast);color:var(--demo-toast-fg);box-shadow:var(--demo-shadow-toast);font-size:13px;line-height:1.3;text-align:left;white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,var(--demo-space-xs));transition:opacity var(--demo-normal) ease,transform var(--demo-normal) ease,visibility 0s linear var(--demo-normal)}
.demo-section.is-sequence.is-saved .note-saved{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--demo-normal) ease,transform var(--demo-normal) ease,visibility 0s}
.demo-section.is-sequence .note-saved svg{flex-shrink:0}
@media(max-width:620px){.demo-section.is-sequence .phone-column.is-pinned{z-index:2}}