Homescottminnis@gmail.com2026-08-22T09:11:47-05:00
CSS
.door-entry {
--door-width: min(68vw, 310px);
--door-height: calc(var(--door-width) * 1.45);
--accent: #d6b06c;
position: relative;
display: grid;
min-height: min(760px, 90svh);
place-items: center;
overflow: hidden;
padding: clamp(3rem, 8vw, 7rem) 1.25rem;
color: #f9f7f2;
background:
radial-gradient(circle at 50% 42%, rgba(214, 176, 108, 0.13), transparent 28rem),
linear-gradient(145deg, #171b22 0%, #090b0f 100%);
isolation: isolate;
}
.door-entry::before {
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 34px 34px;
content: "";
mask-image: radial-gradient(circle at center, black, transparent 75%);
}
.door-scene {
position: relative;
display: grid;
width: min(100%, 760px);
min-height: calc(var(--door-height) + 4rem);
place-items: center;
perspective: 1400px;
}
.door-stage {
position: relative;
z-index: 2;
filter: drop-shadow(0 35px 35px rgba(0, 0, 0, 0.42));
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
filter 700ms ease;
will-change: transform, opacity;
}
.door-frame {
position: relative;
width: var(--door-width);
height: var(--door-height);
padding: clamp(8px, 1.4vw, 13px);
border-radius: 9px 9px 3px 3px;
background: linear-gradient(135deg, #3b2b24, #17120f 65%);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.14),
0 0 0 2px #090706,
0 24px 55px rgba(0, 0, 0, 0.45);
transform-style: preserve-3d;
}
.door-frame::after {
position: absolute;
right: -16%;
bottom: -4%;
left: -16%;
height: 7%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.52);
content: "";
filter: blur(15px);
transform: translateZ(-60px);
}
.door-panel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px 4px 2px 2px;
background:
linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.035), transparent 52%),
radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.07), transparent 32%),
linear-gradient(135deg, #634838 0%, #38271f 48%, #201713 100%);
box-shadow:
inset 0 0 0 8px rgba(16, 10, 8, 0.24),
inset 0 0 45px rgba(0, 0, 0, 0.3);
transform-origin: left center;
transform-style: preserve-3d;
transition: transform 1250ms cubic-bezier(0.72, 0, 0.2, 1);
will-change: transform;
}
.door-panel::before,
.door-panel::after {
position: absolute;
right: 12%;
left: 12%;
height: 29%;
border: 1px solid rgba(214, 176, 108, 0.2);
border-radius: 2px;
background: rgba(0, 0, 0, 0.075);
box-shadow:
inset 0 0 0 5px rgba(0, 0, 0, 0.08),
0 1px rgba(255, 255, 255, 0.035);
content: "";
}
.door-panel::before {
top: 9%;
}
.door-panel::after {
bottom: 9%;
}
.door-highlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
100deg,
transparent 20%,
rgba(255, 255, 255, 0.075) 47%,
transparent 72%
);
transform: translateX(-100%);
transition: transform 900ms ease;
}
.door-lock {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
display: grid;
width: clamp(68px, 17vw, 88px);
aspect-ratio: 1;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #1b1712;
background: linear-gradient(145deg, #f4d99c, #b98a43);
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.34),
inset 0 1px rgba(255, 255, 255, 0.75);
cursor: pointer;
transform: translate(-50%, -50%);
transition:
transform 250ms ease,
box-shadow 250ms ease,
background 250ms ease;
-webkit-tap-highlight-color: transparent;
}
.door-lock:hover {
box-shadow:
0 17px 36px rgba(0, 0, 0, 0.42),
0 0 0 7px rgba(214, 176, 108, 0.1),
inset 0 1px rgba(255, 255, 255, 0.8);
transform: translate(-50%, -50%) scale(1.06);
}
.door-lock:focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}
.door-lock:active {
transform: translate(-50%, -50%) scale(0.96);
}
.door-lock:disabled {
cursor: default;
}
.lock-icon {
position: absolute;
width: 44%;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.6;
transition:
opacity 280ms ease,
transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lock-icon--open {
opacity: 0;
transform: scale(0.55) rotate(-20deg);
}
.door-handle {
position: absolute;
top: 50%;
right: 9%;
z-index: 3;
width: 13px;
aspect-ratio: 1;
border-radius: 50%;
background: #c49a52;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.6),
inset 0 1px rgba(255, 255, 255, 0.45);
transform: translateY(-50%);
}
/* Animation states */
.door-stage.is-unlocked .lock-icon--closed {
opacity: 0;
transform: scale(0.55) rotate(20deg);
}
.door-stage.is-unlocked .lock-icon--open {
opacity: 1;
transform: scale(1) rotate(0);
}
.door-stage.is-unlocked .door-highlight {
transform: translateX(100%);
}
.door-stage.is-opening .door-panel {
transform: rotateY(-104deg);
}
.door-stage.is-vanishing {
opacity: 0;
filter: blur(8px) drop-shadow(0 45px 45px rgba(0, 0, 0, 0));
pointer-events: none;
transform: scale(1.34) translateZ(100px);
}
.welcome-message {
position: absolute;
z-index: 1;
max-width: 650px;
padding: 1.5rem;
text-align: center;
opacity: 0;
filter: blur(12px);
transform: translateY(28px) scale(0.96);
transition:
opacity 900ms ease,
transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
filter 900ms ease;
}
.welcome-message.is-visible {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
}
.welcome-eyebrow {
display: block;
margin-bottom: 0.7rem;
color: var(--accent);
font: 600 0.75rem/1.2 system-ui, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.welcome-message h2 {
margin: 0;
font: 500 clamp(3.5rem, 13vw, 8rem) / 0.95 Georgia, serif;
letter-spacing: -0.055em;
}
.welcome-message p {
margin: 1.25rem auto 0;
color: rgba(255, 255, 255, 0.68);
font: 400 clamp(0.95rem, 2vw, 1.1rem) / 1.6 system-ui, sans-serif;
}
@media (max-width: 480px) {
.door-entry {
--door-width: min(70vw, 270px);
min-height: 78svh;
}
.door-scene {
min-height: calc(var(--door-height) + 2rem);
}
.door-stage.is-vanishing {
transform: scale(1.22) translateZ(70px);
}
}
@media (prefers-reduced-motion: reduce) {
.door-stage,
.door-panel,
.door-highlight,
.lock-icon,
.welcome-message {
transition-duration: 80ms;
}
}
JavaScript
