/* =====================================================================
   VAL STUDIO — page blocks
   ---------------------------------------------------------------------
   core/site.css is the shared language of every interior page: the grid,
   the type scale, the tokens, and the components that appear on more
   than one page. This file is for blocks that belong to ONE page and
   would only be noise in there. Right now that is the About page's show
   reel; contact.html links this file too so that adding a block to it
   later is a CSS edit and not an HTML one.

   No token is defined here. Every value is a var() from site.css — if a
   new colour or size is needed, add it to the tokens block in that file.
===================================================================== */

/* ---------- show reel ----------------------------------------------------
   THE PLATE UNDER THE LABEL. The page's one piece of moving image, and
   the only thing on About that is not a paragraph — so it gets the
   weight of a hung object: a caption rule across the top with the work's
   name at one end and its span of years at the other, and the plate
   itself hanging beneath it.

   It reuses the site's waterline exactly as the contact directory does
   (see the .channels block in site.css): the hairline goes warm and
   wipes in from the left, the label brightens, the rule at the end
   reaches. Nothing moves. A visitor who has been to /contact already
   knows what this frame is telling them.

   THE ONE THING THIS BLOCK DOES THAT NOTHING ELSE DOES is the light.
   A warm bloom rises out of the corner the play label sits in — the same
   light source the home page works with, and the reason --warm exists in
   the palette. It is the plate about to become an image. Tune it with
   --plate-lit below.

   THE BLOOM IS LIT AT REST, AND IT USED NOT TO BE. --plate-lit was 0
   until :hover, which meant the whole of this — the one thing the block
   was written for — existed only for a mouse. On a phone there is no
   hover, so the plate was a near-black gradient with a 10px word on it
   and nothing else, for good. Measured against the page: --grad-2 runs
   #171b21 to #05070a and the page behind it is #050607, so "an unlit
   panel" and "a black rectangle" were the same picture. The bloom now
   rests lit and only BRIGHTENS on approach, which is what it was always
   describing.

   WHAT IS AND IS NOT FETCHED. Nothing from Vimeo runs until the visitor
   asks: the iframe is built on click by the script at the foot of
   info.html. The poster is a local still (assets/showreel-poster.jpg,
   see ASSETS.md) on `loading="lazy"`, so it costs nothing until the
   plate is scrolled to and never opens a connection to anyone else.

   THE REEL IS A PORTRAIT FILM IN A LANDSCAPE FRAME. The Vimeo source is
   9:16 (oEmbed reports 2000x3556, the thumbnail 1280x2276 — both 9:16
   rounded to whole pixels) and this plate is 16:9, so the player cannot
   fill it. Rather than let Vimeo's own black decide what that looks like,
   the iframe is held at the film's own ratio in the middle of the plate
   and the plate's material is left showing either side, edged with the
   site's hairline.
   A framed portrait, not a broken fit.                                   */

.showreel{
  /* clear of the page head by more than a section break — this is a
     different kind of thing from the prose that follows it */
  margin-top:var(--sp-8);
}

/* the caption rule: name at one end, years at the other */
.showreel-cap{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--sp-4);
  padding-bottom:var(--sp-3);
  font-size:var(--fs-000);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--haze-dim);
  transition:color var(--dur-med) var(--ease);
}

.showreel-frame{
  /* --plate-lit is how bright the bloom gets at rest-vs-hover. It is set
     here and read by ::after, so this one number is the whole effect.
     At rest, not off — see THE BLOOM IS LIT AT REST above. */
  --plate-lit:.42;
  /* how much of the poster shows through. The site is near-monochrome and
     this still is not, so it rests well down and comes up on approach. */
  --plate-img:.5;

  position:relative;
  aspect-ratio:16 / 9;
  background:var(--grad-2);
  border-top:1px solid var(--line);
  cursor:pointer;
  overflow:hidden;
  /* clip so the bloom cannot spill past the plate's own edges */
  isolation:isolate;
  /* the label's own ground: the foot of the plate carried down far enough
     that 10px of --haze stays readable over whatever the still puts there */
  box-shadow:inset 0 -90px 80px -46px rgba(5,6,7,.92);
  transition:border-color var(--dur-med) var(--ease);
}

/* the still. Decorative — the caption rule above already names the thing
   — so it carries an empty alt and is not announced twice.

   THE STILL IS VIMEO'S OWN COVER CARD for this reel, downloaded once at
   1080x1920 (the thumbnail oEmbed names, at a size suffix it serves) and
   kept as a local file — nothing is asked of Vimeo on page load. It was
   once passed over for a landscape band cut from below the card, because
   of the "HOSEIN ALEMI" lettering across its middle; it is back because
   it is the film's own shape, so the poster and the player now match.
   It is hung exactly where the player will be: the film's ratio, centred,
   full height. On a phone the plate is that ratio, so it fills it; on the
   16:9 plate it is a framed portrait with the plate either side — cover
   would have kept only a band through the middle, which is the lettering. */
.showreel-poster{
  position:absolute;z-index:0;
  top:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;aspect-ratio:var(--ratio-reel);max-width:100%;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  object-fit:cover;object-position:center;
  opacity:var(--plate-img);
  filter:saturate(.85);
  transition:opacity var(--dur-slow) var(--ease);
  pointer-events:none;
}

/* the warm wipe along the caption rule — the site's waterline, left to right */
.showreel-frame::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--warm);
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform var(--dur-slow) var(--ease),opacity var(--dur-med) var(--ease);
}

/* the bloom. Anchored to the lower left, where the play label is, so the
   light reads as coming from the thing you are about to press. */
.showreel-frame::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* mixed down from --warm rather than written as an rgba(), so the one
     warm in the palette stays the only place that colour is defined */
  background:radial-gradient(120% 110% at 8% 96%,
              color-mix(in srgb, var(--warm) 20%, transparent) 0%,
              color-mix(in srgb, var(--warm)  6%, transparent) 34%,
              transparent 68%);
  opacity:var(--plate-lit);
  transition:opacity var(--dur-slow) var(--ease);
}

/* approach: the light comes up and the still comes with it. One rule for
   both, so the two never drift apart. */
.showreel-frame:hover,
.showreel-frame:focus-visible{--plate-lit:.8;--plate-img:.68}
.showreel-frame:active{--plate-lit:1;--plate-img:.74}   /* it takes the press */

.showreel-frame:hover::before,
.showreel-frame:focus-visible::before{transform:scaleX(1);opacity:.62}
/* leaving is quicker than arriving, as everywhere else on the site */
.showreel-frame:not(:hover)::before{transition-duration:var(--dur-med),var(--dur-fast)}

.showreel:hover .showreel-cap,
.showreel:has(.showreel-frame:focus-visible) .showreel-cap{color:var(--haze)}

.showreel-frame:focus-visible{
  outline:1px solid var(--warm);outline-offset:3px;
}

/* the play affordance: a label and a rule that reaches, not a button.
   Bottom left, on the site's left margin logic rather than dead centre. */
.showreel-play{
  position:absolute;z-index:2;      /* over the still and over the bloom */
  left:var(--sp-5);bottom:var(--sp-5);
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-000);letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--haze);
  transition:color var(--dur-med) var(--ease);
}
.showreel-play::after{
  content:"";display:block;width:18px;height:1px;
  background:var(--haze-dim);
  transition:width var(--dur-med) var(--ease),background var(--dur-med) var(--ease);
}
.showreel-frame:hover .showreel-play,
.showreel-frame:focus-visible .showreel-play{color:var(--signal)}
.showreel-frame:hover .showreel-play::after,
.showreel-frame:focus-visible .showreel-play::after{width:30px;background:var(--warm)}

/* once the player is in, the plate is no longer a control: the bloom, the
   wipe and the foot scrim would only sit on top of the picture */
.showreel-frame[data-loaded]{cursor:default;box-shadow:none}
.showreel-frame[data-loaded]::before,
.showreel-frame[data-loaded]::after{display:none}

/* A PORTRAIT FILM, HUNG. The reel is 9:16 and the plate is 16:9, so
   something has to give either side of the picture. Left alone, the
   iframe stretches the full width and Vimeo fills the difference with its
   own black — the plate turns into a letterbox that looks like a mistake.

   Held at the film's own ratio instead, the picture is a portrait panel
   in the middle of the plate with the plate's own material showing either
   side of it, and a hairline down each edge saying where the film starts.
   That is the same move the rest of the site makes with a frame: state
   the edge rather than hide it. --ratio-reel is the one number; change it
   with the video and nothing else here moves. */
.showreel-frame{--ratio-reel:9 / 16}
.showreel-frame iframe{
  position:absolute;z-index:3;
  top:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;aspect-ratio:var(--ratio-reel);
  max-width:100%;
  border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  display:block;
}

/* ON A PHONE THE PLATE BECOMES THE FILM. A 16:9 plate one phone wide
   left the portrait player about a fifth of the screen across — watchable
   only in fullscreen. Here the plate takes the film's own ratio and runs
   out through the page's side padding to the screen's edges, so the
   poster and the player are the same shape and the whole picture shows,
   with nothing either side for the hairlines to mark off. The caption
   rule and the play label keep the page's margin.
   The plate is now nearly a screen tall, so its foot sits where the
   site's fixed corner controls do whenever the whole film is in view —
   the label, its light and its dark ground move to the head of the plate,
   just under the caption rule. */
@media (max-width:560px){
  .showreel{margin-top:var(--sp-7)}
  .showreel-play{left:var(--sp-4);bottom:auto;top:var(--sp-4)}
  .showreel-frame::after{
    background:radial-gradient(120% 110% at 8% 4%,
                color-mix(in srgb, var(--warm) 20%, transparent) 0%,
                color-mix(in srgb, var(--warm)  6%, transparent) 34%,
                transparent 68%);
  }
  .showreel-frame{
    box-shadow:inset 0 90px 80px -46px rgba(5,6,7,.92);
    /* content-box, so the 1px hairline along the top sits outside the
       ratio and the picture itself is exactly the film's shape */
    box-sizing:content-box;aspect-ratio:var(--ratio-reel);
    margin-inline:calc(-1 * var(--sp-4));   /* the .page side padding at this width */
  }
  .showreel-frame iframe,.showreel-poster{border-left:0;border-right:0}
}

/* A phone on its side: the film's ratio again, but held to the screen's
   height rather than its width, so the whole picture fits on screen. */
@media (orientation:landscape) and (max-height:500px){
  .showreel-frame{
    box-sizing:content-box;aspect-ratio:var(--ratio-reel);
    height:calc(100svh - var(--sp-6));width:auto;
    margin-inline:auto;
  }
  .showreel-frame iframe,.showreel-poster{border-left:0;border-right:0}
}

@media (prefers-reduced-motion:reduce){
  .showreel-cap,
  .showreel-frame,
  .showreel-poster,
  .showreel-frame::before,
  .showreel-frame::after,
  .showreel-play,
  .showreel-play::after{transition:none}
}