/* ==========================================================================
   EITRI — tier demonstration

   Answers the one question a price table cannot: why does Cinematic cost
   more than Cut? Three panels, ONE landscape, the treatment escalating left
   to right.

   Why a landscape and not a person: grading is close to invisible on a
   talking head at thumbnail size, and unmistakable on cold rock and water.
   The customer has two seconds and no vocabulary for what we do — the
   demonstration has to work without either.

   Why drawn in CSS and not generated or filmed: three demo clips are several
   megabytes before a phone renders a word of the page, and every generated
   attempt at "same scene, three treatments" drifts — different rock,
   different light, and the comparison stops proving anything. Here the scene
   is provably identical because it is literally the same markup; only the
   colour and the added layers change. It is also a few kilobytes and cannot
   fail to load.

   The scene is the brand's own sentence: a cold northern place, and exactly
   one warm thing in it. Same rule as the playhead, same rule as the mark.

   One shared 6s clock. Every keyframe runs on it, so the three panels stay
   in step and read as one moment treated three ways.
   ========================================================================== */

.tier-demo{
  margin-top:22px;
  /* The sticky header would otherwise clip the first panel when someone
     jumps straight to this section. */
  scroll-margin-top:90px;
}

/* PHONE — Raw and one tier, held side by side.
   Four 16:10 panels stacked is a scroll, not a comparison: by the time the
   fourth is on screen the first is a memory, and a remembered before is a
   generous before. Two panels in one viewport is the whole mechanism, so the
   phone gets the pair and a control to change the right-hand half.

   Raw is the narrow column because it is the lesser thing, and the layout
   should say so before the copy does. */
.tier-stage{
  display:grid;
  grid-template-columns:38fr 62fr;
  align-items:start;
  column-gap:10px;
  row-gap:12px;
}
/* Bounded to the phone rather than written mobile-first and undone later.
   Everything in here is explicit grid placement, and placement does not
   cleanly "add up" between two layouts: the selector that reveals the active
   panel carries an attribute, so it outranks any short reset a desktop layer
   can write, and the override loses in silence. A closed query cannot leak,
   which is worth more here than matching the house pattern. */
@media (max-width:759.98px){
  /* Panels that are not the current selection are out of the layout
     entirely — not merely transparent — so they cannot be tabbed into or
     read aloud. */
  .tier-stage > .tier{display:none}

  /* The two visible panels dissolve into the grid so their frames can pair
     on the top row while their captions run the full width underneath.
     Nesting a caption under a 127px frame sets it at about sixteen
     characters a line, which is not reading, it is decoding. */
  .tier-stage > .tier-anchor,
  .tier-stage[data-active="cut"] > [data-tier="cut"],
  .tier-stage[data-active="pro"] > [data-tier="pro"],
  .tier-stage[data-active="max"] > [data-tier="max"],
  .tier-stage[data-active="cin"] > [data-tier="cin"]{display:contents}

  /* Sat on the same baseline as the finished panel rather than the same top
     edge. Two frames hung from a shared ceiling read as a pair of equals;
     two standing on a shared floor read as one being taller than the other,
     which is the sentence this row is trying to say. */
  .tier-anchor .tier-frame{grid-column:1;grid-row:1;align-self:end}
  .tier-anchor .tier-cap{grid-column:1/-1;grid-row:2}
  .tier-stage > .tier:not(.tier-anchor) .tier-frame{grid-column:2;grid-row:1}
  .tier-stage > .tier:not(.tier-anchor) .tier-cap{grid-column:1/-1;grid-row:3}
}

.tier{margin:0;display:flex;flex-direction:column;gap:11px;min-width:0}

/* ------------------------------------------------------------- the frame */
.tier-frame{
  position:relative;
  aspect-ratio:16/10;
  border-radius:var(--r-tile);
  overflow:hidden;
  background:#101014;
  border:1px solid var(--line);
  isolation:isolate;
}

/* ----------------------------------------------------------- timeline -- */
/* The playhead. The only moving warm thing on the page, which is the whole
   reason the accent exists. */
.tier-strip{
  position:absolute;left:0;right:0;bottom:0;height:15%;
  background:rgba(0,0,0,.5);
  border-top:1px solid var(--line);
}
.tier-clip{
  position:absolute;top:26%;height:48%;border-radius:2px;
  background:rgba(200,204,210,.22);
}
/* Cut: two trims, so three clips with gaps where dead air was removed. */
[data-tier="cut"] .tier-clip:nth-child(1){left:5%;width:26%}
[data-tier="cut"] .tier-clip:nth-child(2){left:34%;width:30%}
[data-tier="cut"] .tier-clip:nth-child(3){left:67%;width:28%}
/* Pro: more cuts, plus a second layer where captions and B-roll live. */
[data-tier="pro"] .tier-clip:nth-child(1){left:5%;width:17%}
[data-tier="pro"] .tier-clip:nth-child(2){left:24%;width:13%}
[data-tier="pro"] .tier-clip:nth-child(3){left:39%;width:22%}
[data-tier="pro"] .tier-clip:nth-child(4){left:63%;width:15%;top:8%;height:30%;background:rgba(200,204,210,.34)}
[data-tier="pro"] .tier-clip:nth-child(5){left:80%;width:15%}
/* Cinematic: dense, layered, deliberate. */
[data-tier="max"] .tier-clip:nth-child(1){left:4%;width:15%}
[data-tier="max"] .tier-clip:nth-child(2){left:21%;width:12%}
[data-tier="max"] .tier-clip:nth-child(3){left:35%;width:20%}
[data-tier="max"] .tier-clip:nth-child(4){left:57%;width:17%}
[data-tier="max"] .tier-clip:nth-child(5){left:76%;width:19%}
[data-tier="max"] .tier-clip:nth-child(6){left:4%;width:34%;top:6%;height:16%;background:rgba(200,204,210,.34)}
[data-tier="cin"] .tier-clip:nth-child(1){left:4%;width:14%}
[data-tier="cin"] .tier-clip:nth-child(2){left:20%;width:11%}
[data-tier="cin"] .tier-clip:nth-child(3){left:33%;width:19%}
[data-tier="cin"] .tier-clip:nth-child(4){left:54%;width:16%}
[data-tier="cin"] .tier-clip:nth-child(5){left:72%;width:23%}
[data-tier="cin"] .tier-clip:nth-child(6){left:4%;width:30%;top:6%;height:16%;background:rgba(200,204,210,.34)}
[data-tier="cin"] .tier-clip:nth-child(7){left:40%;width:38%;top:6%;height:16%;background:rgba(255,106,31,.34)}

.tier-playhead{
  position:absolute;top:0;bottom:0;width:2px;
  background:var(--orange);
  animation:tier-sweep 6s linear infinite;
}
@keyframes tier-sweep{
  0%{left:4%}
  100%{left:96%}
}



/* ============================================================== media -- */
/* One file, four windows. The strip is 2048x320: four 512x320 cells laid end
   to end, each cell the same 16:10 as the frame it shows through. A panel
   sizes the video to 400% of itself and slides it by whole cells, so every
   panel is looking at the same clip at the same timecode by construction —
   there is no second clock to keep in step and nothing to drift.

   Four elements on one 2048x320 file decode to roughly one 1080p30 stream in
   total, which is why this is four elements and not one shared canvas. On the
   phone only one of them is in the layout at a time, so it is one decode. */
.tier-video,
.tier-still{
  position:absolute;inset:0 auto 15% 0;
  width:400%;max-width:none;height:85%;
  object-fit:cover;
  display:block;
  transform:translateX(calc(var(--tier-cell,0) * -25%));
}
/* The still is the poster. Giving the <video> a poster attribute is what a
   browser would normally do here, but WebKit holds the document load event
   open for any media element carrying a resource — poster included — even at
   preload="none", and a tab that never stops spinning is a worse bug than the
   one this saves. So the frame under the video shows the same first frame,
   windowed the same way, and the video paints over it once it has any. */
.tier-video{z-index:1;background:transparent}
[data-tier="cut"]{--tier-cell:0}
[data-tier="pro"]{--tier-cell:1}
[data-tier="max"]{--tier-cell:2}
[data-tier="cin"]{--tier-cell:3}

/* The anchor is one frame, not a strip, so it fills its window rather than
   sliding within one. Same clip, same moment as the cells beside it —
   flattened in the encode, drained of colour in CSS, so the greyscale stays a
   styling decision rather than something baked into a file nobody can undo. */
.tier-anchor .tier-still{width:100%;transform:none}

/* =========================================================== controls -- */
/* Nothing plays until it is asked to. Four autoplaying loops is bandwidth the
   visitor did not agree to spend and motion some visitors cannot dismiss, so
   the section opens on its poster — which already shows the grade, the
   captions and the title, and therefore already makes the argument. */
.tier-controls{margin-top:14px}
.tier-play{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 16px 0 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:var(--panel-2);
  color:var(--text);
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--hover),background var(--hover);
}
.tier-play:hover{background:var(--panel-3);border-color:var(--line-2)}
.tier-play:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* A triangle that becomes a pause bar. Shape carries the state, not colour —
   and the label changes with it, so nothing rests on the icon alone. */
.tier-play-ico{
  width:0;height:0;
  border-left:9px solid var(--orange);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.tier-play[aria-pressed="true"] .tier-play-ico{
  width:9px;height:12px;
  border:0;
  background:linear-gradient(90deg,var(--orange) 0 3px,transparent 3px 6px,var(--orange) 6px 9px);
}

/* ======================================================= the raw anchor -- */
/* Demoted three ways at once, because one signal is deniable and three are
   not: it is smaller, it is colourless, and it does not move. The last is the
   one that does the work — every other panel on the row is alive, so the
   stillness here reads as dead footage without a line of copy spent saying
   so. That is also why the anchor keeps a timeline with a single unbroken
   clip in it: nothing has been cut, and the strip says nothing has been cut.

   The greyscale is a filter over a scene that is already nearly grey. Doing
   both means the panel survives a browser that drops the filter. */
.tier-anchor .tier-frame{
  border-color:var(--line);
  box-shadow:none;
}
/* Applied to the picture, never to the frame. A filter on an ancestor cannot
   be undone by a descendant, so filtering the frame took the badge with it —
   and the red dot is the one colour in this panel that has to survive. */
.tier-anchor .tier-still,
.tier-anchor .tier-strip{filter:grayscale(1)}
.tier-anchor .tier-playhead{
  animation:none;
  left:4%;
  background:var(--text-3);
}
.tier-anchor .tier-clip{left:5%;width:90%}
.tier-anchor .tier-name{color:var(--text-3)}

/* Set back from the finished work rather than level with it. Kept off the
   frame itself so the aspect-ratio box stays exactly where it was reserved
   and nothing below reflows. */
@media (min-width:760px){
  .tier-anchor{
    transform:scale(.9);
    transform-origin:top left;
  }
}

/* ============================================================= badges --- */
/* The only two words the customer has to read to understand the row. Mono at
   label size, same vocabulary as every other label on the site, and never
   colour alone: the word is the signal and the dot is the reinforcement. */
.tier-badge{
  position:absolute;top:7px;left:7px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px 3px 6px;
  border-radius:var(--r-pill);
  background:rgba(10,10,12,.74);
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
}
.tier-badge::before{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 2px var(--green-dim);
}
/* The badge is chrome, not footage, so it sits outside the greyscale. */
.tier-badge-raw::before{
  background:var(--red);
  box-shadow:0 0 0 2px var(--red-dim);
}

/* =============================================================== tabs --- */
/* Phone only, and deliberately the site's existing .tabs component rather
   than a second one that looks nearly the same. Selected state is elevation
   and text weight, never the accent: orange means the playhead, the primary
   action, and work in progress, and a fourth meaning is one too many.

   The only departures are the touch height and the wrapping. */
.tier-tabs{margin-top:14px}
.tier-tabs button{
  min-height:44px;
  min-width:0;
  padding:0 4px;
  /* Four labels where the component was drawn for two or three. The tracking
     is what gives, not the size: "CUT & CLEAN" wrapping to a second line makes
     one tab taller than its neighbours and the row stops reading as a row. */
  font-size:9px;
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}
.tier-tabs button:hover{color:var(--text)}
.tier-tabs button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}

/* --------------------------------------------------------------- copy -- */
.tier-cap{display:flex;flex-direction:column;gap:5px}
.tier-name{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.tier-says{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:0}
.tier-says b{color:var(--text);font-weight:600}

.tier-note{
  margin-top:16px;font-family:var(--mono);font-size:11px;
  color:var(--text-3);line-height:1.6;
}


/* ============================================================ desktop --- */
/* Last in the file, per the house rule: every block above is the phone rule
   and this layer is additive. It also has to come after .tier-tabs is
   defined, or hiding the tabs loses to the definition on specificity ties.

   All four panels at once, and the ladder reads left to right in the same
   order as the price table above it. */
@media (min-width:760px){
  /* Five: the anchor plus every level the price table sells. A demonstration
     that skips a level people can buy is worse than no demonstration. */
  .tier-stage{grid-template-columns:repeat(5,1fr);gap:12px}
  .tier-tabs{display:none}
}

/* Below the point where five captions still hold a readable measure, the
   panels keep their names and the prose is left to the level cards under
   them, which say the same thing with room to say it. */
@media (min-width:760px) and (max-width:1019px){
  .tier-says{display:none}
}

/* Someone who asked for less motion has asked for less motion. The clip is
   already opt-in, so what is left is the playhead and the button, and both
   come to rest rather than disappear — the comparison still has to work when
   nothing is allowed to move. */
@media (prefers-reduced-motion:reduce){
  .tier-playhead{animation:none;left:38%}
  .tier-tabs button,
  .tier-play{transition:none}
}