/* Shared materials for the beauty rooms. Each room keeps its own journey. */
:is(.hair-studio-page, .style-studio-page, .makeup-studio-page, .nail-studio-page) {
    --room-oak: #95684b;
    --room-oak-deep: #704831;
    --room-linen: #fffaf4;
    --room-edge: #e5d7c8;
    --room-shadow: 0 16px 40px rgba(75, 51, 35, .09);
}
.hair-studio-page {
    --hair-purple: var(--room-oak);
    --hair-purple-dark: var(--room-oak-deep);
    --hair-salon-night: #332720;
    --hair-salon-champagne: #d4b58b;
}
.makeup-studio-page {
    --makeup-plum: var(--room-oak);
    --makeup-plum-dark: var(--room-oak-deep);
    --makeup-primary: var(--room-oak);
    --makeup-primary-dark: var(--room-oak-deep);
    --makeup-violet: var(--room-oak);
    --makeup-violet-soft: #f4e9dd;
}
.style-studio-page {
    --style-base: var(--room-oak);
    --style-base-dark: var(--room-oak-deep);
    --style-spark: #946945;
}
.nail-studio-page {
    --nail-accent: var(--room-oak);
    --nail-soft: #f6ede4;
}
:is(.hair-studio-hero, .style-studio-hero, .nail-studio-hero) {
    border-color: var(--room-edge);
    background-color: var(--room-linen);
    box-shadow: var(--room-shadow);
}

/* Give every beauty room a touchable, dimensional catalogue without adding
   heavy 3D assets: the image plane, soft rim and card move together. */
:is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card) {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    transform-style: preserve-3d;
    perspective: 900px;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
:is(.style-studio-branch-card, .hair-style-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card) > * {
    min-width: 0;
    max-width: 100%;
}
:is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card)::before {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.6), transparent 52%);
    opacity: .6;
    pointer-events: none;
    transform: translateZ(-10px);
}
:is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card):focus-within {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgba(149,104,75,.18), 0 16px 34px rgba(75,51,35,.13);
}
:is(.hair-style-visual, .style-studio-branch-visual, .nail-pin-image, .makeup-mode-visual, .makeup-style-visual, .makeup-palette-visual) {
    transform: translateZ(8px);
    transition: transform .24s ease, filter .24s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card):hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(75,51,35,.16);
    }
    :is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card):hover :is(.hair-style-visual, .style-studio-branch-visual, .nail-pin-image, .makeup-mode-visual, .makeup-style-visual, .makeup-palette-visual) {
        transform: translateZ(18px);
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.hair-style-card, .style-studio-branch-card, .nail-pin-card, .makeup-mode-card, .makeup-style-card, .makeup-palette-card),
    :is(.hair-style-visual, .style-studio-branch-visual, .nail-pin-image, .makeup-mode-visual, .makeup-style-visual, .makeup-palette-visual) {
        transition: none;
        transform: none;
    }
}

/* The wardrobe branch is a full-width button: keep its content plane flat so
   browser rounding cannot create a horizontal scrollbar at desktop widths. */
.style-studio-branch-card {
    perspective: none;
    transform-style: flat;
}
:is(.hair-studio-salon-stage, .style-studio-hero-media, .nail-studio-hero-image) {
    box-shadow: 0 0 0 1px rgba(149,104,75,.2), 0 16px 36px rgba(75,51,35,.16);
}
.makeup-studio-page .makeup-salon-arrival {
    border: 1px solid #d9c4ad;
    box-shadow: var(--room-shadow);
}
:is(.hair-studio-page, .style-studio-page, .makeup-studio-page, .nail-studio-page) :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--room-oak);
    outline-offset: 3px;
}
.style-studio-page .style-studio-branch-card,
.nail-studio-page .nail-pin-card {
    transition: box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .style-studio-page .style-studio-branch-card:hover,
    .nail-studio-page .nail-pin-card:hover {
        border-color: var(--room-oak);
        box-shadow: var(--room-shadow);
    }
}
@media (prefers-reduced-motion: reduce) {
    .style-studio-page .style-studio-branch-card,
    .nail-studio-page .nail-pin-card { transition: none; }
}