/* Graywick Postcard Stops v1.2.13 */
.graywick-postcard-stops {
    --gwps-max-width: 980px;
    --gwps-accent: #c9ef00;
    --gwps-purple: #8f47ff;
    --gwps-ink: #2d2117;
    --gwps-strap-bend: 8px;
    --gwps-strap-rise: 7px;
    --gwps-strap-flare: 14px;
    --gwps-strap-min-size: 18px;
    width: min(100%, var(--gwps-max-width));
    margin: 0 auto;
    color: #fff;
    font-family: "Just Another Hand", "Trebuchet MS", sans-serif;
}
.gwps-stage { position: relative; }
.gwps-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    isolation: isolate;
    perspective: 1800px;
    -webkit-perspective: 1800px;
}
.gwps-card { position: absolute; inset: 0; }
.gwps-card-back { z-index: 1; pointer-events: none; }
.gwps-card-front { z-index: 10; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.gwps-card-front,
.gwps-card-front * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
.gwps-front-title-wrap,
.gwps-front-caption-wrap,
.gwps-back-message,
.gwps-back-address,
.gwps-back-art {
    pointer-events: none;
}
.gwps-card-back-1 { transform: translate(-6%, 4%) rotate(-7deg); opacity: .28; }
.gwps-card-back-2 { transform: translate(-2.7%, 2.1%) rotate(-3.6deg); opacity: .38; }
.gwps-card-back-3 { transform: translate(2.6%, 1.8%) rotate(3.2deg); opacity: .24; }
.gwps-card-back-1 .gwps-card-shell { transform: scale(.90); }
.gwps-card-back-2 .gwps-card-shell { transform: scale(.945); }
.gwps-card-back-3 .gwps-card-shell { transform: scale(.975); }
.gwps-card-shell { position: absolute; inset: 0; overflow: visible; }
.gwps-card-back .gwps-card-shell { transform-origin: center; }
.gwps-generic-back {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(25,25,25,.52),rgba(25,25,25,.52)), url('../postcard/postcard-back-landscape.png') top right / cover no-repeat;
    -webkit-mask-image: url('../postcard/front-mask-landscape.svg');
    mask-image: url('../postcard/front-mask-landscape.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    box-shadow: 0 14px 28px rgba(0,0,0,.20);
}
.gwps-card-front.gwps-dragging { transition: none !important; cursor: grabbing; }
.gwps-card-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transition: transform 620ms cubic-bezier(.16,1,.3,1);
    -webkit-transition: -webkit-transform 620ms cubic-bezier(.16,1,.3,1);
}
.graywick-postcard-stops.gwps-flipped .gwps-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.gwps-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.gwps-face-front {
    overflow: visible;
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0s linear 310ms, visibility 0s linear 310ms;
}
.gwps-face-back {
    overflow: visible;
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s linear 310ms, visibility 0s linear 310ms;
    background: transparent;
    color: var(--gwps-ink);
}
.graywick-postcard-stops.gwps-flipped .gwps-face-front { opacity: 0; visibility: hidden; }
.graywick-postcard-stops.gwps-flipped .gwps-face-back { opacity: 1; visibility: visible; }

.gwps-back-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.gwps-back-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: right top;
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.22));
}


/* Branded deal/reveal sequence. The postcard back and finished front styling are unchanged. */
.gwps-front-reveal {
    position: absolute;
    inset: 0;
    perspective: 1800px;
    -webkit-perspective: 1800px;
}
.gwps-front-reveal-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transition: transform 680ms cubic-bezier(.2,.78,.22,1);
    -webkit-transition: -webkit-transform 680ms cubic-bezier(.2,.78,.22,1);
    will-change: transform;
}
.gwps-card-front.gwps-revealed .gwps-front-reveal-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.gwps-reveal-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.gwps-reveal-loader {
    overflow: hidden;
    transform: rotateY(0deg) translateZ(1px);
    -webkit-transform: rotateY(0deg) translateZ(1px);
    background: #111;
    -webkit-mask-image: url('../postcard/front-mask-landscape.svg');
    mask-image: url('../postcard/front-mask-landscape.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    box-shadow: 0 24px 44px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.18);
}
.gwps-reveal-loader img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
}
.gwps-reveal-content {
    overflow: visible;
    transform: rotateY(180deg) translateZ(1px);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}
@media (max-width: 1024px) {
    .gwps-reveal-loader {
        -webkit-mask-image: url('../postcard/front-mask-square.svg');
        mask-image: url('../postcard/front-mask-square.svg');
    }
}
@media (prefers-reduced-motion: reduce) {
    .gwps-front-reveal-inner {
        transition-duration: 1ms;
        -webkit-transition-duration: 1ms;
    }
}

/* Only the artwork is masked. Text sits above it, so the irregular edge can never cut words off. */
.gwps-front-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #2a103a;
    -webkit-mask-image: url('../postcard/front-mask-landscape.svg');
    mask-image: url('../postcard/front-mask-landscape.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    box-shadow: 0 24px 44px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.18);
}
.gwps-front-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 28%, transparent 43%, transparent 58%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.60) 100%);
}
.gwps-front-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #32134b;
    background-image: url('../postcard/postcard-loader.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.gwps-front-title-wrap {
    position: absolute;
    z-index: 5;
    left: 8.5%;
    right: 8.5%;
    top: 8.2%;
    overflow: visible;
    box-sizing: border-box;
}
.gwps-front-title {
    display: block;
    width: 100%;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 58px;
    font-weight: 700;
    line-height: .94;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.62);
}
.gwps-front-caption-wrap {
    position: absolute;
    z-index: 5;
    left: 7.5%;
    right: 7.5%;
    bottom: 7.2%;
    min-height: 30%;
    display: flex;
    align-items: flex-end;
    overflow: visible;
    box-sizing: border-box;
}
.gwps-front-caption {
    width: 100%;
    font-size: 36px;
    line-height: .96;
    letter-spacing: .01em;
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 0 #000, 0 4px 10px rgba(0,0,0,.75);
    white-space: nowrap;
    overflow-wrap: normal;
}
.gwps-front-caption .gwps-bend-word { display: inline-block; white-space: nowrap; }
.gwps-front-caption .gwps-bend-char { display: inline-block; transform-origin: center bottom; will-change: transform; }

.gwps-back-message {
    position: absolute;
    z-index: 2;
    left: 9%;
    top: 20%;
    width: 43%;
    bottom: 14%;
    padding-right: 4%;
    font-size: 29px;
    line-height: 1.08;
    color: #3c2e21;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-y: hidden;
}
.gwps-back-address {
    position: absolute;
    z-index: 2;
    top: 22%;
    right: 9%;
    width: 29%;
    bottom: 13%;
    border-left: 2px solid rgba(82,58,35,.18);
    padding-left: 5%;
}
.gwps-back-lines { position: absolute; left: 4%; right: 0; top: 38%; display: grid; gap: 18px; }
.gwps-back-lines span { border-bottom: 2px solid rgba(83,59,35,.24); }
.gwps-hint {
    margin-top: 20px;
    text-align: center;
    font-size: clamp(20px, 2.7vw, 30px);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    text-shadow: 0 2px 8px rgba(0,0,0,.38);
}
.gwps-controls { display: flex; justify-content: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.gwps-control {
    appearance: none;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.58);
    color: #fff;
    min-width: 184px;
    min-height: 60px;
    border-radius: 999px;
    padding: 10px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: "Just Another Hand", "Trebuchet MS", sans-serif;
    font-size: clamp(18px, 2.2vw, 28px);
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 12px 22px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.03);
    transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
    cursor: pointer;
}
.gwps-control:hover:not(:disabled) { transform: translateY(-1px) scale(.98); background: rgba(0,0,0,.68); }
.gwps-control:disabled { opacity: .48; cursor: default; }
.gwps-control-icon {
    width: 34px; height: 34px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1;
    border: 2px solid currentColor;
    box-shadow: 0 0 14px currentColor;
}
.gwps-control-prev .gwps-control-icon { color: var(--gwps-purple); }
.gwps-control-next .gwps-control-icon { color: var(--gwps-accent); }
.gwps-status { margin-top: 14px; min-height: 1em; text-align: center; color: rgba(255,255,255,.75); }

@media (max-width: 1024px) {
    .gwps-stack { aspect-ratio: 1 / 1; }
    .gwps-front-card { -webkit-mask-image: url('../postcard/front-mask-square.svg'); mask-image: url('../postcard/front-mask-square.svg'); }
    .gwps-generic-back {
        background-image: linear-gradient(rgba(25,25,25,.52),rgba(25,25,25,.52)), url('../postcard/postcard-back-square.png');
        -webkit-mask-image: url('../postcard/front-mask-square.svg');
        mask-image: url('../postcard/front-mask-square.svg');
    }
    /* Mobile back uses the supplied postcard artwork's own transparent/torn edge.
       Do not apply the front square mask here: it distorts/crops the reverse. */
    .gwps-face-back {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .gwps-front-title-wrap { left: 8.5%; right: 8.5%; top: 8.5%; }
    .gwps-front-title { font-size: 44px; }
    .gwps-front-caption-wrap { left: 7.5%; right: 7.5%; bottom: 7%; min-height: 30%; }
    .gwps-front-caption { font-size: 30px; }
    .gwps-back-message { left: 8%; right: 8%; top: 18%; width: auto; bottom: 28%; padding: 0; font-size: 19px; overflow-y: auto; }
    .gwps-back-address { left: 8%; right: 8%; top: auto; width: auto; bottom: 8%; height: 12%; border-left: 0; padding-left: 0; }
    .gwps-back-lines { left: 0; right: 0; top: 18%; gap: 12px; }
}

@media (max-width: 640px) {
    .gwps-card-back-1 { transform: translate(-5%, 3%) rotate(-6deg); }
    .gwps-card-back-2 { transform: translate(-2.5%, 1.5%) rotate(-3deg); }
    .gwps-card-back-3 { transform: translate(2%, 1.4%) rotate(2.5deg); }
    .gwps-front-title { font-size: 34px; }
    .gwps-front-caption { font-size: 25px; }
    .gwps-back-message { font-size: 16px; }
    .gwps-control { min-width: 156px; min-height: 56px; padding: 10px 18px; gap: 10px; }
    .gwps-control-icon { width: 30px; height: 30px; font-size: 18px; }
    .gwps-hint { margin-top: 14px; font-size: clamp(16px, 4.5vw, 24px); }
}
