/* intro v25 — Sagmeister ticket: corner patch, spiral binding, ticket perforation, square thumb */

/* Corner accent patch → triangle */
.intro-tkt__patch {
    width: 10rem;
    height: 10rem;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.9;
}
.intro-tkt__spiral { height: 1rem; }
.intro-tkt__body { min-width: 0; }
.intro-tkt__close { width: 2rem; height: 2rem; }

/* Torn notebook spiral binding holes (colour from Tailwind text-*, holes via mask) */
.intro-tkt__spiral {
    -webkit-mask: radial-gradient(circle 5px at center, black 98%, transparent 100%) 0 0 / 30px 100%;
    mask: radial-gradient(circle 5px at center, black 98%, transparent 100%) 0 0 / 30px 100%;
    background: currentColor;
    opacity: 0.5;
}

/* Square cropped thumbnail */
.intro-tkt__thumb {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
}

/* Ticket stub perforation (currentColor from the card text) */
.intro-tkt__ticket { transition: box-shadow 240ms ease; }
.intro-tkt__ticket::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 7.5rem;
    border-left: 2px dashed currentColor;
    opacity: 0.25;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .intro-tkt__ticket::after { display: none; }
}

.tips-interactive__badge {
    z-index: 20;
}

.tips-interactive__inner {
    z-index: 10;
}

.tips-interactive__panel {
    z-index: 50;
}

.tips-interactive__thumb {
    width: 4rem;
    height: 4rem;
}

.tips-interactive__thumb--sm {
    width: 3rem;
    height: 3rem;
}

.tips-interactive__panel--collapsed {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
}

.tips-interactive__panel--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.content-details-leaf__summary {
    cursor: pointer;
}

.content-details-leaf__summary::marker {
    font-size: 0.85em;
}

.content-details-leaf__item[open] {
    transform: translateY(-0.0625rem);
}

.content-details-leaf__orb {
    width: 16rem;
    height: 16rem;
    filter: blur(4rem);
}

/* v23 — infinite marquee scroll (no BS/JS analog for @keyframes transform loop) */
@keyframes mailing-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.mailing-marquee__track {
    animation: mailing-marquee-scroll 25s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mailing-marquee__track {
        animation: none;
    }
}

/* edge fade mask — alpha gradient, not a fill color choice */
.mailing-marquee__viewport {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}