/* Парадная дверь. Отдельный слой: остальной особняк остаётся на своём месте. */
html.entrance-pending, html.entrance-pending body { overflow: hidden; }
.entrance[hidden] { display: none; }
.entrance:focus { outline: none; }
.entrance { --door-height: min(65svh, 620px); position: fixed; inset: 0; z-index: 1000; isolation: isolate; overflow: hidden; background: #100b08; color: #f0d59a; touch-action: none; opacity: 1; transition: opacity .7s ease; }
.entrance-wall { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, #6b452226, transparent 65%), repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #98734312 25%, transparent calc(25% + 1px)), linear-gradient(105deg, #100b08, #241811 48%, #100b08); }
.entrance-wall::after { content: ''; position: absolute; inset: 24px; border: 1px solid #ad834021; box-shadow: inset 0 0 0 6px #100b08, inset 0 0 0 7px #ad834011; }
.entrance-heading { position: absolute; z-index: 4; top: max(22px, 4svh); left: 20px; right: 20px; text-align: center; pointer-events: none; }
.entrance-heading p { font-family: 'Prata', Georgia, serif; font-size: clamp(24px, 3.2vw, 38px); letter-spacing: .24em; padding-left: .24em; color: #f0d69b; }
.entrance-heading h2 { margin-top: 4px; font-family: 'Cormorant', Georgia, serif; font-weight: 400; font-size: clamp(17px, 2.3vw, 23px); letter-spacing: .08em; color: #c6ae80; }
.entrance-stage { position: absolute; inset: 0; max-width: 1100px; margin: auto; }
.entrance-portal { position: absolute; top: 53%; left: 50%; width: min(68vw, 410px); height: var(--door-height); transform: translate(-50%, -50%); border: 10px solid #947039; border-image: linear-gradient(90deg, #3a240f, #b49253 13%, #5f401e 27%, #e4c17a 46%, #6a4924 67%, #3e2814) 1; box-shadow: 0 0 0 2px #25180d, 0 0 0 4px #bc9758, 0 0 0 10px #21160d, 0 0 0 12px #876133, 0 16px 70px 18px #000c, inset 0 0 30px #000; background: #100a05; perspective: 1000px; }
.entrance-pediment { position: absolute; top: -47px; left: -23px; right: -23px; height: 43px; display: grid; place-items: center; background: linear-gradient(90deg, #5d3b1b, #b78b46 20%, #765121 50%, #c49c58 80%, #513317); border: 2px solid #d0ac64; border-radius: 50% 50% 0 0 / 95% 95% 0 0; box-shadow: inset 0 0 0 4px #61401d, inset 0 0 0 5px #d1a453, 0 -4px 0 #3d2917; }
.entrance-pediment span { font-family: 'Prata', Georgia, serif; font-size: 22px; letter-spacing: -.12em; padding-right: .12em; line-height: 1; color: #e9c578; text-shadow: 0 1px #30200f, 0 -1px #f3dca5; }
.entrance-pediment::before, .entrance-pediment::after { content: '❧'; position: absolute; top: 3px; left: 16%; color: #ebc67b; font-size: 30px; line-height: 1; }
.entrance-pediment::after { left: auto; right: 16%; transform: scaleX(-1); }
.entrance-door { position: absolute; inset: 0; perspective: 1000px; }
.entrance-leaf { position: absolute; top: 0; width: 50%; height: 100%; transition: transform 1.35s cubic-bezier(.32,.06,.24,1), filter 1.35s; backface-visibility: hidden; }
.entrance-leaf-left { left: 0; transform-origin: left center; }
.entrance-leaf-right { right: 0; transform-origin: right center; }
.entrance-leaf-right svg { transform: scaleX(-1); }
.entrance-leaf svg { width: 100%; height: 100%; display: block; }
.entrance-light { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #fff6cf, #d7ab50 38%, #261b0d 85%); opacity: .25; transition: opacity 1s; }
.entrance-threshold { position: absolute; left: -25px; right: -25px; bottom: -26px; height: 17px; background: linear-gradient(#b59b6f, #403123 40%, #776249 44%, #231b12); box-shadow: 0 12px 20px #000; transform: perspective(220px) rotateX(12deg); }
.entrance-lock { position: absolute; z-index: 3; top: calc(53% + var(--door-height) * .03); left: 50%; width: 53px; height: 78px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 45%; background: transparent; cursor: pointer; transition: filter .2s, opacity .4s; }
.entrance-lock svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px #1b110a); }
.entrance-lock .lock-plate { fill: #b88f48; stroke: #f3d795; stroke-width: 1; }
.entrance-lock circle, .entrance-lock .lock-hole { fill: #140c05; stroke: #6a461c; stroke-width: 1.5; }
.entrance-lock::after { content: ''; position: absolute; inset: -16px; border: 1px solid #eccc7c; border-radius: 50%; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.entrance.is-ready .entrance-lock { filter: drop-shadow(0 0 12px #ffd784); }
.entrance.is-picked .entrance-lock::after { opacity: .6; transform: scale(1); }
.entrance.is-ready .entrance-lock::after { opacity: 1; box-shadow: 0 0 25px #e7b34b66; }
.entrance-chain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; fill: none; }
.entrance-chain path { stroke-linecap: round; }
.chain-shadow { stroke: #090602; stroke-width: 5; }
.chain-gold { stroke: #b58a3c; stroke-width: 3.2; stroke-dasharray: 3 3; }
.chain-shine { stroke: #f2d68f; stroke-width: 1; stroke-dasharray: 2 4; }
.entrance-key { position: absolute; z-index: 6; width: 100px; height: 185px; border: 0; padding: 0; background: transparent; color: #30200f; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transform-origin: 50% 8px; filter: drop-shadow(3px 6px 4px #0009); will-change: left, top; }
.entrance-key-art { display: block; position: absolute; top: 0; left: 5px; width: 90px; height: 135px; }
.entrance-tag { position: absolute; top: 132px; left: -19px; width: 139px; min-height: 62px; display: grid; place-items: center; padding: 7px 12px; border: 1px solid #d4b166; border-radius: 2px; background: linear-gradient(120deg, #b99b61, #ead4a1 35%, #d5b97b 70%, #b39352); box-shadow: 0 2px 4px #0008, inset 0 0 0 3px #d5ba7f, inset 0 0 0 4px #866730; transform: rotate(-8deg); font: 500 18px/1.05 'Cormorant', Georgia, serif; text-align: center; }
.entrance-tag::before { content: ''; position: absolute; width: 1px; height: 25px; background: #d8bd7e; top: -25px; left: 65px; transform: rotate(10deg); transform-origin: bottom; }
.entrance-tag span { max-width: 110px; }
.entrance-key:hover .entrance-key-art, .entrance-key:focus-visible .entrance-key-art { filter: drop-shadow(0 0 5px #efc57088); }
.entrance-key.is-dragging { cursor: grabbing; }
.entrance-key.is-home { animation: key-sway 4.5s ease-in-out infinite; }
.entrance-key.is-returning { transition: left .45s ease, top .45s ease; }
.entrance-key.is-turning { transform-origin: 50% var(--key-tip, 108px); transform: rotate(-75deg) scale(.9); transition: transform .55s linear; }
.entrance-key:focus-visible, .entrance-lock:focus-visible { outline: 2px solid #f3d98f; outline-offset: 8px; }
.entrance-footer { position: absolute; z-index: 8; bottom: max(20px, env(safe-area-inset-bottom)); left: 22px; right: 22px; text-align: center; }
.entrance-footer p { font: 400 clamp(18px, 2.3vw, 22px)/1.25 'Cormorant', Georgia, serif; color: #e1c792; min-height: 28px; max-width: 330px; margin: 0 auto 12px; }
.entrance-skip { min-height: 38px; background: none; border: 0; border-bottom: 1px solid #9d805040; padding: 5px 10px; font: 400 16px/1.3 'Cormorant', Georgia, serif; color: #aa9676; cursor: pointer; touch-action: manipulation; }
.entrance-skip:hover { color: #efdbb5; }
.entrance-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entrance-sconce { position: absolute; top: 43%; width: 35px; height: 100px; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 0 28px #e9ac4f55); }
.entrance-sconce-left { left: calc(50% - min(34vw, 205px) - 62px); }
.entrance-sconce-right { left: calc(50% + min(34vw, 205px) + 62px); }
.entrance-sconce i { position: absolute; top: 26px; left: 13px; height: 40px; width: 9px; background: linear-gradient(90deg, #c5ac77, #f6e7bc 55%, #ac8b4e); border-radius: 3px 3px 0 0; }
.entrance-sconce i::before { content: ''; position: absolute; top: -22px; left: 0; width: 9px; height: 20px; border-radius: 60% 40% 50% 50%; background: radial-gradient(ellipse at 50% 75%, #fff6c3, #efc46e 50%, #bf7f1c88); box-shadow: 0 0 25px 9px #dfb35c25; }
.entrance-sconce b { position: absolute; top: 65px; left: 3px; width: 28px; height: 7px; border-radius: 0 0 50% 50%; background: linear-gradient(90deg, #68421c, #dbb15e, #68421c); }
.entrance-sconce b::after { content: ''; position: absolute; top: 5px; left: 13px; height: 25px; border-left: 3px solid #a57b36; transform: rotate(10deg); }
.entrance.is-opening .entrance-leaf-left { transform: rotateY(-102deg); filter: brightness(.55); }
.entrance.is-opening .entrance-leaf-right { transform: rotateY(102deg); filter: brightness(.55); }
.entrance.is-opening .entrance-lock { opacity: 0; pointer-events: none; }
.entrance.is-opening .entrance-light { opacity: 1; }
.entrance.is-fading { opacity: 0; pointer-events: none; }
@keyframes key-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
/* Фотографическая дверь: рама неподвижна, две настоящие деревянные створки раскрываются. */
.entrance.has-photo { --photo-width: min(86vw, calc(var(--door-height) * .664)); }
.has-photo .entrance-wall { background: #110c08; }
.has-photo .entrance-wall::before { content: ''; position: absolute; inset: -20px; background-image: linear-gradient(#130b08a3,#130b0870), var(--door-photo); background-position: center; background-size: cover; filter: blur(10px) brightness(.36); }
.has-photo .entrance-portal { top: 53%; width: var(--photo-width); border: 0; border-image: none; box-shadow: 0 12px 65px 18px #0009; background: none; }
.has-photo .entrance-pediment, .has-photo .entrance-threshold, .has-photo .entrance-sconce { display: none; }
.entrance-frame { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 10% 6.25%, 10% 100%, 90% 100%, 90% 6.25%, 10% 6.25%); z-index: 2; pointer-events: none; }
.has-photo .entrance-door { inset: 6.25% 10% 0; }
.has-photo .entrance-leaf { overflow: hidden; }
.has-photo .entrance-leaf img { position: absolute; top: -6.666667%; width: 250%; max-width: none; height: 106.666667%; object-fit: fill; }
.has-photo .entrance-leaf-left img { left: -25%; }
.has-photo .entrance-leaf-right img { left: -125%; }
.has-photo .entrance-lock { top: calc(53% + var(--door-height) * .072); left: calc(50% + var(--photo-width) * .015); width: 44px; height: 64px; }
.has-photo .entrance-lock svg { opacity: 0; }
.has-photo .entrance-light { inset: 6.25% 10% 0; background: radial-gradient(ellipse at 50% 55%, #e0bd7f, #71502d 45%, #160e09 90%); }
.has-photo .entrance-key-art { filter: brightness(.85) saturate(.75); }
.has-key-photo svg.entrance-key-art { display: none; }
.entrance-key.has-key-photo { height: 218px; transform-origin: 50% 6px; }
.entrance-key.has-key-photo.is-turning { transform-origin: 50% var(--key-tip); }
.has-key-photo img.entrance-key-art { left: -5px; width: 110px; height: 166px; object-fit: contain; filter: brightness(1.15); }
.has-key-photo .entrance-tag { top: 162px; }
.has-key-photo:hover img.entrance-key-art, .has-key-photo:focus-visible img.entrance-key-art { filter: brightness(1.28); }
.has-photo .entrance-tag { background: linear-gradient(120deg, #a68a56, #dfd1ae 35%, #c3ad7f 70%, #99814f); border-color: #b69d69; box-shadow: 0 2px 5px #0008, inset 0 0 0 3px #c4ad7f, inset 0 0 0 4px #766140; }
@media (max-width: 600px) {
  .entrance { --door-height: min(61svh, 530px); }
  .entrance-portal { width: 66vw; top: 52%; }
  .entrance-lock { top: calc(52% + var(--door-height) * .03); }
  .has-photo .entrance-portal { top: 52%; width: var(--photo-width); }
  .has-photo .entrance-lock { top: calc(52% + var(--door-height) * .072); }
  .entrance-sconce-left { left: 7%; }
  .entrance-sconce-right { left: 93%; }
  .entrance-heading { top: max(22px, 5svh); }
  .entrance-footer { bottom: max(16px, env(safe-area-inset-bottom)); }
  .entrance-wall::after { inset: 12px; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .entrance { --door-height: 64svh; }
  .entrance-portal { width: calc(var(--door-height) * .7); }
  .has-photo .entrance-portal { width: var(--photo-width); }
  .entrance-heading { top: 12px; left: 25px; right: auto; text-align: left; }
  .entrance-heading p { font-size: 22px; }
  .entrance-heading h2 { font-size: 17px; }
  .entrance-footer { left: auto; right: 25px; bottom: 18px; width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance, .entrance *, .entrance *::after { animation: none !important; transition-duration: .01s !important; }
}