/* ==========================================================================
   /obchod/reklama/: the shop's animated spot
   --------------------------------------------------------------------------
   A 25-second piece drawn on a fixed 1920x1080 stage and scaled to fit its
   frame by reklama.js. Linked from that one template only, like admin.css,
   because no other page draws any of it.

   Everything is scoped under .spot. The spot has its own palette (moss and
   honey rather than the site's tokens) because it was designed as a film,
   not as a page; the type is the site's own, Inter and Fraunces, since
   Google Fonts is not something this site loads.
   ========================================================================== */

.spot {
  --spot-bg: #f2ece1;
  --spot-surface: #e7dece;
  --spot-text: #1f2b25;
  --spot-accent: #4f6b49;
  --spot-accent-deep: #2f4a35;
  --spot-honey: #b8873d;
  --spot-muted: #5a625a;
  --spot-line: rgba(31, 43, 37, .24);

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--spot-bg);
  border-radius: 6px;
  box-shadow: 0 30px 60px -40px rgba(74, 52, 24, .45);
}

.spot-wrap { padding-top: 2rem; }

.spot .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The stage: a fixed 1920x1080 space, scaled by reklama.js. */
.spot__stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  transform: scale(var(--scale, 1));
  overflow: hidden;
  background: var(--spot-bg); color: var(--spot-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: opacity .5s ease;
}
.spot__stage.is-loading { opacity: 0; }

.spot .layer { position: absolute; inset: 0; pointer-events: none; }

/* background */
.spot .blob { position: absolute; border-radius: 50%; will-change: transform; }
.spot .blob--honey {
  width: 1200px; height: 1000px; left: 880px; top: -260px;
  background: radial-gradient(closest-side, rgba(184, 135, 61, .20), rgba(184, 135, 61, 0));
}
.spot .blob--sage {
  width: 1100px; height: 1100px; left: -360px; top: 420px;
  background: radial-gradient(closest-side, rgba(79, 107, 73, .15), rgba(79, 107, 73, 0));
}
.spot .paper {
  position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* drawn lines */
.spot .lines svg { width: 100%; height: 100%; display: block; }
.spot .thread { fill: none; stroke: var(--spot-honey); stroke-width: 1.6; stroke-linecap: round; opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spot .connector { fill: none; stroke: var(--spot-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spot .ring { fill: none; stroke: var(--spot-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spot .dot { fill: var(--spot-honey); }

/* masked word reveal */
.spot .m {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .1em .08em .16em 0; margin: -.1em -.08em -.16em 0;
}
.spot .w { display: inline-block; will-change: transform; }
.spot .line { display: block; white-space: nowrap; }
/* The design set these words in an italic serif. Fraunces ships here in
   one upright weight, so the contrast is carried by the face and the
   colour instead of by a slant the browser would have to fake. */
.spot .serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }

.spot .bug {
  position: absolute; left: 150px; top: 74px;
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
}

/* scene 1 */
.spot .hook {
  position: absolute; left: 150px; top: 330px; margin: 0;
  font-size: 150px; font-weight: 500; line-height: 1.04; letter-spacing: -.035em;
  color: var(--spot-text);
}
.spot .hook .serif { font-size: 160px; color: var(--spot-accent); }

/* scene 2 */
.spot .spot-cards { transform-origin: 50% 50%; will-change: transform, opacity; }
.spot .spot-card {
  position: absolute; will-change: transform;
}
.spot .spot-card__float { position: absolute; inset: 0; border-radius: inherit; will-change: transform; }
.spot .spot-card__shadow {
  position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 46px 70px -40px rgba(74, 52, 24, .42), 0 3px 10px -4px rgba(74, 52, 24, .18);
}
.spot .spot-card__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--spot-surface); }
.spot .spot-card__media { position: absolute; inset: 0; will-change: transform; }
.spot .spot-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.spot .spot-card--1 { left: 980px;  top: 110px; width: 420px; height: 560px; border-radius: 210px 210px 3px 3px; }
.spot .spot-card--2 { left: 1450px; top: 170px; width: 330px; height: 360px; border-radius: 3px; }
.spot .spot-card--3 { left: 1440px; top: 590px; width: 380px; height: 290px; border-radius: 3px; }
.spot .spot-card--4 { left: 760px;  top: 640px; width: 270px; height: 330px; border-radius: 3px; }

.spot .s2-list { position: absolute; left: 150px; top: 320px; margin: 0; padding: 0; list-style: none; }
.spot .s2-item { position: relative; width: fit-content; margin: 0; font-size: 78px; font-weight: 500; line-height: 1.16; letter-spacing: -.03em; }
.spot .ul { position: absolute; left: 0; right: .08em; bottom: .06em; height: 3px; background: var(--spot-honey); transform: scaleX(0); transform-origin: left center; }

/* scene 3 */
.spot .s3a { position: absolute; left: 150px; top: 290px; margin: 0; font-size: 92px; font-weight: 500; line-height: 1.06; letter-spacing: -.032em; }
.spot .s3a .serif { font-size: 100px; color: var(--spot-accent); }
.spot .s3b { position: absolute; left: 150px; top: 600px; margin: 0; font-size: 46px; font-weight: 400; line-height: 1.28; letter-spacing: -.012em; }

/* scene 4 */
.spot .rule { position: absolute; background: var(--spot-line); }
.spot .rule--h1 { left: 0; top: 250px; width: 100%; height: 1px; transform-origin: left center; }
.spot .rule--h2 { left: 0; top: 830px; width: 100%; height: 1px; transform-origin: right center; }
.spot .rule--v  { left: 1180px; top: 250px; width: 1px; height: 580px; transform-origin: center top; }

.spot .s4q { position: absolute; left: 150px; top: 316px; margin: 0; font-size: 110px; font-weight: 500; line-height: 1.04; letter-spacing: -.035em; }
.spot .s4a { position: absolute; left: 150px; top: 620px; margin: 0; font-size: 40px; font-weight: 400; line-height: 1.32; letter-spacing: -.01em; color: var(--spot-muted); }
.spot .s4a strong { font-weight: 600; color: var(--spot-text); }

.spot .doc { position: absolute; left: 1180px; top: 250px; width: 740px; height: 580px; }
.spot .doc svg { width: 100%; height: 100%; display: block; }
.spot .doc path, .spot .doc circle { fill: none; stroke: var(--spot-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spot .doc .is-accent { stroke: var(--spot-accent); }

/* scene 5 */
.spot .payoff { position: absolute; inset: 0; transform-origin: 50% 50%; }
.spot .p1 { position: absolute; left: 180px; top: 290px; margin: 0; font-size: 160px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.spot .p2 { position: absolute; right: 180px; top: 490px; margin: 0; font-size: 180px; line-height: 1; color: var(--spot-accent); }
.spot .p-rule { position: absolute; left: 180px; top: 618px; width: 150px; height: 2px; background: var(--spot-honey); transform: scaleX(0); transform-origin: left center; }

/* scene 6 */
.spot .cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.spot .wordmark { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 84px; line-height: 1.1; letter-spacing: -.015em; color: var(--spot-text); }
.spot .cta-rule { width: 84px; height: 2px; margin: 46px 0 54px; background: var(--spot-honey); transform: scaleX(0); }

.spot .spot-btn {
  position: relative; display: inline-flex; align-items: center; gap: 24px;
  padding: 30px 50px 30px 58px;
  color: var(--spot-bg); text-decoration: none;
  font-size: 34px; font-weight: 500; letter-spacing: -.005em;
  pointer-events: auto;
}
.spot .spot-btn__bg { position: absolute; inset: 0; border-radius: 999px; background: var(--spot-accent-deep); clip-path: inset(0 50% 0 50% round 999px); }
.spot .spot-btn__label { position: relative; }
.spot .spot-btn__arrow { position: relative; width: 36px; height: 22px; display: block; }
.spot .spot-btn__arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spot .spot-btn:focus-visible { outline: 6px solid var(--spot-honey); outline-offset: 8px; border-radius: 999px; }

.spot .url { margin: 38px 0 0; font-size: 28px; letter-spacing: .01em; color: var(--spot-muted); }

/* film grain */
.spot .grain {
  position: absolute; inset: -12%; opacity: .035; pointer-events: none;
  background-size: 220px 220px; animation: spot-grain .9s steps(6) infinite;
}
.spot .is-ended .grain, .spot .is-paused .grain { animation-play-state: paused; }
@keyframes spot-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 2%); } 100% { transform: translate(0, 0); }
}

/* Static frame: the closing card alone, for a visitor with reduced motion
   or a browser where the animation library did not run. */
.spot__stage.is-static .s1, .spot__stage.is-static .s2, .spot__stage.is-static .s3,
.spot__stage.is-static .s4, .spot__stage.is-static .s5, .spot__stage.is-static .spot-cards,
.spot__stage.is-static .lines, .spot__stage.is-static .bug { display: none; }
.spot__stage.is-static .cta-rule { transform: none; }
.spot__stage.is-static .spot-btn__bg { clip-path: inset(0 0 0 0 round 999px); }

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

/* Controls under the frame, not over it: an overlay would sit on top of
   the closing button. Revealed by reklama.js once there is something to
   control. */
.spot-controls { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
/* display: flex above would otherwise beat the attribute, and the buttons
   would show under reduced motion, where there is nothing to control. */
.spot-controls[hidden], .spot-controls [hidden] { display: none; }

.spot-text { max-width: 40rem; margin-top: 2.5rem; }