/* ==========================================
   CYBERMUSE PARADE
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--black:#07070a;
--dark:#141118;
--panel:#1b1720;

--violet:#8d76ff;
--gold:#d4af37;
--champagne:#eadfcf;

--white:#ffffff;
--muted:rgba(255,255,255,.64);
--soft:rgba(255,255,255,.08);
--line:rgba(255,255,255,.13);

--green:#9ef0b4;
--red:#ff9aad;

}

html{
scroll-behavior:smooth;
}

body{

min-height:100vh;

font-family:'Poppins',sans-serif;

color:var(--white);

background:

radial-gradient(
circle at 10% 10%,
rgba(141,118,255,.15),
transparent 32%
),

radial-gradient(
circle at 90% 80%,
rgba(212,175,55,.11),
transparent 34%
),

linear-gradient(
135deg,
#07070a,
#15111a 55%,
#211b18
);

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(
180deg,
rgba(0,0,0,.04),
rgba(0,0,0,.36)
);

pointer-events:none;

z-index:-2;

}

a{
color:inherit;
text-decoration:none;
}

button,
input,
select,
textarea{
font:inherit;
}

button{
-webkit-tap-highlight-color:transparent;
}

img,
video{
display:block;
max-width:100%;
}

[hidden]{
display:none !important;
}


/* ==========================================
   BACKGROUND GLOWS
========================================== */

.glow{

position:fixed;

border-radius:50%;

filter:blur(130px);

pointer-events:none;

z-index:-1;

}

.glowViolet{

width:420px;

height:420px;

top:-150px;

left:-140px;

background:rgba(141,118,255,.18);

}

.glowGold{

width:520px;

height:520px;

right:-180px;

bottom:-190px;

background:rgba(212,175,55,.12);

}


/* ==========================================
   HEADER
========================================== */

.paradeHeader{

position:sticky;

top:0;

z-index:1000;

height:78px;

padding:0 5%;

display:flex;

align-items:center;

justify-content:space-between;

background:rgba(7,7,10,.93);

backdrop-filter:blur(18px);

border-bottom:1px solid var(--line);

}

.paradeBrand{

font-family:'Space Grotesk',sans-serif;

font-size:1.05rem;

font-weight:700;

letter-spacing:5px;

}

.headerActions{

display:flex;

align-items:center;

gap:22px;

}

.headerActions a{

font-size:.62rem;

font-weight:600;

letter-spacing:1.7px;

text-transform:uppercase;

color:rgba(255,255,255,.72);

transition:.25s ease;

}

.headerActions a:hover{
color:var(--champagne);
}


/* ==========================================
   PAGE
========================================== */

.paradePage{

width:min(100%,1280px);

margin:auto;

padding:70px 24px 110px;

}


/* ==========================================
   INTRO
========================================== */

.paradeIntro{

max-width:900px;

margin-bottom:46px;

}

.smallTitle{

font-size:.61rem;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:#f4d98d;

margin-bottom:12px;

}

.paradeIntro h1{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(4rem,11vw,9rem);

line-height:.83;

letter-spacing:-6px;

text-transform:uppercase;

}

.paradeIntro>p:last-child{

max-width:690px;

margin-top:24px;

font-size:.94rem;

line-height:1.85;

color:var(--muted);

}


/* ==========================================
   CONTROLS
========================================== */

.paradeControls{

padding:28px;

margin-bottom:34px;

border:1px solid var(--line);

background:rgba(255,255,255,.045);

backdrop-filter:blur(18px);

}

.filterGroup{
margin-bottom:23px;
}

.filterLabel{

margin-bottom:10px;

font-size:.58rem;

font-weight:600;

letter-spacing:1.8px;

text-transform:uppercase;

color:rgba(255,255,255,.52);

}

.filterButtons{

display:flex;

flex-wrap:wrap;

gap:8px;

}

.paradeFilter,
.orientationFilter{

min-height:42px;

padding:0 16px;

border:1px solid var(--line);

border-radius:0;

background:rgba(255,255,255,.035);

color:#fff;

font-size:.58rem;

font-weight:600;

letter-spacing:1.25px;

text-transform:uppercase;

cursor:pointer;

transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease;

}

.paradeFilter:hover,
.orientationFilter:hover{

border-color:rgba(234,223,207,.52);

transform:translateY(-1px);

}

.paradeFilter.active,
.orientationFilter.active{

background:#fff;

color:#111;

border-color:#fff;

}

.paradeSearch{

margin-top:25px;

display:flex;

flex-direction:column;

gap:8px;

}

.paradeSearch label{

font-size:.58rem;

font-weight:600;

letter-spacing:1.8px;

text-transform:uppercase;

color:rgba(255,255,255,.52);

}

.paradeSearch input{

width:100%;

height:56px;

padding:0 17px;

border:1px solid var(--line);

border-radius:0;

outline:none;

background:rgba(255,255,255,.045);

color:#fff;

}

.paradeSearch input::placeholder{
color:rgba(255,255,255,.32);
}

.paradeSearch input:focus{

border-color:var(--champagne);

background:rgba(255,255,255,.075);

box-shadow:0 0 0 3px rgba(234,223,207,.05);

}

.paradeSummary{

margin-top:22px;

display:flex;

align-items:end;

gap:9px;

}

.paradeSummary strong{

font-family:'Space Grotesk',sans-serif;

font-size:2.2rem;

line-height:1;

}

.paradeSummary span{

padding-bottom:3px;

font-size:.58rem;

letter-spacing:1.5px;

text-transform:uppercase;

color:var(--muted);

}


/* ==========================================
   SKELETON
========================================== */

.paradeSkeleton{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:18px;

}

.modelSkeleton{

overflow:hidden;

border:1px solid var(--line);

background:rgba(255,255,255,.035);

}

.skeletonImage{

aspect-ratio:4/5;

background:

linear-gradient(
90deg,
rgba(255,255,255,.04),
rgba(255,255,255,.11),
rgba(255,255,255,.04)
);

background-size:220% 100%;

animation:paradeSkeleton 1.25s linear infinite;

}

.skeletonLine{

height:12px;

margin:15px 16px 0;

background:

linear-gradient(
90deg,
rgba(255,255,255,.04),
rgba(255,255,255,.11),
rgba(255,255,255,.04)
);

background-size:220% 100%;

animation:paradeSkeleton 1.25s linear infinite;

}

.skeletonLine.large{
width:62%;
height:18px;
}

.skeletonButton{

height:45px;

margin:18px 16px 16px;

background:

linear-gradient(
90deg,
rgba(255,255,255,.04),
rgba(255,255,255,.11),
rgba(255,255,255,.04)
);

background-size:220% 100%;

animation:paradeSkeleton 1.25s linear infinite;

}

@keyframes paradeSkeleton{

to{
background-position:-220% 0;
}

}


/* ==========================================
   PARADE GRID
========================================== */

.paradeGrid{

display:grid;

grid-template-columns:repeat(3,minmax(0,1fr));

gap:18px;

}

.paradeModelCard{

overflow:hidden;

border:1px solid var(--line);

background:rgba(255,255,255,.045);

backdrop-filter:blur(12px);

transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease;

}

.paradeModelCard:hover{

transform:translateY(-5px);

border-color:rgba(234,223,207,.38);

box-shadow:0 22px 60px rgba(0,0,0,.28);

}


/* ==========================================
   MODEL IMAGE
========================================== */

.paradeModelImage{

position:relative;

aspect-ratio:4/5;

overflow:hidden;

background:#080808;

}

.paradeProfileLink{

display:block;

width:100%;

height:100%;

}

.paradeModelImage img{

width:100%;

height:100%;

object-fit:cover;

object-position:center top;

transition:transform .45s ease;

user-select:none;

-webkit-user-drag:none;

}

.paradeModelCard:hover
.paradeModelImage img{

transform:scale(1.025);

}

.paradeImagePlaceholder{

width:100%;

height:100%;

display:grid;

place-items:center;

font-family:'Space Grotesk',sans-serif;

font-size:4rem;

color:var(--champagne);

background:

linear-gradient(
135deg,
#151019,
#28201c
);

}

.paradeVerifiedBadge{

position:absolute;

top:13px;

left:13px;

z-index:3;

padding:7px 10px;

border:1px solid rgba(212,175,55,.4);

background:rgba(0,0,0,.62);

backdrop-filter:blur(10px);

color:#f5d98d;

font-size:.53rem;

font-weight:700;

letter-spacing:1.35px;

}


/* ==========================================
   MODEL INFO
========================================== */

.paradeModelInfo{

padding:20px;

}

.paradeModelHeading{

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:15px;

}

.paradeModelName{

display:inline-block;

font-family:'Space Grotesk',sans-serif;

font-size:1.55rem;

font-weight:700;

line-height:1;

letter-spacing:-.6px;

text-transform:uppercase;

transition:.25s ease;

}

.paradeModelName:hover{
color:var(--champagne);
}

.paradeModelHeading p{

margin-top:8px;

font-size:.71rem;

letter-spacing:.5px;

color:var(--muted);

}

.paradeModelMeta{

display:flex;

flex-wrap:wrap;

gap:7px;

margin-top:18px;

}

.paradeModelMeta span{

padding:7px 9px;

border:1px solid rgba(255,255,255,.09);

background:rgba(255,255,255,.025);

font-size:.53rem;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:rgba(255,255,255,.7);

}

.paradeModelActions{

display:grid;

grid-template-columns:1fr 1fr;

gap:9px;

margin-top:20px;

}

.viewProfileBtn,
.bookParadeModelBtn{

min-height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:0;

font-size:.58rem;

font-weight:700;

letter-spacing:1.35px;

text-transform:uppercase;

cursor:pointer;

transition:.25s ease;

}

.viewProfileBtn{

border:1px solid var(--line);

background:rgba(255,255,255,.035);

color:#fff;

}

.viewProfileBtn:hover{

border-color:var(--champagne);

color:var(--champagne);

}

.bookParadeModelBtn{

border:1px solid #fff;

background:#fff;

color:#111;

}

.bookParadeModelBtn:hover{

background:var(--champagne);

border-color:var(--champagne);

}


/* ==========================================
   EMPTY / ERROR
========================================== */

.paradeEmpty{

padding:80px 25px;

text-align:center;

border:1px solid var(--line);

background:rgba(255,255,255,.035);

}

.paradeEmpty h2,
.paradeLoadError h2{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.8rem,7vw,5rem);

line-height:.95;

text-transform:uppercase;

}

.paradeEmpty>p:not(.smallTitle),
.paradeLoadError p{

max-width:580px;

margin:18px auto 26px;

line-height:1.8;

color:var(--muted);

}

.clearFiltersBtn{

min-height:50px;

padding:0 22px;

border:1px solid #fff;

background:#fff;

color:#111;

font-size:.62rem;

font-weight:700;

letter-spacing:1.6px;

text-transform:uppercase;

cursor:pointer;

}

.paradeLoadError{

grid-column:1 / -1;

padding:75px 22px;

text-align:center;

border:1px solid var(--line);

background:rgba(255,255,255,.035);

}


/* ==========================================
   BOOKING MODAL
========================================== */

.bookingModal{

position:fixed;

inset:0;

z-index:5000;

display:none;

align-items:center;

justify-content:center;

padding:20px;

background:rgba(0,0,0,.84);

backdrop-filter:blur(16px);

}

.bookingModal.active{
display:flex;
}

.bookingPanel{

width:min(100%,660px);

max-height:92vh;

overflow-y:auto;

padding:38px;

border:1px solid var(--line);

background:

linear-gradient(
135deg,
#1a1620,
#0b0910
);

box-shadow:0 35px 100px rgba(0,0,0,.56);

}

.bookingHeader{

display:flex;

align-items:flex-start;

justify-content:space-between;

gap:20px;

}

.bookingHeader h2{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.2rem,7vw,3.8rem);

line-height:.95;

text-transform:uppercase;

}

.bookingHeader h2 span{
color:var(--champagne);
}

.closeBookingModal{

width:43px;

height:43px;

flex-shrink:0;

border:0;

border-radius:0;

background:rgba(255,255,255,.08);

color:#fff;

font-size:1.8rem;

cursor:pointer;

}

.bookingIntro{

margin:18px 0 27px;

font-size:.84rem;

line-height:1.75;

color:var(--muted);

}

.inputGroup{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:16px;

}

.inputGroup label{

font-size:.61rem;

font-weight:600;

letter-spacing:1.55px;

text-transform:uppercase;

color:rgba(255,255,255,.72);

}

.inputGroup input,
.inputGroup select,
.inputGroup textarea{

width:100%;

border:1px solid var(--line);

border-radius:0;

outline:none;

background:rgba(255,255,255,.055);

color:#fff;

}

.inputGroup input,
.inputGroup select{

height:54px;

padding:0 15px;

}

.inputGroup textarea{

min-height:145px;

padding:15px;

resize:vertical;

line-height:1.7;

}

.inputGroup input::placeholder,
.inputGroup textarea::placeholder{
color:rgba(255,255,255,.31);
}

.inputGroup input:focus,
.inputGroup select:focus,
.inputGroup textarea:focus{

border-color:var(--champagne);

background:rgba(255,255,255,.085);

box-shadow:0 0 0 3px rgba(234,223,207,.05);

}

.inputGroup select option{

background:#17141c;

color:#fff;

}

.bookingDateGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.submitBookingBtn{

width:100%;

min-height:58px;

margin-top:8px;

border:1px solid #fff;

background:#fff;

color:#111;

font-size:.67rem;

font-weight:700;

letter-spacing:1.8px;

text-transform:uppercase;

cursor:pointer;

}

.submitBookingBtn:hover{

background:var(--champagne);

border-color:var(--champagne);

}

.submitBookingBtn:disabled{

opacity:.52;

cursor:not-allowed;

}

.bookingStatus{

min-height:22px;

margin-top:14px;

text-align:center;

font-size:.74rem;

line-height:1.6;

color:var(--muted);

}

.bookingStatus.success{
color:var(--green);
}

.bookingStatus.error{
color:var(--red);
}


/* ==========================================
   FOOTER
========================================== */

.paradeFooter{

padding:70px 6% 35px;

background:#050505;

text-align:center;

border-top:1px solid rgba(255,255,255,.07);

}

.footerLogo{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(3rem,8vw,6.5rem);

font-weight:700;

letter-spacing:-5px;

}

.paradeFooter>p{

margin-top:12px;

font-size:.62rem;

letter-spacing:1.7px;

text-transform:uppercase;

color:var(--muted);

}

.footerLinks{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:24px;

margin:29px 0;

}

.footerLinks a{

font-size:.61rem;

letter-spacing:1.6px;

text-transform:uppercase;

color:rgba(255,255,255,.7);

transition:.25s;

}

.footerLinks a:hover{
color:var(--champagne);
}


/* ==========================================
   TABLET
========================================== */

@media(max-width:980px){

.paradeGrid,
.paradeSkeleton{

grid-template-columns:repeat(2,minmax(0,1fr));

}

}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:700px){

.paradeHeader{

height:70px;

padding:0 16px;

}

.paradeBrand{

font-size:.86rem;

letter-spacing:3.5px;

}

.headerActions{
gap:13px;
}

.headerActions a{

font-size:.54rem;

letter-spacing:1px;

}

.paradePage{

padding:42px 14px 75px;

}

.paradeIntro{

margin-bottom:30px;

}

.paradeIntro h1{

font-size:4rem;

letter-spacing:-4px;

}

.paradeIntro>p:last-child{

font-size:.84rem;

line-height:1.75;

}

.paradeControls{

padding:20px 14px;

}

.filterButtons{

flex-wrap:nowrap;

overflow-x:auto;

padding-bottom:5px;

scrollbar-width:none;

}

.filterButtons::-webkit-scrollbar{
display:none;
}

.paradeFilter,
.orientationFilter{

flex:0 0 auto;

min-height:40px;

padding:0 13px;

font-size:.53rem;

}

.paradeGrid,
.paradeSkeleton{

grid-template-columns:repeat(2,minmax(0,1fr));

gap:9px;

}

.paradeModelInfo{

padding:14px 12px;

}

.paradeModelName{

font-size:1.12rem;

}

.paradeModelHeading p{

font-size:.62rem;

}

.paradeModelMeta{

gap:5px;

margin-top:13px;

}

.paradeModelMeta span{

padding:6px 7px;

font-size:.47rem;

letter-spacing:.7px;

}

.paradeVerifiedBadge{

top:9px;

left:9px;

padding:6px 8px;

font-size:.46rem;

}

.paradeModelActions{

grid-template-columns:1fr;

gap:7px;

margin-top:15px;

}

.viewProfileBtn,
.bookParadeModelBtn{

min-height:42px;

font-size:.52rem;

letter-spacing:1px;

}

.bookingModal{

padding:0;

align-items:flex-end;

}

.bookingPanel{

width:100%;

max-height:94vh;

padding:30px 18px 24px;

}

.bookingDateGrid{

grid-template-columns:1fr;

gap:0;

}

.paradeFooter{

padding:52px 18px 28px;

}

.footerLogo{

font-size:3.8rem;

letter-spacing:-4px;

}

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media(max-width:420px){

.paradePage{
padding-left:10px;
padding-right:10px;
}

.paradeIntro h1{
font-size:3.45rem;
}

.paradeGrid,
.paradeSkeleton{

grid-template-columns:1fr 1fr;

gap:7px;

}

.paradeModelInfo{

padding:12px 9px;

}

.paradeModelName{
font-size:1rem;
}

.paradeModelHeading p{
font-size:.57rem;
}

.paradeModelMeta span{
font-size:.43rem;
}

.viewProfileBtn,
.bookParadeModelBtn{

min-height:40px;

font-size:.48rem;

padding:0 5px;

}

}

/* Mobile interaction visibility fix */
@media(max-width:700px){
  .paradeHeader{gap:10px;}
  .headerActions{max-width:70vw;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .headerActions::-webkit-scrollbar{display:none;}
  .headerActions a,.headerActions button{display:inline-flex;flex:0 0 auto;}
}