@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@300;400;600&display=swap');

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

body{

    font-family:"Cormorant Garamond",serif;

    background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.85)),
    url("Parlour.jpeg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    color:#ddd6c8;

    min-height:100vh;

    overflow-x:hidden;
}

/* Dark vignette */

.overlay{

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
    radial-gradient(circle,
    transparent 35%,
    rgba(0,0,0,.55) 100%);

}

/* ========================= */

header{

    text-align:center;

    padding-top:70px;
    padding-bottom:60px;

}

header h1{

    font-family:"Cinzel",serif;

    font-size:3rem;

    color:#d6b98c;

    letter-spacing:5px;

    text-shadow:
    0 0 20px #300405,
    0 0 50px #300405;

}

header p{

    margin-top:20px;

    color:#b08d57;

    font-size:1.3rem;

    font-style:italic;

}

/* ========================= */

.hallway{

    width:1100px;

    margin:40px auto;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:70px;

}

/* ========================= */

.door{

    text-decoration:none;

    color:#d6b98c;

    text-align:center;

    perspective:1200px;

}

/* ========================= */

/* ======================================
        GOTHIC ARCH DOOR
====================================== */

.door-panel{

position:relative;

width:180px;
height:340px;

background:
linear-gradient(
to right,
#170909,
#4d1e26,
#2b1116);

border:5px solid #1a0606;

border-radius:

90px 90px 8px 8px;

overflow:hidden;

transform-origin:left center;

transition:
1s cubic-bezier(.2,.7,.2,1);

box-shadow:

0 0 40px rgba(0,0,0,.8),

inset 0 0 40px rgba(255,255,255,.04);

}

/* carved border */

.door-panel::before{

content:"";

position:absolute;

top:18px;
left:18px;
right:18px;
bottom:18px;

border:

2px solid rgba(120,40,40,.6);

border-radius:

70px 70px 4px 4px;

}

/* inner arch */

.door-panel::after{

content:"";

position:absolute;

top:55px;

left:50%;

transform:translateX(-50%);

width:80px;
height:80px;

border-radius:50%;

border:

2px solid rgba(120,40,40,.4);

}


.door-panel{

    position:relative;

    width:170px;
    height:320px;

    transform-origin:left center;

    transition:.9s ease;

    border-radius:4px;

    overflow:hidden;

    background:

    linear-gradient(
    to right,
    #120909,
    #341515,
    #4d1e26,
    #2a0d12
    );

    border:4px solid #150202;

    box-shadow:

    inset 0 0 20px rgba(255,255,255,.04),

    inset 0 0 60px rgba(0,0,0,.65),

    0 0 30px rgba(0,0,0,.7);

}

/* wooden panels */

.door-panel::before{

    content:"";

    position:absolute;

    inset:15px;

    border:2px solid #642828;

}

.door-panel::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:#220404;

}

/* ========================= */

/* brass knob */

.knob{

    position:absolute;

    width:15px;

    height:15px;

    border-radius:50%;

    background:#b08d57;

    right:18px;

    top:155px;

    box-shadow:

    0 0 10px rgba(176,141,87,.7);

}

/* ========================= */

/* glowing room behind door */

.door-panel{

    isolation:isolate;

}

.door-panel::selection{
    background:none;
}

.door-panel .light{

    display:none;

}

/* fake light */

.door-panel span{

    display:none;

}

/* ========================= */

/* OPEN */

.door:hover .door-panel{

    transform:

    rotateY(-42deg);

}

/* ========================= */

.door span{

display:block;

width:170px;

margin:auto;

margin-top:18px;

padding:12px;

background:

linear-gradient(

to bottom,

#806135,

#4b3718);

border:

1px solid #cfb37d;

font-family:"Cinzel",serif;

letter-spacing:2px;

color:#f0e0ba;

box-shadow:

0 0 12px rgba(0,0,0,.6);

transition:.4s;

}

.door:hover span{

background:

linear-gradient(

to bottom,

#9d7844,

#6a471f);

}

.door:hover span{

    color:#fff0d0;

    text-shadow:

    0 0 15px #b08d57;

}

/* ========================= */

/* light spilling from doorway */

.door::before{

    content:"";

    position:absolute;

    width:180px;

    height:320px;

    background:

    radial-gradient(circle,
    rgba(255,220,150,.55),
    transparent 70%);

    opacity:0;

    transition:.8s;

    transform:translate(-5px,-5px);

    filter:blur(20px);

    pointer-events:none;

}

.door{

    position:relative;

}

.door:hover::before{

    opacity:1;

}

/* =================================
            CANDLE FLAME
================================= */

.flame{

position:absolute;

left:50%;

top:22px;

transform:translateX(-50%);

width:10px;
height:18px;

border-radius:

50% 50% 50% 50%;

background:

radial-gradient(circle,

#fff6b5,

#ffbf5a,

#cc5500);

box-shadow:

0 0 10px #ffcf60,

0 0 25px orange,

0 0 45px crimson;

animation:

flicker 1.8s infinite alternate;

}

@keyframes flicker{

0%{

transform:

translateX(-50%)

scale(1);

opacity:1;

}

40%{

transform:

translateX(-49%)

scale(.92);

}

100%{

transform:

translateX(-51%)

scale(1.08);

opacity:.8;

}

}

/* ==========================================
              FOG
========================================== */

.fog{

position:fixed;

left:0;
bottom:0;

width:100%;
height:220px;

pointer-events:none;

background:

radial-gradient(circle at 20% 100%,
rgba(255,255,255,.08),
transparent 55%),

radial-gradient(circle at 80% 100%,
rgba(255,255,255,.06),
transparent 60%),

linear-gradient(
to top,
rgba(255,255,255,.10),
transparent);

filter:blur(30px);

animation:

fogmove 30s linear infinite;

opacity:.45;

z-index:1;

}

@keyframes fogmove{

0%{

transform:translateX(-60px);

}

100%{

transform:translateX(60px);

}

}

/* ==========================================
              DUST
========================================== */

.dust{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:2;

}

.dust span{

position:absolute;

display:block;

width:3px;
height:3px;

background:white;

border-radius:50%;

opacity:.15;

animation:

float 18s linear infinite;

}

.dust span:nth-child(1){

left:5%;
animation-delay:0s;

}

.dust span:nth-child(2){

left:15%;
animation-delay:3s;

}

.dust span:nth-child(3){

left:28%;
animation-delay:8s;

}

.dust span:nth-child(4){

left:40%;
animation-delay:5s;

}

.dust span:nth-child(5){

left:52%;
animation-delay:10s;

}

.dust span:nth-child(6){

left:66%;
animation-delay:6s;

}

.dust span:nth-child(7){

left:78%;
animation-delay:13s;

}

.dust span:nth-child(8){

left:90%;
animation-delay:1s;

}

@keyframes float{

0%{

transform:

translateY(100vh);

opacity:0;

}

15%{

opacity:.18;

}

100%{

transform:

translateY(-200px);

opacity:0;

}

}

.door-panel{

overflow:visible;

}

.door-panel::before{

box-shadow:

0 0 30px rgba(255,255,255,.03);

}

.hallway:hover .door{

opacity:.28;

transition:.6s;

filter:blur(.5px);

}

.hallway:hover .door:hover{

opacity:1;

filter:none;

transform:

translateY(-10px);

z-index:50;

}

.door:nth-child(1)::before{

background:

radial-gradient(circle,

rgba(230,230,230,.65),

transparent 70%);

}

.door:nth-child(2)::before{

background:

radial-gradient(circle,

rgba(180,0,0,.6),

transparent 70%);

}

.door:nth-child(3)::before{

background:

radial-gradient(circle,

rgba(90,40,180,.55),

transparent 70%);

}

.door:nth-child(4)::before{

background:

radial-gradient(circle,

rgba(60,90,255,.55),

transparent 70%);

}

/* ======================================
          STAINED GLASS
====================================== */

.glass{

position:absolute;

top:60px;

left:50%;

transform:translateX(-50%);

width:72px;
height:72px;

border-radius:50%;

background:

radial-gradient(circle,

#711515,

#250404);

border:

2px solid #7a4e24;

box-shadow:

0 0 10px rgba(255,80,80,.2);

transition:1s;

}

.door:hover .glass{

background:

radial-gradient(circle,

#ffcc88,

#b30000);

box-shadow:

0 0 40px crimson;

}


.hallway::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

repeating-linear-gradient(

90deg,

transparent 0px,

transparent 210px,

rgba(255,255,255,.03) 210px,

rgba(255,255,255,.03) 215px,

transparent 215px,

transparent 420px

);

opacity:.5;

}

.door span {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s ease, transform .4s ease;
}

.door:hover span {
    opacity: 1;
    transform: translateY(0);
}

.parlour-door{

position:fixed;

top:30px;
left:30px;

padding:10px 18px;

background:
linear-gradient(#7f6330,#4f3915);

border:1px solid #d6b98c;

color:#f0e0ba;

font-family:"Cinzel",serif;

text-decoration:none;

letter-spacing:1px;

box-shadow:
0 0 15px rgba(0,0,0,.5);

z-index:9999;

transition:.3s;

}

.parlour-door:hover{

background:
linear-gradient(#a57d44,#6a471f);

transform:translateY(-2px);

box-shadow:
0 0 20px rgba(176,141,87,.6);

}

.door{

animation:

idle 7s ease-in-out infinite;

}

@keyframes idle{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-2px);

}

100%{

transform:translateY(0px);

}

}



.door{

opacity:0;

transform:

translateY(60px);

animation:

appear 1.2s forwards;

}

.door:nth-child(1){

animation-delay:.2s;

}

.door:nth-child(2){

animation-delay:.5s;

}

.door:nth-child(3){

animation-delay:.8s;

}

.door:nth-child(4){

animation-delay:1.1s;

}

@keyframes appear{

to{

opacity:1;

transform:

translateY(0);

}

}


.door.locked {
    cursor: not-allowed;
    pointer-events: none;
}