/* halo-drift — layout, sizes, motion only (colours live in the template) */

.halo-drift {
    padding-bottom: 20rem;
}

.halo-drift__glow {
    width: 64rem;
    height: 40rem;
    transform: translate(-50%, -30%);
    filter: blur(100px);
    pointer-events: none;
}

.halo-drift__kicker {
    letter-spacing: 0.2em;
}

.halo-drift__title {
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* --- orbit geometry: --rc circle radius, --ro bubble path radius, --b bubble size, --gap circle bottom above section bottom --- */
.halo-drift__viewport {
    --rc: 14rem;
    --ro: 16rem;
    --b: 3.5rem;
    --gap: 5.5rem;
    height: 20rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 30%);
    mask-image: linear-gradient(to bottom, transparent 0, black 30%);
}

.halo-drift__stage {
    left: 50%;
    bottom: calc(var(--gap) + var(--rc));
    width: 0;
    height: 0;
}

.halo-drift__line {
    width: calc(var(--rc) * 2);
    height: calc(var(--rc) * 2);
    left: calc(var(--rc) * -1);
    top: calc(var(--rc) * -1);
}

.halo-drift__ring {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    --step: 30deg;
    animation: halo-drift-spin 160s linear infinite;
}

.halo-drift__ring--n8  { --step: 45deg; }
.halo-drift__ring--n9  { --step: 40deg; }
.halo-drift__ring--n10 { --step: 36deg; }
.halo-drift__ring--n11 { --step: 32.7273deg; }
.halo-drift__ring--n12 { --step: 30deg; }

.halo-drift__spoke {
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    --i: 0;
    transform: rotate(calc(var(--i) * var(--step)));
}

.halo-drift__spoke--i0  { --i: 0; }
.halo-drift__spoke--i1  { --i: 1; }
.halo-drift__spoke--i2  { --i: 2; }
.halo-drift__spoke--i3  { --i: 3; }
.halo-drift__spoke--i4  { --i: 4; }
.halo-drift__spoke--i5  { --i: 5; }
.halo-drift__spoke--i6  { --i: 6; }
.halo-drift__spoke--i7  { --i: 7; }
.halo-drift__spoke--i8  { --i: 8; }
.halo-drift__spoke--i9  { --i: 9; }
.halo-drift__spoke--i10 { --i: 10; }
.halo-drift__spoke--i11 { --i: 11; }

.halo-drift__bubble {
    position: absolute;
    width: var(--b);
    height: var(--b);
    left: calc(var(--b) / -2);
    top: calc(var(--ro) - var(--b) / 2);
    transform: rotate(calc(var(--i) * var(--step) * -1));
    animation: halo-drift-counter 160s linear infinite;
}

.halo-drift__glyph {
    font-size: calc(var(--b) * 0.36);
}

@keyframes halo-drift-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes halo-drift-counter {
    from { transform: rotate(calc(var(--i) * var(--step) * -1)); }
    to   { transform: rotate(calc(var(--i) * var(--step) * -1 - 360deg)); }
}

@media (min-width: 768px) {
    .halo-drift {
        padding-bottom: 18rem;
    }

    .halo-drift__viewport {
        --rc: 28rem;
        --ro: 31rem;
        --b: 5rem;
        --gap: 6rem;
        height: 100%;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 20%);
        mask-image: linear-gradient(to bottom, transparent 0, black 20%);
    }
}

@media (min-width: 1024px) {
    .halo-drift {
        padding-bottom: 17rem;
    }

    .halo-drift__viewport {
        --rc: 40rem;
        --ro: 44rem;
        --b: 6rem;
        --gap: 9rem;
    }
}

@media (min-width: 1280px) {
    .halo-drift__viewport {
        --rc: 46rem;
        --ro: 50.5rem;
        --b: 6.5rem;
        --gap: 11rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halo-drift__ring,
    .halo-drift__bubble {
        animation: none;
    }
}

/* intro v20 — Calvin Klein magazine: shimmer sheen, mist, scale-up reveal, strike-through draw */

.intro-mag__img { object-fit: cover; }
.intro-mag__figure { aspect-ratio: 21 / 9; }

/* Gold-foil sheen → shimmer sweep (gradient colours come from Tailwind, motion from CSS) */
.intro-mag__sheen {
    background-size: 220% 220%;
    animation: intro-mag-shimmer 3s linear infinite;
    opacity: 0.35;
}
@keyframes intro-mag-shimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Smoke / mist wisp */
.intro-mag__mist {
    width: 24rem;
    height: 24rem;
    filter: blur(48px);
    opacity: 0.4;
}

/* LED step badge fixed size (no BS w-N/h-N utility) */
.intro-mag__led {
    width: 4rem;
    height: 4rem;
}

/* Dashed connector line (no BS border-style utility) */
.intro-mag__connector {
    border-style: dashed;
}

/* Scale-up on scroll into view — hidden only once JS arms it (no-JS content stays visible) */
.intro-mag.is-armed .intro-mag__scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 560ms ease, transform 560ms ease;
}
.intro-mag.is-armed .intro-mag__scale.is-in {
    opacity: 1;
    transform: scale(1);
}

/* Strikethrough line draw on hover */
.intro-mag__strike { height: 0.125rem; width: 0; transition: width 300ms ease; }
.intro-mag__st:hover .intro-mag__strike { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .intro-mag__sheen { animation: none; }
    .intro-mag__scale { opacity: 1; transform: none; }
}

.ribbon-corner-card__tile {
    min-width: 260px;
    max-width: 380px;
}

.ribbon-corner-card__fold {
    width: 84px;
    height: 84px;
}

.ribbon-corner-card__stamp {
    width: 116px;
    padding: 5px 0;
    top: 20px;
    right: -30px;
    transform: rotate(45deg);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
}

.ribbon-corner-card__media {
    height: 12rem;
}

.ribbon-corner-card__img {
    object-fit: cover;
}
.ribbon-corner-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glossary-grid__card {
    width: 100%;
}

@media (min-width: 576px) {
    .glossary-grid__card {
        width: calc(50% - 0.75rem); /* For gap-4 (1.5rem) -> half is 0.75rem */
    }
}

@media (min-width: 992px) {
    .glossary-grid__card {
        width: calc(33.33333% - 1rem); /* For gap-4 (1.5rem) -> 2 gaps = 3rem / 3 = 1rem */
    }
}

.glossary-grid__accent {
    height: 4px;
}

.glossary-grid__icon {
    width: 56px;
    height: 56px;
}

/* subscribe v20 — split-screen editorial: geometry shared by both CSS frameworks, no colors */
.mxw-md {
    max-width: 28rem !important;
}

.mailing-split-collage__media {
    width: 100%;
    height: 18rem;
}

.mailing-split-collage__panel {
    width: 100%;
    padding: 2rem;
}

.mailing-split-collage__row {
    flex-direction: column;
    gap: 0.75rem;
}

.mailing-split-collage__input {
    padding: 0.75rem 1rem;
}

.mailing-split-collage__cta {
    padding: 0.75rem 1.5rem;
}

.mailing-split-collage__thanks-title {
    font-size: 1.125rem;
}

.mailing-split-collage__heading {
    writing-mode: horizontal-tb;
    font-size: 1.5rem;
}

@media (min-width: 640px) {
    .mailing-split-collage__row {
        flex-direction: row;
    }
}

/* vertical headline only from md+, where the panel becomes a side column */
@media (min-width: 768px) {
    .mailing-split-collage__grid {
        min-height: 36rem;
    }

    .mailing-split-collage__media,
    .mailing-split-collage__panel {
        width: 50%;
    }

    .mailing-split-collage__media {
        height: auto;
    }

    .mailing-split-collage__panel {
        padding: 3rem;
    }

    .mailing-split-collage__heading {
        writing-mode: vertical-rl;
        font-size: 1.875rem;
    }
}