/**
 * Video Frame – Lapse-style frame (Figma node 4741:16909)
 * Design tokens: CornerRadius 25px, Neutral/Cool/900 #111218, MediaBorder 5px
 */

.video-frame {
  --video-frame-radius: 25px;
  --video-frame-border: 5px;
  --video-frame-neutral: #111218;
  --video-frame-time-color: rgba(255, 198, 143, 0.99);
  --video-frame-time-shadow: 0 0 1px #ffa96f;
  --video-frame-ghost-color: rgba(255, 121, 98, 0.4);
  --video-frame-border-color: rgba(255, 255, 255, 0.5);
  --video-frame-inner-shadow: inset 0 0 5px 5px rgba(34, 36, 47, 0.15);
  --timestamp-label--additional-gap: 15px;
  --video-frame-aspect-ratio: 400 / 600;

  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: var(--video-frame-aspect-ratio);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--video-frame-radius);
  isolation: isolate;
  cursor: pointer;
}

.video-frame__image,
.video-frame__center-fill-img {
  transform-origin: center;
  will-change: transform, opacity;
  display: block;
}

.video-frame__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  border-radius: var(--video-frame-radius);
  z-index: 0;
}

/* Old-film scrim layers (blurred dark border effect) */
.video-frame__scrim {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 7.5px solid var(--video-frame-neutral);
  border-radius: var(--video-frame-radius);
  pointer-events: none;
  opacity: 0.1;
  z-index: 1;
}
.video-frame__scrim--1 { filter: blur(7.5px); }
.video-frame__scrim--2 { border-width: 15px; filter: blur(10px); }

/* Border blur layer (sits above image, below overlays) */
.video-frame__border-blur {
  position: absolute;
  inset: 0;
  border-radius: var(--video-frame-radius);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
}

/* Center fill "subtracts" the blur layer by repainting the sharp image above it. */
.video-frame__center-fill {
  position: absolute;
  top: var(--video-frame-border);
  left: var(--video-frame-border);
  right: var(--video-frame-border);
  bottom: var(--video-frame-border);
  overflow: hidden;
  border-radius: calc(var(--video-frame-radius) - var(--video-frame-border));
  pointer-events: none;
  z-index: 3;
}

.video-frame__center-fill-img {
  position: absolute;
  left: calc(-1 * var(--video-frame-border));
  top: calc(-1 * var(--video-frame-border));
  width: calc(100% + 2 * var(--video-frame-border));
  height: calc(100% + 2 * var(--video-frame-border));
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Optional dirt/lens overlays (when asset URLs provided) */
.video-frame__dirt,
.video-frame__lens {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 4;
}
.video-frame__dirt--1 { background-size: contain; }
.video-frame__dirt--2 { background-size: contain; }
.video-frame__lens--scratches { background-size: contain; }
.video-frame__lens--dirt { background-size: contain; }

/* Border line (no blur) */
.video-frame__border-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--video-frame-border) solid var(--video-frame-border-color);
  border-radius: var(--video-frame-radius);
  pointer-events: none;
  z-index: 5;
}

/* Gradient beneath timestamps: black, 0 opacity at top → 0.25 at bottom of frame */
.video-frame__timestamp-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  border-radius: 0 0 var(--video-frame-radius) var(--video-frame-radius);
  pointer-events: none;
  z-index: 5;
}

/* Left: date (top), time (below). Right: airport, collection (bottom-right). */
/* Digital-7 loaded from /fonts/fonts.css (place Digital7.ttf in fonts/Digital-7/); fallbacks for all browsers */
.video-frame__timestamp {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 25px;
  font-family: "Digital-7", "Share Tech Mono", "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 28px;
  line-height: 32px;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.video-frame__date {
  left: 0;
  bottom: 32px;
  justify-content: flex-start;
}
.video-frame__time {
  left: 0;
  bottom: 0;
  justify-content: flex-start;
  gap: 5px;
}
.video-frame__collection {
  right: 0;
  bottom: 0;
  justify-content: flex-end;
  gap: 5px;
  min-width: 8ch;
}
.video-frame__airport {
  right: 0;
  justify-content: flex-end;
  bottom: 32px;
  gap: 5px;
}
/* Label / first group: margin-right so spacing after label matches */
.video-frame__time .video-frame__time-group:first-child {
  margin-right: var(--timestamp-label--additional-gap);
}
.video-frame__airport .video-frame__airport-label {
  margin-right: var(--timestamp-label--additional-gap);
}
/* One group per logical part (e.g. 12, 19, '23); gap between groups. */
.video-frame__time-group {
  display: inline-flex;
  gap: 0;
}

.video-frame__time-set {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Segment width = ghost width so value and ghost align character-by-character */
}
.video-frame__time-set[data-ghost-len="1"] { width: 1ch; min-width: 1ch; }
.video-frame__time-set[data-ghost-len="2"] { width: 2ch; min-width: 2ch; }
.video-frame__time-set[data-ghost-len="3"] { width: 3ch; min-width: 3ch; }
.video-frame__time-set[data-ghost-len="4"] { width: 4ch; min-width: 4ch; }

/* Value and ghost both use the segment width; value right-aligned so narrow digits (e.g. 1) line up with ghost. */
.video-frame__time-value {
  position: relative;
  width: 100%;
  min-width: 0;
  filter: blur(0.5px);
  -webkit-filter: blur(0.5px);
  color: var(--video-frame-time-color);
  text-shadow: var(--video-frame-time-shadow);
  transform: translateZ(0);
}
.video-frame__time-ghost {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  width: 100%;
  min-width: 0;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  color: var(--video-frame-ghost-color);
  pointer-events: none;
}

.video-frame__time-value,
.video-frame__time-ghost {
  text-align: right;
}

.video-frame__time-set--alpha .video-frame__time-value,
.video-frame__time-set--alpha .video-frame__time-ghost,
.video-frame__time-set--colon .video-frame__time-value,
.video-frame__time-set--colon .video-frame__time-ghost {
  text-align: center;
}

/* Play button – centered (Figma: 50px circle, frosted glass, shadow, white play icon) */
.video-frame__play-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 0.5px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  z-index: 7;
}

.video-frame__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  /*border-radius: 50%;*/
  text-decoration: none;
  color: #fff;
  /*background: rgba(146,146,146, 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(146,146,146, 0.25);
  box-shadow: 0 3.636px 18.182px 0 rgba(0, 0, 0, 0.05), 0 0 27.273px 0 rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;*/
}

a.video-frame__play:hover {
  /*background: rgba(255, 255, 255, 0.35);
  border-color: rgba(0, 0, 0, 0.06);*/
  /*transform: scale(1.05);*/
}

.video-frame__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 3px;
}

.video-frame__play-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
}

.video-frame__inner-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--video-frame-inner-shadow);
  pointer-events: none;
  z-index: 8;
}

.video-frame-demo {
  width: 100%;
  max-width: 400px;
  aspect-ratio: var(--video-frame-aspect-ratio, 400 / 600);
  min-height: 0;
  flex-shrink: 0;
}
.video-frame-demo .video-frame {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

/* Play/Pause overlay controls */
.video-frame__controls {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 0.5px));
  z-index: 9;
  /* opacity/pointer-events set by JS so blur can animate while fully visible */
}

/* --glass-reveal (0–1) driven by JS for smooth blur-in/out; default 1 so blur shows before JS runs */
.video-frame__controls-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.video-frame__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
  position: relative;
  /* box-shadow scales with --glass-reveal so it fades in/out with the glass; no filter so backdrop-filter is unaffected */
  box-shadow: 
    0 calc(4px * var(--glass-reveal, 1)) calc(24px * var(--glass-reveal, 1)) rgba(0, 0, 0, calc(0.15 * var(--glass-reveal, 1)))
    0 calc(2px * var(--glass-reveal, 1)) calc(12px * var(--glass-reveal, 1)) rgba(0, 0, 0, calc(0.1 * var(--glass-reveal, 1)));
}

/* Liquid glass effect for video-frame controls */
.video-frame__ctrl .GlassContainer--vf {
  --corner-radius: 50%;
  --base-strength: 12px;
  --extra-blur: 1px;
  --softness: 10px;
  --tint-amount: 0;
  --tint-saturation: 2;
  --tint-hue: 180deg;
  --contrast: 1;
  --brightness: 1;
  --invert: 12%;

  --total-strength: calc(var(--base-strength) + var(--extra-blur));
  --edge-width: calc(0.3px + (var(--softness) * 0.1));
  --emboss-width: calc((var(--softness) * 0.38));
  --refraction-width: calc((var(--softness) * 0.3));

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.video-frame__ctrl .GlassContainer--vf .GlassContent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow: hidden;
  border-radius: var(--corner-radius);
  pointer-events: auto;
}

.video-frame__ctrl .GlassContainer--vf .GlassMaterial {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.video-frame__ctrl .GlassContainer--vf .GlassMaterial:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: var(--corner-radius);
  background-color: rgba(128, 128, 128, 0);
}

.video-frame__ctrl .GlassContainer--vf .GlassMaterial > div {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: var(--corner-radius);
  z-index: 2;
  overflow: hidden;
}

.video-frame__ctrl .GlassContainer--vf .GlassEdgeReflection {
  z-index: 4;
  margin: calc(var(--total-strength) * -1 * var(--glass-reveal, 1));
  border-radius: calc(var(--corner-radius) + var(--total-strength) * var(--glass-reveal, 1));
  backdrop-filter:
    blur(calc(var(--total-strength) * var(--glass-reveal, 1)))
    brightness(calc(1 + 0.2 * var(--glass-reveal, 1)))
    saturate(calc(1 + 0.2 * var(--glass-reveal, 1)));
  padding: calc(var(--edge-width) * var(--glass-reveal, 1));
  border: calc(var(--total-strength) * var(--glass-reveal, 1)) solid transparent;
  mask:
    linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0) content-box;
  mask-composite: exclude, exclude;
}

.video-frame__ctrl .GlassContainer--vf .GlassEmbossReflection {
  backdrop-filter:
    blur(calc(var(--total-strength) * 1.5 * var(--glass-reveal, 1)))
    invert(calc(0.25 * var(--glass-reveal, 1)))
    brightness(calc(1 + 0.11 * var(--glass-reveal, 1)))
    saturate(calc(1 + 0.2 * var(--glass-reveal, 1)))
    hue-rotate(calc(-10deg * var(--glass-reveal, 1)))
    contrast(calc(1 + 1.3 * var(--glass-reveal, 1)));
  padding: calc(var(--emboss-width) * var(--glass-reveal, 1));
  border: 0 solid transparent;
  mask:
    linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0) content-box;
  mask-composite: exclude, exclude;
}

.video-frame__ctrl .GlassContainer--vf .GlassRefraction {
  backdrop-filter:
    invert(calc(0.1 * var(--glass-reveal, 1)))
    brightness(calc(1 + 0.2 * var(--glass-reveal, 1)))
    contrast(calc(1 + 0.5 * var(--glass-reveal, 1)));
  padding: calc(var(--refraction-width) * var(--glass-reveal, 1));
  border: calc(var(--emboss-width) * var(--glass-reveal, 1)) solid transparent;
  mask:
    linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0) content-box;
  mask-composite: exclude, exclude;
}

.video-frame__ctrl .GlassContainer--vf .GlassBlur {
  backdrop-filter:
    blur(calc(var(--extra-blur) * var(--glass-reveal, 1)))
    brightness(calc(1 + 0.25 * var(--glass-reveal, 1)));
  border-radius: calc(var(--corner-radius) - (var(--emboss-width) + var(--refraction-width)) * var(--glass-reveal, 1));
  margin: calc((var(--emboss-width) + var(--refraction-width)) * var(--glass-reveal, 1));
}

.video-frame__ctrl .GlassContainer--vf .BlendLayers {
  z-index: 3;
  backdrop-filter: blur(calc(((var(--softness) * 0.2) + (var(--extra-blur) * 0.2)) * var(--glass-reveal, 1)));
}

.video-frame__ctrl .GlassContainer--vf .BlendEdge {
  z-index: 8;
  backdrop-filter:
    blur(calc(var(--edge-width) * 0.4 * var(--glass-reveal, 1)))
    contrast(calc(1 + 0.6 * var(--glass-reveal, 1)))
    saturate(calc(1 + 0.5 * var(--glass-reveal, 1)));
}

.video-frame__ctrl .GlassContainer--vf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  display: block;
  border-radius: var(--corner-radius);
  backdrop-filter: invert(calc(var(--invert) * var(--glass-reveal, 1)));
}

.video-frame__ctrl .GlassContainer--vf .GlassMaterial:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  display: block;
  border-radius: var(--corner-radius);
  padding: calc(1px * var(--glass-reveal, 1)); /* 1px required to display background on this same element; 0px does not display the background */
  border: 0 solid transparent;
  opacity: var(--glass-reveal, 1);
  background: linear-gradient(155deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 0%, 0.15) 50%, hsla(0, 0%, 100%, 0.1) 100%);
  backdrop-filter: invert(calc(0.05 * var(--glass-reveal, 1))) opacity(1);
  mask:
    linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0) content-box;
  mask-composite: exclude, exclude;
}

.video-frame__ctrl .GlassContainer--vf .Highlight {
  z-index: 12;
  display: block;
  border-radius: var(--corner-radius);
  padding: calc(1px * var(--glass-reveal, 1));
  border: 0 solid transparent;
  backdrop-filter:
    brightness(calc(1 + 0.2 * var(--glass-reveal, 1)))
    contrast(calc(1 + 0.6 * var(--glass-reveal, 1)))
    saturate(calc(1 + 0.2 * var(--glass-reveal, 1)))
    opacity(var(--glass-reveal, 1));
  mask:
    linear-gradient(white 0 0) padding-box,
    linear-gradient(white 0 0) content-box;
  mask-composite: exclude, exclude;
}

.video-frame__ctrl--prev {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  margin: auto 15px auto 0;
}

.video-frame__ctrl--prev:active {
  transform: translateY(-50%);
}

/* Show backdrop blur on hover (playing) or when paused (controls always visible) */
/*.video-frame:hover .video-frame__ctrl,
.video-frame[data-slideshow-state="paused"] .video-frame__ctrl {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}*/

.video-frame__ctrl:not(.video-frame__ctrl--prev):active {
  /*transform: scale(0.98);*/
}

.video-frame__ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.video-frame__ctrl-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  filter:
    drop-shadow(0 0 0 rgba(0,0,0,0.15))
    drop-shadow(0 0 2px rgba(0,0,0,0.15))
    drop-shadow(0 1px 2px rgba(0,0,0,0.25))
    drop-shadow(0 2px 10px rgba(0,0,0,0.15))
    drop-shadow(0 2px 15px rgba(0,0,0,0.15))
    drop-shadow(0 2px 25px rgba(0,0,0,0.1));
}

.video-frame__ctrl-icon--prev {
  flex-direction: row;
  gap: 0;
  width: 25px;
  height: 25px;
  /*transform: rotate(180deg);*/
}

.video-frame__ctrl-icon-prev-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-frame__ctrl-icon-prev-inner--large {
  width: 26px;
  height: 26px;
  margin-right: 0;
}

.video-frame__ctrl-icon-prev-inner--small {
  width: 21px;
  height: 21px;
  margin-left: 0;
}

/* State-driven visibility: opacity/pointer-events are set by JS for blur sequencing */

/* State-driven visibility + which button to show */
.video-frame[data-slideshow-state="playing"] .video-frame__ctrl--play { display: none; }
.video-frame[data-slideshow-state="playing"] .video-frame__ctrl--pause { display: flex; }

.video-frame[data-slideshow-state="paused"] .video-frame__ctrl--play { display: flex; }
.video-frame[data-slideshow-state="paused"] .video-frame__ctrl--pause { display: none; }

.video-frame[data-slideshow-state="playing"] .video-frame__ctrl--prev { display: none; }
.video-frame[data-slideshow-state="paused"] .video-frame__ctrl--prev { display: flex; }

/* While playing, show/hide and blur are driven by JS (mouseenter/mouseleave) */

@media (max-width: 350px) {
  .video-frame__timestamp {
    --timestamp-label--additional-gap: 10px;
    font-size: 20px;
    padding: 20px;
  }
}