/* ============================================================
   THE DOOR, the /visit/ signature.

   The concept of this whole build is one sentence: she built a bakery with
   7,200 regulars and NO FRONT DOOR. /visit/ is the page where that stops being
   true, so this page is the door, and the scroll opens it.

   A real shopfront door: frame, glass, her own mark etched on the glass, the
   hours card hung on the inside, a handle. It swings on its hinge and what is
   behind it is the counter, lit, with the address on it. Everything is drawn in
   CSS from her own tokens; nothing is an image of a door.
   ============================================================ */

.dr{ position:relative; background:var(--kc-maroon-deep); }
.dr-live{ height:300svh; }

.dr-stage{ position:relative; }
.dr-live .dr-stage{
  position:sticky; top:var(--mast-h, 0px);
  height:calc(100svh - var(--mast-h, 0px));
  display:grid; place-items:center;
  perspective:1500px;
  overflow:hidden;
}

/* the street outside, at night, under her maroon */
.dr-out{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,214,190,.22), rgba(255,214,190,0) 70%),
    linear-gradient(178deg, var(--kc-maroon-mid), var(--kc-maroon-deep) 60%, #150609 100%);
}
.dr-out::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(251,228,234,.11) 1.4px, transparent 1.5px) 0 0/24px 24px;
}

/* ---------- THE OPENING: the frame, and the counter seen through it ---------- */
.dr-frame{
  position:relative;
  width:min(486px, 80vw);
  aspect-ratio:1/1.74;
  transform-style:preserve-3d;
  z-index:2;
}
/* what is inside: the lit shop, the counter, and her address on it */
.dr-inside{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:8px 8px 3px 3px;
  background:
    /* the case glow along the counter */
    radial-gradient(70% 26% at 50% 74%, rgba(255,236,214,.55), rgba(255,236,214,0) 70%),
    /* the room */
    linear-gradient(178deg, #f3e2d3 0%, #e9d3c1 46%, #d8bda9 72%, #b98f78 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-3);
  /* the copy lives INSIDE the doorway. At the first cut it was set to the frame
     width with 22px of padding and the longest line clipped against the jamb,
     which is what a doorway does to anything wider than it. */
  padding:var(--space-7) clamp(26px, 7%, 44px);
  text-align:center;
}
.dr-inside > *{ max-width:100%; }
.dr-inside p{ max-width:30ch; margin-inline:auto; }
.dr-inside .dr-addr{
  font-family:var(--kc-script);
  font-size:clamp(21px, 3.4vw, 30px);
  color:var(--kc-espresso);
  line-height:1.25;
}
.dr-inside p{ margin:0; color:var(--kc-ink-soft); font-size:var(--kc-small); }
.dr-inside .btn{ margin-top:var(--space-4); }
/* the counter itself, running across the bottom of the room */
.dr-inside::after{
  content:"";
  position:absolute; left:-6%; right:-6%; bottom:0; height:19%;
  background:linear-gradient(#f6e9dc, #cba88f 58%, #8d6551);
  box-shadow:0 -12px 26px -12px rgba(80,45,38,.6);
}

/* ---------- THE DOOR LEAF ---------- */
.dr-leaf{
  position:absolute; inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(96deg, #6d3a34, #4c2622 26%, #58302a 62%, #3d1e1b);
  box-shadow:
    0 40px 70px -34px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(255,232,214,.10);
  padding:16px;
}
/* the glass panel, and her mark etched into it */
.dr-glass{
  position:absolute; inset:16px 16px 30% 16px;
  border-radius:4px;
  background:
    linear-gradient(122deg, rgba(255,244,232,.20) 0 32%, rgba(255,244,232,.05) 32% 44%, rgba(255,244,232,.14) 44%),
    linear-gradient(180deg, rgba(60,30,26,.55), rgba(40,18,16,.72));
  box-shadow:inset 0 0 0 2px rgba(255,232,214,.16), inset 0 12px 24px -12px rgba(0,0,0,.6);
  display:grid; place-items:center;
}
.dr-glass img{
  width:44%; height:auto; opacity:.5;
  filter:grayscale(1) brightness(2.1) contrast(.7);
  mix-blend-mode:screen;
}
/* the lower rail of the door */
.dr-rail{
  position:absolute; left:16px; right:16px; bottom:16px; height:26%;
  border-radius:3px;
  background:linear-gradient(178deg, rgba(255,232,214,.09), rgba(0,0,0,.22));
  box-shadow:inset 0 0 0 2px rgba(255,232,214,.10);
}
/* the handle, on the opening edge */
.dr-handle{
  position:absolute; right:26px; top:52%;
  width:9px; height:74px;
  border-radius:5px;
  background:linear-gradient(90deg, #d9b48e, #f0d8b6 42%, #a97f5c);
  box-shadow:2px 3px 7px rgba(0,0,0,.55);
}
/* the hours card, hung on the inside of the glass, in her own hand */
.dr-card{
  position:absolute; left:50%; top:16%;
  transform:translateX(-50%) rotate(-2.4deg);
  width:64%;
  padding:var(--space-4) var(--space-3);
  background:linear-gradient(176deg, #fdf7f0, #f6e8dc);
  border-radius:3px 3px 22px 3px;
  box-shadow:0 12px 22px -10px rgba(0,0,0,.7);
  text-align:center;
}
.dr-card::before{
  content:"";
  position:absolute; inset:6px;
  border:1px dashed rgba(166,100,114,.45);
  border-radius:2px 2px 17px 2px;
}
.dr-card b{
  display:block; font-family:var(--kc-script); font-weight:400;
  font-size:var(--kc-d3); color:var(--kc-rose-text); line-height:1.15;
}
.dr-card span{ display:block; margin-top:5px; font-size:var(--kc-tiny); color:var(--kc-ink-soft); }

/* how far the door is open, drawn on her crimped edge */
.dr-walk{
  position:absolute; left:50%; bottom:clamp(16px,3.4vh,30px);
  transform:translateX(-50%);
  width:min(200px, 40vw); height:10px;
  border:1px dashed rgba(251,228,234,.5);
  border-radius:999px; overflow:hidden; z-index:5;
}
.dr-walk i{ display:block; height:100%; background:var(--kc-field);
  transform:scaleX(var(--dr-p, 0)); transform-origin:0 50%; }

/* ============================================================
   THE SHADOW: no JS, or reduced motion. The door is simply open, and everything
   it was hiding is on the page.
   ============================================================ */
.dr-flat{ padding:var(--section-y) 0; background:var(--kc-maroon-deep); }
.dr-flat .dr-out, .dr-flat .dr-walk{ display:none; }
.dr-flat .dr-stage{ position:static; height:auto; perspective:none; display:block; }
.dr-flat .dr-frame{
  position:static; width:min(430px,86vw); margin:0 auto;
  aspect-ratio:auto; transform-style:flat;
}
.dr-flat .dr-leaf{ display:none; }
.dr-flat .dr-inside{
  position:static; border-radius:8px;
  padding:var(--space-9) var(--space-6);
}

@media (prefers-reduced-motion:reduce){
  .dr-live{ height:auto; }
  .dr-live .dr-stage{ position:static; height:auto; }
}

@media (max-width:760px){
  .dr-live{ height:280svh; }
  .dr-frame{ width:min(330px, 80vw); }
  .dr-handle{ right:18px; height:58px; }
}