/* =====================================================================
   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.
   The plate rests as an unlit panel, and on approach 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.

   Nothing from Vimeo is fetched until the visitor asks: the iframe is
   built on click by the script at the foot of info.html, so the panel
   below is genuinely empty until then.                                  */

.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. */
  --plate-lit:0;

  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;
  transition:border-color var(--dur-med) var(--ease);
}

/* 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);
}

.showreel-frame:hover,
.showreel-frame:focus-visible{--plate-lit:.8}
.showreel-frame:active{--plate-lit:1}   /* 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:1;
  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 and
   the wipe would only sit on top of the picture */
.showreel-frame[data-loaded]{cursor:default}
.showreel-frame[data-loaded]::before,
.showreel-frame[data-loaded]::after{display:none}

.showreel-frame iframe{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;border:0;display:block;
}

/* On a phone the plate keeps its ratio but the label pulls in to the
   page's own margin, so it lines up with the prose underneath it. */
@media (max-width:560px){
  .showreel{margin-top:var(--sp-7)}
  .showreel-play{left:var(--sp-4);bottom:var(--sp-4)}
}

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