/* Extras for the old site: film-leader loader, viewfinder frame, new light leak (see web/tools/old-site/extras.js). */

/* the theme's intro keeps running underneath, unseen, so its timing and the page reveal stay as they were */
.main-preloader { opacity: 0 !important; }

.leader { position: fixed; inset: 0; z-index: 100000; background: #0b0b0b; clip-path: inset(0 0 0 0); }
.leader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.leader::after { content: ''; position: absolute; inset: 0; background: #f5f3ee; opacity: 0; pointer-events: none; }
.leader.is-out { animation: leader-out 1s cubic-bezier(.87, 0, .13, 1) .16s forwards; }
.leader.is-out::after { animation: leader-flash .24s linear forwards; }
@keyframes leader-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes leader-out { to { clip-path: inset(0 0 100% 0); } }

.hero__bg canvas.old-fluid { width: 64px !important; height: 64px !important; opacity: 0; visibility: hidden; }

.vf { position: absolute; inset: 4.6rem 1.25rem 1.25rem; pointer-events: none; z-index: 3; color: #0b0b0b; }
.vf__c { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; }
.vf__c--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.vf__c--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.vf__c--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.vf__c--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
.vf > div { position: absolute; font: 300 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; }
.vf__rec { left: 34px; top: 6px; display: flex; align-items: center; gap: 8px; }
.vf__rec i { width: 7px; height: 7px; border-radius: 50%; background: #f26722; animation: vf-rec 1.2s steps(2, jump-none) infinite; }
@keyframes vf-rec { 50% { opacity: .15; } }
.vf__lens { right: 34px; top: 6px; }
.vf__loc { left: 34px; bottom: 6px; }
@media (max-width: 760px) { .vf { inset: 5.25rem 1rem 1rem; } .vf__lens { display: none; } }
@media (prefers-reduced-motion: reduce) { .vf__rec i { animation: none; } }

/* featured cards: image only, no headline or name under it */
.case-card__wrapper__article { display: none !important; }

/* orange accents, used sparingly: the italic key words, the footer's middle line, a sector under the cursor */
.about__header__sub-title .italic, .about__header__sub-title .italic * { color: #f26722 !important; }
.footer__title .rolling, .footer__title .rolling * { color: #f26722 !important; }
.client { transition: color .3s; }
.client:hover, .client:hover * { color: #f26722 !important; }

/* showreel: a big orange button under the hero's lede, played full screen with sound */
.reel-btn { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; background: #f26722; color: #0b0b0b; font: 900 17px/1 neue-haas-grotesk-display, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background .3s, color .3s, transform .4s cubic-bezier(.2, .7, .1, 1), opacity .4s; }
.reel-btn i { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #0b0b0b; flex: none; }
.reel-btn i::after { content: ''; position: absolute; left: 18px; top: 15px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #f26722; }
.reel-btn small { font: 300 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .04em; opacity: .7; }
.reel-btn:hover { background: #0b0b0b; color: #f5f3ee; transform: scale(1.04); }
.reel-btn:hover i { background: #f26722; }
.reel-btn:hover i::after { border-left-color: #0b0b0b; }
.reel-btn:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 4px; }
@media (max-width: 760px) { .reel-btn { font-size: 15px; gap: 12px; padding-right: 20px; } .reel-btn i { width: 40px; height: 40px; } .reel-btn i::after { left: 15px; top: 12px; } }
.reel { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; background: #000; opacity: 0; transition: opacity .45s; }
.reel.is-open { opacity: 1; }
.reel video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; background: #000; }
.reel__close { position: absolute; top: 18px; right: 18px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font: 300 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.reel__close:hover { background: #f26722; border-color: #f26722; color: #0b0b0b; }

/* no cookie banner: the site sets no analytics or ad cookies */
.cookieconsent { display: none !important; }

/* the EN / ES switch sits in the navbar, which ignores the pointer; let its links take clicks */
.lang-switch, .lang-switch a { pointer-events: auto !important; }
.lang-switch a { padding: 6px 2px; cursor: pointer; }

/* captions over the About images (process: wireframe, render in progress, viewport) */
.about__images figure { position: relative; }
.about-cap { position: absolute; left: 12px; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 7px; margin: 0; color: #f5f3ee; font: 300 10px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); pointer-events: none; }
.about-cap i { width: 6px; height: 6px; border-radius: 50%; background: #f26722; flex: none; }

/* touch screens: the theme hides the hero background; show it so the drifting light leak can be seen */
@media (hover: none) { .hero__bg { display: inline !important; } }