/* Look E: look D's page with a film hero (Higgsfield render of the desk) and a Pelican-amber keycap. */
.e-hero { display: none; }
body[data-hero="film"] .d-hero { display: none; }
body[data-hero="film"] .e-hero { display: block; position: relative; color: var(--cap); }

.e-film { position: relative; overflow: hidden; height: min(56.25vw, 84vh); min-height: 300px; background: #2a2119; }
.e-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.e-film::after { content: ""; position: absolute; inset: auto 0 0 0; height: 10%; background: linear-gradient(rgba(15,19,23,0), var(--desk)); pointer-events: none; }
.e-hero .d-hero-row { margin-top: 0; padding-top: clamp(32px, 4vw, 56px); }

/* The download key in the keyboard's own amber */
.keycap.amber {
  color: #2a1a08;
  background: linear-gradient(180deg, #d6922c 0%, #b2741c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -6px 0 rgba(0,0,0,.16) inset, 0 18px 34px -10px rgba(0,0,0,.7), 0 4px 0 #6e4508;
}
.keycap.amber .kc-top {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f4c463, #e6a63c 60%, #d9952f);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.4), inset 0 -3px 6px rgba(110,60,0,.25), 0 6px 10px -4px rgba(70,40,0,.6);
}
.keycap.amber:active { box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 -6px 0 rgba(0,0,0,.16) inset, 0 8px 18px -8px rgba(0,0,0,.7), 0 0 0 #6e4508; }

@media (max-width: 760px) {
  .e-film { height: 72vw; }
  .e-video { object-position: 50% 30%; }
}
@media (max-width: 760px) {
  body[data-hero="film"] .d-nav { position: relative; background: var(--desk); }
}
@media (min-width: 761px) {
  body[data-hero="film"] .d-nav { color: var(--ink); background: none; }
}

/* Look F: the commercial plays over the loop, with its lines as real text */
.e-ad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .6s ease; pointer-events: none; z-index: 2; }
.e-film.playing-ad .e-ad { opacity: 1; }
.e-film.playing-ad .d-screen { visibility: hidden; }
/* Each line sits on its own dark, softly blurred panel so it reads over the bright desk and keycaps */
.e-caption {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 9%; margin: 0 auto;
  width: fit-content; max-width: min(22em, calc(100% - 48px)); padding: .3em .75em .36em; border-radius: .6em;
  background: rgba(15,12,9,.58); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  text-align: center; font-stretch: 112%; font-weight: 720; font-size: clamp(22px, 2.7vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
  color: #fffaf0;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.e-caption:empty { visibility: hidden; }
#v-d .e-caption { text-wrap: balance; } /* beats the page's general paragraph wrapping */
.e-caption.on { opacity: 1; transform: none; }
.e-film::before { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 2; background: linear-gradient(rgba(20,12,4,0), rgba(20,12,4,.38)); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.e-film.playing-ad::before, body[data-ad="on"] .e-film:has(.e-caption.on)::before { opacity: 1; }
.e-replay {
  position: absolute; z-index: 4; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px);
  font: inherit; font-stretch: 105%; font-weight: 620; font-size: 14px; color: #fffaf0; cursor: pointer;
  padding: 9px 14px; border: 1px solid rgba(255,250,240,.55); border-radius: 999px; background: rgba(20,12,4,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.e-replay:hover { background: rgba(20,12,4,.5); }
@media (max-width: 1000px) {
  .e-caption { bottom: 26%; font-size: clamp(16px, 4.2vw, 36px); max-width: min(15em, calc(100% - 40px)); }
  .e-replay { font-size: 13px; padding: 7px 12px; }
}

/* Cut 2: camera-style focus brackets that frame her face, then turn green when she's recognized */
.e-face { position: absolute; z-index: 3; left: 38%; top: 8%; width: 23%; height: 39%; opacity: 0; transform: scale(1.08); transition: opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.e-face.on { opacity: 1; transform: none; }
.e-face i { position: absolute; width: 22%; height: 22%; border: 4px solid rgba(255,255,255,.92); transition: border-color .25s ease; }
.e-face i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.e-face i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.e-face i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.e-face i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.e-face.seen i { border-color: #30d158; }
/* Cut 2: the display's boxes sit above the commercial; the words stay on top */
body[data-cut="2"] .e-film .d-screen { z-index: 3; }
body[data-cut="2"] .e-caption { z-index: 5; }

/* Cut 2: sound control (and, in the preview only, a picker for the three trial tracks) */
.e-sound { position: absolute; z-index: 6; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); display: flex; gap: 8px; align-items: center; }
.e-sound button { font: inherit; font-stretch: 105%; font-weight: 620; font-size: 14px; color: #fffaf0; cursor: pointer; padding: 9px 14px; border: 1px solid rgba(255,250,240,.55); border-radius: 999px; background: rgba(20,12,4,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.e-sound button[aria-pressed="true"] { background: rgba(255,250,240,.9); color: #1b1a17; }
.e-sound[hidden] { display: none; }

/* On phones the Download key can't help: say it's a Mac app */
.mac-only-note { display: none; }
@media (hover: none) and (max-width: 760px) {
  body[data-hero="film"] .mac-only-note { display: block; grid-column: 1 / -1; margin-top: -8px; font-size: 15px; color: #b9b3a5; }
}