/* ==========================================================================
   DOTLINE STUDIO — Main Brand Film (image-based, frontend motion)
   - All motion is driven by dotline-film.js on a single rAF clock.
   - Animated properties: transform / opacity (+ short clip-path masks).
   ========================================================================== */

.dl-film {
  --dl-blue: #1242b4;        /* film overlays (matched to the photographed blue) */
  --dl-logo-blue: #0537fc;   /* official logo dot */
  --dl-ink: #0c0c0d;
  --dl-ivory: #efebe3;
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--dl-ink);
  isolation: isolate;
  contain: strict;
}

/* If you want a fixed 16:9 film block instead of a full-screen hero:
   <section class="dl-film dl-film--ratio"> */
.dl-film--ratio { height: auto; aspect-ratio: 16 / 9; min-height: 0; }

/* --- shots ------------------------------------------------------------- */
.dl-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.dl-shot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1344px;           /* intrinsic size of the source frames */
  height: 752px;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* --- graphic overlays (blue dot / line motif) -------------------------- */
.dl-fill,
.dl-dot,
.dl-vline,
.dl-black {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.dl-fill { inset: 0; background: var(--dl-blue); z-index: 20; }
.dl-black { inset: 0; background: #000; z-index: 40; opacity: 1; }
.dl-dot {
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background: var(--dl-blue);
  z-index: 30;
  will-change: transform, opacity;
}
.dl-vline {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: var(--dl-blue);
  transform-origin: 50% 0;
  z-index: 25;
  will-change: transform;
}

/* --- ending ------------------------------------------------------------ */
.dl-end {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: var(--dl-ink);
  opacity: 0;
  visibility: hidden;
}
.dl-logo {
  display: block;
  width: clamp(240px, 52vw, 760px);
  height: auto;
  overflow: hidden;            /* letters rise from under the baseline */
  color: var(--dl-ivory);
}
.dl-logo .dl-l,
.dl-logo .dl-logo-bar { fill: currentColor; }
.dl-logo .dl-l { opacity: 0; will-change: transform, opacity; }
.dl-logo .dl-logo-bar {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
/* the dot is drawn by .dl-dot so it can fly in from the film */
.dl-logo .dl-logo-dot { fill: var(--dl-logo-blue); opacity: 0; }

/* --- film texture ------------------------------------------------------ */
.dl-grain {
  position: absolute;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: dl-grain 0.5s steps(4) infinite;
  will-change: transform;
}
.dl-vignette {
  position: absolute;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.32) 100%);
}
@keyframes dl-grain {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-6%, 4%, 0); }
  50%  { transform: translate3d(5%, -7%, 0); }
  75%  { transform: translate3d(-3%, -4%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- replay (only shown when data-loop="false" and the film has ended) -- */
.dl-replay {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(239, 235, 227, 0.35);
  background: transparent;
  color: var(--dl-ivory);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, border-color 0.2s ease;
}
.dl-replay svg { width: 16px; height: 16px; display: block; margin: auto; }
.dl-replay:hover { border-color: var(--dl-ivory); }
.dl-replay:focus-visible { outline: 2px solid var(--dl-blue); outline-offset: 3px; }
.dl-film.is-ended .dl-replay { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .dl-grain { animation: none; }
}