/* =====================================================================
   Homepage scroll motion. Static layout first (works with no JS); motion
   styles apply only once home-motion.js adds .gx-rv (reveals) or
   .gx-scenes (GSAP scroll scenes, desktop only) to <html>.
   ===================================================================== */

/* ---------- division stack: static layout ---------- */
.gx-stack { padding: 104px 0 56px; background: #fff; }
.gx-stack__cards { display: grid; gap: 28px; }
.gx-stackcard { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 480px; border-radius: 26px; overflow: hidden; border: 1px solid var(--gx-line); background: #fff; box-shadow: 0 30px 70px rgba(13, 34, 48, .10); }
.gx-stackcard--1 { background: var(--gx-sky-50); }
.gx-stackcard--2 { background: var(--gx-blue-900); border-color: var(--gx-blue-900); color: #dbe8ef; }
.gx-stackcard__media { background: #fff; border-right: 1px solid var(--gx-line); display: flex; }
.gx-stackcard__media > img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; padding: 28px; }
.gx-stackcard__collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; width: 100%; background: var(--gx-line); }
.gx-stackcard__collage img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 22px; min-height: 0; }
.gx-stackcard__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 48px 56px; }
.gx-stackcard__n { font: 800 14px/1 var(--gx-display); letter-spacing: .08em; color: var(--gx-orange-600); }
.gx-stackcard__body h3 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 0; }
.gx-stackcard--2 .gx-stackcard__body h3 { color: #fff; }
.gx-stackcard__count { font-weight: 600; color: var(--gx-blue); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.gx-stackcard--2 .gx-stackcard__count { color: var(--gx-sky); }
.gx-stackcard__body p:not(.gx-stackcard__count) { font-size: 17px; line-height: 1.6; color: var(--gx-ink-2); max-width: 420px; margin: 8px 0 20px !important; }
.gx-stackcard--2 .gx-stackcard__body p:not(.gx-stackcard__count) { color: #cfe0ea; }

/* ---------- exhibition reel: static layout (horizontal scroll row) ---------- */
.gx-reel { position: relative; }
.gx-reel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; }
.gx-reel__intro { flex: none; width: 380px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 24px 24px 0; scroll-snap-align: start; }
.gx-reel__intro h3 { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.gx-reel__links { display: grid; gap: 6px; }
.gx-reel__links .gx-link { font-size: 14.5px; }
.gx-reel__hint { display: none; color: var(--gx-blue); font-weight: 600; margin-top: 8px !important; }
.gx-reel__panel { position: relative; flex: none; width: 420px; height: 520px; border-radius: 22px; overflow: hidden; background: var(--gx-ink); scroll-snap-align: start; color: #fff !important; }
.gx-reel__panel:nth-child(odd) { width: 360px; }
.gx-reel__panel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gx-ease, ease); }
.gx-reel__panel:hover img { transform: scale(1.04); }
.gx-reel__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 80px 22px 20px; background: linear-gradient(180deg, rgba(6, 50, 74, 0), rgba(6, 50, 74, .92)); }
.gx-reel__meta time { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gx-sky); }
.gx-reel__meta strong { font-family: var(--gx-display); font-size: 21px; line-height: 1.25; color: #fff; }
.gx-reel__place { display: flex; gap: 6px; font-size: 14px; color: #dbe8ef; }
.gx-reel__count { align-self: flex-start; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; }
.gx-reel__bar { display: none; height: 3px; margin-top: 26px; background: var(--gx-line); border-radius: 3px; overflow: hidden; }
.gx-reel__bar span { display: block; height: 100%; background: var(--gx-orange); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- header tightens after the first scroll ---------- */
.gx-bar__inner, .gx-nav__link, .gx-logo img { transition: height .3s ease; }
@media (min-width: 992px) {
    #header.is-scrolled .gx-bar__inner, #header.is-scrolled .gx-nav__link { height: 64px; }
    #header.is-scrolled .gx-logo img { height: 52px; }
}
.gx-hero__facts dt { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Reveal layer (html.gx-rv): elements fade up as they enter, once.
   ===================================================================== */
:root { --rv-d: 16px; --rv-t: .6s; --rv-ease: cubic-bezier(.2, .7, .2, 1); }
html.gx-rv [data-reveal] { opacity: 0; transform: translate3d(0, var(--rv-d), 0); transition: opacity var(--rv-t) ease, transform var(--rv-t) var(--rv-ease), clip-path var(--rv-t) var(--rv-ease); transition-delay: var(--rv-delay, 0ms); }
html.gx-rv [data-reveal="fade"] { transform: none; }
html.gx-rv [data-reveal="left"] { transform: translate3d(calc(var(--rv-d) * -1), 0, 0); }
html.gx-rv [data-reveal="mask"] { opacity: 1; transform: translate3d(0, .5em, 0); clip-path: inset(0 0 100% 0); transition-duration: calc(var(--rv-t) * 1.3); }
html.gx-rv [data-reveal="curtain"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 18px); transition-duration: calc(var(--rv-t) * 1.8); }
html.gx-rv [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
html.gx-rv [data-reveal="curtain"].is-in { clip-path: inset(0 0 0 0 round 18px); }
html.gx-rv-prep [data-reveal], html.gx-rv-prep [data-reveal] * { transition: none !important; }
html.gx-rv .gx-product[data-reveal] .gx-product__media img { transform: scale(.94); transition: transform calc(var(--rv-t) * 1.5) var(--rv-ease); transition-delay: inherit; }
html.gx-rv .gx-product[data-reveal].is-in .gx-product__media img { transform: none; }

/* =====================================================================
   Scroll scenes (html.gx-scenes, desktop ≥ 992px with GSAP loaded)
   ===================================================================== */
/* 1. hero zoom-through */
html.gx-scenes .gx-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
html.gx-scenes .gx-hero > .gx-wrap { width: 100%; }
.gx-zoom { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.gx-zoom__media { position: absolute; overflow: hidden; background: #fff; border: 1px solid var(--gx-line); visibility: hidden; }
.gx-zoom__media .gx-division__media { width: 100%; height: 100%; display: grid; padding: 0; }
.gx-zoom__media .gx-division__media--collage { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--gx-line); }
.gx-zoom__media img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4%; }
.gx-zoom__caption { position: absolute; left: 50%; top: 50%; width: min(720px, 86%); transform: translate(-50%, -50%); padding: 44px 48px; text-align: center; background: rgba(255, 255, 255, .94); border: 1px solid var(--gx-line); border-radius: 22px; box-shadow: 0 30px 80px rgba(13, 34, 48, .18); visibility: hidden; }
.gx-zoom__caption h2 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 12px; }
.gx-zoom__caption p:last-child { color: var(--gx-muted); font-size: 16px; }

/* 2. stacking division cards */
html.gx-scenes .gx-stack__cards { display: block; }
html.gx-scenes .gx-stackcard { position: sticky; top: calc(110px + var(--i) * 26px); height: min(560px, calc(100vh - 160px)); min-height: 0; margin-bottom: 48px; transform-origin: 50% 0; will-change: transform; }

/* 3. sideways exhibition reel */
html.gx-scenes .gx-events { padding: 96px 0 56px; overflow: hidden; }
html.gx-scenes .gx-events .gx-head { margin-bottom: 28px; }
html.gx-scenes .gx-reel__track { overflow: visible; width: max-content; padding: 0 32px 0 0; will-change: transform; }
html.gx-scenes .gx-reel__panel { height: min(520px, calc(100vh - 330px)); }
html.gx-scenes .gx-reel__hint, html.gx-scenes .gx-reel__bar { display: block; }
html.gx-scenes .gx-reel__hint { display: flex; gap: 6px; align-items: center; }

/* 4. light-up words */
.gx-word { display: inline-block; }

/* 6. certifications marquee */
.gx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gx-marquee__track { display: flex; width: max-content; }
.gx-marquee__item { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 28px; white-space: nowrap; border-left: 1px solid var(--gx-line); }
.gx-marquee__item strong { font-size: 17px; font-weight: 700; color: var(--gx-ink); }
.gx-marquee__item span { font-size: 14px; color: var(--gx-muted); }
html.gx-scenes .gx-creds__inner { grid-template-columns: 130px minmax(0, 1fr) auto; }

/* ---------- narrow screens: plain stacked layout (mobile design pending) ---------- */
@media (max-width: 991px) {
    .gx-stack { padding: 64px 0 32px; }
    .gx-stackcard { grid-template-columns: 1fr; min-height: 0; }
    .gx-stackcard__media { border-right: 0; border-bottom: 1px solid var(--gx-line); height: 260px; }
    .gx-stackcard__body { padding: 28px 24px; }
    .gx-stackcard__body h3 { font-size: 30px; }
    .gx-reel__intro { width: 280px; }
    .gx-reel__panel, .gx-reel__panel:nth-child(odd) { width: 280px; height: 380px; }
}

/* ---------- reduced motion: nothing animates ---------- */
@media (prefers-reduced-motion: reduce) {
    html [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
    .gx-bar__inner, .gx-nav__link, .gx-logo img, .gx-reel__panel img { transition: none; }
}