/* ==========================================================
   Scarlett Heels — Tailor Lounge
   Extension to css/style.css
   Reuses the existing Corporate Design / collection styles.
   ========================================================== */

.tailor-video {
    display: block;
    width: min(700px, 62vw, 70vh);
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin-bottom: 2.5rem;
    background: #000;
    opacity: 0;
    animation: shoeReveal 1.8s ease-out .2s forwards;
}

/*
   The video sits inside the same visual language as the
   collection hero, but its edges disappear into the black
   page background instead of forming a hard rectangle.
*/
.tailor-video-frame {
    position: relative;
    width: min(700px, 62vw, 70vh);
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.tailor-video-frame video {
    display: block;
    width: 100%;
    height: auto;
}

.tailor-video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to right,
            #010000 0%,
            rgba(1, 0, 0, .82) 8%,
            transparent 25%,
            transparent 75%,
            rgba(1, 0, 0, .82) 92%,
            #010000 100%
        ),
        linear-gradient(
            to bottom,
            #010000 0%,
            transparent 18%,
            transparent 82%,
            #010000 100%
        );
}

.tailor-hero-copy {
    max-width: 680px;
}

.tailor-hero-copy .campaign-lead {
    color: var(--sh-gold);
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.tailor-step {
    margin: 3rem 0;
    text-align: center;
}

.tailor-step h3 {
    color: var(--sh-gold);
    font-size: 1.15rem;
    font-weight: normal;
    letter-spacing: .14em;
    margin-bottom: 1rem;
}

.tailor-step p {
    margin-bottom: 0;
}

.boutique-map {
    width: min(100%, 900px);
    margin: 3rem auto 1rem;
    padding: 2rem;
    border: 1px solid rgba(184, 138, 45, .35);
    background: rgba(0, 0, 0, .25);
}

.boutique-map-inner {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(214, 199, 161, .75);
    letter-spacing: .08em;
}

.boutique-message {
    min-height: 7rem;
    margin: 1.5rem auto 0;
    color: #d0c3a1;
    line-height: 1.8;
    text-align: center;
}

.boutique-message strong {
    display: block;
    color: var(--sh-gold);
    font-weight: normal;
    letter-spacing: .08em;
    margin-bottom: .7rem;
}

.boutique-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.5rem;
}

.boutique-buttons button {
    font-family: Georgia, serif;
    color: rgba(184, 138, 45, .82);
    background: transparent;
    border: 1px solid rgba(184, 138, 45, .45);
    padding: .55rem 1rem;
    letter-spacing: .08em;
    cursor: pointer;
    transition: .3s;
}

.boutique-buttons button:hover {
    color: #fff;
    border-color: var(--sh-gold);
}

.tracker-panel {
    margin: 3rem auto 0;
    padding: 2rem;
    border: 1px solid rgba(184, 138, 45, .35);
    text-align: center;
}

.tracker-status {
    color: #d0c3a1;
    line-height: 1.8;
}

.tracker-status strong {
    display: block;
    color: var(--sh-gold);
    font-weight: normal;
    letter-spacing: .08em;
    margin-bottom: .7rem;
}

.novel-teaser {
    color: var(--sh-gold);
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 3.5rem;
}

.novel-teaser em {
    font-size: 1.25rem;
}

@media (max-width: 700px) {

    .tailor-video,
    .tailor-video-frame {
        width: min(570px, 78vw, 55vh);
    }

    .boutique-map {
        padding: 1rem;
    }

    .boutique-map-inner {
        min-height: 220px;
    }
}
/* ==========================================================
   Boutique Finder — interactive gold world map
   ========================================================== */
.boutique-map{width:min(100%,980px);margin:3rem auto 1rem;padding:1rem;border:1px solid rgba(184,138,45,.45);background:#000;overflow:hidden}
.boutique-map-stage{position:relative;width:100%;height:clamp(320px,48vw,540px);overflow:hidden;cursor:grab;touch-action:none;background:#000;user-select:none}
.boutique-map-stage:active{cursor:grabbing}
.boutique-map-world{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:3/2;transform-origin:center;will-change:transform}
.boutique-map-image,.boutique-gem-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:visible;
}
.boutique-gem{
    position:absolute;
    width: 22px;
    height: 22px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    transform:translate(-50%,-50%);
    cursor:pointer;
    pointer-events:all;
    outline:none;
    z-index:3;
}
.boutique-gem img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    transition:transform .22s ease,filter .22s ease;
    transform-origin:center;
}
.boutique-gem:hover img,
.boutique-gem:focus-visible img{
    transform:scale(1.22);
    filter:brightness(1.12)
        drop-shadow(0 0 3px rgba(255,226,160,.95))
        drop-shadow(0 0 7px rgba(140,0,18,.45));
}
.boutique-gem.is-selected img{
    animation:rubyCatchLight .65s ease-out;
}
@keyframes rubyCatchLight{
    0%{transform:scale(1);filter:none}
    35%{
        transform:scale(1.27);
        filter:brightness(1.28)
            drop-shadow(0 0 4px rgba(255,242,195,.98))
            drop-shadow(0 0 10px rgba(150,0,20,.5));
    }
    100%{transform:scale(1);filter:none}
}
.campaign-gem-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:visible;
    z-index:4;
}

.campaign-gem{
    position:absolute;
    width:24px;
    height:24px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    transform:translate(-50%,-50%) scale(.65);
    cursor:pointer;
    pointer-events:all;
    outline:none;
    z-index:4;
}

.campaign-gem img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    transition:transform .22s ease,filter .22s ease;
    transform-origin:center;
}

.campaign-gem:hover img,
.campaign-gem:focus-visible img{
    transform:scale(1.22);
    filter:brightness(1.12)
        drop-shadow(0 0 3px rgba(220,190,255,.95))
        drop-shadow(0 0 8px rgba(125,40,190,.55));
}

.campaign-gem.is-selected img{
    animation:violetCatchLight .65s ease-out;
}

@keyframes violetCatchLight{
    0%{transform:scale(1);filter:none}
    35%{
        transform:scale(1.28);
        filter:brightness(1.3)
            drop-shadow(0 0 4px rgba(245,225,255,.98))
            drop-shadow(0 0 12px rgba(125,40,190,.65));
    }
    100%{transform:scale(1);filter:none}
}

.campaign-location{
    display:block;
    margin:.35rem 0 .7rem;
    color:var(--sh-gold);
    font-size:.85rem;
    letter-spacing:.05em;
}

.campaign-link{
    display:block;
    margin-top:1rem;
    color:var(--sh-gold);
    text-decoration:none;
    transition:color .25s ease,text-shadow .25s ease;
}

.campaign-link:hover{
    color:#fff;
    text-shadow:0 0 8px rgba(184,138,45,.7);
}

.boutique-map-controls{position:absolute;right:1rem;bottom:1rem;display:flex;gap:.35rem;z-index:5}
.boutique-map-controls button{width:2.1rem;height:2.1rem;border:1px solid rgba(184,138,45,.55);background:rgba(0,0,0,.78);color:var(--sh-gold);font:1.1rem Georgia,serif;cursor:pointer;line-height:1}
.boutique-map-controls button:hover{border-color:var(--sh-gold);color:#fff}
.boutique-map-hint{color:rgba(214,199,161,.65);text-align:center;font-size:.78rem;letter-spacing:.08em;padding:.8rem 0 .3rem}
.boutique-message{min-height:7rem;margin:1rem auto 0;color:#d0c3a1;line-height:1.8;text-align:center}
.boutique-message strong{display:block;color:var(--sh-gold);font-weight:normal;letter-spacing:.08em;margin-bottom:.7rem}
@media(max-width:700px){.boutique-map{padding:.6rem}.boutique-map-stage{height:300px}.boutique-map-world{width:125%}}

.boutique-novel-link {
    color: var(--sh-gold);
    text-decoration: none;
    transition: color .25s ease, text-shadow .25s ease;
}

.boutique-novel-link:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(184, 138, 45, .7);
}

/* ==========================================================
   MS Scarlett Heels — moving map marker
   ========================================================== */
.yacht-marker{
    position:absolute;
    width:16px;
    height:16px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    transform:translate(-50%,-50%);
    z-index:6;
    cursor:pointer;
    pointer-events:all;
    outline:none;
}

.yacht-marker img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    transition:transform .22s ease,filter .22s ease;
    transform-origin:center;
}

.yacht-marker:hover img,
.yacht-marker:focus-visible img{
    transform:scale(1.25);
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.95))
        drop-shadow(0 0 7px rgba(255,255,255,.65));
}

.yacht-marker.is-selected img{
    animation:yachtCatchLight .65s ease-out;
}

@keyframes yachtCatchLight{
    0%{transform:scale(1);filter:none}
    35%{
        transform:scale(1.28);
        filter:
            drop-shadow(0 0 4px rgba(255,255,255,.98))
            drop-shadow(0 0 10px rgba(255,255,255,.7));
    }
    100%{transform:scale(1);filter:none}
}

.yacht-destination{
    display:block;
    margin:.35rem 0 .7rem;
    color:var(--sh-gold);
    font-size:.85rem;
    letter-spacing:.05em;
}