/* Shared homepage campaign demonstration. */
.campaign-story { --campaign-gutter: max(32px, calc((100vw - 1280px) / 2)); --campaign-ease: cubic-bezier(.22,.68,.18,1); padding: var(--fotogenic-section-start) 0 var(--fotogenic-section-end); overflow: clip; color: #111217; background: #fff; scroll-margin-top: 110px; }
.campaign-story__shell { max-width: 1280px; margin-inline: auto; width: calc(100% - 64px); }
.fotogenic-scope .campaign-story h2 { margin: 0; text-wrap: balance; }
.campaign-story h2 span { background: linear-gradient(105deg,#5520a8 0%,#7c3aed 24%,#1d4ed8 43%,#a855f7 50%,#be185d 64%,#6d28d9 82%,#5520a8 100%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: campaign-gradient 6.5s ease-in-out infinite alternate; animation-play-state: paused; }
.campaign-story.is-visible h2 span { animation-play-state: running; }
.fotogenic-scope .campaign-story__heading > p { margin: var(--fotogenic-title-intro-gap) 0 0; max-width: 540px;   text-wrap: balance; max-inline-size: min(100%, 32ch);}
.campaign-story__top { margin-bottom: var(--fotogenic-content-gap); }
.campaign-story__heading { min-width: 0; }
.campaign-story__layout { position: relative; isolation: isolate; display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 28px; }
.fotogenic-scope .campaign-story__label { position: absolute; top: 16px; left: 16px; z-index: 4; margin: 0; padding: 8px 12px; border: 1px solid #ffffffb3; border-radius: 12px; color: #25202c; background: #ffffffdf; backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); box-shadow: inset 0 1px 0 #ffffffe6, 0 4px 18px #2923330d; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.campaign-story figure { margin: 0; }
.campaign-story [hidden] { display: none; }
/* Reserve control geometry before enhancement to prevent the original image resizing. */
.campaign-story [data-campaign-controls] { visibility: hidden; }
.campaign-story.is-enhanced [data-campaign-controls] { visibility: visible; }
.campaign-story__sources { position: relative; display: grid; isolation: isolate; }
.campaign-story__source { grid-area: 1 / 1; aspect-ratio: 4 / 5; overflow: hidden; background: #f2f1f0; border: 1px solid #d4cbea; border-radius: 12px; box-shadow: -1px -1px 0 #a57aff55; }
.fotogenic-scope .campaign-story__source img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-story__selection { margin-top: 14px; }
.fotogenic-scope .campaign-story__selection > p { margin: 0 0 11px; font-size: 13px; line-height: 1.5; }
.campaign-story__products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.campaign-story button { font: inherit; color: inherit; background: none; border: 0; padding: 0; box-shadow: none; cursor: pointer; }
.campaign-story__products button { position: relative; display: grid; gap: 6px; align-content: start; font-size: 12px; line-height: 1.4; text-align: center; }
@property --campaign-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.campaign-story__thumbnail { position: relative; display: block; aspect-ratio: 1; padding: 2px; border-radius: 11px; background: transparent; }
.fotogenic-scope .campaign-story__products img { position: absolute; inset: 2px; display: block; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; border-radius: 9px; }
.campaign-story__products button[aria-pressed=true] .campaign-story__thumbnail { background: conic-gradient(from var(--campaign-border-angle), #a57aff, #7197ed 22%, #e0ccff 38%, #bd70cc 55%, #7846dd 75%, #a57aff); animation: campaign-border-orbit 3s linear infinite; animation-play-state: paused; }
.campaign-story.is-visible .campaign-story__products button[aria-pressed=true] .campaign-story__thumbnail { animation-play-state: running; }
@keyframes campaign-border-orbit { to { --campaign-border-angle: 360deg; } }
.campaign-story__products button[aria-pressed=true] { font-weight: 600; color: #69449d; }
.campaign-story__products button::after { content: ""; position: absolute; inset: auto 25% -5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,#a57aff,#7197ed,#bd70cc); transform: scaleX(0); transition: transform 420ms var(--campaign-ease); }
.campaign-story__products button[aria-pressed=true]::after { transform: scaleX(1); }
.campaign-story button:focus-visible, .campaign-story__viewport:focus-visible { outline: 2px solid #69449d; outline-offset: 4px; border-radius: 6px; }
.campaign-story__results { position: relative; min-width: 0; isolation: isolate; }
.campaign-story__source, .campaign-story__result { position: relative; z-index: 1; }
.campaign-story__viewport { display: grid; width: calc(100% + var(--campaign-gutter)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.campaign-story__viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.campaign-story__viewport::-webkit-scrollbar { display: none; }
.campaign-story__track { grid-area: 1 / 1; align-self: start; display: flex; width: max-content; gap: 14px; padding-right: var(--campaign-gutter); }
.campaign-story__result { flex: 0 0 auto; width: 364px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #f2f1f0; scroll-snap-align: start; }
.fotogenic-scope .campaign-story__result img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campaign-story__navigation { display: flex; justify-content: center; gap: 8px; align-items: center; min-height: 44px; margin: 8px auto 0; }
.campaign-story__progress { display: flex; gap: 10px; }
.campaign-story__progress button { width: 44px; height: 44px; position: relative; }
.campaign-story__progress button::before, .campaign-story__progress button span { content: ''; position: absolute; inset: 20px 0; border-radius: 4px; background: #e4e5ea; }
.campaign-story__progress button span { background: linear-gradient(90deg,#925bfa,#b599ff); transform: scaleX(0); transform-origin: left; }
.campaign-story__progress button[aria-pressed=true]::before { background: #e4dafc; }
.campaign-story__navigation > button { width: 44px; height: 44px; display: grid; place-items: center; transition: color 180ms, transform 180ms; }
.campaign-story__arrow { width: 25px; height: 25px; transform: rotate(45deg); stroke-width: 1.5; }
.campaign-story__arrow--prev { transform: rotate(225deg); }
.campaign-story .campaign-story__pause { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.campaign-story .campaign-story__pause:focus-visible { position: relative; width: auto; height: auto; clip-path: none; padding: 10px; }
.fotogenic-scope .campaign-story__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.campaign-story__status:empty { display: none; }
/* Keep the current images visible while the next set decodes. */
.campaign-story.is-loading .campaign-story__navigation { opacity: .6; }
@keyframes campaign-gradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (hover:hover) { .campaign-story__navigation > button:hover { color: #69449d; transform: translateX(2px); } }
@media (min-width: 701px) {
 .campaign-story__original { display: grid; grid-template-rows: minmax(0,1fr) auto; }
 .campaign-story__sources { position: relative; min-height: 0; }
 .campaign-story__sources .campaign-story__source { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
 .campaign-story__selection { padding-bottom: 5px; }
}
@media (min-width: 1700px) { .campaign-story__result { width: 390px; } }
@media (max-width: 1100px) { .campaign-story__layout { grid-template-columns: 230px minmax(0,1fr); gap: 24px; } .campaign-story__result { width: 320px; }  }
@media (max-width: 700px) {
 .campaign-story { --campaign-gutter: 20px; padding: var(--fotogenic-section-start) 0 var(--fotogenic-section-end); scroll-margin-top: 90px; }
 .campaign-story__shell { width: calc(100% - 40px); }
 .campaign-story__top { margin-bottom: var(--fotogenic-content-gap); }
 .campaign-story__heading { width: 100%; }
 .fotogenic-scope .campaign-story h2 { font-size: var(--fotogenic-type-section-title); line-height: var(--fotogenic-leading-title); }
 .campaign-story h2 span { display: block; }
 .fotogenic-scope .campaign-story__heading > p { margin-top: var(--fotogenic-title-intro-gap); max-width: min(100%, 290px); }
 .campaign-story__layout { grid-template-columns: minmax(0,1fr); gap: 26px; }
 .campaign-story__original { display: grid; grid-template-columns: 112px minmax(0,1fr); column-gap: 20px; }
 .campaign-story__selection { margin-top: 0; align-self: center; }
 .campaign-story__products { gap: 7px; }
 .campaign-story__products button { font-size: 11px; }
 .fotogenic-scope .campaign-story__selection > p { font-size: 12px; margin-bottom: 10px; }
 .campaign-story__result { width: 78vw; max-width: 420px; }
 .campaign-story__track { gap: 12px; }
 .campaign-story__navigation { gap: 5px; margin: 8px auto 0; }
 .campaign-story__progress { gap: 5px; }
 .campaign-story__progress button { width: 40px; }
 .fotogenic-scope .campaign-story__label { top: 12px; left: 12px; font-size: 11px; padding: 7px 10px; }
 .fotogenic-scope .campaign-story__sources .campaign-story__label { top: 6px; left: 6px; font-size: 9px; padding: 5px 7px; border-radius: 8px; }
}

@media (max-width: 360px) { .campaign-story__original { grid-template-columns: 92px minmax(0,1fr); column-gap: 12px; } .campaign-story__products button { font-size: 10px; } .campaign-story__navigation > button { width: 36px; } .campaign-story__progress button { width: 30px; } }
@media (forced-colors: active) { .campaign-story h2 span { background: none; color: CanvasText; } .campaign-story__products button[aria-pressed=true] { outline: 2px solid Highlight; } }
@media (prefers-reduced-motion: reduce) { .fotogenic-scope .campaign-story *, .fotogenic-scope .campaign-story *::after, .campaign-story__products button[aria-pressed=true] .campaign-story__thumbnail { animation: none; transition: none; } }

@media (prefers-reduced-transparency: reduce) { .fotogenic-scope .campaign-story__label { background: #f3f0f6; backdrop-filter: none; -webkit-backdrop-filter: none; } }