@import url('./main.css?v=0c0ef537402e74141d8dddf0b728ff9ad6dbdda6');

/* The shared composer is fixed against the viewport. Keep Gallery's scroll
   geometry identical to the homepage so its width and menu alignment do not
   change simply because this route fits in one frame. */
html.s-route:has(body.s-page--gallery) { overflow-y: scroll; }

body.s-page--gallery .s-page__content { padding-top: 0; padding-bottom: 0; }
body.s-page--gallery .s-page__major-section,
body.s-page--gallery .s-page__major-section--transition-frame > .s-page__group {
  height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
  min-height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
  max-height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
  overflow: visible;
}
body.s-page.s-page--gallery:not(.s-page--rpn) .s-page__major-section { overflow: visible; }
body.s-page--gallery .s-page__major-section--transition-frame > .s-page__group {
  height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
  min-height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
  max-height: var(--gallery-section-height, clamp(640px, 100vw, 900px));
}
body.s-page--gallery .s-page__section { --gallery-x: clamp(18px, 4vw, 48px); }
body.s-page--gallery .s-page__section + .s-page__section { margin-top: calc(var(--gallery-x) * 7); }

.ooxme-gallery { width: 100%; margin-inline: auto; padding: calc(var(--s-x) + var(--s-composer-height) + (var(--s-x) * .75)) 0 var(--s-x); justify-content: flex-end; gap: calc(var(--gallery-x) * 2); }
.gallery-text-group { display: flex; flex-direction: column; align-items: center; width: var(--s-x-rpn-image-text-width, calc(100% - 34px)); max-width: 720px; margin-inline: auto; text-align: center; }
.gallery-project-name { width: 100%; height: var(--gallery-project-name-height, auto); margin: 0; color: #fff; font-family: OOXMEScript, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: normal; line-height: 1.2; text-align: center; }
.gallery-text-role { width: 100%; height: var(--gallery-text-role-height, auto); margin: calc(var(--gallery-x) * .5) 0 0; color: var(--color-blue); font-family: OOXMEScript, Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: 500; letter-spacing: normal; line-height: 1.2; text-align: center; }
.gallery-project-description { width: var(--gallery-description-width, 420px); height: var(--gallery-description-height, auto); max-width: none; align-self: center; margin: calc(var(--gallery-x) * .5) 0 0; color: #A6A6A6; font-family: OOXMEScript, Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: normal; line-height: 1.2; text-align: center; }
.gallery-project-description.is-description-exiting,
.gallery-project-description.is-description-entering { will-change: opacity, filter, transform; }
.gallery-project-description.is-description-exiting { opacity: 0; filter: blur(4px); transform: translateY(-6px); transition-duration: .18s; }
.gallery-project-description.is-description-entering { opacity: 0; filter: blur(4px); transform: translateY(-8px); transition-duration: 0s; }
.gallery-project-description.is-description-settled { opacity: 1; filter: blur(0); transform: none; transition-duration: .42s; }
.gallery-deck-wrap { display: grid; flex: 0 0 var(--gallery-deck-height, 420px); height: var(--gallery-deck-height, 420px); justify-items: center; width: 100%; min-height: 0; }
.gallery-deck { --gallery-tail-height: clamp(10px, 1.5vw, 16px); position: relative; align-self: end; display: block; width: var(--gallery-deck-width, min(100%, 420px)); height: var(--gallery-deck-height, 420px); isolation: isolate; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; transition: width .44s cubic-bezier(.22,.61,.36,1), height .44s cubic-bezier(.22,.61,.36,1); }
.gallery-deck[data-gallery-interaction-ready="false"], .gallery-deck[data-gallery-state="error"] { pointer-events: none; }
.gallery-deck[data-gallery-state="error"] { cursor: default; }
.gallery-stack-layer { --gallery-rear-overlay: transparent; box-sizing: border-box; position: absolute; left: 50%; margin: 0; overflow: hidden; border: 0; border-radius: var(--s-composer-radius); background: rgba(255,255,255,.08); box-shadow: 0 2px 7px rgba(0,0,0,.045), 0 1px 1px rgba(0,0,0,.025); -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%); transform: translateX(-50%); transition: none; pointer-events: none; }
.gallery-stack-layer:not(.gallery-stack-layer--hidden) { will-change: transform, opacity; }
.gallery-stack-layer::before { position: absolute; z-index: 3; inset: 0; border: 1px solid rgba(255,255,255,.17); border-radius: inherit; content: ''; pointer-events: none; }
.gallery-stack-layer::after { position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: var(--gallery-rear-overlay); content: ''; pointer-events: none; }
.gallery-stack-layer img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.gallery-stack-layer--pattern { background: #fff; }
.gallery-stack-layer--pattern img { box-sizing: border-box; padding: 9%; background: #fff; }
.gallery-stack-layer--hidden { top: 0; z-index: 0; width: 88%; opacity: 0; visibility: hidden; }
.gallery-stack-layer--primary { top: calc(var(--gallery-tail-height) * 2); z-index: 4; width: 100%; aspect-ratio: 1; }
.gallery-stack-layer--rear-1 { --gallery-rear-overlay: rgba(0,0,0,.16); top: var(--gallery-tail-height); z-index: 3; width: 90%; }
.gallery-stack-layer--rear-2 { --gallery-rear-overlay: rgba(0,0,0,.32); top: 0; z-index: 2; width: 82%; }
[data-gallery-reveal] { opacity: 0; transform: translateY(-18px); transition: opacity .72s ease, transform .72s cubic-bezier(.22,.61,.36,1); }
.gallery-text-group > [data-gallery-reveal] { filter: blur(4px); transition: opacity .56s ease, transform .66s cubic-bezier(.22,.61,.36,1), filter .66s ease; }
.gallery-text-group > [data-gallery-reveal]:nth-child(1) { transition-delay: 0ms; }
.gallery-text-group > [data-gallery-reveal]:nth-child(2) { transition-delay: 80ms; }
.gallery-text-group > [data-gallery-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-gallery-reveal].is-visible { opacity: 1; transform: none; }
.gallery-text-group > [data-gallery-reveal].is-visible { filter: blur(0); }
html.s-route.is-day-mode body.s-page--gallery .gallery-project-name { color: #111; }
html.s-route.is-day-mode body.s-page--gallery .gallery-project-description { color: #666666; }
html.s-route.is-day-mode body.s-page--gallery .gallery-stack-layer { background: rgba(255,255,255,.42); }
html.s-route.is-day-mode body.s-page--gallery .gallery-stack-layer--rear-1 { --gallery-rear-overlay: rgba(255,255,255,.18); }
html.s-route.is-day-mode body.s-page--gallery .gallery-stack-layer--rear-2 { --gallery-rear-overlay: rgba(255,255,255,.34); }
html[lang="ar"] body.s-page--gallery :is(.gallery-project-name, .gallery-text-role, .gallery-project-description) { font-family: OOXMETosh, OOXMEScript, Arial, sans-serif; }
@media (max-width: 700px) {
  .ooxme-gallery { padding-top: calc(var(--s-x) + var(--s-composer-height) + (var(--s-x) * .75)); padding-bottom: var(--s-x); gap: calc(var(--gallery-x) * 2); }
  .gallery-deck { width: var(--gallery-deck-width, min(100%, 620px)); }
  .gallery-stack-layer { border-radius: calc(var(--s-composer-radius) * .72); }
}
@media (prefers-reduced-motion: reduce) { [data-gallery-reveal], .gallery-project-description.is-description-exiting, .gallery-project-description.is-description-entering, .gallery-project-description.is-description-settled { opacity: 1; transform: none; filter: none; transition: none; } }

/* Keep Project 1's established frame as the fixed reference. Later projects
   use content flow so the measured distance is between the actual artwork
   boundary and the next project's first text, with no viewport-sized spacer. */
body.s-page--gallery .s-page__section:not(:first-child) .s-page__major-section,
body.s-page--gallery .s-page__section:not(:first-child) .s-page__major-section--transition-frame > .s-page__group {
  height: auto;
  min-height: 0;
  max-height: none;
}
body.s-page--gallery .s-page__section:not(:first-child) .s-page__group {
  justify-content: flex-start;
  padding: 0 0 var(--gallery-x);
}