/* HOME · V6 "SREBRO"
   Signature: THE INDEX. Everything else on this page is shared vocabulary from
   base.css, on purpose: one unforgettable moment, discipline everywhere else. */

/* ------------------------------------------------------------- 00 opening */

.opening {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  background: var(--pitch);
  overflow: hidden;
  isolation: isolate;
}
.op-bed { position: absolute; inset: 0; z-index: 0; }
.op-bed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.07) brightness(.84);
}
.op-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 9, 11, .82) 0%, rgba(8, 9, 11, .62) 7%, rgba(8, 9, 11, .40) 15%,
      rgba(8, 9, 11, .22) 24%, rgba(8, 9, 11, .12) 33%, rgba(8, 9, 11, .14) 45%,
      rgba(8, 9, 11, .26) 57%, rgba(8, 9, 11, .44) 68%, rgba(8, 9, 11, .64) 79%,
      rgba(8, 9, 11, .84) 90%, rgba(8, 9, 11, .97) 100%),
    linear-gradient(96deg,
      rgba(8, 9, 11, .72) 0%, rgba(8, 9, 11, .52) 14%, rgba(8, 9, 11, .34) 27%,
      rgba(8, 9, 11, .19) 40%, rgba(8, 9, 11, .08) 53%, rgba(8, 9, 11, 0) 66%);
}
.op-bed .vplay { right: auto; left: var(--gut); bottom: auto; top: calc(var(--hd-h) + 22px); }

.op-in {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--hd-h) + clamp(40px, 9vh, 110px));
  padding-bottom: clamp(30px, 6vh, 80px);
  display: grid;
  justify-items: start;
  align-content: center;
  min-height: calc(100svh - var(--hd-h) - 150px);
}
.op-in .mega { max-width: 13ch; }

/* THE RULED DATA ROW, after designxhand: the foot of the opening is a hairline
   with cells hung under it, the label, the sentence, and the one action. */
.op-row {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hair);
  padding-block: clamp(20px, 3.4vh, 38px) clamp(26px, 4.6vh, 52px);
}
.op-row-in {
  display: grid;
  grid-template-columns: minmax(0, 22%) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 60px);
  align-items: start;
}
.op-c { min-width: 0; }
.op-c--lab {
  display: flex;
  align-items: center;
  gap: .8em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--lume-3);
  padding-top: .2em;
}
.op-c--say {
  font-family: var(--sans);
  font-weight: 250;
  font-size: clamp(1rem, .92rem + .5vw, 1.24rem);
  line-height: 1.5;
  color: var(--lume);
  max-width: 56ch;
}
.op-c--go { justify-self: end; }

@media (max-width: 860px) {
  .op-row-in { grid-template-columns: 1fr; gap: 18px; }
  /* the cue is hidden at the END of this file, not here: see the note there */
  .op-c--go { justify-self: start; }
  .op-in { min-height: 0; padding-bottom: clamp(40px, 8vh, 70px); }
}

/* the descend cue: a hairline that travels on its own 3.4s clock */
.op-down {
  position: absolute;
  z-index: 3;
  right: var(--gut);
  bottom: clamp(96px, 16vh, 150px);
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lume-3);
}
.op-down i {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--hair);
  position: relative;
  overflow: hidden;
}
.op-down i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  background: var(--ag);
  animation: op-travel 3.4s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes op-travel {
  0%   { transform: translateX(-100%); }
  70%  { transform: translateX(300%); }
  100% { transform: translateX(300%); }
}

/* ------------------------------------------------------------- the plate */

.plate-hold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.plate-hold .plate { grid-column: 2; }

/* --------------------------------------------------------- 01 how it began */

/* tecnoarreda's move: the photograph runs off one edge of the page and the void
   is on the other side of it, so the emptiness reads as a margin the image is
   escaping rather than as a gap somebody forgot to fill. */
.inv-fig {
  margin-top: clamp(46px, 7vh, 96px);
  max-width: none;
  grid-template-columns: minmax(112px, 200px) minmax(0, 1fr);
}
.inv-fig .shot { max-width: none; margin-right: calc(var(--gut) * -1); }
.inv-fig .cap { max-width: 60ch; }

@media (max-width: 860px) {
  .inv-fig .shot { margin-right: calc(var(--gut) * -1); }
}

/* ============================================================ 02 THE INDEX */

.mfs { padding-bottom: clamp(64px, 9vh, 120px); }

.mf {
  margin-top: clamp(46px, 7vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 37%);
  gap: clamp(30px, 4vw, 76px);
  align-items: start;
}

.mf-list { border-top: 1px solid var(--hair); }
.mf-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 24px);
  padding: clamp(13px, 1.9vh, 24px) 0;
  border-bottom: 1px solid var(--hair);
  transition: border-color .5s ease;
}
.mf-no {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--lume-3);
  font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.mf-nm {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.72vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--lume-2);
  transition: color .45s ease, transform .55s var(--ease);
}
.mf-ct {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lume-3);
  text-align: right;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .45s ease, transform .5s var(--ease);
}
.mf-row.is-hot { border-bottom-color: var(--ag-dim); }
.mf-row.is-hot .mf-nm { color: var(--lume); font-style: italic; transform: translateX(10px); }
.mf-row.is-hot .mf-no { color: var(--ag); }
.mf-row.is-hot .mf-ct { opacity: 1; transform: none; }

.mf-stage {
  position: sticky;
  top: calc(var(--hd-h) + clamp(18px, 4vh, 46px));
  height: clamp(460px, 72vh, 700px);
}
.mf-b {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.mf-b.is-on { opacity: 1; visibility: visible; }
/* The stage does NOT use the shared curtain: its cards are never observed, so
   the mask would never open and every photograph would stay clipped to
   nothing. The crossfade plus a scale settle is this stage's own reveal. */
.mf-shot picture { clip-path: none; }
.mf-b .shot img { transform: scale(1.06); }
.mf-b.is-on .shot img { transform: scale(1); }
.mf-b h3 { display: none; }
.mf-shot { height: 100%; min-height: 0; }

.mf-shot picture { height: 100%; }
.mf-shot img { height: 100%; object-fit: cover; }
.mf-meta { margin-bottom: -8px; }
.mf-txt {
  font-family: var(--sans);
  font-weight: 300;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--lume-2);
}
.mf-go {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(16px, 2vw, 28px);
  margin-top: 4px;
}
.mf-close { margin-top: clamp(34px, 5vh, 64px); max-width: 62ch; }

/* Below 1024 nothing is pinned except the site header, so the stage stops
   being a stage: the ten cards become a typeset manifest, photographs off,
   because a phone does not want ten hero images before the rest of the page. */
@media (max-width: 1023px) {
  .mf { grid-template-columns: 1fr; gap: 0; }
  .mf-list { display: none; }
  .mf-stage { position: static; height: auto; display: grid; border-top: 1px solid var(--hair); }
  .mf-b {
    position: static;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-rows: none;
    gap: 10px;
    padding: clamp(20px, 3.4vh, 30px) 0;
    border-bottom: 1px solid var(--hair);
  }
  .mf-b h3 { display: block; font-size: clamp(1.42rem, 6.4vw, 2rem); }
  .mf-shot { display: none; }
}

/* --------------------------------------------------------- 03 the 11:00 rule */

.rit-grid {
  display: grid;
  grid-template-columns: minmax(112px, 200px) minmax(0, 1fr) minmax(0, 34%);
  gap: clamp(22px, 3.6vw, 66px);
  align-items: end;
}
.rit-m { align-self: end; gap: .5em; }
.rit-m .rit-hour { margin-top: clamp(20px, 3vh, 40px); }
/* one range, not two figures: the second hour hangs directly under the first
   with a hairline between them */
.rit-hour {
  font-size: clamp(1.4rem, 2.2vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: .02em;
  color: var(--ag);
  display: grid;
  white-space: nowrap;
  justify-self: start;
}
.rit-hour span {
  color: var(--lume-3);
  border-top: 1px solid var(--hair);
  margin-top: .28em;
  padding-top: .28em;
}
.rit-txt > * + * { margin-top: clamp(14px, 2vw, 26px); }
.rit-fig { align-self: end; }

@media (max-width: 1023px) {
  .rit-grid { grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); gap: 22px clamp(18px, 4vw, 30px); }
  .rit-fig { grid-column: 1 / -1; margin-top: 12px; }
}
@media (max-width: 860px) {
  .rit-grid { grid-template-columns: 1fr; }
  .rit-m { border-right: 0; border-bottom: 1px solid var(--hair); padding-bottom: 12px; }
  .rit-m .rit-hour { margin-top: 14px; }
}

/* --------------------------------------------------------- the bay, bleed */

.op-bleed {
  min-height: min(80vh, 760px);
  display: grid;
  align-content: center;
  padding-block: clamp(70px, 12vh, 140px);
}
.op-bleed video {
  position: absolute;
  inset: 0;
  filter: saturate(.86) contrast(1.05) brightness(.9);
}
.bl-in { position: relative; z-index: 2; display: grid; gap: clamp(16px, 2.4vh, 30px); }
.bl-in h2 { max-width: 18ch; }
.bl-in .lede { color: var(--lume-2); }

/* ------------------------------------------------------------ the strip */

.strip-head { padding-bottom: clamp(24px, 4vh, 44px); }
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-2);
}
.strip-c { position: relative; background: var(--pitch); overflow: hidden; }
.strip-c video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03);
  transition: filter .6s ease, transform 1.2s var(--ease);
}
.strip-c:hover video { filter: saturate(1) contrast(1.05) brightness(1.05); transform: scale(1.02); }
.strip-foot { padding-top: clamp(22px, 3.6vh, 40px); }

/* ALL THREE REELS STAY VISIBLE ON A PHONE.
   This used to become a horizontal snap scroller at 74% per card, so a visitor
   saw one reel and a sliver of a second, with nothing on the screen saying that
   two more existed sideways. Nobody swipes a strip they do not know is there.
   Three columns at 390 gives roughly 130 by 231 each, which is exactly how a
   row of reels looks in the app they came from, and every one of them is on the
   screen at once. The section is full bleed, so there is no gutter to pay. */
@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip-c video { aspect-ratio: 9 / 16; }
  /* the controls shrink with the frame, but not below a finger: scale(.78) put
     the sound toggle at 30px, and the box is padded back up rather than the
     glyph grown, so the picture keeps its room */
  .strip-c .vplay, .strip-c .vsound { transform: scale(.86); min-width: 34px; min-height: 34px; }
}

@media (max-width: 760px) {
  /* at 390 the copy lands on the brightest band of the frame, so the phone
     scrim carries far more weight in its lower half than the desktop one */
  .op-scrim {
    background:
      linear-gradient(180deg,
        rgba(8, 9, 11, .8) 0%, rgba(8, 9, 11, .5) 8%, rgba(8, 9, 11, .28) 18%,
        rgba(8, 9, 11, .2) 28%, rgba(8, 9, 11, .28) 38%, rgba(8, 9, 11, .46) 48%,
        rgba(8, 9, 11, .64) 58%, rgba(8, 9, 11, .78) 68%, rgba(8, 9, 11, .88) 78%,
        rgba(8, 9, 11, .95) 88%, rgba(8, 9, 11, .99) 100%);
  }
  .op-bed video { filter: saturate(.74) contrast(1.08) brightness(.72); }
}

@media (max-width: 620px) {
  .plate-hold { grid-template-columns: 1fr; }
  .plate-hold .plate { grid-column: 1; }
  .inv-fig .shot { width: 100%; }
}

/* THE DESCEND CUE, hidden on a phone. This declaration has to sit AFTER
   `.op-down { display: flex }` above, because a media query adds no specificity
   and the later rule simply wins. It was written into the 860px block near the
   top of this file instead, where it never applied, so on every phone the cue
   sat on top of the lede: "SPUSTITE SE" printed straight through "Sve sto grupa
   te veceri stavi na sto pocinje tu." */
@media (max-width: 860px) {
  .op-down { display: none; }
}