/* Keep the moving ink on the photographed banner and behind its lettering. */
#sp24-home .hero-full .print > .sp24-hero-ink {
    pointer-events: none;
    border-color: rgba(121, 222, 255, .39);
}
#sp24-home .hero-full .dark-print > .sp24-hero-ink {
    border-color: #18b7ee;
}
#sp24-home .hero-full .print.active > .sp24-hero-ink {
    animation: sp24-ink-drift 4.8s cubic-bezier(.42, 0, .58, 1) infinite alternate;
}
#sp24-home .hero-full .white-print.active > .sp24-hero-ink {
    animation-name: sp24-ink-fold;
}
#sp24-home .hero-full .print::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 62%;
    background: linear-gradient(116deg, transparent 8%, rgba(155, 232, 255, .24) 48%, transparent 76%);
    transform: translateX(10%);
    pointer-events: none;
}
#sp24-home .hero-full .print.active::before {
    animation: sp24-ink-light 4.8s ease-in-out infinite alternate;
}
@keyframes sp24-ink-drift {
    0% { transform: translate(-18%, -9%) rotate(-31deg); }
    100% { transform: translate(16%, 10%) rotate(-18deg); }
}
@keyframes sp24-ink-fold {
    0% { transform: translate(-18%, 0) rotate(29deg); }
    100% { transform: translate(15%, 0) rotate(43deg); }
}
@keyframes sp24-ink-light {
    0% { transform: translateX(10%); opacity: .9; }
    100% { transform: translateX(98%); opacity: .48; }
}
@media (max-width: 700px) {
    #sp24-home .hero-full .print > .sp24-hero-ink {
        right: 3%;
        border-width: clamp(22px, 8vw, 48px);
    }
}

/* Full width for the photographic opener, with copy outside the image. */
#sp24-home .sp24-wide-opener {
    width: 100%;
    max-width: none;
}
#sp24-home .sp24-wide-opener .finale-heading {
    width: calc(100% - var(--gutter) * 2);
    max-width: 1536px;
    margin-inline: auto;
}
#sp24-home .sp24-wide-opener .application-stage {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}
#sp24-home .sp24-wide-opener .application-copy {
    padding: clamp(26px, 4.4vw, 82px);
}
#sp24-home .sp24-wide-opener .application-frame.active {
    animation: sp24-photo-reveal 1.25s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes sp24-photo-reveal {
    from { clip-path: inset(0 18% 0 0); }
    to { clip-path: inset(0); }
}

#sp24-home .moment-section {
    background: #172127;
    color: #f7fbfd;
}
#sp24-home .moment-section .moment-layout {
    width: 100%;
    max-width: none;
    gap: clamp(26px, 5vw, 86px);
}
#sp24-home .moment-section .moment-layout > div:first-child {
    padding-inline-start: max(var(--gutter), calc((100vw - 1536px) / 2));
}
#sp24-home .moment-section .moment-layout h2 {
    color: #f7fbfd;
}
#sp24-home .moment-section .moment-layout h2 em {
    color: #7cdbff;
}
#sp24-home .moment-section .moment-layout > div > p,
#sp24-home .moment-section .moment-options button,
#sp24-home .moment-section #moment-caption {
    color: #d0e0e8;
}
#sp24-home .moment-section .moment-options button.active {
    color: #7cdbff;
}
@media (max-width: 700px) {
    #sp24-home .moment-section .moment-layout > div:first-child,
    #sp24-home .moment-section #moment-caption {
        padding-inline: var(--gutter);
    }
}

/* Large source images give the print process the same weight as the hero. */
#sp24-home .sp24-process {
    --process-border: #385460;
    padding-block: clamp(40px, 5.5vw, 88px);
    background: #12252f;
    color: #f5f9fa;
}
#sp24-home .sp24-process__heading,
#sp24-home .sp24-process__tools {
    width: calc(100% - var(--gutter) * 2);
    max-width: 1536px;
    margin-inline: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 30px;
}
#sp24-home .sp24-process__heading h2 {
    color: inherit;
    font-size: clamp(34px, 4.8vw, 76px);
    font-weight: 850;
    letter-spacing: -.045em;
}
#sp24-home .sp24-process a {
    color: #9ee7ff;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 700;
}
#sp24-home .sp24-process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: clamp(25px, 3vw, 44px) 0 20px;
    padding: 0;
    gap: 1px;
    background: var(--process-border);
    border-block: 1px solid var(--process-border);
}
#sp24-home .sp24-process__grid li {
    min-width: 0;
    background: #172e39;
}
#sp24-home .sp24-process__figure {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #183642;
}
#sp24-home .sp24-process__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 49% 48%;
}
#sp24-home .sp24-process__figure--preview img {
    object-position: center;
}
#sp24-home .sp24-process__figure--finish img {
    object-position: 64% center;
}
#sp24-home .sp24-process__figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, #0a1e2870, transparent 40%);
}
#sp24-home .sp24-process__text {
    padding: clamp(20px, 3vw, 48px);
}
#sp24-home .sp24-process__text h3 {
    color: inherit;
    font-size: clamp(22px, 2.25vw, 36px);
    font-weight: 750;
    letter-spacing: -.03em;
}
#sp24-home .sp24-process__text p {
    color: #c6dbe4;
    margin-top: 10px;
    font-size: clamp(15px, 1.3vw, 18px);
}
#sp24-home .sp24-process__tools button {
    color: #f5f9fa;
    padding: 9px 14px;
    border: 1px solid #6d8b98;
    border-radius: 5px;
}
#sp24-home .sp24-process.is-ready .sp24-process__figure img {
    animation: sp24-process-detail 6s ease-in-out infinite alternate;
    animation-play-state: paused;
}
#sp24-home .sp24-process.is-visible:not(.is-paused) .sp24-process__figure img {
    animation-play-state: running;
}
@keyframes sp24-process-detail {
    from { transform: scale(1); }
    to { transform: scale(1.075); }
}
#sp24-home.motion-off .hero-full .print.active > .sp24-hero-ink,
#sp24-home.motion-off .hero-full .print.active::before,
#sp24-home.motion-off .sp24-process.is-ready .sp24-process__figure img {
    animation-play-state: paused;
}
#sp24-home.motion-off .sp24-wide-opener .application-frame {
    animation: none;
    transition: none;
}
@media (max-width: 700px) {
    #sp24-home .sp24-process__grid {
        grid-template-columns: 1fr;
    }
    #sp24-home .sp24-process__figure {
        aspect-ratio: 3/2;
    }
    #sp24-home .sp24-process__text {
        padding-inline: var(--gutter);
    }
}
@media (prefers-reduced-motion: reduce) {
    #sp24-home .hero-full .print.active > .sp24-hero-ink,
    #sp24-home .hero-full .print.active::before,
    #sp24-home .sp24-wide-opener .application-frame,
    #sp24-home .sp24-process.is-ready .sp24-process__figure img {
        animation: none;
    }
}