/* ==========================================================================
   MMPS v3 showcase widgets — cinematic hero, scroll story, big marquee,
   horizontal scroll panels, expanding gallery + global scroll progress.
   Behaviour: assets/awards.js
   ========================================================================== */

/* ---------------- Global: page scroll progress bar ---------------- */
.mmps-pageprogress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000;
	background: transparent; pointer-events: none;
}
.mmps-pageprogress i {
	display: block; height: 100%; width: 100%;
	background: linear-gradient(90deg, var(--mmps-gold), #ffd479);
	transform: scaleX(0); transform-origin: left;
}

/* ==========================================================================
   1. Cinematic hero
   ========================================================================== */
.mmps-herov3 {
	position: relative; min-height: 100svh;
	display: flex; align-items: flex-end;
	overflow: hidden; background: var(--mmps-navy); color: #fff;
}

.mmps-herov3__media { position: absolute; inset: 0; }
.mmps-herov3__slide {
	position: absolute; inset: 0; opacity: 0;
	transition: opacity 1.4s var(--mmps-ease);
}
.mmps-herov3__slide.is-active { opacity: 1; }
.mmps-herov3__slide video,
.mmps-herov3__img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; background-size: cover; background-position: center;
}
.mmps-herov3__slide.is-active .mmps-herov3__img {
	animation: mmps-v3-kenburns 12s var(--mmps-ease) forwards;
}
@keyframes mmps-v3-kenburns {
	from { transform: scale(1.12) translateY(0); }
	to   { transform: scale(1.02) translateY(-1.5%); }
}

.mmps-herov3__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8,29,66,.46) 0%, rgba(8,29,66,.12) 42%, rgba(8,29,66,.78) 100%),
		linear-gradient(78deg, rgba(8,29,66,.62) 0%, rgba(8,29,66,.05) 60%);
}

.mmps-herov3__content {
	position: relative; z-index: 2;
	width: min(100% - 48px, 1480px); margin-inline: auto;
	padding: calc(var(--mmps-header-h) + 40px) 0 150px;
	will-change: transform, opacity;
}

.mmps-herov3__kicker {
	display: flex; align-items: center; gap: 16px;
	font-size: clamp(.7rem, 1.3vw, .88rem); font-weight: 700;
	letter-spacing: .5em; text-transform: uppercase; color: var(--mmps-gold);
	margin: 0 0 1.8em;
	opacity: 0; transform: translateY(20px);
	animation: mmps-rise 1s var(--mmps-ease) .25s forwards;
}
.mmps-herov3__kicker-line {
	width: 64px; height: 1px; background: var(--mmps-gold); flex: 0 0 auto;
	transform-origin: left;
	animation: mmps-v3-line 1.1s var(--mmps-ease) .4s backwards;
}
@keyframes mmps-v3-line { from { transform: scaleX(0); } }

.mmps-herov3 .mmps-herov3__title {
	font-family: var(--font-display); font-weight: 600; color: #fff;
	font-size: clamp(2.9rem, 9.5vw, 7.4rem); line-height: .98;
	letter-spacing: -.01em; margin: 0; max-width: 13ch; min-height: 1.95em;
}
.mmps-herov3 .mmps-herov3__title .mmps-c { color: inherit; }
.mmps-herov3 .mmps-herov3__title em { font-style: italic; color: var(--mmps-gold); }
/* split-character animation (spans injected by awards.js) */
.mmps-herov3__title .mmps-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.mmps-herov3__title .mmps-c {
	display: inline-block; transform: translateY(115%) rotate(4deg);
	animation: mmps-v3-char .85s var(--mmps-ease) forwards;
}
@keyframes mmps-v3-char { to { transform: translateY(0) rotate(0); } }

.mmps-herov3__sub {
	max-width: 520px; margin: 1.8em 0 0;
	color: rgba(255,255,255,.85); font-size: clamp(.95rem, 1.6vw, 1.08rem); line-height: 1.75;
	opacity: 0; transform: translateY(20px);
	animation: mmps-rise 1s var(--mmps-ease) .9s forwards;
}

.mmps-herov3__actions {
	display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2.4em;
	opacity: 0; transform: translateY(20px);
	animation: mmps-rise 1s var(--mmps-ease) 1.15s forwards;
}

/* slide counter + timing bar */
.mmps-herov3__hud {
	position: absolute; z-index: 3; right: max(24px, calc((100vw - 1480px) / 2)); bottom: 56px;
	display: flex; align-items: center; gap: 18px;
}
.mmps-herov3__count { font-family: var(--font-display); font-size: 1rem; color: rgba(255,255,255,.85); letter-spacing: .08em; }
.mmps-herov3__count b { font-size: 1.7rem; font-weight: 600; color: #fff; }
.mmps-herov3__count i { font-style: normal; opacity: .5; margin: 0 2px; }
.mmps-herov3__bar { display: block; width: 120px; height: 2px; background: rgba(255,255,255,.25); overflow: hidden; border-radius: 2px; }
.mmps-herov3__bar i {
	display: block; height: 100%; width: 100%;
	background: var(--mmps-gold);
	transform: scaleX(0); transform-origin: left;
}
.mmps-herov3__bar i.is-running { animation: mmps-v3-bar linear forwards; animation-duration: var(--dur, 7s); }
@keyframes mmps-v3-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mmps-herov3__scrollcue {
	position: absolute; z-index: 3; left: max(24px, calc((100vw - 1480px) / 2)); bottom: 48px;
	color: #fff; font-size: .66rem; letter-spacing: .4em; text-transform: uppercase;
	text-decoration: none; opacity: .8; display: flex; align-items: center; gap: 12px;
}
.mmps-herov3__scrollcue::after {
	content: ""; width: 44px; height: 1px;
	background: linear-gradient(90deg, var(--mmps-gold), transparent);
	animation: mmps-v3-cue 2s var(--mmps-ease) infinite;
}
@keyframes mmps-v3-cue {
	0% { transform: scaleX(0); transform-origin: left; }
	55% { transform: scaleX(1); transform-origin: left; }
	100% { transform: scaleX(0); transform-origin: right; }
}

/* ==========================================================================
   2. Scroll story (sticky media switch)
   ========================================================================== */
.mmps-story { padding: 110px 24px; }
.mmps-story--dark {
	background: linear-gradient(175deg, var(--mmps-navy) 0%, #081d42 100%);
	color: rgba(255,255,255,.85);
}
.mmps-story__head { width: min(100%, 1280px); margin: 0 auto 30px; }
.mmps-story--dark .mmps-story__head .mmps-sec__title { color: #fff; }
.mmps-story--dark .mmps-story__head .mmps-kicker { color: var(--mmps-gold); }

.mmps-story__layout {
	width: min(100%, 1280px); margin: 0 auto;
	display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.mmps-story--media-right .mmps-story__stickywrap { order: 2; }

.mmps-story__stickywrap { position: relative; height: 100%; }
.mmps-story__media {
	position: sticky; top: calc(var(--mmps-header-h-scrolled, 68px) + 36px);
	height: min(72svh, 680px); border-radius: 24px; overflow: hidden;
	box-shadow: 0 40px 90px rgba(4,15,38,.45);
}
.mmps-story--light .mmps-story__media { box-shadow: 0 30px 70px rgba(13,47,107,.2); }
.mmps-story__frame {
	position: absolute; inset: 0; margin: 0;
	opacity: 0; transform: scale(1.07);
	transition: opacity .9s var(--mmps-ease), transform 1.2s var(--mmps-ease);
}
.mmps-story__frame.is-active { opacity: 1; transform: scale(1); }
.mmps-story .mmps-story__frame img,
.mmps-story .mmps-story__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmps-story__index {
	position: absolute; left: 22px; bottom: 16px; z-index: 2;
	font-family: var(--font-display); color: rgba(255,255,255,.8); letter-spacing: .08em;
	text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.mmps-story__index b { font-size: 1.9rem; font-weight: 600; color: #fff; }

.mmps-story__steps { display: flex; flex-direction: column; }
.mmps-story__step {
	min-height: 86svh; display: flex; flex-direction: column; justify-content: center;
	padding: 12vh 0; position: relative;
	opacity: .25; transition: opacity .6s var(--mmps-ease);
}
.mmps-story__step.is-active { opacity: 1; }
.mmps-story__num {
	font-family: var(--font-display); font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.35);
	margin-bottom: 18px;
}
.mmps-story--light .mmps-story__num { -webkit-text-stroke-color: rgba(13,47,107,.3); }
.mmps-story__kicker {
	font-size: .74rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
	color: var(--mmps-gold); margin: 0 0 .9em;
}
.mmps-story--light .mmps-story__kicker { color: var(--mmps-royal); }
.mmps-story .mmps-story__title {
	font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	color: #fff; margin: 0 0 .5em;
}
.mmps-story--light .mmps-story__title { color: var(--mmps-navy); }
.mmps-story__text { margin: 0; max-width: 46ch; line-height: 1.85; }
.mmps-story--light .mmps-story__text { color: #4a5268; }
.mmps-story__link {
	display: inline-block; margin-top: 1.6em; font-weight: 700; font-size: .92rem;
	color: var(--mmps-gold); text-decoration: none; letter-spacing: .04em;
}
.mmps-story--light .mmps-story__link { color: var(--mmps-royal); }
.mmps-story__link:hover { text-decoration: underline; }

/* ==========================================================================
   3. Oversized text marquee
   ========================================================================== */
.mmps-bigmq { overflow: hidden; padding: clamp(28px, 5vh, 56px) 0; user-select: none; }
.mmps-bigmq__track { display: flex; width: max-content; will-change: transform; }
.mmps-bigmq__group { display: flex; align-items: center; flex: 0 0 auto; }
.mmps-bigmq__word {
	font-family: var(--font-display); font-weight: 600; white-space: nowrap;
	font-size: clamp(3.2rem, 9vw, 8.2rem); line-height: 1; padding: 0 .35em;
}
.mmps-bigmq__sep { font-size: clamp(1.1rem, 2.6vw, 2rem); opacity: .55; }
.mmps-bigmq--navy .mmps-bigmq__word { color: var(--mmps-navy); }
.mmps-bigmq--navy .mmps-bigmq__sep { color: var(--mmps-gold); }
.mmps-bigmq--navy .mmps-bigmq__word.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(13,47,107,.5); }
.mmps-bigmq--light .mmps-bigmq__word { color: #fff; }
.mmps-bigmq--light .mmps-bigmq__sep { color: var(--mmps-gold); }
.mmps-bigmq--light .mmps-bigmq__word.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.mmps-bigmq--gold .mmps-bigmq__word { color: var(--mmps-gold); }
.mmps-bigmq--gold .mmps-bigmq__sep { color: var(--mmps-navy); }
.mmps-bigmq--gold .mmps-bigmq__word.is-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(242,178,51,.6); }

/* ==========================================================================
   4. Horizontal scroll panels
   ========================================================================== */
.mmps-hscroll { position: relative; }
.mmps-hscroll__sticky {
	position: sticky; top: 0; min-height: 100svh; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	padding: calc(var(--mmps-header-h-scrolled, 68px) + 20px) 0 40px;
}
.mmps-hscroll__head {
	width: min(100% - 48px, 1280px); margin: 0 auto 34px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.mmps-hscroll__head .mmps-sec__title { margin-bottom: 0; }
.mmps-hscroll__progress {
	flex: 0 1 220px; height: 2px; background: rgba(13,47,107,.15);
	border-radius: 2px; overflow: hidden; margin-bottom: 12px;
}
.mmps-hscroll__progress i {
	display: block; height: 100%; width: 100%; background: var(--mmps-gold);
	transform: scaleX(0); transform-origin: left;
}

.mmps-hscroll__viewport { overflow: hidden; }
.mmps-hscroll__track {
	display: flex; gap: clamp(18px, 2.4vw, 30px); width: max-content;
	padding-left: max(24px, calc((100vw - 1280px) / 2));
	padding-right: max(24px, calc((100vw - 1280px) / 2));
	will-change: transform;
}
.mmps-hscroll__card {
	position: relative; width: min(420px, 80vw); flex: 0 0 auto;
	border-radius: 22px; overflow: hidden; background: #fff;
	box-shadow: 0 18px 50px rgba(13,47,107,.12);
	display: flex; flex-direction: column;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.mmps-hscroll__card:hover {
	transform: translateY(-8px);
	box-shadow: 0 30px 70px rgba(13,47,107,.2);
}
.mmps-hscroll__card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--mmps-gold), #ffc14d);
	transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.mmps-hscroll__card:hover::before { transform: scaleX(1); }
.mmps-hscroll__card:hover h3 { color: var(--mmps-royal); }
.mmps-hscroll__body h3 { transition: color .3s; }
.mmps-hscroll__media { aspect-ratio: 4 / 3; overflow: hidden; }
.mmps-hscroll .mmps-hscroll__media img {
	width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
	transition: transform .8s var(--mmps-ease);
}
.mmps-hscroll__card:hover .mmps-hscroll__media img { transform: scale(1.06); }

/* Vertical grid layout — normal down-scrolling, no sticky viewport */
.mmps-hscroll--grid { width: min(100% - 48px, 1200px); margin-inline: auto; padding: 90px 0; }
.mmps-hscroll--grid .mmps-hscroll__head { margin-bottom: 34px; }
.mmps-hscroll--grid .mmps-hscroll__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px;
}
.mmps-hscroll--grid .mmps-hscroll__card { width: auto; min-width: 0; flex: initial; }

/* Carousel layout — N cards per view, scroll-snap track + arrows (uses data-mmps-carousel engine) */
.mmps-hscroll--carousel { position: relative; width: min(100% - 48px, 1200px); margin-inline: auto; padding: 90px 0; height: auto; }
.mmps-hscroll--carousel .mmps-hscroll__head { margin-bottom: 30px; }
.mmps-hscroll__carousel-wrap { position: relative; }
.mmps-hscroll__carousel {
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none;
	padding: 34px 2px 6px;
}
.mmps-hscroll__carousel::-webkit-scrollbar { display: none; }
.mmps-hscroll--carousel .mmps-hscroll__card {
	flex: 0 0 calc((100% - (var(--mmps-per-view, 3) - 1) * 24px) / var(--mmps-per-view, 3));
	width: auto; min-width: 0; flex-shrink: 0; scroll-snap-align: start;
}
.mmps-carousel-nav { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.mmps-carousel-nav button {
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(11,31,58,.16);
	background: #fff; color: var(--mmps-navy); font-size: 1.15rem; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.mmps-carousel-nav button:hover { background: var(--mmps-navy); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,31,58,.18); }
@media (max-width: 900px) {
	.mmps-hscroll--carousel .mmps-hscroll__card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
	.mmps-hscroll--carousel { padding: 56px 0; }
	.mmps-hscroll--carousel .mmps-hscroll__card { flex-basis: 86%; }
}

.mmps-hscroll__body { position: relative; padding: 26px 28px 30px; }
.mmps-hscroll__num {
	position: absolute; top: -34px; right: 18px;
	font-family: var(--font-display); font-size: 3.6rem; line-height: 1; font-weight: 600;
	color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.mmps-hscroll__tag {
	display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: var(--mmps-royal);
	background: var(--mmps-light); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px;
}
.mmps-hscroll__body h3 { font-family: var(--font-display); color: var(--mmps-navy); font-size: 1.5rem; margin: 0 0 8px; }
.mmps-hscroll__body p { margin: 0; color: #4a5268; font-size: .93rem; line-height: 1.7; }
.mmps-hscroll__link {
	position: absolute; right: 22px; bottom: 22px;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--mmps-gold); color: var(--mmps-navy);
	font-size: 1.2rem; text-decoration: none;
	transition: transform .35s var(--mmps-ease), background .3s;
}
.mmps-hscroll__link:hover { transform: scale(1.1) rotate(-45deg); background: #ffc14d; }

/* reserve space beneath the text so the arrow never overlaps it */
.mmps-hscroll__card:has(.mmps-hscroll__link) .mmps-hscroll__body { padding-bottom: 82px; }
/* fallback for browsers without :has() — grid cards always reserve the corner */
@supports not selector(:has(a)) {
	.mmps-hscroll--grid .mmps-hscroll__body { padding-bottom: 82px; }
}

/* mobile: natural swipe instead of scroll-jacking */
@media (max-width: 860px) {
	.mmps-hscroll { height: auto !important; }
	.mmps-hscroll__sticky { position: static; min-height: 0; }
	.mmps-hscroll__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
	.mmps-hscroll__track { transform: none !important; }
	.mmps-hscroll__card { scroll-snap-align: center; }
	.mmps-hscroll__progress { display: none; }
}

/* ==========================================================================
   5. Expanding gallery
   ========================================================================== */
.mmps-exgal {
	display: flex; gap: 12px; height: clamp(380px, 62vh, 620px);
}
.mmps-exgal__panel {
	position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden;
	border: 0; padding: 0; cursor: pointer; border-radius: 18px; background: var(--mmps-navy);
	transition: flex-grow .85s var(--mmps-ease);
}
.mmps-exgal__panel.is-open { flex-grow: 4.2; }
.mmps-exgal .mmps-exgal__panel img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform 1s var(--mmps-ease), opacity .5s;
	opacity: .92;
}
.mmps-exgal__panel.is-open img { opacity: 1; }
.mmps-exgal__panel:hover img { transform: scale(1.04); }
.mmps-exgal__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; text-align: left;
	padding: 22px 22px 18px; gap: 2px;
	background: linear-gradient(180deg, transparent, rgba(8,29,66,.85));
	color: #fff; opacity: 0; transform: translateY(14px);
	transition: opacity .5s var(--mmps-ease) .15s, transform .5s var(--mmps-ease) .15s;
}
.mmps-exgal__panel.is-open .mmps-exgal__cap { opacity: 1; transform: none; }
.mmps-exgal__cap strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.mmps-exgal__cap em { font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mmps-gold); white-space: nowrap; }

@media (max-width: 760px) {
	.mmps-exgal { flex-direction: column; height: auto; }
	.mmps-exgal__panel { height: 64px; flex: 0 0 auto; transition: height .7s var(--mmps-ease); }
	.mmps-exgal__panel.is-open { height: 320px; flex-grow: 0; }
	.mmps-exgal__panel img { position: absolute; }
}

/* ==========================================================================
   Responsive + reduced motion
   ========================================================================== */
@media (max-width: 920px) {
	.mmps-story__layout { grid-template-columns: 1fr; gap: 0; }
	.mmps-story--media-right .mmps-story__stickywrap { order: 0; }
	.mmps-story__media { top: calc(var(--mmps-header-h-scrolled, 68px) + 12px); height: 38svh; z-index: 5; }
	.mmps-story__step { min-height: 0; padding: 14vh 0; opacity: 1; }
	.mmps-herov3__hud { display: none; }
	.mmps-herov3__content { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.mmps-pageprogress { display: none; }
	.mmps-herov3__slide.is-active .mmps-herov3__img { animation: none; transform: none; }
	.mmps-herov3__kicker, .mmps-herov3__sub, .mmps-herov3__actions { animation: none; opacity: 1; transform: none; }
	.mmps-herov3__title .mmps-c { animation: none; transform: none; }
	.mmps-story__frame, .mmps-story__step { transition: none; }
	.mmps-story__step { opacity: 1; }
	.mmps-bigmq__track { transform: none !important; }
	.mmps-hscroll__sticky { position: static; min-height: 0; }
	.mmps-hscroll { height: auto !important; }
	.mmps-hscroll__viewport { overflow-x: auto; }
	.mmps-hscroll__track { transform: none !important; }
}