/* dara. home page only. Loaded after styles.css. Never sets transition, transform, scale or z-index
   on the hero cards: the card hand-over lives in styles.css (.pile > *, .deck-card:hover). */

/* Hero cards are buttons (they open the films) but look exactly like the canvas links. */
button.deck-card { appearance: none; -webkit-appearance: none; border: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.deck-card .shot, button.deck-card .cap { width: 100%; }

/* Contact form: spam trap, status line and the sent state shown in place. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { display: none; }
.cta-form.is-sent > :not(.form-done):not(.form-badge) { display: none; }
.cta-form.is-sent .form-done { display: block; }
.form-done:focus { outline: none; }
.form-status { margin: 0; font-size: 14px; }
.form-status:empty { display: none; }
.form-status.is-error { color: #b3261e; }
.cta-form .btn:disabled { opacity: 0.7; cursor: progress; }

/* Film player: out of the tab order and the accessibility tree while closed (fades out first). */
.ad-backdrop:not(.open) { visibility: hidden; transition: opacity 350ms ease, visibility 0s linear 350ms; }
/* The films are laid out on a 1120 x 630 stage; site.js scales the stage to the player's width
   (--ad-k), so smaller screens see the whole film instead of its top-left corner. */
.ad { width: min(1120px, 88vw, 156vh); }
.reel { inset: auto; left: 0; top: 0; width: 1120px; height: 630px; transform-origin: 0 0; transform: scale(var(--ad-k, 1)); }
@media (max-width: 700px) and (orientation: portrait) {
  .ad { border-radius: 18px; }
  .ad-top { top: 10px; left: 12px; right: 12px; }
  .ad-close { width: 36px; height: 36px; font-size: 16px; }
  .ad-label { left: 12px; bottom: 10px; padding: 6px 10px; font-size: 12px; }
  .ad-side { top: calc(50% + 24.75vw + 22px); translate: none; width: 48px; height: 48px; }
  .ad-prev { left: calc(50% - 60px); } .ad-next { right: calc(50% - 60px); }
}

/* Reduced motion: styles.css switches every animation off, so show each scene's end state. */
@media (prefers-reduced-motion: reduce) {
  .ad .rise, .ad .pop, .ad .drop span, .ad .frame.fly, .ad .spin-in { opacity: 1 !important; transform: none !important; }
  .ad .frame.fly { rotate: var(--fr, 0deg); }
  .ad .ring .val { stroke-dashoffset: 68; }
  .ad .line-draw { height: 100%; }
}

/* styles.css declares the phone size of the "Click a card" sticker before its base rule, so the
   base rule wins and the sticker lands on the marquee. Re-apply the phone values here. */
@container (max-width: 700px) {
  .sticker-round { top: 270px; left: 0; width: 84px; height: 84px; font-size: 14px; }
}