/* No background of its own — on purpose. The promo strip above and the booking
   cards below are both transparent, so the page's grey runs behind them as one
   continuous field. Painting this section white cut that field into a stripe
   trapped between two whites, which is exactly what it looked like. */
.rc-wstory {
    padding: 56px 32px 48px;
}

.rc-wstory__wrap {
    max-width: 1100px;
    margin: 0 auto;
}

.rc-wstory__header {
    text-align: center;
    margin-bottom: 36px;
}

.rc-wstory__eyebrow {
    display: inline-block;
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: var(--robbo-fs-badge);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rc-wstory-accent, #00af41);
    border: 1px solid currentColor;
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 14px;
}

.rc-wstory__heading {
    font-family: 'Plakkaat', sans-serif;
    font-size: 30px;
    font-weight: 500;
    color: var(--robbo-black, #1a1a1a);
    margin: 0 0 10px;
    line-height: 1.15;
}

.rc-wstory__sub {
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: 16px;
    color: #666;
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.6;
}

.rc-wstory__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rc-wstory__step {
    margin: 0;
    text-align: center;
}

/* The picture carries the section — big, tinted, calm. */
.rc-wstory__figure {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, var(--robbo-grey-light, #f2f3f4) 100%);
    border: 1px solid var(--robbo-line, #e6e6e6);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.rc-wstory__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    display: block;
}

/* Printing step: the finished render is wiped upward over the unprinted outline,
   so the flower grows out of the bed the way it really does. */
.rc-wstory__figure--print .rc-wstory__print {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: inset(100% 0 0 0);
    animation: rc-wstory-print 6s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}

.rc-wstory__figure--print .rc-wstory__print .rc-wstory__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
}

/* The nozzle line, riding the top of what has been laid down so far. */
.rc-wstory__head {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 2px;
    background: var(--rc-wstory-accent, #00af41);
    box-shadow: 0 0 10px 1px var(--rc-wstory-accent, #00af41);
    opacity: 0.9;
    top: 100%;
    animation: rc-wstory-head 6s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}

@keyframes rc-wstory-print {
    0%   { clip-path: inset(100% 0 0 0); }
    72%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }   /* hold the finished flower before looping */
}

@keyframes rc-wstory-head {
    0%   { top: 100%; opacity: 0; }
    6%   { opacity: 0.9; }
    72%  { top: 4%;  opacity: 0.9; }
    80%  { top: 4%;  opacity: 0; }
    100% { top: 4%;  opacity: 0; }
}

/* Live WebGL print — replaces the two stills once the model is up. */
.rc-wstory__canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-y;      /* dragging spins it, but the page must still scroll */
    cursor: grab;
}
.rc-wstory__canvas:active {
    cursor: grabbing;
}
.rc-wstory__figure.is-live {
    background: linear-gradient(180deg, #fff 0%, var(--robbo-grey-light, #f2f3f4) 100%);
}

/* Motion is decoration here — the still finished flower says the same thing. */
@media (prefers-reduced-motion: reduce) {
    .rc-wstory__figure--print .rc-wstory__print {
        animation: none;
        clip-path: inset(0 0 0 0);
    }
    .rc-wstory__head {
        display: none;
    }
}

.rc-wstory__num {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rc-wstory-accent, #00af41);
    color: #fff;
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.rc-wstory__title {
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--robbo-black, #1a1a1a);
    margin: 0 0 8px;
    line-height: 1.3;
}

.rc-wstory__text {
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.rc-wstory__note {
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    font-size: var(--robbo-fs-sm);
    color: var(--robbo-grey, #989898);
    text-align: center;
    margin: 28px 0 0;
}

@media (max-width: 900px) {
    .rc-wstory__steps {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 420px;
        margin: 0 auto;
    }
    .rc-wstory {
        padding: 40px 16px 36px;
    }
    .rc-wstory__heading {
        font-size: 24px;
    }
    .rc-wstory__figure {
        aspect-ratio: 3 / 2;
    }
}