/* Shared card slots; project-specific artwork composition and contrast. */
.reveal-card:not(.kry){--image-width:96%;--image-bottom:0%}
.reveal-card:not(.kry) .reveal-content{color:var(--card-ink,#171717)}
.television.reveal-card .reveal-image{height:94%;width:92%;bottom:3%;object-fit:contain}
.furniture.reveal-card .reveal-image{height:100%;width:96%;bottom:0;object-fit:contain}
.volvo.reveal-card{--card-ink:#FFFFFF;--card-meta-ink:#FFFFFF}.volvo.reveal-card .reveal-image{width:70%;height:112%;bottom:-6%;object-fit:contain;object-position:50% 50%;mix-blend-mode:normal}
.volvo.reveal-card .reveal-heading{right:max(var(--card-inset),64px)}
.volvo.reveal-card .reveal-action{background:#fff;color:#111521}.volvo.reveal-card .reveal-meta{background:#ffffff25}
/* One fixed composition; the shared reveal controller moves the whole art layer. */
.ora.reveal-card .ora-mark{display:none;position:absolute;height:auto;object-fit:contain;pointer-events:none}
/* Width sets the artwork scale. Card height only reveals more or less of it. */
.ora-card-collage{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:456/221;transform:translateY(-50%);overflow:visible;pointer-events:none}
/* Reusable object and product visuals use the same natural scroll as Kry. */
.portfolio-object{width:110%;max-width:none;max-height:85%;object-fit:contain;flex:none}
.case-shell[data-layout=editorial] .visual-scene:has(.ora-scene){inset:0;overflow:visible;border-radius:0}
.case-shell[data-layout=editorial] .ora-scene{height:550px;max-height:90%;min-height:300px}
.case-shell[data-layout=editorial] .ora-scene .ora-phone{animation:none;transform:none!important}
.case-shell[data-layout=editorial] .close{background:#ffffff50;color:var(--case-ink)}
.case-shell[data-layout=editorial]:not([data-case=mental-health]) .case-breadcrumb{font-size:clamp(17px,2vw,28px);font-weight:500;letter-spacing:-.02em;color:var(--case-ink)}
.case-shell[data-case=self-service][data-layout=editorial] .case-breadcrumb{font-size:23px;letter-spacing:.12em;color:#fff}
.case-shell[data-case=self-service][data-layout=editorial] .close{background:#ffffff25;color:#fff}
.case-shell[data-case=self-service] .case-scroll{scrollbar-color:#ffffff45 transparent}
.case-shell[data-layout=editorial] .mobile-visual:has(.portfolio-object){overflow:visible}


/* Full-bleed video stays filled while the shared wave reveals the case copy. */
.volvo.reveal-card .reveal-art{transform:none;will-change:auto}
.volvo.reveal-card .reveal-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 65%;transform:scale(calc(1.035 - var(--wave,0)*.035));display:block}
.volvo.reveal-card .reveal-wash{z-index:2}
.card-video-toggle{position:absolute;top:16px;right:16px;z-index:5;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#0005;color:#fff;padding:8px;backdrop-filter:blur(8px)}
.card-video-toggle svg{width:18px;height:18px}.card-video-toggle[hidden]{display:none}
.return-face .card-video-toggle{display:none}
@media(max-width:650px){.volvo.reveal-card .reveal-video{object-position:50% 50%}.card-video-toggle{top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.volvo.reveal-card .reveal-video{transform:none}}

/* A screen-only splash reveal, followed by a single slow cinematic drift. */
.television.reveal-card .tv-scene{aspect-ratio:1312/1199}
.tv-film{transform-origin:600px 438px;animation:tv-drift 22s 2.4s cubic-bezier(.2,.4,.4,1) both;animation-play-state:paused}
.tv-splash{animation:tv-splash 1.6s 1.2s ease-in-out both;animation-play-state:paused}
.tv-scene[data-playing=true] .tv-film,.tv-scene[data-playing=true] .tv-splash{animation-play-state:running}
@keyframes tv-splash{from{opacity:1}to{opacity:0}}
@keyframes tv-drift{from{transform:scale(1.018) translateX(0)}to{transform:scale(1.045) translateX(-5px)}}
.tv-scene[data-still=true] .tv-film{animation:none;transform:none}.tv-scene[data-still=true] .tv-splash{animation:none;opacity:0}
.return-face .tv-film{animation:none;transform:none}.return-face .tv-splash{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.tv-film{animation:none;transform:none}.tv-splash{animation:none;opacity:0}}

/* Keep the complete TV inside a permanently clipped rounded card. */
.television.reveal-card{overflow:hidden}
.television.reveal-card .reveal-wash{border-radius:inherit}
.television.reveal-card .reveal-wave-clip{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none}
.television.reveal-card .tv-art-clip{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
.television.reveal-card .tv-scene{overflow:hidden}

/* Official monochrome brand wordmarks in the opened-case toolbar. */
.case-breadcrumb:has(.case-brand-logo){display:inline-flex;align-items:center;line-height:1}
.case-brand-logo{display:block;object-fit:contain;max-width:100%}
.case-brand-volvo{width:calc(416px / 3);height:calc(32px / 3)}.case-brand-viaplay{width:99px;height:28px}
@media(max-width:650px){.case-brand-volvo{width:104px;height:8px}.case-brand-viaplay{width:85px;height:24px}}

@media(max-width:650px){.case-shell[data-layout=editorial] .ora-scene{height:390px}.case-shell[data-case=self-service][data-layout=editorial] .case-breadcrumb{font-size:17px}.portfolio-object{width:100%;max-height:100%}}

/* Standalone guidelines link on the landing page. */
.patterns-home{display:flex;align-items:center;gap:28px;justify-content:space-between;border-radius:25px;background:#d7cff8;padding:28px 34px;margin-top:24px;min-height:155px;position:relative;overflow:hidden}.patterns-home h2{font-size:25px;line-height:1.2;font-weight:400;letter-spacing:-.5px;margin:0 0 10px}.patterns-home p{font-size:14px;margin:0;line-height:1.5}.patterns-home-arrow{display:flex;align-items:center;gap:0;border-radius:28px;background:#111;color:#fff;padding:12px 16px;white-space:nowrap}.patterns-home-arrow span{max-width:0;opacity:0;overflow:hidden;transition:max-width .4s,opacity .4s,margin .4s}.patterns-home:is(:hover,:focus-visible) .patterns-home-arrow span{max-width:150px;opacity:1;margin-right:14px}.patterns-home-demo{width:230px;height:90px;position:relative;flex:none}.pattern-pill{border:1px solid #111;border-radius:22px;padding:10px 16px;font-size:13px;position:absolute;top:20px;left:0;animation:pattern-pill-loop 9s infinite}.pattern-bubble{background:#111;color:white;padding:12px 17px;border-radius:18px 18px 0 18px;font-size:13px;position:absolute;top:20px;right:0;animation:pattern-bubble-loop 9s infinite}.patterns-home-demo:after{content:'A choice becomes a message.';position:absolute;bottom:0;font-size:10px;opacity:.6}.case-focused .patterns-home{display:none}.portfolio{height:auto;min-height:100svh}@keyframes pattern-pill-loop{0%,30%{opacity:1;transform:translateY(0)}40%,90%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}@keyframes pattern-bubble-loop{0%,35%{opacity:0;transform:translateY(6px)}45%,85%{opacity:1;transform:translateY(0)}95%,100%{opacity:0;transform:translateY(6px)}}
@media(max-width:650px){.patterns-home{padding:24px;flex-wrap:wrap;gap:18px}.patterns-home h2{font-size:23px}.patterns-home-demo{width:190px}.patterns-home-arrow{margin-left:auto}.patterns-home-arrow span{display:none}}
@media(prefers-reduced-motion:reduce){.patterns-home-arrow span{transition:none}.pattern-pill{animation:none;opacity:0}.pattern-bubble{animation:none;opacity:1}}
