/* 0REI home: overrides and new pieces layered on top of base-global.css and base-landing.css. */

/* The shared layout gives <body class="cn0"> a fixed height + overflow hidden (from the old generated
   page). Undo that on the home page so the real document height and scrolling apply. */
body.cn0 { height: auto !important; min-height: 100vh; overflow: visible !important; overflow-x: clip !important; }
html { overflow-x: clip; }
html.zr-no-scroll, html.zr-no-scroll body { overflow: hidden !important; }

/* Stacking for section-out parallax: later sections must paint over earlier ones. */
.insights { position: relative; }
.footer { position: relative; z-index: 1; }

/* No-JS fallbacks for the menus (the original relied on a .no-js class). */
html:not(.vi-js) .modal:target { display: block !important; }

/* Expertise dropdown opening (simple fade/slide; original used its own animation framework). */
.menu-dropdown.zr-open .menu-dropdown__backdrop { pointer-events: auto; }
.menu-dropdown.zr-open .menu-dropdown__animation { animation: zr-drop-in .6s cubic-bezier(.25,.74,.22,.99) both; }
.menu-dropdown.zr-open .menu-dropdown__backdrop { animation: zr-fade-in .6s ease both; }
.header__menu-btn.is-active .header__menu-btn__icon .icon { transform: rotate(180deg); }
.header__menu-btn__icon .icon { transition: transform .4s cubic-bezier(.25,.74,.22,.99); }
@keyframes zr-drop-in { from { transform: translateY(-12%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zr-fade-in { from { opacity: 0; } to { opacity: 1; } }
#menu-mobile.zr-open .modal__animation { animation: zr-fade-in .35s ease both; }

/* Accordion: closed panels hidden only once JS controls them. */
.vi-js .accordion__content[aria-hidden="true"] { display: none; }
.accordion__heading a { cursor: pointer; }
.capabilities__decor circle { transition: opacity .4s cubic-bezier(.25,.74,.22,.99); }
.capabilities__decor circle.zr-circle-on { opacity: 1; }

/* Client-stories carousel: card widths/spacing come from the original .card-list--client rules;
   HomeBehaviors only translates the track. */
.zr-carousel .carousel__list__inner { will-change: transform; }
.card--client.is-active .card__hover { opacity: 1; visibility: visible; }
.cursor.zr-cursor { opacity: 0; transition: opacity .25s ease; left: 0; top: 0; margin-left: -60px; }
.cursor.zr-cursor.zr-cursor--on { opacity: 1; }

/* Showreel: 0REI footage mapped onto the laptop screen of the poster (see HomeBehaviors). */
.video-section-background__picture { overflow: hidden; }
.zr-screen { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; visibility: hidden; pointer-events: none; z-index: 0; overflow: hidden; }
.zr-screen--placed { visibility: visible; }
.zr-screen__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0c0d; }
.video-section-background__picture__image { z-index: auto !important; }

/* Scroll reveals (added by HomeBehaviors only for below-the-fold elements; never without JS). */
.vi-js .zr-reveal { transition: opacity .9s cubic-bezier(.25,.74,.22,.99), transform .9s cubic-bezier(.25,.74,.22,.99); transition-delay: var(--zr-delay, 0ms); }
.vi-js .zr-reveal:not(.zr-in) { opacity: 0; transform: translate3d(0, 48px, 0); }
@media (prefers-reduced-motion: reduce) { .vi-js .zr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { .zr-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- 0REI 3D content slot (WebGL) ---------- */
.zr-webgl { border-top: 1px solid var(--t-line); }
.zr-webgl__heading .text--h3 { display: block; }
.zr-webgl__sticky { position: relative; }
.zr-webgl__canvas { display: none; }
.zr-webgl__list { list-style: none; margin: 0; padding-top: var(--spacing); padding-bottom: var(--spacing); }
.zr-webgl__item { padding: calc(var(--spacing) * .75) 0; border-top: 1px solid var(--t-line); }
.zr-webgl__item-title { margin-bottom: calc(var(--spacing) * .4); }
.zr-webgl__item-line { color: rgba(var(--t-text-rgb), .6); }
.zr-webgl__bottom { padding-top: var(--spacing); }
/* Live mode: sticky full-viewport stage, scroll length = items x 100lvh (same as the original section). */
.zr-webgl--live .zr-webgl__sticky { height: calc(var(--count, 5) * 100lvh); }
.zr-webgl--live .zr-webgl__stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.zr-webgl--live .zr-webgl__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.zr-webgl--ready .zr-webgl__canvas { opacity: 1; }
.zr-webgl--live .zr-webgl__list { position: absolute; inset: 0; padding: 0; pointer-events: none; }
.zr-webgl--live .zr-webgl__item { position: absolute; left: var(--container-h-padding, 20px); right: var(--container-h-padding, 20px); top: 0; border: 0; padding-top: var(--md, calc(var(--spacing) * 2.2)) var(--n-md, calc(var(--scale-px) * 90)); opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .6s cubic-bezier(.25,.74,.22,.99), transform .6s cubic-bezier(.25,.74,.22,.99); }
.zr-webgl--live .zr-webgl__item.is-active { opacity: 1; transform: none; }
.zr-webgl--live .zr-webgl__bottom { margin-top: -10svh; position: relative; }
.zr-webgl__item-title { font-size: var(--md, calc(var(--scale-text-rem) * 9)) var(--n-md, calc(var(--scale-text-rem) * 3.4)); line-height: 1; letter-spacing: -.05em; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .zr-webgl--live .zr-webgl__item { transition: none; transform: none; } }

/* Without JS (and without hover detection) keep the showreel poster inside its section instead of pinned. */
html:not(.vi-js) .video-section-background__picture { position: absolute; }