/* AQcredix — styling for the film host.
 *
 * The film itself lives in videos/aqcredix-film.html and brings its own styling. Nothing
 * here reaches inside it: an iframe is a hard boundary, which is the point of using one.
 * These rules only place the frame, scale it, and dress the poster and the chrome around
 * it — the parts that belong to this site rather than to the film.
 */

.aqf-mount{position:relative;width:100%;aspect-ratio:16/9;background:#0B0E16;
  border-radius:14px;overflow:hidden;}

/* FULL SCREEN COMES IN TWO FLAVOURS AND BOTH HAVE TO BE DRESSED.
 *
 * The real one is the browser's: aq-film.js calls requestFullscreen(), the element is
 * promoted out of the page, and :fullscreen matches. On a handset the script also asks
 * for a landscape lock, so a 16:9 film fills a phone held sideways instead of sitting as
 * a letterboxed strip across the middle of a portrait screen.
 *
 * The fallback is .is-full, a fixed box over the page. iOS Safari refuses
 * requestFullscreen for anything but a <video>, so on an iPhone that is all there is.
 * It keeps the browser chrome and cannot rotate the screen, but it never fails.
 *
 * Both are listed on every rule. is-full is also what aq-scroll-lock.js watches, and
 * onFsChange() in the script keeps it applied while the browser's own full screen is
 * active — so the page behind holds still in either mode. */
.aqf-mount.is-full{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  aspect-ratio:auto;border-radius:0;z-index:9999;}
.aqf-mount:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0;
  background:#0B0E16;}
.aqf-mount:-webkit-full-screen{width:100%;height:100%;border-radius:0;background:#0B0E16;}

.aqf-stage{position:absolute;inset:0;overflow:hidden;}

/* The bundle composes at a fixed 1280x720 and does not scale itself, so the iframe is
   given its native size and the ELEMENT is scaled. Sizing the iframe to the container
   instead would crop the composition — every mask and transition is positioned against
   that frame. Centred with absolute 50/50 rather than a grid: an auto-sized grid track
   grows to the 1280px content, so "centred in the track" is not centred on screen. */
.aqf-scaler{position:absolute;left:50%;top:50%;width:1280px;height:720px;
  transform-origin:center center;transform:translate(-50%,-50%) scale(1);}

/* pointer-events:none IS WHAT LETS THE PAGE SCROLL PAST THE FILM.
 *
 * A wheel or a swipe that lands on an iframe is hit-tested INTO that document first. The
 * film's player registers its own wheel and pointer handlers for scrubbing, so the
 * browser had to wait on them before it would move the page — which is felt as the scroll
 * sticking for a moment over the video and then lurching free. Nothing inside the frame
 * needs to be clicked any more: its own controls are hidden, and ours (restart, full
 * screen, watch again) are siblings ABOVE the frame with their own pointer-events, so
 * they keep working. The frame becomes purely something to look at.
 *
 * contain tells the browser that nothing inside the frame can affect layout or painting
 * outside it, so a 60fps animation cannot force the rest of the page to re-render while
 * it scrolls past. */
.aqf-frame-el{width:1280px;height:720px;border:0;display:block;background:#0B0E16;
  pointer-events:none;contain:layout paint style;}
.aqf-stage{contain:layout paint style;}

/* ---------- poster ---------- */
.aqf-poster{position:absolute;inset:0;z-index:6;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:radial-gradient(120% 90% at 30% 10%,#132A66,#0A1230 45%,#05070F);
  transition:opacity .45s ease;}
.aqf-poster.gone{opacity:0;pointer-events:none;}
.aqf-poster .pl{width:clamp(58px,8vw,92px);aspect-ratio:1;border-radius:50%;
  background:var(--accent-solid,#4362F0);color:#FFFFFF;display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,3vw,32px);box-shadow:0 0 58px -8px rgba(76,111,255,.8);}
.aqf-poster h3{margin:0;padding:0 24px;text-align:center;font-weight:400;
  font-family:Georgia,"Iowan Old Style",serif;color:#F4F2EC;
  font-size:clamp(20px,3.4vw,40px);letter-spacing:-.02em;}
.aqf-poster p{margin:0;color:#9FB0CE;font-size:clamp(12px,1.5vw,17px);}

/* ---------- watch again ----------
 * Shown when the film reaches its end. The script will not reveal it until the film has
 * genuinely had time to run, so it can never cover a film that is still playing.
 * Translucent rather than opaque: the closing card stays readable behind it, which is
 * where the price and the tagline are. */
/* No backdrop-filter here, deliberately. A blur over a live backdrop is one of the most
   expensive things a page can carry: the compositor has to re-sample and re-blur
   everything behind it on every frame, including every frame of a scroll. This card sits
   over the film exactly where the page was stalling. A flat wash costs nothing and reads
   the same. */
.aqf-end{position:absolute;inset:0;z-index:7;display:flex;align-items:center;
  justify-content:center;background:rgba(4,16,14,.74);
  animation:aqf-end-in .35s ease both;}
.aqf-end[hidden]{display:none;}
@keyframes aqf-end-in{from{opacity:0;}to{opacity:1;}}

.aqf-again{display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  background:var(--accent-solid,#4362F0);color:#FFFFFF;border:0;border-radius:999px;
  font:inherit;font-weight:700;letter-spacing:.01em;
  font-size:clamp(13px,1.5vw,17px);padding:clamp(11px,1.3vw,15px) clamp(20px,2.4vw,30px);
  box-shadow:0 0 46px -10px rgba(76,111,255,.85);}
.aqf-again:hover{background:#2E4AC8;}
.aqf-again-ic{font-size:1.25em;line-height:1;}

/* ---------- chrome ---------- */
/* ---------- our transport bar ----------
 * The bundle's own strip is an editing timeline with an export button; it is hidden and
 * driven from here instead. This one lives OUTSIDE the frame, so it can be pressed
 * without the frame having to accept pointer events — which is what was catching the
 * scroll. Sized for a thumb first: nothing here is smaller than 34px.
 */
.aqf-bar{position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;gap:clamp(5px,.7vw,10px);
  padding:clamp(7px,1vw,12px) clamp(9px,1.2vw,16px);
  background:linear-gradient(to top,rgba(2,10,9,.92),rgba(2,10,9,.6) 62%,transparent);
  opacity:0;transition:opacity .25s;pointer-events:none;
  font-family:var(--font-mono,ui-monospace,monospace);}
.aqf-mount.playing .aqf-bar,.aqf-mount.is-full .aqf-bar,
.aqf-mount:fullscreen .aqf-bar{opacity:1;pointer-events:auto;}

.aqf-bar button{flex:none;min-width:34px;height:34px;padding:0 8px;cursor:pointer;
  border-radius:8px;background:rgba(244,242,236,.09);
  border:1px solid rgba(244,242,236,.2);color:#F4F2EC;
  font:inherit;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.aqf-bar button:hover{background:rgba(76,111,255,.22);border-color:#4C6FFF;}
.aqf-bar button:focus-visible,.aqf-seek:focus-visible{outline:2px solid #4C6FFF;outline-offset:2px;}

/* The hit area is deliberately much taller than the visible line, so the bar can be
   grabbed with a thumb without demanding precision. */
.aqf-seek{flex:1 1 auto;min-width:50px;height:34px;display:flex;align-items:center;
  cursor:pointer;}
.aqf-seek-track{width:100%;height:5px;border-radius:999px;
  background:rgba(244,242,236,.26);overflow:hidden;}
.aqf-seek-fill{height:100%;width:0;background:#4C6FFF;border-radius:999px;}

.aqf-time{flex:none;color:#CFDCE8;font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.02em;white-space:nowrap;}

/* On a narrow screen the two skip buttons are the first thing to go — play, seek, time
   and full screen are what a phone actually needs. */
@media (max-width:600px){
  .aqf-bar [data-back],.aqf-bar [data-fwd]{display:none;}
}

/* The corner buttons this replaces are gone: restart and full screen now live in the
   transport bar above, where a video's controls are expected to be. */
.aqf-close:focus-visible,.aqf-again:focus-visible{outline:2px solid #4C6FFF;outline-offset:2px;}

.aqf-close{position:absolute;right:18px;top:18px;z-index:8;width:44px;height:44px;
  border-radius:50%;background:rgba(4,16,14,.72);border:1px solid rgba(244,242,236,.3);
  color:#F4F2EC;font-size:19px;cursor:pointer;display:none;
  align-items:center;justify-content:center;}
/* The way out. Escape works in the browser's own full screen, but there is no keyboard on
   a phone and nothing on screen would otherwise say how to get back. */
.aqf-mount.is-full .aqf-close,.aqf-mount:fullscreen .aqf-close{display:flex;}

/* The launcher used in the footer and anywhere else the film is offered. */
.aqf-launch{display:inline-flex;align-items:center;gap:11px;cursor:pointer;}
.aqf-launch::before{content:"";flex:none;width:0;height:0;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent;}

@media (prefers-reduced-motion:reduce){
  .aqf-poster{transition:none;}
}

/* ---------- the calls to action, under the film ----------
 * Deliberately NOT overlaid on the frame and NOT revealed on a timer. Both of those were
 * tried; both broke the film. These are ordinary links in the ordinary page flow, so they
 * are live from the moment the page renders — before the film is started, while it plays,
 * after it ends, and on a connection where the 2.3MB bundle never arrives at all.
 */
.aqf-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:center;margin-top:20px;}
.aqf-cta-note{flex-basis:100%;text-align:center;margin:4px 0 0;
  font-size:13.5px;color:var(--fg-faint);}
@media (max-width:560px){
  .aqf-cta{gap:10px;}
  .aqf-cta .btn{flex:1 1 auto;}
}