/* wp-content/plugins/notts-osteo-elements/assets/css/video-feature.css
 *
 * The practice film. Section chrome comes from home-blocks.css; only the frame is here.
 *
 * A poster with one control on it, not a decorated player: everything on this block exists to make
 * pressing play an easy decision — what it is, how long it lasts, and that it has sound.
 *
 * Author: Sean Burn
 */

.nosteo-film__frame {
  position: relative;
  overflow: hidden;
  background: var(--nosteo-ink);
  /* Reserves the box before the poster loads, so the section below cannot be shoved down as it
     arrives. 16:9 is the film's own ratio, so the poster fills it exactly. */
  aspect-ratio: 16 / 9;
}

.nosteo-film__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Dimmed a little so white type and the disc hold their contrast over any frame. */
  filter: brightness(0.82);
  transition: transform 620ms var(--nosteo-ease), filter 400ms var(--nosteo-ease);
}
.nosteo-film__frame:hover .nosteo-film__poster {
  transform: scale(1.03);
  filter: brightness(0.74);
}

/* The whole frame is the target, not just the disc — a 16:9 hit area is far easier to land than a
   72px circle, and the button still reads as the thing to press. */
.nosteo-film__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nosteo-white);
  cursor: pointer;
}
/* Restated on both: reset.css paints every button `background-color:#c36; color:#fff` on hover AND
   focus at (0,2,0) via [type=button], which would put a raspberry block over the poster. */
.nosteo-sec .nosteo-film__play:hover,
.nosteo-sec .nosteo-film__play:focus {
  background: none;
  color: var(--nosteo-white);
}
.nosteo-film__play:focus-visible {
  outline: 3px solid var(--nosteo-accent);
  outline-offset: -6px;
}

.nosteo-film__disc {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--nosteo-accent);
  box-shadow: 0 12px 40px rgba(50, 62, 72, 0.35);
  transition: transform 320ms var(--nosteo-ease);
}
.nosteo-film__disc svg {
  width: 22px;
  height: 24px;
  /* Optical centring: a triangle's visual mass sits left of its bounding box. */
  margin-left: 5px;
}
.nosteo-film__play:hover .nosteo-film__disc,
.nosteo-film__play:focus-visible .nosteo-film__disc { transform: scale(1.08); }

.nosteo-film__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.nosteo-film__label-text {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: var(--nosteo-weight-strong);
  letter-spacing: -0.01em;
}
/* Says what you are committing to before you commit to it. */
.nosteo-film__meta {
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.86;
}

.nosteo-film__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--nosteo-ink);
}

/* Once it is playing the poster and the button are gone — leaving them under a playing video is
   how you end up with two play controls and a click that pauses the wrong thing. */
.nosteo-film__frame.is-playing .nosteo-film__poster,
.nosteo-film__frame.is-playing .nosteo-film__play { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nosteo-film__poster,
  .nosteo-film__disc { transition: none; }
  .nosteo-film__frame:hover .nosteo-film__poster { transform: none; }
  .nosteo-film__play:hover .nosteo-film__disc { transform: none; }
}