/* AuraLyze 0.8 — full compositions, a shared film collection, meaningful process boards.
   The browser reads static HTML; no framework, paid API or build server is required. */
:root{--board-line:#aec6d12d;--board-ink:#dce8ee;--board-muted:#b3c5d1}
/* Keep complete portrait files visible. Animation moves the frame, not a crop. */
.work-grid .project-card:nth-child(n) .project-media.full-portrait{aspect-ratio:4/5;background:#eeedeb}
.work-grid .project-card:nth-child(n) .project-media.full-portrait img,
.work-grid .project-card:nth-child(n):hover .project-media.full-portrait img,
.work-grid .project-card:nth-child(n):focus-within .project-media.full-portrait img{object-fit:contain;object-position:50% 50%;transform:none!important;filter:none}
.gallery .gallery-full-frame{align-self:start;background:#eeedeb}
.gallery .gallery-full-frame img{position:static;display:block;width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;transform:none!important}
/* Equal-height stages with native source proportions. Landscape film is never
   cropped to a portrait: the intentional mat also holds the caption and controls. */
#films .film-grid{grid-template-columns:1.65fr 1fr 1fr;gap:clamp(18px,2.1vw,34px);align-items:start}
#films .film-surface{height:clamp(340px,35vw,600px);aspect-ratio:auto;background:#0b1219}
#films .film-surface>img,#films .film-surface>video,
.motion-ready #films .film-surface:hover>img,.motion-ready #films .film-surface:hover>video{object-fit:contain;object-position:center;transform:none!important}
#films .film-surface:after{background:linear-gradient(0deg,#071018de,transparent 19%,transparent 86%,#07101899)}
#films .film-landscape .film-surface{background:#111e29}
#films .film-landscape .film-surface:after{display:none}
.film-feature-kicker{position:absolute;z-index:1;top:74px;left:20px;color:#a9becc;font-size:8px;letter-spacing:.17em}
.film-feature-line{position:absolute;z-index:1;bottom:84px;left:20px;font-size:clamp(22px,2.2vw,36px);color:#dbe5eb;letter-spacing:-.045em}
#films .film-card h3{font-size:clamp(20px,1.75vw,30px)}
#films .film-note{margin-top:25px}
.film-library-link{display:flex;justify-content:space-between;align-items:center;gap:28px;border-top:1px solid #ffffff2b;margin-top:32px;padding-top:26px}
.film-library-eyebrow{font-size:8px;letter-spacing:.14em;color:#9bb0bf}
#films .film-library-link h3{font-size:clamp(21px,2.2vw,29px);font-weight:400;letter-spacing:-.035em;margin:10px 0 7px}
.film-library-link p{font-size:12px;line-height:1.6;color:#a9bdcb;margin:0}
.film-library-link .text-link{color:#f8f7f4;white-space:nowrap;font-size:10px}
.related-production{background:#101b25;color:white}
.related-production .lead{color:#b3c5d1}
.related-production .related-film-frame{aspect-ratio:1894/906;max-height:70svh;background:#071018}
.related-film-frame>img,.related-film-frame>video{object-fit:contain;transform:none!important}
.related-production>.container>.text-link{color:white;margin-top:20px}
/* The process canvas describes the work instead of using an unrelated zooming
   portrait. All photos within the boards retain their complete original frame. */
.process .process-visual.process-canvas{height:clamp(330px,calc(100svh - 345px),490px);min-height:0;background:#101e29;border:1px solid #a5bed13d}
.process .process-shot{opacity:0!important;z-index:0;transition:opacity .36s ease,transform .6s var(--aura-out);transform:translateY(10px);pointer-events:none}
.process .process-shot.is-active{opacity:1!important;z-index:2;transform:none}
.process-board{height:100%;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,25px);padding:clamp(22px,2.5vw,36px);color:var(--board-ink);overflow:hidden}
.board-heading{flex-shrink:0}
.board-heading>span{font-size:8px;letter-spacing:.16em;color:var(--board-muted);display:block;margin-bottom:13px}
.board-heading h4{font-size:clamp(23px,2.55vw,38px);font-weight:400;letter-spacing:-.05em;line-height:1.12;margin:0;max-width:95%}
.process-board img,.process .process-shot img{object-fit:contain;object-position:center;transform:none!important;will-change:auto}
.process-board figure{margin:0;min-width:0;min-height:0}
.process-board figcaption{color:var(--board-muted);font-size:9px;line-height:1.3}
.process-board .board-route{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--board-line);padding-top:16px;margin-top:auto;flex-shrink:0}
.board-route span{font-size:10px;line-height:1.4}
.board-route i{font-size:17px;font-style:normal;color:#90aabe}
/* 01: separate inputs converge towards a shared brief. */
.brief-inputs{display:grid;gap:0;flex:1;min-height:0}
.brief-inputs>div{position:relative;display:grid;grid-template-columns:22px 1fr;gap:3px 10px;align-content:center;border-top:1px solid var(--board-line);padding:9px 0}
.brief-inputs small{font-size:8px;color:#92b2c8;grid-row:span 2;padding-top:3px}
.brief-inputs span{font-size:clamp(17px,1.7vw,25px);letter-spacing:-.025em}
.brief-inputs i{font-size:10px;font-style:normal;color:var(--board-muted)}
.brief-connector{height:15px;display:flex;justify-content:space-between;position:relative;margin:-15px 7% -10px;flex-shrink:0;border-bottom:1px solid #90b1c260}
.brief-connector i{height:100%;width:1px;background:#90b1c260;display:block}
.brief-connector:after{content:'';position:absolute;top:100%;left:50%;height:15px;width:1px;background:#90b1c260}
.brief-result{display:flex;align-items:center;gap:12px;background:#b6cfdf10;border:1px solid #b6cfdf40;padding:15px 16px;font-size:clamp(14px,1.35vw,20px);letter-spacing:-.025em;flex-shrink:0}
.brief-result>span:last-child{margin-left:auto;color:#b4ccdb;font-size:21px}
.board-status-dot{width:6px;height:6px;background:#d1e3ed;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 5px #b4cbdd0b}
/* 02: type, colour and an uncropped reference sit together, never over a face. */
.direction-composition{display:grid;grid-template-columns:1fr 1fr;gap:18px;flex:1;min-height:0}
.direction-type{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px solid var(--board-line);padding:15px 20px;background:#d0dce60a;min-width:0}
.direction-type>span{font-size:clamp(44px,6.3vw,91px);line-height:1;letter-spacing:-.055em}
.direction-type>small{font-size:7px;letter-spacing:.06em;line-height:1.6;margin:9px 0 20px;color:var(--board-muted)}
.direction-swatches{display:flex;width:100%;height:18px;border:1px solid #ffffff23}
.direction-swatches i{flex:1}.direction-swatches i:nth-child(1){background:#f8f7f4}.direction-swatches i:nth-child(2){background:#1c1c1e}.direction-swatches i:nth-child(3){background:#2f5d8c}.direction-swatches i:nth-child(4){background:#183b63}
.direction-composition figure{display:flex;flex-direction:column;gap:8px;min-height:0;text-align:center}
.direction-composition figure img{height:calc(100% - 23px);width:100%;min-height:0;background:#0c1720}
/* 03: complete frames and a subtle editorial timeline suggest production. */
.create-storyboard{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;min-height:0;flex:1}
.create-storyboard figure{display:flex;flex-direction:column;gap:10px}
.create-storyboard figure img{width:100%;height:calc(100% - 24px);min-height:0;background:#07121b;border:1px solid #b6cfdf2c}
.create-storyboard figcaption{display:flex;align-items:center;gap:7px;font-size:8px}
.create-storyboard figcaption small{font-size:7px;color:#83a3b9}
.creation-timeline{position:relative;display:grid;grid-template-columns:1.3fr 1fr 1fr .45fr;gap:7px;height:12px;flex-shrink:0;margin-top:-4px;overflow:hidden}
.creation-timeline i{display:block;background:#45678366;border:1px solid #a5bfd52f}
.creation-timeline i:nth-child(2){background:#6c8ba067}.creation-timeline i:nth-child(3){background:#b4cad945}
.creation-timeline b{position:absolute;inset:-1px auto -1px 0;width:1px;background:#ecf3f8;box-shadow:0 0 6px #e5f0fa60}
.create-board .board-route{margin-top:0}
/* 04: example responsive formats with complete media, no fabricated result data. */
.delivery-devices{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;min-height:0;position:relative}
.delivery-desktop{width:72%;border:1px solid #b6cfdf60;border-radius:6px;background:#f8f7f4;color:#14212c;overflow:hidden;flex-shrink:0}
.device-toolbar{display:flex;align-items:center;gap:4px;height:21px;background:#dfe4e7;border-bottom:1px solid #14263819;padding:0 9px}
.device-toolbar i{width:3px;height:3px;border-radius:50%;background:#91a0ad}
.device-toolbar span{margin-left:auto;font-size:5px;letter-spacing:.06em}
.delivery-page{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;align-items:center;min-height:115px}
.delivery-page small{display:block;font-size:6px;letter-spacing:.05em;margin-bottom:10px}
.delivery-page strong{font-size:clamp(16px,2.05vw,28px);line-height:1.05;font-weight:500;letter-spacing:-.05em}
.delivery-page img{display:block;width:100%;height:110px;background:#121d25}
.delivery-mobile{background:#0d151c;border:1px solid #b4cad975;border-radius:13px;width:25%;height:100%;max-height:235px;padding:8px 5px;display:flex;flex-direction:column;flex-shrink:0;gap:6px}
.device-notch{height:3px;width:25%;background:#4c6373;border-radius:3px;align-self:center;flex-shrink:0}
.delivery-mobile img{height:calc(100% - 28px);width:100%;min-height:0;background:#dedddd;flex:1}
.delivery-mobile>span{font-size:5px;letter-spacing:.035em;text-align:center;color:#bfd0dc;flex-shrink:0}
/* One outcome beneath the board; keep it visibly tied to the selected stage. */
.process .process-caption-bar{display:grid;grid-template-columns:1fr 25px;gap:9px 15px;padding:17px 0;min-height:83px}
.process-output-label{font-size:7px;letter-spacing:.14em;color:var(--board-muted);grid-column:1}
.process .process-caption-bar h3{grid-column:1;font-size:clamp(19px,1.95vw,29px);line-height:1.15;letter-spacing:-.035em}
.process .process-caption-arrow{grid-column:2;grid-row:1/3;align-self:center;font-size:25px}
.process .step{opacity:.62!important}
.process .step.is-active{opacity:1!important}
/* Animation is restricted to the currently visible stage and stops with Motion off. */
.process-in-view .process-shot.is-active .board-status-dot{animation:briefPulse 2.8s ease-in-out infinite}
.process-in-view .process-shot.is-active .brief-inputs>div{animation:briefArrive .65s var(--aura-out) both}
.process-in-view .process-shot.is-active .brief-inputs>div:nth-child(2){animation-delay:.08s}
.process-in-view .process-shot.is-active .brief-inputs>div:nth-child(3){animation-delay:.16s}
.process-in-view .process-shot.is-active .direction-swatches i{animation:swatchArrive .75s var(--aura-out) both}
.process-in-view .process-shot.is-active .direction-swatches i:nth-child(2){animation-delay:.07s}
.process-in-view .process-shot.is-active .direction-swatches i:nth-child(3){animation-delay:.14s}
.process-in-view .process-shot.is-active .direction-swatches i:nth-child(4){animation-delay:.21s}
.process-in-view .process-shot.is-active .creation-timeline b{animation:timelinePlay 4.5s ease-in-out infinite}
.process-in-view .process-shot.is-active .delivery-desktop{animation:deviceArrive .7s var(--aura-out) both}
.process-in-view .process-shot.is-active .delivery-mobile{animation:deviceArrive .85s .09s var(--aura-out) both}
@keyframes briefPulse{0%,100%{box-shadow:0 0 0 4px #b4cbdd0b;opacity:.75}50%{box-shadow:0 0 0 8px #b4cbdd19;opacity:1}}
@keyframes briefArrive{from{opacity:.25;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes swatchArrive{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@keyframes timelinePlay{0%{left:0}85%,100%{left:99.7%}}
@keyframes deviceArrive{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
 #films .film-grid{grid-template-columns:1.4fr 1fr 1fr;gap:20px}
 #films .film-surface{height:360px}
 .film-feature-kicker{top:67px;font-size:7px}
 .film-feature-line{bottom:74px;font-size:23px}
 #films .film-open-label{font-size:8px;bottom:25px;right:12px}
 #films .preview-toggle{font-size:9px;left:10px;padding:10px}
 .process-board{padding:22px;gap:17px}
 .board-heading h4{font-size:27px}
 .board-route span{font-size:9px}
 .create-storyboard{gap:8px}
 .create-storyboard figcaption{gap:4px;font-size:7px}
}
@media(max-width:960px){
 #films .film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 #films .film-landscape{grid-column:1/-1}
 #films .film-landscape .film-surface{height:auto;aspect-ratio:2.09/1}
 #films .film-portrait .film-surface{height:auto;aspect-ratio:9/16;max-height:620px}
 .film-feature-kicker,.film-feature-line{display:none}
 .process .process-visual.process-canvas,.process.process-compact .process-visual.process-canvas{height:450px;max-height:none}
 .process-board{padding:30px;gap:22px}
 .board-heading h4{font-size:34px}
 .direction-type>span{font-size:80px}
 .direction-composition{grid-template-columns:1fr 1fr;max-width:540px;width:100%;align-self:center}
 .board-route span{font-size:12px}
 .brief-inputs span{font-size:23px}
 .brief-inputs i{font-size:12px}
 .create-storyboard figcaption{font-size:11px}
 .brief-result{font-size:19px}
 .delivery-page strong{font-size:30px}
 .delivery-devices{max-width:520px;width:100%;align-self:center}
 .process .process-caption-bar h3{font-size:27px}
}
@media(max-width:640px){
 .work-grid .project-card:nth-child(n) .project-media.full-portrait{aspect-ratio:4/5}
 #films .film-grid{grid-template-columns:1fr;gap:34px}
 #films .film-landscape{grid-column:auto}
 #films .film-portrait .film-surface{aspect-ratio:9/16;height:auto;max-height:640px}
 #films .film-landscape .film-surface{aspect-ratio:1.38/1}
 #films .film-card h3{font-size:26px}
 #films .preview-toggle{font-size:10px;bottom:12px}
 #films .film-open-label{bottom:24px;font-size:8px}
 #films .film-number{font-size:20px;top:14px;left:15px}
 #films .film-cover-label{top:16px;right:14px;font-size:7px}
 #films .film-open-cover .film-play{width:50px;height:50px;font-size:14px}
 #films .film-note{font-size:12px}
 .film-library-link{flex-direction:column;align-items:flex-start;gap:17px}
 .film-library-link .text-link{min-height:44px}
 .process .process-visual.process-canvas,.process.process-compact .process-visual.process-canvas{height:405px}
 .process-board{padding:22px;gap:20px}
 .board-heading h4{font-size:27px;max-width:100%}
 .board-heading>span{font-size:7px}
 .brief-inputs>div{padding:8px 0}
 .brief-inputs span{font-size:20px}
 .brief-inputs i{font-size:10px}
 .brief-result{padding:13px;font-size:16px;gap:10px}
 .direction-composition{gap:12px}
 .direction-type{padding:12px}
 .direction-type>span{font-size:64px}
 .direction-type>small{font-size:6px;margin-bottom:17px}
 .direction-composition figcaption{font-size:8px}
 .create-storyboard{grid-template-columns:1.1fr 1fr 1fr;gap:8px}
 .create-storyboard figcaption{font-size:7px;gap:4px;flex-wrap:wrap}
 .board-route span{font-size:9px}
 .board-route i{font-size:14px}
 .delivery-page{padding:10px;grid-template-columns:1fr;gap:8px}
 .delivery-page>div{display:flex;gap:12px;align-items:center}
 .delivery-page small{font-size:5px;margin:0;max-width:35px}
 .delivery-page strong{font-size:21px}
 .delivery-page img{height:82px}
 .delivery-devices{gap:10px}
 .delivery-desktop{width:67%}
 .delivery-mobile{width:28%;max-height:220px}
 .device-toolbar span{font-size:4px}
 .process .process-caption-bar h3{font-size:23px}
 .process .process-caption-bar{min-height:86px}
 .process .process-output-label{font-size:7px}
}
.motion-off .process-board *, .motion-off .process .process-shot{animation:none!important;transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.process-board *,.process .process-shot{animation:none!important;transition:none!important;transform:none!important}}
/* Final spacing pass: connectors sit between rows, not on their text. */
.brief-board{gap:14px}
.brief-connector{height:10px;margin:0 7%}
.brief-connector:after{height:14px}
.film-feature-line{bottom:66px}
@media(max-width:1200px){.film-feature-line{display:none}}
@media(max-width:640px){.brief-inputs>div{padding:6px 0}}
/* Clip decorative overflow without creating a hidden scroll container. Otherwise
   scrollIntoView/focus can shift the entire film section when a raised card is
   brought into view, moving both its visual position and hover target. */
#films.film-section{overflow:clip}