/* ══════════════════════════════════════════════════════════════
   THE FIRST SCREEN, AS A FILM — the look of it

   Four plates, cross-faded. Over each one, the things that move: petals
   that let go and turn as they fall, the ring a petal makes on the
   water, vapour off the still, a drop at a lip. Each is its own element
   with its own trajectory, so nothing morphs and nothing jumps.

   Only transform and opacity are animated. The plate's camera move is a
   drift across with a breath of a dolly, and it is different in each
   act so the screen never reads as scrolling.
   ══════════════════════════════════════════════════════════════ */

/* It wears the .hero class as well, so the headline, the standfirst and
   the two calls to action are typeset exactly as they already are. These
   rules load after site.css, so where the two name the same thing — the
   scrims, the ground — this one wins. */
.filmhero{position:relative;min-height:var(--stage,100svh);overflow:hidden;
  background:var(--noir);isolation:isolate;
  display:grid;align-items:center;
  padding:clamp(6rem,13vh,9rem) var(--pad) clamp(4rem,9vh,6rem)}

.fh-scenes{position:absolute;inset:0;z-index:0}

.fh-scene{position:absolute;inset:0;opacity:0;overflow:hidden;
  transition:opacity var(--fade,1400ms) cubic-bezier(.16,.84,.28,1);
  will-change:opacity}
.fh-scene.on{opacity:1}

/* ── the plate, and the camera on it ───────────────────────────── */
/* max-width:none is load-bearing. site.css resets every img to
   max-width:100%, which clamped this to the width of the scene and threw
   the bleed away — so the moment the camera panned, a bare strip of
   ground showed down one edge. It was visible on a phone, on an iPad and
   on the desktop alike. */
.fh-plate{position:absolute;inset:-4% -4%;width:108%;height:108%;max-width:none;
  display:block;object-fit:cover;object-position:50% 50%;
  transform:translateZ(0);backface-visibility:hidden}
.fh-scene.on .fh-plate{animation:fh-cam 22s cubic-bezier(.5,0,.5,1) infinite alternate}
.fh-scene[data-act="1"].on .fh-plate{animation-name:fh-cam-1}
.fh-scene[data-act="2"].on .fh-plate{animation-name:fh-cam-2}
.fh-scene[data-act="3"].on .fh-plate{animation-name:fh-cam-3}
.fh-scene[data-act="4"].on .fh-plate{animation-name:fh-cam-4}

/* a drift across and a breath of a dolly, a different one each act */
@keyframes fh-cam-1{from{transform:translate3d(1.4%,0,0) scale(1.01)}
  to{transform:translate3d(-1.2%,-.8%,0) scale(1.03)}}
@keyframes fh-cam-2{from{transform:translate3d(-1.6%,-.6%,0) scale(1.03)}
  to{transform:translate3d(1.2%,.4%,0) scale(1.01)}}
@keyframes fh-cam-3{from{transform:translate3d(-1.2%,.6%,0) scale(1.02)}
  to{transform:translate3d(1.6%,-.6%,0) scale(1.035)}}
@keyframes fh-cam-4{from{transform:translate3d(1.2%,.5%,0) scale(1.03)}
  to{transform:translate3d(-1.0%,-.5%,0) scale(1.012)}}

/* A wash inside each scene, under the words. The scrim on .filmhero is
   one gradient for all four acts, and these four pictures are not
   equally bright in the same places — the still's lit amber elbow lands
   under the second line of the headline, the bowl's water under the
   standfirst in landscape. Rather than darken every act to carry the
   brightest, each scene takes a little of its own, and the plate stays
   as light as it can be. */
.fh-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,7,5,.42) 0%,rgba(10,7,5,.38) 36%,
    rgba(10,7,5,.22) 54%,rgba(10,7,5,0) 70%)}

.fh-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* ── a petal ─────────────────────────────────────────────────────
   The fall is read as one continuous movement, so the timing function
   is linear and the pacing lives in the keyframes themselves: a little
   acceleration out of the first quarter, then an even rate, which is
   what a petal does once the air is holding it. Between those it swings
   either side of its line — a petal never falls straight — and turns
   the whole way down rather than snapping round at one point. */
/* A petal is placed by its middle, not its corner. It matters for the
   ones that land: given a corner, a petal settles half its own width
   down and right of the spot it was aimed at, which on a wide screen
   put it on the glass of the bowl instead of on the essence. */
.fh-petal{position:absolute;left:var(--x0);top:var(--y0);
  margin:calc(var(--sz) * -.42) 0 0 calc(var(--sz) * -.5);
  width:var(--sz);height:auto;display:block;
  transform-origin:50% 40%;opacity:0;filter:blur(var(--bl,0));
  will-change:transform,opacity;
  animation:fh-fall var(--t) linear var(--d) infinite both}
@keyframes fh-fall{
  0%  {opacity:0;          transform:translate3d(0,0,0) rotate(var(--r0)) scale(.94)}
  7%  {opacity:var(--op)}
  25% {transform:translate3d(calc(var(--dx) * .18 + var(--sw)),calc(var(--dy) * .22),0)
       rotate(var(--ra)) scale(1)}
  50% {transform:translate3d(calc(var(--dx) * .46 - var(--sw)),calc(var(--dy) * .48),0)
       rotate(var(--rb)) scale(1)}
  75% {transform:translate3d(calc(var(--dx) * .74 + calc(var(--sw) * .6)),calc(var(--dy) * .74),0)
       rotate(var(--rc)) scale(1)}
  90% {opacity:var(--op)}
  100%{opacity:0;          transform:translate3d(var(--dx),var(--dy),0)
       rotate(var(--r1)) scale(.97)}
}

/* One that is going to land. It used to come down on an ease of its own
   and in under half the time the others take, which read as a different
   kind of falling in the middle of one film. It is the same fall now,
   keyframe for keyframe — linear, the same pacing, the same swing either
   side of its line, the same turn — and only the last tenth differs,
   where the surface takes it and it stays, because water does not give
   a petal back. */
.fh-petal.lands{animation:fh-land var(--t) linear var(--d) 1 forwards}
@keyframes fh-land{
  0%  {opacity:0;          transform:translate3d(0,0,0) rotate(var(--r0)) scale(.94)}
  7%  {opacity:var(--op)}
  25% {transform:translate3d(calc(var(--dx) * .18 + var(--sw)),calc(var(--dy) * .22),0)
       rotate(var(--ra)) scale(1)}
  50% {transform:translate3d(calc(var(--dx) * .46 - var(--sw)),calc(var(--dy) * .48),0)
       rotate(var(--rb)) scale(1)}
  75% {transform:translate3d(calc(var(--dx) * .74 + calc(var(--sw) * .6)),calc(var(--dy) * .74),0)
       rotate(var(--rc)) scale(1)}
  /* the water, taking it */
  92% {transform:translate3d(calc(var(--dx) * .93 + calc(var(--sw) * .2)),calc(var(--dy) * .94),0)
       rotate(var(--rd)) scale(1)}
  100%{opacity:var(--op);  transform:translate3d(var(--dx),var(--dy),0)
       rotate(var(--r1)) scale(.985)}
}

/* ── the ring a petal leaves on the water ──────────────────────── */
.fh-ring{position:absolute;left:var(--x);top:var(--y);
  width:var(--sz);height:calc(var(--sz) * .3);
  margin:calc(var(--sz) * -.15) 0 0 calc(var(--sz) * -.5);
  border:1px solid rgba(255,226,186,.5);border-radius:50%;
  opacity:0;will-change:transform,opacity;
  animation:fh-ring 2600ms cubic-bezier(.16,.84,.28,1) var(--d) infinite both}
@keyframes fh-ring{
  0%  {opacity:0;   transform:scale(.18)}
  12% {opacity:.72}
  100%{opacity:0;   transform:scale(1)}
}

/* ── vapour ──────────────────────────────────────────────────────
   Three plumes off the still, each on its own clock. A single blurred
   disc rising reads as a disc rising, so each one is two: a body that
   lifts and swells, and a wisp inside it drifting the other way at a
   different rate. That shear is what makes smoke look like smoke.

   It was also far too faint to see against the copper — .17 at the
   core, which the scrim then took most of — so the core is .30 and the
   plume is wider. */
.fh-steam{position:absolute;left:var(--x);top:var(--y);
  width:var(--sz);height:var(--sz);
  margin:calc(var(--sz) * -.5) 0 0 calc(var(--sz) * -.5);
  border-radius:50%;
  background:radial-gradient(circle at 50% 62%,
    rgba(255,240,218,.30),rgba(255,234,208,.13) 42%,
    rgba(255,232,204,.05) 64%,transparent 78%);
  filter:blur(12px);opacity:0;will-change:transform,opacity;
  animation:fh-steam var(--t,8600ms) linear var(--d) infinite both}
@keyframes fh-steam{
  0%  {opacity:0;    transform:translate3d(0,0,0) scale(.52)}
  14% {opacity:.9}
  /* it leans one way, then the other, and thins as it goes */
  34% {opacity:.85;  transform:translate3d(1.6vmin,-5.5vmin,0) scale(.88)}
  58% {opacity:.6;   transform:translate3d(-1.1vmin,-11vmin,0) scale(1.22)}
  80% {opacity:.3;   transform:translate3d(2.0vmin,-16vmin,0) scale(1.5)}
  100%{opacity:0;    transform:translate3d(-0.6vmin,-21vmin,0) scale(1.82)}
}

/* the wisp inside the plume, smaller and faster, shearing across it */
.fh-wisp{position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--sz) * .52);height:calc(var(--sz) * .52);
  margin:calc(var(--sz) * -.26) 0 0 calc(var(--sz) * -.26);
  border-radius:50%;
  background:radial-gradient(circle at 50% 60%,
    rgba(255,244,228,.26),rgba(255,236,212,.08) 52%,transparent 74%);
  filter:blur(7px);opacity:0;will-change:transform,opacity;
  animation:fh-wisp var(--t,6200ms) linear var(--d) infinite both}
@keyframes fh-wisp{
  0%  {opacity:0;    transform:translate3d(0,0,0) scale(.44)}
  16% {opacity:.72}
  40% {transform:translate3d(-1.9vmin,-6.5vmin,0) scale(.8)}
  68% {opacity:.42;  transform:translate3d(1.7vmin,-12.5vmin,0) scale(1.15)}
  100%{opacity:0;    transform:translate3d(-1.2vmin,-18vmin,0) scale(1.5)}
}

/* ── a drop gathering at a lip, then falling ───────────────────── */
.fh-drop{position:absolute;left:var(--x);top:var(--y);
  width:.62vmin;height:.9vmin;margin:0 0 0 -.31vmin;
  border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,rgba(255,236,200,.95),rgba(214,150,86,.85));
  box-shadow:0 0 .5vmin rgba(255,216,160,.6);
  opacity:0;will-change:transform,opacity;
  animation:fh-drop 3200ms cubic-bezier(.45,0,.75,1) var(--d) infinite both}
@keyframes fh-drop{
  0%  {opacity:0;   transform:translate3d(0,0,0) scale(.3,.3)}
  /* it swells at the lip before it has the weight to go */
  22% {opacity:.95; transform:translate3d(0,0,0) scale(1,1)}
  34% {opacity:.95; transform:translate3d(0,.4vh,0) scale(.86,1.3)}
  88% {opacity:.8;  transform:translate3d(0,var(--fall),0) scale(.7,1.5)}
  100%{opacity:0;   transform:translate3d(0,calc(var(--fall) + 1.5vh),0) scale(.6,1.2)}
}

/* ── the light in the room, and the dark the words are read on ─── */
.filmhero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(54% 60% at 62% 44%,rgba(201,138,58,.14),transparent 70%)}
.filmhero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(10,7,5,.94) 0%,rgba(10,7,5,.91) 28%,
      rgba(10,7,5,.82) 42%,rgba(10,7,5,.55) 54%,rgba(10,7,5,.2) 66%,rgba(10,7,5,0) 80%),
    linear-gradient(0deg,rgba(10,7,5,.86) 0%,rgba(10,7,5,.5) 20%,
      rgba(10,7,5,.18) 34%,transparent 50%),
    linear-gradient(180deg,rgba(10,7,5,.72) 0%,transparent 22%)}

/* anything that says somebody is reading it stops it moving under them */
.filmhero.hold .fh-plate,
.filmhero.hold .fh-fx *{animation-play-state:paused}

/* ── an upright screen: a phone, or a tablet held tall ─────────── */
@media (max-width:899px) and (max-aspect-ratio:1/1){
  .filmhero{align-items:end;
    padding:clamp(7rem,16vh,10rem) var(--pad) clamp(2.6rem,7vh,4rem)}
  /* These four photographs are composed subject-high, dark-beneath. A
     screen less tall than 9:16 — a tablet held upright — crops that
     evenly top and bottom with the default centre, which drops the bloom
     into the headline and takes the dark away from under it. Anchoring
     near the top keeps the composition the photographer gave it. */
  .fh-plate{inset:-3% -3%;width:106%;height:106%;object-position:50% 20%}
  /* the words sit in the dark under the picture, so the scrim turns */
  /* far enough up the screen to carry the eyebrow, which is gold and
     would otherwise be read against a lit petal; the picture still
     shows through everywhere the words are not */
  .filmhero::after{background:
    linear-gradient(0deg,rgba(10,7,5,.97) 8%,rgba(10,7,5,.95) 36%,
      rgba(10,7,5,.87) 52%,rgba(10,7,5,.5) 68%,rgba(10,7,5,.12) 88%,
      rgba(10,7,5,0) 100%),
    linear-gradient(180deg,rgba(10,7,5,.74) 0%,transparent 22%)}
}

/* turned on its side it is a wide screen, so it keeps the wide scrim and
   only loses the deep top padding that would push the words off it */
@media (min-aspect-ratio:1/1) and (max-height:600px){
  .filmhero{align-items:center;
    padding:clamp(4.2rem,15vh,5.6rem) var(--pad) clamp(1.4rem,6vh,2.4rem)}
  /* the words take a narrower column here, so the dark they are read on
     stops sooner and lets more of the picture through */
  .filmhero::after{background:
    linear-gradient(90deg,rgba(10,7,5,.96) 0%,rgba(10,7,5,.95) 34%,
      rgba(10,7,5,.89) 48%,rgba(10,7,5,.64) 60%,rgba(10,7,5,.24) 72%,
      rgba(10,7,5,0) 86%),
    linear-gradient(180deg,rgba(10,7,5,.72) 0%,transparent 26%)}
}

/* ── nobody is shown anything moving who asked not to be ───────── */
@media (prefers-reduced-motion:reduce){
  .fh-scene.on .fh-plate{animation:none;transform:scale(1.02)}
  .fh-fx{display:none}
  .fh-scene{transition:none}
}