/* Exhibition Islam — hero: step through the star. hero.js sets --R (star radius), --p (scroll progress),
   the window's clip-path, the frame size and the shade. */
.ei.hero { position: relative; height: 250vh; background: var(--ei-lapis-2); color: var(--ei-light); }
.ei .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
	background: radial-gradient(70% 60% at 50% 48%, #1b2a66 0%, var(--ei-lapis) 50%, var(--ei-lapis-2) 100%); }
.ei .hero__pattern { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); color: var(--ei-gold); opacity: .16; z-index: 0;
	-webkit-mask: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 80%); mask: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 80%); }
.ei .hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(30% 34% at 50% 50%, rgba(240, 196, 106, .22), transparent 70%); }

.ei .hero__window { position: absolute; inset: 0; z-index: 1; will-change: clip-path; clip-path: circle(0 at 50% 50%); }
.ei .hero .slides, .ei .hero .slides img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ei .hero .slides img { object-fit: cover; opacity: 0; transition: opacity 1.4s ease; transform: scale(1.06); }
.ei .hero .slides img.is-on { opacity: 1; animation: ei-kb 9s ease-out both; }
@keyframes ei-kb { from { transform: scale(1.14); } to { transform: scale(1.04); } }
.ei .hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,48,.2) 0%, rgba(10,18,48,.35) 40%, rgba(10,18,48,.88) 100%); opacity: var(--shade, 0); }
.ei .hero__after { position: absolute; left: var(--ei-gut); right: var(--ei-gut); bottom: clamp(48px, 10vh, 120px); max-width: var(--ei-wrap); margin: 0 auto;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ei .after__line { font: 400 clamp(20px, 2vw, 28px)/1.1 var(--ei-display); opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; border-top: 1px solid rgba(240,196,106,.6); padding-top: 18px; }
.ei .after__line b { display: block; font-weight: 400; font-size: clamp(48px, 6.4vw, 104px); line-height: 1; color: var(--ei-gold-2); margin-bottom: 8px; }
.ei.hero.is-through .after__line { opacity: 1; transform: none; }
.ei.hero.is-through .after__line:nth-child(2) { transition-delay: .12s; }
.ei.hero.is-through .after__line:nth-child(3) { transition-delay: .24s; }

.ei .hero__frame { position: absolute; left: 50%; top: 50%; z-index: 2; width: calc(var(--R, 200px) * 2.4); height: calc(var(--R, 200px) * 2.4);
	transform: translate(-50%, -50%); overflow: visible; pointer-events: none; opacity: var(--frame, 1); }
.ei .frame__star { fill: none; stroke: var(--ei-gold-2); stroke-width: .012; }
.ei .frame__ring { fill: none; stroke: rgba(240,196,106,.5); stroke-width: .004; }
.ei .frame__text { fill: var(--ei-gold-2); font: 400 .068px var(--ei-display); letter-spacing: .02px; }
.ei .hero__frame.is-spin text { animation: ei-spin 80s linear infinite; transform-origin: 0 0; }
@keyframes ei-spin { to { transform: rotate(360deg); } }
.ei .hero__frame .frame__star { stroke-dasharray: 9; stroke-dashoffset: 9; animation: ei-draw 2.2s .2s ease-out forwards; }
@keyframes ei-draw { to { stroke-dashoffset: 0; } }

.ei .hero__copy { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ei .hero__copy a, .ei .hero__copy .btn { pointer-events: auto; }
.ei .hero__title { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font: 400 clamp(52px, 8.2vw, 136px)/.95 var(--ei-display);
	letter-spacing: -0.015em; display: flex; justify-content: space-between; padding: 0 var(--ei-gut); max-width: 1600px; margin: 0 auto; color: inherit; }
.ei .hero__title span { display: block; white-space: nowrap; transition: transform .1s linear, opacity .1s linear; text-shadow: 0 4px 40px rgba(5, 10, 30, .6); }
.ei .hero__title .t-left { transform: translateX(calc(var(--p, 0) * -40vw)); opacity: calc(1 - var(--p, 0) * 2.2); }
.ei .hero__title .t-right { transform: translateX(calc(var(--p, 0) * 40vw)); opacity: calc(1 - var(--p, 0) * 2.2); }
.ei .hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); max-width: 1600px; margin: 0 auto; padding: 0 var(--ei-gut);
	display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; opacity: calc(1 - var(--p, 0) * 3); }
.ei .hero__lede { max-width: 36ch; color: #d8dcec; font-size: 17.5px; }
.ei .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ei .hero__cue { position: absolute; top: calc(var(--ei-hdr) + 18px); left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--ei-light-2); white-space: nowrap; opacity: calc(1 - var(--p, 0) * 4); }

/* Elementor editor: one screen, no scroll-driven growth. */
.ei.hero.is-editor { height: 100vh !important; }

@media (max-width: 720px) {
	.ei.hero { height: 200vh; }
	.ei .hero__title { top: auto; bottom: calc(50% + var(--R, 120px) + 18px); transform: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: clamp(46px, 13vw, 60px); }
	.ei .hero__title .t-right { align-self: flex-end; }
	.ei .hero__foot { flex-direction: column; align-items: stretch; gap: 16px; }
	.ei .hero__lede { font-size: 15.5px; }
	.ei .hero__cta .btn { flex: 1 1 auto; }
	.ei .hero__after { grid-template-columns: minmax(0, 1fr); gap: 14px; bottom: 40px; }
	.ei .after__line { padding-top: 10px; }
	.ei .after__line b { font-size: 48px; margin-bottom: 2px; }
}

/* Portrait tablets: the phone composition (title above the star), at tablet scale. */
@media (min-width: 721px) and (max-width: 1020px) and (orientation: portrait) {
	.ei .hero__title { top: auto; bottom: calc(50% + var(--R, 200px) + 28px); transform: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: clamp(64px, 11vw, 104px); }
	.ei .hero__title .t-right { align-self: flex-end; }
	.ei .hero__lede { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.ei .hero__frame .frame__star { stroke-dashoffset: 0 !important; }
}