/* =============================================================================
   THE THRESHOLD — the Angels Camp entrance
   =============================================================================
   A mercantile door. Drawn entirely in CSS and inline SVG: no image, no video,
   no library. The whole entrance weighs less than one photograph.

   The visitor has to decide to come in. Nothing opens on its own, nothing
   plays on its own, and the shop is one button away at every moment.
   ========================================================================== */

.thr{
  position:fixed; inset:0; z-index:1000;
  background:
    radial-gradient(ellipse 130% 85% at 50% 40%, #16150f 0%, #0a0908 58%, #040404 100%);
  display:grid; place-items:center;
  overflow:hidden;
  perspective:1500px; perspective-origin:50% 46%;
  opacity:1;
  transition:opacity .55s cubic-bezier(.6,.05,.9,.4);
}
.thr[hidden]{ display:none; }

/* The push through the doorway: the whole scene comes toward the viewer while
   it fades, which reads as walking in rather than as a dissolve. */
.thr.is-entering{ opacity:0; }
.thr.is-entering .thr-scene{
  transform:translateZ(560px) translateY(2%);
  transition:transform 1.15s cubic-bezier(.42,0,.58,1);
}

.thr-scene{
  position:relative; transform-style:preserve-3d;
  /* Driven by height, not width. The frame overhangs the leaf and the transom
     sits above it, so the whole assembly needs about 1.3x the leaf height.
     Sizing from the viewport height is the only way it always fits. */
  height:min(56vh, 520px);
  aspect-ratio:1/2.05;
  width:auto;
  max-width:78vw;
  transform:translateY(-4%);
}

/* ---- the frame ---------------------------------------------------------- */
.thr-frame{
  position:absolute; inset:-6.5% -9% -3.5%;
  background:linear-gradient(100deg,#26231e 0%,#332f28 34%,#1f1d19 70%,#2c2822 100%);
  box-shadow:inset 0 0 0 1px rgba(255,245,229,.07), 0 40px 90px rgba(0,0,0,.6);
}
.thr-frame::after{
  /* the reveal, the inner edge of the jamb */
  content:''; position:absolute; inset:6% 8% 3%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 26%, rgba(0,0,0,.2) 62%, rgba(0,0,0,.7) 100%),
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.25) 18%, rgba(0,0,0,.15) 82%, rgba(0,0,0,.88) 100%),
    #0a0806;
  box-shadow:inset 0 0 34px rgba(0,0,0,.95);
}

/* The sill. Sits in front of the leaf in 3D so the door passes behind it,
   which is what a door actually does and what stops the kick plate looking
   like it has come loose halfway through the swing. */
.thr-sill{
  position:absolute; left:-9%; right:-9%; bottom:-6.5%; height:5.5%;
  background:linear-gradient(180deg,#3a352d 0%,#211e19 55%,#14120f 100%);
  box-shadow:0 -1px 0 rgba(255,238,205,.09), 0 14px 30px rgba(0,0,0,.6);
  transform:translateZ(26px);
}

/* the transom light above the door */
.thr-transom{
  position:absolute; left:-9%; right:-9%; top:-19.6%; height:13.1%;
  background:linear-gradient(180deg, rgba(255,238,205,.13), rgba(255,238,205,.04));
  border:1px solid rgba(255,245,229,.16);
  display:grid; place-items:center; overflow:hidden;
  container-type:inline-size;
}
.thr-transom span{
  font-family:'Rosario',sans-serif;
  font-size:clamp(.34rem,1.5cqw,.52rem);
  letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:rgba(210,225,19,.66); white-space:nowrap;
  max-width:92%; overflow:hidden; text-overflow:clip;
}

/* ---- the door leaf ------------------------------------------------------ */
.thr-door{
  position:absolute; inset:0;
  /* Hinged on the right, because the handle set is on the left. Getting this
     backwards is the single most obvious way to make a door look wrong. */
  transform-origin:right center; transform-style:preserve-3d;
  background:linear-gradient(96deg,#332f29 0%,#474139 24%,#2c2823 60%,#3d3830 100%);
  /* a faint vertical grain, drawn rather than textured */
  background-image:linear-gradient(96deg,#332f29 0%,#474139 24%,#2c2823 60%,#3d3830 100%),
    repeating-linear-gradient(90deg, rgba(255,245,229,.022) 0 1px, transparent 1px 7px);
  box-shadow:inset 0 0 0 1px rgba(255,245,229,.08),
             inset -14px 0 34px rgba(0,0,0,.5),
             0 20px 50px rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform 1.6s cubic-bezier(.34,.02,.18,1),
             box-shadow 1.6s cubic-bezier(.34,.02,.18,1);
  will-change:transform;
}
.thr.is-open .thr-door{
  transform:rotateY(82deg);
  box-shadow:inset 0 0 0 1px rgba(255,245,229,.08), 0 30px 70px rgba(0,0,0,.7);
}
/* a hairline of light down the opening edge as it swings */
.thr-door::before{
  content:''; position:absolute; right:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,238,205,.16),transparent);
}
.thr-door::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,rgba(255,245,229,.5),transparent);
  opacity:0; transition:opacity .5s ease .1s;
}
.thr.is-open .thr-door::after{ opacity:1; }

/* the glass */
.thr-glass{
  position:absolute; left:11%; right:11%; top:8%; height:52%;
  background:linear-gradient(168deg, rgba(190,205,200,.13), rgba(120,140,135,.07) 55%, rgba(255,245,229,.05));
  border:1px solid rgba(20,15,10,.55);
  box-shadow:inset 0 0 0 3px rgba(255,245,229,.05), inset 0 8px 26px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.42em; text-align:center; padding:8% 6%;
}
/* reverse-painted lettering, the way a real shop door carries it */
.thr-name{
  font-family:'Abril Fatface',serif; font-weight:400;
  font-size:clamp(.86rem,2.5vw,1.28rem); line-height:1.06;
  color:#d2e113;
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 0 16px rgba(210,225,19,.22);
}
.thr-sub{
  font-family:'Rosario',sans-serif; font-weight:700;
  font-size:clamp(.4rem,1.05vw,.52rem); letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,245,229,.62);
}
.thr-rule{ width:38%; height:1px; background:rgba(210,225,19,.34); }
.thr-est{
  font-family:'Rosario',sans-serif; font-weight:600;
  font-size:clamp(.36rem,.95vw,.46rem); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,245,229,.4);
}

/* lower panel, and the kick plate */
.thr-panel{
  position:absolute; left:11%; right:11%; top:66%; bottom:9%;
  border:1px solid rgba(20,15,10,.5);
  background:linear-gradient(180deg, rgba(255,245,229,.045), rgba(0,0,0,.16));
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.14);
}

/* ---- the brass ---------------------------------------------------------- */
/* The hardware. A backplate, a knob, and a thumb lever that actually pivots
   where a thumb lever pivots: at the plate, not in mid-air. */
.thr-plate{
  position:absolute; right:6%; top:57.5%; width:7%; height:10.5%;
  background:linear-gradient(150deg,#8c7333 0%,#5d4a1c 55%,#7a6229 100%);
  box-shadow:0 1px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
  border-radius:2px;
}
.thr-knob{
  position:absolute; right:7.2%; top:60.2%; width:4.6%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 33% 28%, #f0d795 0%, #c39a34 40%, #6b5115 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.65), inset 0 -1px 3px rgba(0,0,0,.45);
}
.thr-latch{
  position:absolute; right:6.4%; top:54.6%; width:8.5%; height:1.5%;
  background:linear-gradient(180deg,#e2c87b,#8a6a1f);
  border-radius:1px 3px 3px 1px;
  box-shadow:0 1px 3px rgba(0,0,0,.6);
  transform-origin:92% 50%;
  transition:transform .16s cubic-bezier(.2,1.5,.4,1);
}
.thr.is-latching .thr-latch{ transform:rotate(-19deg); }

/* ---- THE PHOTOGRAPHIC LEAF ------------------------------------------------
   Applied only once the real door image has decoded. Until then, and forever
   if the file is missing or the connection gives up, the drawn door above is
   what the visitor sees. The entrance never shows a hole. */
.thr-scene.has-photo .thr-door{
  background:#1a1512 var(--thr-door-img) center/100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),
             inset -10px 0 26px rgba(0,0,0,.35),
             0 22px 54px rgba(0,0,0,.55);
}
/* The drawn detail is scaffolding for the CSS door. With a photograph of a real
   door carrying its own glass, carving, nameplate and hardware, all of it would
   be a second door painted on top of the first. */
.thr-scene.has-photo .thr-glass,
.thr-scene.has-photo .thr-panel,
.thr-scene.has-photo .thr-plate,
.thr-scene.has-photo .thr-knob{ display:none; }

/* The latch is the exception: it is the one part that has to move when the
   mechanism answers. Positioned over the handle in the photograph and kept
   invisible until it does something. */
.thr-scene.has-photo .thr-latch{
  right:auto; left:4.2%; top:47.5%; width:5.5%; height:9.5%;
  background:linear-gradient(150deg, rgba(226,200,123,.0), rgba(226,200,123,.0));
  box-shadow:none; border-radius:2px;
  transform-origin:50% 8%;
  transition:transform .17s cubic-bezier(.2,1.5,.4,1), box-shadow .17s ease;
}
.thr.is-latching .thr-scene.has-photo .thr-latch{
  transform:rotate(7deg);
  box-shadow:0 0 14px 3px rgba(255,226,170,.35);
}

/* the light behind the door, waiting */
.thr-light{
  position:absolute; inset:6% 8% 3%;
  background:radial-gradient(ellipse 90% 70% at 50% 62%,
             rgba(255,238,205,.5) 0%, rgba(255,226,170,.15) 45%, transparent 72%);
  opacity:0; transition:opacity 1.3s ease .15s; pointer-events:none;
}
.thr.is-open .thr-light{ opacity:1; }

/* ---- the controls ------------------------------------------------------- */
/* Below the door, on the floor of the scene. On the panel it read as a
   sticker somebody had put on the glass. */
.thr-ui{
  position:absolute; left:0; right:0; bottom:clamp(18px,4.5vh,44px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:0 20px; text-align:center; z-index:2;
}
.thr-enter{
  min-height:48px; padding:14px 32px; cursor:pointer;
  background:#d2e113; color:#141210; border:2px solid #d2e113;
  font-family:'Rosario',sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; border-radius:0;
  transition:background .2s ease, color .2s ease;
}
.thr-enter:hover{ background:transparent; color:#d2e113; }
.thr-skip{
  min-height:44px; padding:10px 18px; cursor:pointer; background:none; border:0;
  font-family:'Rosario',sans-serif; font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,245,229,.44); text-decoration:underline;
  text-underline-offset:4px; transition:color .2s ease;
}
.thr-skip:hover{ color:rgba(255,245,229,.8); }
.thr-sound{
  position:absolute; top:clamp(14px,3vh,26px); right:clamp(14px,3vw,26px);
  min-height:44px; min-width:44px; padding:10px 14px; cursor:pointer;
  background:none; border:1px solid rgba(255,245,229,.2);
  font-family:'Rosario',sans-serif; font-size:.55rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,245,229,.55);
  transition:border-color .2s ease, color .2s ease;
}
.thr-sound:hover{ border-color:#d2e113; color:#d2e113; }
.thr-sound[aria-pressed="true"]{ color:#d2e113; border-color:rgba(210,225,19,.5); }

.thr *:focus-visible{
  outline:2px solid #fff5e5; outline-offset:3px; box-shadow:0 0 0 5px rgba(210,225,19,.55);
}

/* the page does not scroll while the door is shut */
html.thr-shut, html.thr-shut body{ overflow:hidden; }

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width:520px){
  .thr{ perspective:900px; }
  .thr-scene{ height:min(46vh, 380px); max-width:70vw; }
  /* Less travel and a shorter swing: a phone is doing more work for less
     visible reward, and a long animation on a small screen reads as a wait. */
  .thr-door{ transition-duration:1.15s; }
  .thr.is-open .thr-door{ transform:rotateY(74deg); }
  .thr.is-entering .thr-scene{ transform:translateZ(340px); }
}

/* ---- reduced motion ------------------------------------------------------
   Not a lesser version. The visitor still chooses to enter, the latch still
   answers, the light still comes up. Nothing swings and nothing travels. */
@media (prefers-reduced-motion: reduce){
  .thr, .thr-door, .thr-light, .thr-latch, .thr-door::after{
    transition-duration:.28s !important;
  }
  .thr.is-open .thr-door{ transform:none; opacity:0; }
  .thr.is-entering .thr-scene{ transform:none; transition:none; }
  .thr-scene{ transform:none !important; }
}