/* ==========================================================================
   THE SCREEN DOOR — shared component, The Cook Book / robinpostell.com
   A drawn screen door hung over the door in the house photograph.
   It sways on a breeze, beckons open every few seconds, and slaps shut.
   Hover / focus / tap opens it. Click walks you in.
   Photo coordinates: the door in house.jpg sits at x 49.9% y 40.3% (5.1 x 20.7).
   ========================================================================== */

.door-stage{
  --fx:.525;            /* horizontal focus of the crop (door centre ≈ .525) */
  --fy:.54;             /* vertical focus of the crop */
  position:absolute; inset:0; overflow:hidden; background:#07060a;
  container-type:size;
}
.door-cover{
  --w:max(100cqw, 150cqh);
  --h:calc(var(--w) / 1.5);
  position:absolute;
  width:var(--w); height:var(--h);
  left:calc((100cqw - var(--w)) * var(--fx));
  top:calc((100cqh - var(--h)) * var(--fy));
}
.door-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:doorSettle 14s cubic-bezier(.2,.6,.2,1) both; transform-origin:52.5% 52%;}
@keyframes doorSettle{from{transform:scale(1.06)}to{transform:scale(1)}}

/* lamp on the porch table (photo x 47.9% y 53.5%) */
.door-lamp{position:absolute; left:47.9%; top:53.4%; width:7%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,196,102,.55),rgba(227,181,102,.18) 38%,transparent 68%);
  mix-blend-mode:screen; pointer-events:none; animation:lampFlicker 5.3s infinite steps(1,end);}
@keyframes lampFlicker{
  0%{opacity:.85}7%{opacity:1}11%{opacity:.7}16%{opacity:.95}33%{opacity:.8}37%{opacity:1}
  52%{opacity:.88}58%{opacity:.72}61%{opacity:.98}79%{opacity:.84}88%{opacity:1}94%{opacity:.78}100%{opacity:.85}}

/* ---- the door ---- */
.door-anchor{position:absolute; left:49.9%; top:40.3%; width:5.1%; height:20.7%; z-index:3;}
.door-anchor::before{content:""; position:absolute; inset:-26% -90% -8% -90%;}   /* generous hit area */
.door-glow{position:absolute; left:-90%; right:-90%; top:-34%; bottom:-14%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,rgba(255,189,92,.95),rgba(227,181,102,.42) 28%,rgba(200,135,46,.12) 55%,transparent 72%);
  mix-blend-mode:screen; opacity:calc(.12 + var(--g,0) * .9); filter:blur(6px);}
.door-spill{position:absolute; left:-70%; right:-70%; top:96%; height:150%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0,rgba(255,189,92,.62),transparent 66%);
  transform:perspective(300px) rotateX(64deg); transform-origin:50% 0;
  mix-blend-mode:screen; opacity:calc(var(--g,0) * .85); filter:blur(4px);}

.screen-door{position:absolute; inset:0; padding:0; margin:0; border:0; background:none; cursor:pointer;
  perspective:560px; perspective-origin:0% 50%; -webkit-tap-highlight-color:transparent; color:inherit;}
.screen-door:focus-visible{outline:2px solid #E3B566; outline-offset:10px; border-radius:2px;}
.door-leaf{position:absolute; inset:0; transform-origin:0% 50%;
  transform:rotateY(calc(var(--a,0) * -1deg)); will-change:transform;
  filter:drop-shadow(calc(var(--a,0) * -.08px) 3px 5px rgba(0,0,0,.55));}
.door-leaf svg{width:100%; height:100%; display:block; overflow:visible;}
.mesh-sheen{animation:sheen 7s linear infinite;}
@keyframes sheen{from{transform:translateX(-90px)}to{transform:translateX(150px)}}

/* ---- invitation caption ---- */
.door-invite{position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(22px,5vh,48px); z-index:6; text-align:center;
  pointer-events:none; width:min(92vw,560px);}
.door-invite .sub{font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:clamp(18px,2.6vw,27px); color:var(--bone,#E8DCC4);
  text-shadow:0 2px 22px #000,0 0 3px #000;}
.door-invite .by{font-family:'Courier Prime',ui-monospace,monospace; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--amber,#C8872E);
  margin-top:12px; text-shadow:0 2px 14px #000;}
.door-cue{display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:20px;
  font-family:'Courier Prime',ui-monospace,monospace; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--tungsten,#E3B566);
  animation:cueBreath 3.2s ease-in-out infinite;}
.door-cue::after{content:""; width:1px; height:34px; background:linear-gradient(180deg,var(--tungsten,#E3B566),transparent);}
@keyframes cueBreath{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- fireflies ---- */
.fly{position:absolute; width:3px; height:3px; border-radius:50%; background:#F4D58A; box-shadow:0 0 8px 3px rgba(244,213,138,.55);
  opacity:0; animation:fly var(--d,14s) ease-in-out var(--s,0s) infinite; pointer-events:none;}
@keyframes fly{
  0%{opacity:0; transform:translate(0,0)}
  12%{opacity:.9}
  30%{opacity:.1}
  45%{opacity:.95; transform:translate(var(--x1,30px),var(--y1,-26px))}
  70%{opacity:.15}
  85%{opacity:.8; transform:translate(var(--x2,-22px),var(--y2,-48px))}
  100%{opacity:0; transform:translate(var(--x3,18px),var(--y3,-70px))}}

@media (prefers-reduced-motion:reduce){
  .door-photo,.door-lamp,.mesh-sheen,.door-cue{animation:none;}
  .fly{display:none;}
}

/* generic vignette for any stage */
.door-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;background:
  radial-gradient(ellipse 70% 62% at 52.5% 52%,transparent 40%,rgba(7,6,5,.55) 100%),
  linear-gradient(180deg,rgba(7,6,5,.7),rgba(7,6,5,0) 30%,rgba(7,6,5,0) 52%,rgba(7,6,5,.9))}