/* The commercial at the top of the inside page (#film, film.js): IcedCoffee in 30 seconds, floating on the dot wave in a rounded
   window with the page's own halo behind it (inside.css: the halo rule lists .film-stage with the hero's and the chapters').
   Muted autoplay as ambience, the title card (the old hero's words) floating over it on the left; the card and its shade step away while
   the film plays and come back when it pauses. The controls (the yellow "Sound on", glass .mul pills, a scrubber) show only while the
   pointer is over the film, a control has the keyboard, or just after a tap (film.js). The next section (#top) peeks under it, so people
   know to scroll. */

/* ---------- the section and the window ---------- */
:root {
  --film-max: 1280px;     /* the window's widest */
  --film-peek: 130px;     /* how much of the next section shows under the window on a short screen */
  --film-r: 16px;         /* the page's window radius (.win) */
  --film-gap: var(--head-h, 68px);   /* what sits above the window: the sticky header (the 3D film's HUD strip and bar, below) */
}
html.in-film { --film-gap: calc(var(--film-top, 0px) + var(--film-bottom, 0px)); }

.film { padding-top: calc(clamp(8px, 1.8vw, 28px) + 40px); padding-bottom: 0; overflow-x: clip; }   /* (+ 40 px of air under the header, Q Oct 7; the window's width formula below still counts only the clamp, so the film keeps its size and the next section peeks 40 px less) */   /* (sideways only: the halo fades out before the edge) */
.film-wrap { max-width: var(--film-max); }
.film-stage {
  position: relative; z-index: 0; container-type: inline-size;   /* the halo's stacking context (as .hero-stage; layout containment comes with the container); the title card sizes itself in cqw of this */
  /* as wide as the page allows, but never so tall that the next section stops peeking: 16:9 within what the screen has left */
  width: min(100%, var(--film-max), calc((100svh - var(--film-gap) - clamp(8px, 1.8vw, 28px) - var(--film-peek)) * 16 / 9));
  min-width: min(100%, 320px);
  margin: 0 auto;
}
.film-win {
  position: relative; overflow: hidden; border-radius: var(--film-r); isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 50px 120px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .35);
  background: #000;
}
.film-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }

/* the window arrives on load: a soft fade and scale-in (motion.css tokens; no scroll entrance; Reduce Motion: it is just there) */
@keyframes film-in { from { opacity: 0; transform: translateY(var(--mo-dist)) scale(.965); } }
@keyframes film-halo-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .film-win { animation: film-in var(--mo-dur) var(--mo-ease) 60ms backwards; }
  .film-stage::before { animation: film-halo-in 1200ms var(--mo-ease-soft) 120ms backwards; }
}

/* the next section, one beat closer: the tour's top padding is smaller when the film sits above it, so its first line peeks */
.film + .hero { padding-top: clamp(32px, 4vw, 64px); }

/* ---------- captions: Archivo, a dark translucent backing (the browser keeps the box's shape; cue lines are lifted above the controls in film.js) ---------- */
.film-video::cue {
  font-family: "Archivo", "Helvetica Neue", Helvetica, sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3;
  color: #fff; background-color: rgba(16, 17, 19, .74); text-shadow: none;
}
@media (min-width: 600px) { .film-video::cue { font-size: 20px; } }
@media (min-width: 900px) { .film-video::cue { font-size: 24px; } }
@media (min-width: 1200px) { .film-video::cue { font-size: 28px; } }
.film-video { cursor: pointer; }
.film-video:focus { outline: none; }
.film-video:focus-visible { outline: 2px solid #ffaf43; outline-offset: -4px; border-radius: var(--film-r); }

/* ---------- the title card: the old hero's words, left aligned on the film (wide screens) ----------
   Sized in cqw of the stage (= the film's width) so it fits the picture at any width. A dark shade, multiplied, runs from the left edge to
   about 60% of the width. In (the card shows over the muted loop, or while the film is paused): the shade fades in, then the pill, the
   headline's two lines, the subline and the button rise and settle in a quick stagger on the page's spring (--mo-ease). Out (the film
   plays): a quicker reverse, each piece lifting and fading. Transform and opacity only. The card's words ride on the stage, never inside
   the window's clip, so the window's halo and glass are untouched. Reduce Motion: plain, quick fades. */
.film-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; border-radius: inherit;
  background: linear-gradient(90deg, #0a0605 0%, rgba(10, 6, 5, .9) 22%, rgba(10, 6, 5, .62) 42%, rgba(10, 6, 5, .24) 54%, rgba(10, 6, 5, 0) 62%);
  transition: opacity 620ms var(--mo-ease-soft);
}
.film-card > * { --i: 0; }
.film-card > :nth-child(2) { --i: 1; }
.film-card > :nth-child(3) { --i: 2; }
.film-card > :nth-child(4) { --i: 3; }
.film-card > :nth-child(5) { --i: 4; }
/* the IcedCoffee mark and wordmark (the footer's), above the pill */
.film-logo { display: inline-flex; align-items: center; gap: 10px; color: #F0DFC4; }
.film-logo svg { width: 24px; height: 24px; flex: none; }
.film-logo img { display: block; width: 94px; height: 14px; }
@media (min-width: 760px) { .film-logo { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .6)); } }
/* [lightink] wide windows: the words sit on the footage, so they keep the dark page's ink and yellow in light mode too (as the close's banner).
   Phones: the words sit under the film on the page's ground and follow the palette, the wordmark too (its dark twin) */
@media (min-width: 760px) { .film-card { --ink: #ecedef; --ink-2: #c9cbd0; --ink-3: #9a9ca3; --yellow: #ffaf43; color: var(--ink); } }
@media (max-width: 759px) {
  html[data-tone="light"] .film-logo { color: var(--ink); }
  html[data-tone="light"] .film-logo img { content: url(../assets/navigation/wordmark-light.svg); }
}
.film-card h1 { font-size: clamp(26px, 5.2cqw, 80px); line-height: 1; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
/* the yellow lands on the two keywords only; each sentence keeps to its own line */
.film-card h1 .hl { color: var(--yellow); }
.film-card h1 .ln { display: block; white-space: nowrap; }
/* (marketing, Oct 12) the "Free Mac app for your job search" pill is part of the h1 for search, with the pill's own look and its own line */
.film-card h1 .pill { display: block; width: fit-content; margin: 0 0 clamp(10px, 1.9cqw, 26px); font-weight: 600; font-stretch: 100%; letter-spacing: normal; line-height: normal; }
.film-card .lead { max-width: 34em; }

@media (min-width: 760px) {
  .film-card {
    position: absolute; z-index: 4; inset: 0 40% 0 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: clamp(10px, 1.9cqw, 26px); padding: 0 0 clamp(60px, 9cqw, 104px) clamp(22px, 4.8cqw, 68px); text-align: left; pointer-events: none;
  }
  .film-card .btn, .film-card .fine a { pointer-events: auto; }   /* (+ the Intel link, Oct 10) */
  .film-card .cta-row { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1cqw, 14px); margin-top: calc(var(--cta-gap) - clamp(10px, 1.9cqw, 26px)); }   /* (the card's gap + this = --cta-gap above the button) */
  .film-card .pill { font-size: clamp(11px, 1.1cqw, 14px); padding: .45em .95em; background: rgba(10, 6, 5, .42); border-color: rgba(255, 255, 255, .22); color: #fff; }
  .film-card .lead { font-size: clamp(13px, 1.62cqw, 23px); line-height: 1.45; color: rgba(255, 255, 255, .9); }
  .film-card .fine { font-size: clamp(11px, 1.1cqw, 15px); color: rgba(255, 255, 255, .78); }
  .film-card .btn-lg { min-height: clamp(40px, 3.9cqw, 56px); padding: 0 clamp(18px, 2.2cqw, 30px); font-size: clamp(14px, 1.35cqw, 18px); }
  .film-card .ic-remind { pointer-events: auto; min-height: clamp(40px, 3.9cqw, 56px); padding: 0 clamp(16px, 2cqw, 26px); font-size: clamp(13px, 1.2cqw, 16px); }   /* [sendtomac] the reminder (iPad) at the main button's scale, a touch smaller */
  .film-card .ic-macnote { font-size: clamp(13px, 1.15cqw, 15px); }
  .film-card .pill, .film-card h1, .film-card .lead, .film-card .fine { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 18px rgba(0, 0, 0, .6), 0 8px 40px rgba(0, 0, 0, .45); }
  .film-card .btn { box-shadow: 0 8px 26px -8px rgba(0, 0, 0, .7); }
  .film-card .btn:hover { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7); }
  .film-card > * {
    transition: opacity 420ms ease calc(160ms + var(--i) * 75ms), transform 900ms var(--mo-ease) calc(160ms + var(--i) * 75ms), visibility 0s;
  }
  /* the first showing, after the window has settled in */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes film-card-in { from { opacity: 0; transform: translateY(26px); } }
    .film-stage.card-first .film-card > * { animation: film-card-in 900ms var(--mo-ease) calc(560ms + var(--i) * 75ms) backwards; }
    .film-stage.card-first .film-shade { animation: film-halo-in 800ms var(--mo-ease-soft) 420ms backwards; }
  }
  /* away: quicker, a lift and a fade */
  .film-stage.card-off .film-shade { opacity: 0; transition-duration: 380ms; }
  .film-stage.card-off .film-card > * {
    opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none;
    transition: opacity 200ms ease calc(var(--i) * 22ms), transform 260ms cubic-bezier(.4, 0, 1, 1) calc(var(--i) * 22ms), visibility 0s linear 340ms;
  }
  /* once it is gone and invisible (film.js adds card-parked 380 ms later) it waits below its place, so the next showing rises (it does not drop in) */
  .film-stage.card-off.card-parked .film-card > * { transform: translateY(26px); transition: none; }
  .film-stage.card-off .film-card .btn, .film-stage.card-off .film-card .fine a { pointer-events: none; }
}
/* phones: the words sit below the film, as the hero's did (film.js's inline script moves the card out of the stage there) */
@media (max-width: 759px) {
  .film-card { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 28px 0 4px; text-align: center; position: relative; z-index: 1; }
  .film-card h1 { font-size: clamp(30px, 9.2vw, 56px); letter-spacing: -1px; }
  .film-card h1 .pill { margin: 0 auto 28px; letter-spacing: normal; }
  .film-card .lead { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
  .film-card .fine { color: var(--ink-3); }
  .film-card .cta-row { justify-content: center; margin-top: calc(var(--cta-gap) - 28px); }
  .film-shade { display: none; }
}

/* ---------- the controls: bottom right (Q, Oct 8: the left is the title card's) over the picture, only while hovered, focused or just tapped ---------- */
.film-ctl { position: absolute; left: 16px; right: 16px; bottom: 50px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: 10px; pointer-events: none; }
.film-ctl > * { pointer-events: auto; }
.film-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink);
  transition: transform 520ms var(--mo-ease), opacity 320ms ease, background-color 200ms ease, box-shadow 300ms ease;
}
.film-btn svg, .film-play svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film-btn:hover { transform: translateY(-2px); }
.film-btn:focus-visible, .film-play:focus-visible { outline: 2px solid #ffaf43; outline-offset: 3px; border-radius: 999px; }
.film-btn-glass { --mul: .42; --mul-blur: 0px; }   /* floating over the picture: dark enough for words on a bright frame (.mul does the glass) */
/* "Sound on": IcedCoffee yellow, dark ink; once the sound is on it is a quiet Mute toggle in the glass */
.film-sound { min-height: 48px; padding: 0 22px 0 18px; font-size: 16px; background: #ffaf43; border-color: #ffaf43; color: var(--button-ink); box-shadow: 0 10px 30px -10px rgba(255, 175, 67, .7); }
.film-sound:hover { box-shadow: 0 14px 34px -10px rgba(255, 175, 67, .85); }
.film-sound.is-on { background-color: transparent; border-color: rgba(255, 255, 255, .2); color: var(--ink); box-shadow: none; --mul: .42; --mul-blur: 0px;
  -webkit-backdrop-filter: blur(0px) brightness(.42); backdrop-filter: blur(0px) brightness(.42); }
/* the speaker: muted shows the cross; sound on, the cross shrinks away and the two waves open out from the cone, one after the other */
.film-sound .sp-x, .film-sound .sp-waves path { transform-box: fill-box; transition: transform 460ms var(--mo-ease), opacity 220ms ease; }
.film-sound .sp-x { transform-origin: center; }
.film-sound .sp-waves path { transform-origin: left center; opacity: 0; transform: scaleX(.2) scaleY(.5); }
.film-sound.is-on .sp-x { opacity: 0; transform: scale(.3); }
.film-sound.is-on .sp-waves path { opacity: 1; transform: none; }
.film-sound.is-on .sp-waves .w1 { transition-delay: 60ms; }
.film-sound.is-on .sp-waves .w2 { transition-delay: 170ms; }
@keyframes film-pop { 0% { scale: 1; } 30% { scale: 1.16; } 100% { scale: 1; } }
.film-sound.is-pop { animation: film-pop 560ms var(--mo-ease); }
.film-ctl .film-btn:nth-child(2) { --i: 1; }
.film-ctl .film-btn:nth-child(3) { --i: 2; }
.film-time { margin-left: 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); transition: opacity 320ms ease, transform 520ms var(--mo-ease); }
/* hidden unless the pointer is over the film, a control has the keyboard, or it was just tapped (each piece on its own: a faded parent would hide the picture from the glass) */
.film-win:not(.show-ui) .film-btn, .film-win:not(.show-ui) .film-time { opacity: 0; transform: translateY(10px); pointer-events: none; }
.film-win:not(.show-ui) .film-btn { transition: transform 300ms ease, opacity 240ms ease, background-color 200ms ease, box-shadow 300ms ease; }
.film-win.show-ui .film-btn { transition-delay: calc(var(--i) * 45ms), calc(var(--i) * 45ms), 0s, 0s; }
.film-win::after {   /* a soft floor under the controls, so words and the scrubber read on a bright frame */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); opacity: 0; transition: opacity 400ms ease;
}
.film-win.show-ui::after { opacity: 1; }
.film-win.is-idle::after { display: none; }

/* ---------- the scrubber: a thin track along the bottom; the fill and the buffered range are transforms, the thumb grows on hover and drag ---------- */
.film-scrub {
  --p: 0; --b: 0; --rw: 0px; --tx: 0px;
  position: absolute; left: 6px; right: 6px; bottom: 8px; height: 36px; z-index: 3; padding: 0 10px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; transition: opacity 320ms ease, transform 520ms var(--mo-ease);
}
.film-scrub:focus { outline: none; }
.film-win .film-scrub:focus-visible .film-thumb { box-shadow: 0 0 0 3px rgba(255, 175, 67, .55); transform: scale(1.25); }
.film-rail { position: relative; display: block; width: 100%; height: 4px; }
.film-trk { position: absolute; inset: 0; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .22); transition: transform 260ms var(--mo-ease); }
.film-trk i { position: absolute; inset: 0; transform-origin: left center; will-change: transform; }
.film-buf { background: rgba(255, 255, 255, .3); transform: scaleX(var(--b)); }
.film-fill { background: var(--t-accent, #ffaf43); transform: scaleX(var(--p)); }
.film-rider { position: absolute; left: 0; top: 50%; width: 0; height: 0; transform: translateX(calc(var(--rw) * var(--p))); }
.film-thumb { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); transform: scale(0); transition: transform 360ms var(--mo-ease), box-shadow 200ms ease; }
.film-scrub:hover .film-trk, .film-scrub.is-drag .film-trk { transform: scaleY(1.75); }
.film-win.show-ui .film-thumb { transform: scale(.8); }
.film-scrub:hover .film-thumb, .film-scrub.is-drag .film-thumb { transform: scale(1.3); }
.film-scrub.is-drag .film-thumb { box-shadow: 0 0 0 6px rgba(255, 175, 67, .3), 0 1px 6px rgba(0, 0, 0, .55); }
.film-tip {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 2px; padding: 5px 9px; border-radius: 8px; background: rgba(16, 17, 19, .88); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translateX(calc(var(--tx) - 50%)) translateY(4px); transition: opacity 160ms ease;
}
.film-scrub.is-tip .film-tip { opacity: 1; transform: translateX(calc(var(--tx) - 50%)); }
.film-win:not(.show-ui) .film-scrub { opacity: 0; transform: translateY(8px); pointer-events: none; }

/* Reduce Motion, or a browser that would not autoplay: the poster, and one big Play in the same style (beside the title card, never over it) */
.film-center { position: absolute; inset: 0; z-index: 3; display: none; place-items: center; background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .28), rgba(0, 0, 0, .1)); pointer-events: none; }
.film-center > * { pointer-events: auto; }
@media (min-width: 760px) { .film-center { padding-left: 42%; background: none; } }
.film-play {
  appearance: none; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 64px; padding: 0 34px 0 28px; border-radius: 999px;
  border: 1px solid #ffaf43; background: #ffaf43; color: var(--button-ink); font: inherit; font-size: 20px; font-weight: 700; box-shadow: 0 16px 44px -12px rgba(255, 175, 67, .8);
  transition: transform 420ms var(--spring), box-shadow 300ms ease;
}
.film-play svg { width: 26px; height: 26px; fill: currentColor; }
.film-play:hover { transform: translateY(-2px) scale(1.03); }
.film-win.is-idle .film-center { display: grid; }
.film-win.is-idle .film-ctl, .film-win.is-idle .film-scrub { display: none; }

/* phones: the video fills the width; the small buttons keep their icons and lose their words (their names stay) */
@media (max-width: 599px) {
  .film-ctl { left: 10px; right: 10px; bottom: 42px; gap: 8px; }
  .film-btn { min-height: 40px; padding: 0 12px; }
  .film-sound { min-height: 40px; padding: 0 16px 0 12px; font-size: 14px; }
  .film-btn-glass span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .film-time { font-size: 12px; }
  .film-scrub { left: 0; right: 0; bottom: 4px; }
  .film-play { min-height: 52px; padding: 0 26px 0 20px; font-size: 18px; }
  .film-win { --film-r: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-btn:hover, .film-play:hover { transform: none; }
  /* plain fades, quick (inside.css's still-frames rule would make every transition 1 ms, so these say it again, louder) */
  .film-shade, .film-card > *, .film-btn, .film-time, .film-scrub, .film-win::after { transition: opacity 160ms ease !important; transition-delay: 0s !important; }
  .film-card > * { transform: none !important; }
  .film-win:not(.show-ui) .film-btn, .film-win:not(.show-ui) .film-time, .film-win:not(.show-ui) .film-scrub { transform: none; }
  .film-stage.card-off .film-card > * { transform: none; transition: opacity 160ms ease, visibility 0s linear 160ms !important; }
  .film-sound .sp-x, .film-sound .sp-waves path, .film-thumb, .film-trk { transition: opacity 160ms ease !important; transform: none !important; }
  .film-sound.is-pop { animation: none !important; }
}