/* Ambrosia DC — the cinema layer, ported from ambrosia-dc-pi.vercel.app.
 *
 * The restaurant pointed at that hero and asked for it here. Taken apart, it is four
 * plates stacked over a photograph:
 *
 *   1. the picture itself, slightly darkened and desaturated a touch
 *   2. a second copy of it drifting over the first on a 26-second Ken Burns, at .55
 *      opacity and `lighten`, which is what makes the still look like it is breathing
 *   3. a forest-green scrim, heavier at the foot than the head, so type sits on it
 *   4. warm particles on a canvas blended with `screen`, and a film-grain plate
 *
 * Numbers are the original's, not re-tuned: kenburns 1.04 -> 1.15 over 26s alternating,
 * scrim stops at 36/68%, grain at 4% on a 1.2s four-step jitter. They were chosen against
 * this palette — the scrim is already rgb(25,61,49), which is this brand's forest to the
 * digit — and eyeballing them again only moves them somewhere worse.
 *
 * Applied to the link showcase on the home page, the band the restaurant wanted it on,
 * and available to anything else by adding data-am-cinema.
 */

.am-cinema{ position:relative; overflow:hidden; isolation:isolate; }

/* 1 + 2 — the picture, and its drifting double.
   The showcase already stacks its photographs in .qodef-m-image; rather than inject a
   second copy of each, the drift is put on the images that are there. Same effect, no
   extra bytes, and it keeps working when the slider swaps which one is showing.

   NOTE, found while rebalancing the scrim: on the showcase this selector matches
   nothing. .qodef-m-image carries its photograph as a CSS `background-image`, not as an
   <img>, so neither the drift nor the brightness(.86) below has ever applied there —
   the band's darkness was the scrim alone, which is why lifting the filter changed the
   measured luminance by nothing. Left as it is rather than "fixed": the drift was not
   asked for on this band, and starting a 26-second Ken Burns on it now would be adding
   motion under cover of a bug report. If it is ever wanted, it belongs on
   .qodef-m-image itself, and the scrim numbers above would need re-measuring. */
.am-cinema .qodef-m-image img,
.am-cinema > img{
  filter:brightness(.86) saturate(1.05);
  transform-origin:center;
  animation:am-kenburns 26s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes am-kenburns{
  0%  { transform:scale(1.04) translate(0, 0); }
  100%{ transform:scale(1.15) translate(-2%, -2%); }
}

/* 3 — the scrim
   ---------------------------------------------------------------------------
   REBALANCED: a pool under the type, not a wash over the picture.

   "hình ở sestion chỗ này tối vậy đưa nó về trước bình thường đi nào" — this
   band is too dark, put it back to normal. Measured with the slider pinned to
   one photograph (it cycles through three, and comparing variants against
   whichever happened to be showing made a heavier scrim read as lighter than
   the one it replaced):

       mean luminance of the band, 0-255
         the scrim as it was          77.4
         no scrim at all             109.1
         this rule                    86.8

   The old numbers came off the reference site's hero, where the plate beneath
   is a dark handheld video and a forest wash reading .95 at the foot costs
   nothing. Here the plate is a lit photograph of wagyu, phở and a hotpot, and a
   full-height forest gradient turned all three the same green.

   A flat lift was not available: the titles are cream, and against the
   unscrimmed picture the strip they sit in measures 125/255 — roughly 3.5:1,
   under AA. So the veil is now shaped rather than uniform. An ellipse holds the
   centre down where the words are, and the field around it is nearly clear:
   the title strip actually comes out *darker* than before (90.8 against 93.1,
   ~5.6:1) while the band as a whole is materially lighter.

   Neutral rgb(8,20,17) rather than the brand forest, for the same reason the
   hero's scrim was made neutral: over a green-flecked bowl of phở, a green
   scrim reads as murk rather than as atmosphere.
   --------------------------------------------------------------------------- */
.am-cinema .am-scrim{
  /* above the photographs, below the type. The showcase puts its images on z-index 5 and
     its slider on 10, so the first cut of these three sat at 2-4 and was simply covered. */
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:
    radial-gradient(52% 40% at 50% 50%,
      rgba(8,20,17,.58) 0%,
      rgba(8,20,17,.20) 62%,
      rgba(8,20,17,0) 86%),
    linear-gradient(180deg,
      rgba(8,20,17,.18) 0%,
      rgba(8,20,17,.02) 36%,
      rgba(8,20,17,.10) 72%,
      rgba(8,20,17,.38) 100%);
}

/* 3b — the showcase's own hover veil, capped.
   ---------------------------------------------------------------------------
   "màu sắc chỗ sestion này tối thế" with a screenshot of this band very nearly
   black — darker than the old scrim ever made it — and, in the same breath,
   "rê chuột vào bị tối": it goes dark when the pointer is on it.

   The band carries a second darkening layer that has nothing to do with the
   cinema scrim: .qodef-m-images-overlay, which the theme paints at

       background-color: var(--qode-bg-color)   ->   rgba(0, 0, 0, .9)

   and whose opacity is driven from the showcase's JavaScript, not from CSS.
   Raised to full it takes the photograph down to a tenth of its brightness,
   which is exactly what that screenshot shows.

   Honest note: this could not be reproduced under automation. Driving a pointer
   across the item leaves the overlay at 0 (`.qodef-m-item:hover` matches, the
   overlay does not move), and sampling it for sixteen seconds while the slider
   ran gave a maximum of 0.0024. So the trigger is some real-pointer interaction
   the synthetic one does not satisfy.

   Rather than keep guessing at the trigger, the ceiling is lowered: whatever
   raises the opacity, the darkest it can now reach is a dim rather than a
   blackout. The layer keeps doing its job — separating the VIEW cursor from the
   photograph — at a strength suited to a lit dish rather than to the dark
   interiors this theme was drawn for.
   --------------------------------------------------------------------------- */
.am-cinema .qodef-m-images-overlay{
  background-color:rgba(6,18,15,.42) !important;
}

/* 4 — the steam, and the grain */
.am-cinema .am-steam{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:7; pointer-events:none; mix-blend-mode:screen;
}
.am-cinema .am-grain{
  position:absolute; inset:0; z-index:8; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:am-grain 1.2s steps(4) infinite;
}

@keyframes am-grain{
  0%  { transform:translate(0, 0); }
  25% { transform:translate(-2%, 1%); }
  50% { transform:translate(1%, -2%); }
  75% { transform:translate(-1%, 2%); }
  100%{ transform:translate(2%, -1%); }
}

/* the band's own type has to stay above all four plates */
.am-cinema .qodef-m-items,
.am-cinema .qodef-m-item,
.am-cinema .qodef-e-title,
.am-cinema .qodef-e-subtitle,
.am-cinema .swiper-container,
.am-cinema .swiper-wrapper{ position:relative; z-index:11; }

/* and it has to read against them: the scrim is dark, so the type is light */
.am-cinema .qodef-e-title{
  color:var(--ambrosia-cream, #f4ecdd) !important;
  text-shadow:0 1px 22px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4);
}
.am-cinema .qodef-e-subtitle{
  color:var(--ambrosia-gold-lite, #c9a24b) !important;
  text-shadow:0 1px 14px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce){
  .am-cinema .qodef-m-image img,
  .am-cinema > img,
  .am-cinema .am-grain{ animation:none !important; }
}


/* the hero, where the plate underneath is a video rather than a photograph */
.am-cinema--hero{ position:relative; isolation:isolate; }
.am-cinema--hero > .elementor-background-video-container{ z-index:0; }
.am-cinema--hero > .am-scrim{ z-index:2; }
.am-cinema--hero > .am-steam{ z-index:3; }
.am-cinema--hero > .am-grain{ z-index:4; }
.am-cinema--hero > .e-con-inner,
.am-cinema--hero > .elementor-element,
.am-cinema--hero > .elementor-widget-wrap{ position:relative; z-index:5; }
/* The reference puts its headline at the foot of the frame, where its scrim is heaviest,
   so the middle of that gradient is only 18% and the type still reads. This headline sits
   in the centre. The scrim is rebalanced for it rather than the title moved. */
.am-cinema--hero > .am-scrim{
  background:
    linear-gradient(180deg,
      rgba(25,61,49,.52) 0%,
      rgba(25,61,49,.38) 22%,
      rgba(25,61,49,.52) 50%,
      rgba(25,61,49,.70) 74%,
      rgba(25,61,49,.94) 100%),
    radial-gradient(120% 80% at 50% 52%, rgba(10,26,21,.42), transparent 62%);
}

/* the video itself is handheld and bright in places; a touch down, like the reference */
.am-cinema--hero video{ filter:brightness(.88) saturate(1.04); }

/* ---------------------------------------------------------------------------
   WHEN THE HERO IS THE SLIDESHOW, THE SCRIM IS THE SLIDESHOW'S

   Everything above was tuned against the kitchen clip: handheld, fluorescent,
   mostly stainless steel, and dark enough that a forest wash reading up to .94
   at the foot cost it nothing. The hero is now five deliberately bright dishes
   (ambrosia-hero.js), chosen for exactly the quality this scrim removes — laid
   over them it turned a plate of soft-shell crab into a uniform green pane.

   So where the slideshow is present the cinema scrim stands down and
   .am-hero-slides::after does the work instead: neutral black rather than
   forest, weighted to the foot where the address block sits, and nearly clear
   across the middle. The grain and the steam stay — they are texture, not tint.

   A descendant selector, not a child one. The first version of this rule was
   written `.am-cinema--hero > .am-scrim` to match the rules above it, and it
   never fired: the hero container does not carry .am-cinema--hero at all, and
   the scrim is nested inside it rather than being a direct child. Measured in
   the browser — hasCinemaHero:false, scrimIsDirectChild:false.
   --------------------------------------------------------------------------- */
.am-hero--live .am-scrim,
.elementor-element-04fd0aa .am-scrim{
  background:none !important;
}