/*
 * Al Duffa · motion — scroll reveals, hover effects, hero entrance, photo pop-up.
 * Loaded after the design's stylesheet on the pages that use the design (Home, program pages).
 * Everything here is switched off for visitors who ask their system for reduced motion.
 * The reveal classes (.mo / .mo-in) are added and removed by alduffa-motion.js, so without
 * JavaScript nothing is ever hidden.
 */

/* ------------------------------------------------------------------ reveal on scroll */
.mo {
	opacity: 0;
	transition:
		opacity .85s cubic-bezier(.2, .7, .2, 1) calc(var(--mo-i, 0) * 90ms),
		transform .95s cubic-bezier(.2, .7, .2, 1) calc(var(--mo-i, 0) * 90ms);
	will-change: opacity, transform;
}
.mo[data-mo="up"]    { transform: translateY(42px); }
.mo[data-mo="left"]  { transform: translateX(-56px); }
.mo[data-mo="right"] { transform: translateX(56px); }
html[dir="rtl"] .mo[data-mo="left"]  { transform: translateX(56px); }
html[dir="rtl"] .mo[data-mo="right"] { transform: translateX(-56px); }
.mo[data-mo="zoom"]  { transform: translateY(26px) scale(.9); }
.mo[data-mo="fade"]  { transform: none; }
.mo.mo-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ hero */
@keyframes moUp   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes moKen  { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes moGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(199, 161, 91, .55); } 60% { box-shadow: 0 0 0 16px rgba(199, 161, 91, 0); } }
@keyframes moPing { 0% { box-shadow: 0 0 0 0 rgba(55, 200, 113, .55); } 100% { box-shadow: 0 0 0 12px rgba(55, 200, 113, 0); } }

.hero-copy > * { animation: moUp 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: .10s; }
.hero-copy > *:nth-child(2) { animation-delay: .25s; }
.hero-copy > *:nth-child(3) { animation-delay: .42s; }
.hero-copy > *:nth-child(4) { animation-delay: .60s; }
.hero-copy > *:nth-child(5) { animation-delay: .78s; }
.hero .slide.on { animation: moKen 7s ease-out both; }
.hero .ctas .btn-gold { animation: moGlow 2.8s ease-out 1.6s infinite; }
.slide-ui { animation: moUp 1s cubic-bezier(.2, .7, .2, 1) .9s both; }

/* ------------------------------------------------------------------ scroll progress bar */
.mo-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 65;
	pointer-events: none;
	background: linear-gradient(90deg, #c7a15b, #f0d9a0 60%, #c7a15b);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
html[dir="rtl"] .mo-progress { transform-origin: 100% 50%; }

/* ------------------------------------------------------------------ hover effects */
.btn { position: relative; overflow: hidden; }
.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
	transform: translateX(-130%);
	pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); transition: transform .75s ease; }
.btn:hover { transform: translateY(-2px); }

.chat-fab i { animation: moPing 2s ease-out infinite; }

/* the four cards under the hero */
.quick .qcard, .quick a {
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.quick .qcard:hover, .quick a:hover {
	transform: translateY(-9px);
	border-top-color: var(--gold);
	box-shadow: 0 26px 48px rgba(16, 50, 71, .15);
}
.quick .ic { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), background .3s ease, color .3s ease; }
.quick .qcard:hover .ic, .quick a:hover .ic {
	transform: rotate(-9deg) scale(1.14);
	background: var(--navy);
	color: #fff;
}

/* photo cards (campus + student activities) */
.act-grid .slot, .bld-grid .slot {
	cursor: zoom-in;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
	isolation: isolate;
}
.act-grid .slot:hover, .bld-grid .slot:hover {
	transform: translateY(-7px) scale(1.025);
	box-shadow: 0 30px 56px rgba(8, 30, 61, .3);
	z-index: 2;
}
.act-grid .slot::after, .bld-grid .slot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .3) 50%, transparent 68%);
	transform: translateX(-125%);
	pointer-events: none;
}
.act-grid .slot:hover::after, .bld-grid .slot:hover::after { transform: translateX(125%); transition: transform .9s ease; }
.act-grid .slot::before, .bld-grid .slot::before {
	content: "";
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 42px;
	height: 42px;
	z-index: 3;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092434' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center / 22px no-repeat;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: scale(.5) rotate(-30deg);
	transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1);
	pointer-events: none;
}
.act-grid .slot:hover::before, .bld-grid .slot:hover::before { opacity: 1; transform: none; }
.slot .slot-in b, .slot .slot-in small { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.slot:hover .slot-in b { transform: translateY(-5px); }

/* in-place tile slider crossfade (see alduffa-motion.js) */
.act-grid .slot, .bld-grid .slot { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, opacity .35s ease; }
.act-grid .slot.mo-tile-fade, .bld-grid .slot.mo-tile-fade { opacity: .4; }
.slot:hover .slot-in small { transform: translateY(-3px); }

.cta-tile, .ev, .init-card, .logo-slot, .num, .prog {
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .3s ease;
}
.cta-tile:hover, .init-card:hover, .num:hover, .prog:hover { transform: translateY(-6px); box-shadow: 0 22px 42px rgba(16, 50, 71, .14); }
.ev:hover { transform: translateX(6px); }
html[dir="rtl"] .ev:hover { transform: translateX(-6px); }
.logo-slot:hover { transform: translateY(-4px) scale(1.04); }

/* ------------------------------------------------------------------ photo pop-up */
.mo-lb {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 5vw 8vh;
	background: rgba(5, 18, 30, 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
}
.mo-lb[hidden] { display: none; }
.mo-lb.open { background: rgba(5, 18, 30, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.mo-lb-lock { overflow: hidden; }

.mo-lb-fig {
	position: relative;
	margin: 0;
	max-width: min(1240px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	opacity: 0;
	transition: opacity .3s ease;
}
.mo-lb.open .mo-lb-fig { opacity: 1; }
.mo-lb-stage {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
	background: #0b2231;
	cursor: zoom-in;
	line-height: 0;
}
.mo-lb-stage.zoomed { cursor: zoom-out; }
.mo-lb-stage img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 8vh - 8vh - 96px);
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
	user-select: none;
	-webkit-user-drag: none;
}
.mo-lb-stage.zoomed img { transform: scale(1.9); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }

/* Autoplay countdown — thin gold bar along the bottom edge of the photo. */
.mo-lb-progress {
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: rgba(255, 255, 255, .18);
	overflow: hidden;
}
.mo-lb-progress > span {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, #c7a15b, #f0d9a0 60%, #c7a15b);
}
html[dir="rtl"] .mo-lb-progress > span { transform-origin: 100% 50%; }

.mo-lb-cap { text-align: center; color: #fff; max-width: 70ch; }
.mo-lb-cap b { display: block; font-family: var(--display, "DM Serif Display", serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.01em; }
.mo-lb-cap span { display: block; margin-top: 4px; color: #c9d6dc; font-size: .98rem; line-height: 1.5; }
.mo-lb-count { position: absolute; top: 22px; inset-inline-start: 26px; color: #dbe6ea; font-size: .85rem; font-weight: 700; letter-spacing: .12em; }

/* Dot navigation — jump straight to a photo in this card's own gallery. */
.mo-lb-dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mo-lb-dots[hidden] { display: none; }
.mo-lb-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: width .35s cubic-bezier(.2, .7, .2, 1), background .25s ease;
}
.mo-lb-dot:hover { background: rgba(255, 255, 255, .6); }
.mo-lb-dot.active { width: 24px; background: #c7a15b; }

.mo-lb-x, .mo-lb-nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	transition: background .25s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1), border-color .25s ease;
}
.mo-lb-x:hover, .mo-lb-nav:hover { background: rgba(199, 161, 91, .9); border-color: transparent; transform: scale(1.1); }
.mo-lb-x { top: 20px; inset-inline-end: 24px; }
.mo-lb-nav { top: 50%; margin-top: -26px; }
.mo-lb-prev { inset-inline-start: 24px; }
.mo-lb-next { inset-inline-end: 24px; }
html[dir="rtl"] .mo-lb-nav svg { transform: scaleX(-1); }
.mo-lb-nav svg { width: 24px; height: 24px; }
.mo-lb-nav[hidden] { display: none; }

@media (max-width: 720px) {
	.mo-lb { padding: 64px 12px 24px; }
	.mo-lb-stage img { max-height: calc(100vh - 210px); }
	.mo-lb-nav { top: auto; bottom: 18px; margin-top: 0; width: 46px; height: 46px; }
	.mo-lb-prev { inset-inline-start: calc(50% - 60px); }
	.mo-lb-next { inset-inline-end: calc(50% - 60px); }
	.mo-lb-x { top: 12px; inset-inline-end: 14px; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mo { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hero-copy > *, .slide-ui, .hero .slide.on, .hero .ctas .btn-gold, .chat-fab i { animation: none !important; }
	.mo-progress { display: none; }
	.btn::after, .slot::after { display: none; }
	.mo-lb, .mo-lb-fig, .mo-lb-stage img { transition: none !important; }
}