/* film-modal.css — the film reel: a poster with a play mark, and the
   full-screen player it opens into. Pairs with film-modal.js.

   Two pieces, one idea:

   `.em-reel-th` is the THUMBNAIL — a picture that is a film, not a picture
   with a link under it. It is a <button>, so it is reachable, announceable
   and pressable by every input the site supports.

   `.em-reel` is the PLAYER — a full-screen surface, never an inline swap.
   A handover film runs three to four minutes at broadcast bitrate; played in
   a 589px column beside a paragraph it is a thumbnail of itself. The page
   goes dark, the film takes the screen, and the close returns the reader to
   the frame they pressed.

   Naming: `.em-film` is TAKEN — places-ui.js's community band, which swaps a
   poster for a muted inline loop in place. A different behaviour needs a
   different name, or a page loading both gets one component's CSS and the
   other's JS. See the class-name-is-an-interface rule.

   The file depends on no page token. Every var() carries a literal fallback,
   because this pair is meant to be loaded by any page on the site and the
   token sets differ between index.html, the interior pages and the About
   family. ————— */

.em-reel-th,
.em-reel-th *,
.em-reel,
.em-reel * { box-sizing: border-box; }

/* ————————————————————————— the thumbnail ————————————————————————— */

.em-reel-th {
  display: block; width: 100%; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

.em-reel-th__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--em-well, #efece6);
  border-radius: var(--em-r, 2px);
}
.em-reel-th__frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.1s var(--em-ease-image);
}
.em-reel-th:hover .em-reel-th__frame > img { transform: scale(1.03); }

/* A veil, not a stain: it has an edge. The gradient dies out by 62% of the
   frame's height, so the darkening reads as a lighting of the lower frame
   rather than a film of dirt over the photograph. Its only job is to keep the
   play mark and the run-time from ever standing on a bright sky. */
.em-reel-th__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,8,8,.44) 0%, rgba(8,8,8,.16) 38%, rgba(8,8,8,0) 62%);
}

/* The one sanctioned piece of content over a photograph: a CONTROL, and a
   control grounded from the worst frame in the set. The plate values are
   places.css's measured ones for .em-film__play — .70 black behind a white
   glyph clears 4.5:1 against the brightest poster ground in the Emaar set,
   and blur() alone would not, because it spreads bright pixels without
   darkening them. Same defence, same numbers, so the two play marks on this
   site cannot drift apart. */
.em-reel-th__play {
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(var(--em-rgb-night), .70);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--em-rgb-on-inverse), .7); color: var(--p-brand-white);
  transition: transform .45s var(--em-ease-soft), background .45s ease;
}
.em-reel-th__play svg { width: 20px; height: 20px; display: block; }
.em-reel-th:hover .em-reel-th__play { transform: scale(1.06); background: rgba(var(--em-rgb-night), .64); }
.em-reel-th:focus-visible { outline: none; }
.em-reel-th:focus-visible .em-reel-th__frame { outline: 2px solid var(--em-ink, #111); outline-offset: 3px; }

/* The words sit BELOW the picture. A run-time is information, not a control,
   and information over a photograph is the thing this house does not do. */
.em-reel-th__cap {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 11px;
  font-family: var(--em-body, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  font-size: 12px; line-height: 1.45;
  color: var(--em-ink-mute, #6a6a6c);
}
.em-reel-th__cap b {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--em-text-eyebrow-neutral);
}

@media (max-width: 599px) {
  .em-reel-th__play { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
  .em-reel-th__play svg { width: 17px; height: 17px; }
}

/* ————————————————————————— the player ————————————————————————— */

/* 140. Above the enquiry modal (95), the More menu (120) and the Explore-all
   directory (130) — a film opened from inside any of them must not play
   underneath the surface that opened it. */
.em-reel {
  position: fixed; inset: 0; z-index: var(--z-film);
  display: grid; grid-template-rows: auto 1fr; gap: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 3vw, 34px);
  padding-top: calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-bottom, 0px));
  color: var(--em-text-on-inverse);
}
.em-reel[hidden] { display: none; }

.em-reel__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(7,7,7,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .5s ease;
}
.em-reel.is-open .em-reel__scrim { opacity: 1; }

.em-reel__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; min-width: 0;
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .5s ease .1s, transform .6s var(--em-ease-exit) .1s;
}
.em-reel.is-open .em-reel__head { opacity: 1; transform: none; }

.em-reel__eyebrow {
  margin: 0 0 6px;
  font-family: var(--em-body, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--unveil-gold, var(--p-metal-soft));
}
.em-reel__t {
  margin: 0; min-width: 0;
  font-family: var(--em-display, Optima, 'Optima Nova', Candara, 'Trebuchet MS', sans-serif);
  font-weight: 400; font-size: clamp(1.1rem, 3.4vw, 1.7rem); line-height: 1.18;
  letter-spacing: -.01em; color: var(--em-text-on-inverse);
}

.em-reel__close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  margin: -6px -6px 0 0; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: rgba(var(--em-rgb-on-inverse), .78);
  transition: color .3s ease, background .3s ease;
  -webkit-appearance: none; appearance: none;
}
.em-reel__close:hover { color: var(--em-text-on-inverse); background: rgba(var(--em-rgb-on-inverse), .09); }
.em-reel__close:focus-visible { outline: 2px solid var(--unveil-gold, var(--p-metal-soft)); outline-offset: 2px; }
.em-reel__close svg { width: 14px; height: 14px; display: block; }

/* The stage centres the film and never lets it exceed the screen in EITHER
   direction: a 16/9 master on a tall phone would otherwise be cropped by the
   head above it. min-height:0 because a grid row floors at max-content and a
   video's max-content height is its intrinsic one. */
.em-reel__stage {
  min-height: 0; min-width: 0;
  display: grid; place-items: center;
}
.em-reel__v {
  display: block; width: 100%; max-width: min(1280px, 100%);
  max-height: 100%; aspect-ratio: 16 / 9;
  background: var(--p-brand-black); border-radius: var(--em-r, 2px);
  opacity: 0; transform: scale(.985);
  transition: opacity .55s ease .06s, transform .7s var(--em-ease-exit) .06s;
}
.em-reel.is-open .em-reel__v { opacity: 1; transform: none; }

/* Streamed, not carried in this build — so a film that will not load says so,
   and hands over the destination that does have it. */
.em-reel__fail {
  max-width: 34em; margin: 0; text-align: center;
  font-family: var(--em-body, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  font-size: 14px; line-height: 1.6; color: rgba(var(--em-rgb-on-inverse), .72);
}
.em-reel__fail a { color: var(--em-text-on-inverse); text-underline-offset: 3px; }
.em-reel__fail[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .em-reel__scrim, .em-reel__head, .em-reel__v,
  .em-reel-th__frame > img, .em-reel-th__play { transition: none; }
  .em-reel-th:hover .em-reel-th__frame > img,
  .em-reel-th:hover .em-reel-th__play { transform: none; }
}