/* ==========================================================================
   Design reel - the rotating banner of free homepage designs.

   A 3D coverflow of the designs we have actually produced free of charge
   (public/assets/img/designs/designs.json). The centre card is a real
   screenshot in browser chrome; click it and the design opens full size at
   /designs/{slug}/. The cards either side recede into the distance and fade
   out at the edges of the band rather than being sliced off square.

   Deliberately dependency-free plain CSS and transforms, NOT GSAP: the wow
   layer only loads GSAP at >=768px and this is the first thing a visitor sees
   on a phone. Behaviour: public/assets/js/design-reel.js. Plain CSS rather
   than Tailwind utilities because every value here is computed in the JS and
   would otherwise be a wall of arbitrary-value classes.
   ========================================================================== */

.dr {
    --dr-w: min(620px, 44vw);
    --dr-ratio: 0.625;          /* the cards are 1200x750 */
    position: relative;
    isolation: isolate;
}

/* The lit stage. The glows are what stop a dark band reading as a dead
   rectangle behind the screenshots. */
.dr-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(91, 43, 214, 0.30), transparent 62%),
        radial-gradient(90% 70% at 12% 100%, rgba(214, 21, 125, 0.22), transparent 60%),
        linear-gradient(180deg, #0b1428 0%, #132445 55%, #0b1428 100%);
}

/* A faint dot grid, so the space around the fan has texture rather than being
   flat navy. */
.dr-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.35;
    pointer-events: none;
}

/* Clips and fades the fan. The receding cards are rotated in 3D, so
   perspective projects them WIDER than their own box: unclipped they push the
   document sideways on phones. Fading rather than slicing keeps the reel
   looking like it carries on past the edge of the screen. */
.dr-stagewrap {
    position: relative;
    perspective: 1600px;
    perspective-origin: 50% 45%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.dr-stage {
    position: relative;
    height: calc(var(--dr-w) * var(--dr-ratio) + 3.5rem);
    transform-style: preserve-3d;
    touch-action: pan-y;        /* a thumb swiping down still scrolls the page */
    cursor: grab;
}
.dr.is-dragging .dr-stage { cursor: grabbing; }

/* A soft pool of light under the front card, so it sits ON something. */
.dr-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.35rem;
    width: calc(var(--dr-w) * 0.86);
    height: 34px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

.dr-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--dr-w);
    margin: 0;
    transform: translate(-50%, -50%);
    transition: transform .75s cubic-bezier(.22, .9, .28, 1),
                opacity .5s ease,
                filter .5s ease;
    will-change: transform;
}
.dr.is-dragging .dr-card { transition: none; }

.dr-link {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #0f1b33;
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
    text-decoration: none;
    outline: none;
}
.dr-card.is-front .dr-link {
    box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.95),
                0 0 0 1px rgba(255, 255, 255, 0.14),
                0 0 60px -14px rgba(214, 21, 125, 0.5);
}
.dr-link:focus-visible {
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(214, 21, 125, 0.9);
}

/* browser chrome */
.dr-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #16264a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dr-chrome i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    flex: 0 0 auto;
}
.dr-url {
    flex: 1;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dr-shot {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: #0b1428;
}
.dr-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* "Open this design" - only on the front card, and only where there is a
   cursor to hover with. */
.dr-open {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translate(-50%, 8px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    color: #16264a;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
}
.dr-open svg { width: 15px; height: 15px; }
.dr-card.is-front .dr-link:hover .dr-open,
.dr-card.is-front .dr-link:focus-visible .dr-open {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- caption */

.dr-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.6rem;
}
.dr-arrow {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dr-arrow:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}
.dr-arrow svg { width: 20px; height: 20px; }

.dr-titles {
    min-width: 0;
    flex: 1 1 auto;
    max-width: 34rem;
    text-align: center;
    transition: opacity .22s ease, transform .22s ease;
}
.dr-titles.is-swapping { opacity: 0; transform: translateY(6px); }
.dr-name {
    color: #fff;
    font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.dr-sector {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
    font-weight: 600;
}

/* dots and the autoplay progress line */
.dr-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
}
.dr-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.dr-dots button.is-on {
    width: 30px;
    background: linear-gradient(90deg, #d6157d, #5b2bd6);
}
.dr-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.dr-progress {
    position: relative;
    width: min(280px, 60%);
    height: 2px;
    margin: 1rem auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}
.dr-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d6157d, #5b2bd6);
    transform-origin: left center;
    transform: scaleX(0);
}
.dr-progress.is-running span { animation: dr-fill var(--dr-every, 4200ms) linear forwards; }
@keyframes dr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.dr-hint {
    margin-top: 1.1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------- entrance */

/* The cards start stacked in the middle and fan out the first time the band
   comes into view. The class is set by the JS and removed on the next frame,
   so the whole thing rides the existing CSS transition rather than needing an
   animation loop. */
.dr.is-entering .dr-card {
    transform: translate(-50%, -50%) scale(.82) !important;
    opacity: 0 !important;
}
.dr.is-entering .dr-meta,
.dr.is-entering .dr-dots,
.dr.is-entering .dr-progress,
.dr.is-entering .dr-hint { opacity: 0; }
.dr-meta, .dr-dots, .dr-progress, .dr-hint { transition: opacity .6s ease .25s; }

/* ------------------------------------------------------------------ phones */

@media (max-width: 1023px) {
    .dr { --dr-w: min(560px, 62vw); }
}
@media (max-width: 767px) {
    /* Bigger cards and a tighter stage on a phone: at 76vw the screenshot was
       too small to read and the shadow padding left a band of dead navy under
       it before the caption. */
    .dr { --dr-w: 84vw; }
    .dr-stage { height: calc(var(--dr-w) * var(--dr-ratio) + 2rem); }
    .dr-meta { margin-top: 1rem; }
    .dr-stagewrap {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    }
    .dr-meta { gap: .6rem; }
    .dr-arrow { width: 40px; height: 40px; }
    .dr-open { display: none; }   /* no hover on a phone: the tap opens it */
}

@media (prefers-reduced-motion: reduce) {
    .dr-card { transition: opacity .2s ease; }
    .dr-progress { display: none; }
    .dr.is-entering .dr-card { transform: none !important; opacity: 1 !important; }
    .dr-open { transition: none; }
}