/* ============================================================
   04 · WORK — phone reels
   ============================================================ */

/* Everything in this section is centred: the client asked for it, and a
   wrapping row of phones has no left edge to hang copy off anyway. */
.work__head{text-align:center}
.work__head .title{margin-inline:auto}
.work__lead{
  margin:clamp(1.5rem,2.8vw,2.4rem) auto 0;
  max-width:52ch;font-size:var(--t-lead);font-weight:300;line-height:1.7;
}
.work__filters{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.55rem clamp(1.1rem,2.4vw,2.1rem);
  margin-top:clamp(2.6rem,5vw,4rem);
  padding:0;list-style:none;
}
.work__chip{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;border-bottom:1px dashed transparent;border-radius:0;
  padding:.3rem 0;margin:0;
  font-family:var(--util);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.5;
  color:var(--ink-soft-dark);cursor:pointer;
  transition:color .4s var(--ease-soft),border-color .4s var(--ease-soft);
}
.work__chip:hover{color:var(--linen)}
.work__chip[aria-pressed="true"]{color:var(--linen);border-bottom-color:var(--clay)}

/* ---------- the row --------------------------------------- */
/* Flex, not grid: when a category filter leaves three phones on screen they
   have to centre themselves, and a fixed column count would strand them left.
   The max-width caps are what actually fix the count per breakpoint — 2 up on
   phones, 3 on tablets, 4 on desktop. */
.work__phones{
  --pgap:clamp(14px,3vw,42px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:var(--pgap);
  margin:clamp(2.4rem,4.8vw,4rem) auto 0;
  padding:0;list-style:none;
}
/* One number drives the whole device. Every rule below is a fraction of --pw,
   so a 130px phone and a 226px phone are the same drawing at two scales and
   nothing has to be re-tuned per breakpoint. */
.reel{--pw:min(50vw - 30px,200px);flex:0 0 auto;width:var(--pw)}
@media (max-width:359.98px){
  /* two phones this narrow stop being watchable — show one, properly */
  .reel{--pw:min(76vw,260px)}
}
@media (min-width:640px){
  .work__phones{max-width:760px}
  .reel{--pw:min(30vw - 14px,212px)}
}
@media (min-width:1100px){
  .work__phones{max-width:1060px}
  .reel{--pw:226px}
}

/* ---------- the device ------------------------------------ */
/* The shell is --espresso rather than --charcoal so it separates from the
   --charcoal section behind it; the screen is the charcoal, which is what
   makes it read as a screen. */
.phone{
  position:relative;width:100%;
  padding:calc(var(--pw)*.035) calc(var(--pw)*.035) calc(var(--pw)*.055);
  background:var(--espresso);
  border:1px solid var(--hairline-dark);
  border-radius:calc(var(--pw)*.155);
  box-shadow:0 calc(var(--pw)*.06) calc(var(--pw)*.15) rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .45s var(--ease-soft),box-shadow .45s var(--ease-soft);
}
/* home indicator */
.phone::before{
  content:"";position:absolute;z-index:2;
  left:50%;bottom:calc(var(--pw)*.024);transform:translateX(-50%);
  width:calc(var(--pw)*.3);height:calc(var(--pw)*.015);
  border-radius:99px;background:rgba(246,242,235,.34);
}
/* side buttons — two on the left, one on the right, cloned with box-shadow */
.phone::after{
  content:"";position:absolute;z-index:1;
  left:calc(var(--pw)*-.015);top:calc(var(--pw)*.34);
  width:calc(var(--pw)*.015);height:calc(var(--pw)*.115);
  background:var(--charcoal);
  box-shadow:0 calc(var(--pw)*.16) 0 var(--charcoal),
             calc(var(--pw)*1.03) calc(var(--pw)*-.09) 0 var(--charcoal);
}

.phone__screen{
  position:relative;overflow:hidden;
  border-radius:calc(var(--pw)*.125);
  background:var(--charcoal);
}
/* status pills / dynamic island, drawn so they scale with --pw */
.phone__screen::before{
  content:"";position:absolute;z-index:3;
  top:calc(var(--pw)*.042);left:calc(50% - var(--pw)*.115);
  width:calc(var(--pw)*.085);height:calc(var(--pw)*.021);
  border-radius:99px;background:rgba(246,242,235,.72);
  box-shadow:calc(var(--pw)*.145) 0 0 rgba(246,242,235,.72);
}
.phone__vid{
  /* height:auto is load-bearing — the width/height attributes map to a
     presentational height, which would otherwise beat aspect-ratio */
  display:block;width:100%;height:auto;aspect-ratio:9 / 16;
  background:var(--charcoal);
  /* cover is safe: the reel and the -tile.jpg are both exactly 9:16, so
     nothing is cropped here. The tiles are built by tools/build-reel-tiles.py,
     which crops the curated cover to 9:16 so it FILLS this screen, and takes
     Instagram's view-count pill and play badge off locally rather than by
     cutting height. An earlier build padded the height instead, which left
     every tile letterboxed inside the bezel by a different amount. */
  object-fit:cover;
}

/* The cover sits ON TOP of the video and pulls back only while it plays, so a
   reel that is paused or hovered-away always shows its cover again rather than
   freezing on whatever frame it stopped at. */
.phone__cover{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  transition:opacity .3s var(--ease-soft);
}
.reel.is-playing .phone__cover{opacity:0}

/* ---------- play / pause surface -------------------------- */
/* A transparent button over the screen carries the accessible name and the
   keyboard path; the click itself is handled on .phone so the bezel works too. */
.phone__hit{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:0;margin:0;
  background:none;border:0;color:var(--linen);font:inherit;cursor:pointer;
}
/* the control only means anything once the script has wired it up */
html:not(.js) .phone__hit{display:none}
.phone__hit:focus-visible{outline:2px solid var(--linen);outline-offset:-4px}
.phone__hint{
  display:block;width:calc(var(--pw)*.2);height:calc(var(--pw)*.2);
  opacity:.85;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition:opacity .45s var(--ease-soft);
}
.phone__hint svg{display:block;width:100%;height:100%}
.reel.is-playing .phone__hint{opacity:0}

/* ---------- overlay controls ------------------------------ */
.phone__ctrls{
  position:absolute;z-index:4;
  left:calc(var(--pw)*.055);right:calc(var(--pw)*.055);
  bottom:calc(var(--pw)*.045);
  display:flex;align-items:center;gap:calc(var(--pw)*.035);
  opacity:0;transition:opacity .35s var(--ease-soft);
}
/* focus-within matters: the controls are focusable while invisible otherwise */
.reel.is-playing .phone__ctrls,
.phone:focus-within .phone__ctrls{opacity:1}
@media (hover:hover) and (pointer:fine){
  .phone:hover{transform:translateY(-6px)}
  .phone:hover .phone__ctrls{opacity:1}
}
.phone__btn{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--pw)*.125);height:calc(var(--pw)*.125);
  padding:0;margin:0;
  /* charcoal at alpha, written literally — same convention the rest of the
     file uses for token tints */
  background:rgba(23,23,23,.58);
  border:0;border-radius:50%;color:var(--linen);cursor:pointer;
  transition:background .3s var(--ease-soft),transform .3s var(--ease-soft);
}
.phone__btn svg{
  display:block;width:60%;height:60%;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.phone__btn:hover{background:rgba(23,23,23,.86);transform:scale(1.1)}
.phone__btn:focus-visible{outline-offset:2px}
/* sound-on reads in clay — the reference used red, which is not ours */
.reel.is-sound .phone__mute{background:var(--clay);color:var(--charcoal)}
.phone__mute .i-on{display:none}
.reel.is-sound .phone__mute .i-on{display:block}
.reel.is-sound .phone__mute .i-off{display:none}
/* reel-09 has no audio track: a dimmed icon, not a button that does nothing */
.phone__btn--none{opacity:.42;cursor:default}
.phone__btn--none:hover{background:rgba(23,23,23,.58);transform:none}

/* ---------- scrubber -------------------------------------- */
/* A real range input, so dragging, clicking and arrow keys all work without
   re-implementing any of it. --p is written by the timeupdate handler. */
.phone__seek{
  flex:1 1 auto;min-width:0;
  height:calc(var(--pw)*.07);
  margin:0;padding:0;background:none;border:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.phone__seek:focus-visible{outline-offset:2px}
.phone__seek::-webkit-slider-runnable-track{
  height:calc(var(--pw)*.022);border-radius:99px;
  background:linear-gradient(to right,
    var(--linen) var(--p,0%),rgba(246,242,235,.34) var(--p,0%));
}
.phone__seek::-moz-range-track{
  height:calc(var(--pw)*.022);border-radius:99px;
  background:linear-gradient(to right,
    var(--linen) var(--p,0%),rgba(246,242,235,.34) var(--p,0%));
}
.phone__seek::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:calc(var(--pw)*.05);height:calc(var(--pw)*.05);
  margin-top:calc(var(--pw)*-.014);
  border:0;border-radius:50%;background:var(--linen);
  opacity:0;transition:opacity .25s var(--ease-soft);
}
.phone__seek::-moz-range-thumb{
  width:calc(var(--pw)*.05);height:calc(var(--pw)*.05);
  border:0;border-radius:50%;background:var(--linen);
  opacity:0;transition:opacity .25s var(--ease-soft);
}
.phone:hover .phone__seek::-webkit-slider-thumb,
.phone__seek:focus-visible::-webkit-slider-thumb{opacity:1}
.phone:hover .phone__seek::-moz-range-thumb,
.phone__seek:focus-visible::-moz-range-thumb{opacity:1}

/* ---------- "tap for sound" ------------------------------- */
/* ---------- app nav bar ----------------------------------- */
.phone__nav{
  display:flex;align-items:center;justify-content:space-around;
  height:calc(var(--pw)*.2);
  padding:0 calc(var(--pw)*.045);
}
.phone__nav svg{
  display:block;
  width:calc(var(--pw)*.082);height:calc(var(--pw)*.082);
  fill:none;stroke:var(--linen);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
.phone__add{
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--pw)*.135);height:calc(var(--pw)*.098);
  border-radius:calc(var(--pw)*.032);
  background:var(--linen);color:var(--espresso);
  font-family:var(--body);font-weight:600;
  font-size:calc(var(--pw)*.075);line-height:1;
}

/* re-entry fade when a category filter changes the visible set */
.reel.is-fresh{animation:reelIn .55s var(--ease-soft) var(--sd,0s) both}
@keyframes reelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- floaty flowers — desktop only ----------------
   Decorative flowers drifting on both sides of the phone grid. Same drift
   animation as .hero__petal. Hidden below 1000px so they never compete with
   the phones on a narrow screen. */
.work__petals{display:none}
@media (min-width:1000px){
  .work__petals{
    display:block;position:absolute;inset:0;z-index:0;
    pointer-events:none;overflow:hidden;
  }
  .work__petal{
    position:absolute;width:var(--w);opacity:var(--op,.7);
    animation:tz-float var(--dur,18s) ease-in-out var(--delay,0s) infinite;
    will-change:transform;
  }
  /* A FOUR-STOP path, not the hero's three-stop `tz-drift`. The hero petals
     drift over a busy film strip where a hint of movement is enough; these sit
     on a flat charcoal section with nothing else moving, so a 3-stop there-and-
     back reads as a slow twitch. Four stops with the x and y peaks offset from
     each other trace a loose figure-eight, which is what actually reads as
     floating. Travel is ~2x the hero's for the same reason. */
  @keyframes tz-float{
    0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}
    25%    {transform:translate3d(calc(var(--dx,20px) * .55),var(--dy,28px),0)
                      rotate(calc(var(--r,0deg) + 5deg))}
    50%    {transform:translate3d(var(--dx,20px),calc(var(--dy,28px) * .3),0)
                      rotate(calc(var(--r,0deg) - 4deg))}
    75%    {transform:translate3d(calc(var(--dx,20px) * .28),calc(var(--dy,28px) * -.62),0)
                      rotate(calc(var(--r,0deg) + 3deg))}
  }
  .work__petal img{
    width:100%;height:auto;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
  }
}