/* ==========================================================================
   GATE — the door (demo 1)

   A real arched doorway in morning light. Click it and the camera pushes
   through rather than the leaf swinging open: a push reads as arriving
   somewhere, it survives every screen size, and it needs no hand-drawn
   hinge to be convincing.

   The photograph is illustrative, not the clinic's own door — flagged for
   the client conversation along with the rest of the placeholder imagery.
   ========================================================================== */

/* The swing measured clean at 60fps, so what felt wrong was the curve, not
   the performance. --ease-swap holds still, rushes the middle and stops dead,
   which on an 82-degree rotation reads as a snap. This is a push and a long
   settle instead, and the two leaves are not quite in lockstep. */
.demo1{
  --t-curtain: 1800ms;
  --ease-door: cubic-bezier(.28,.74,.22,1);
}

/* The ground has to clear as the leaves swing, otherwise the gate's own
   background goes on covering the page and you never see inside. */
.gate--door{
  position:fixed;inset:0;overflow:hidden;
  background:#F3EADC;
  display:grid;place-items:end center;
  transition:background-color 900ms var(--ease) 420ms;
}
.gate--door.is-open{background-color:transparent;
  /* fades over its last beat so the element being removed is never seen */
  animation:drClear 420ms linear calc(var(--t-curtain) - 300ms) forwards}
@keyframes drClear{to{opacity:0}}

/* the mount: a hairline gold frame set in from the edge, drawn on arrival */
.gate--door::before{
  content:"";position:absolute;inset:clamp(14px,2.2vh,26px);z-index:2;pointer-events:none;
  border:1px solid rgba(176,142,93,.34);
  clip-path:inset(0 0 0 0);
  opacity:0;transform:scale(1.012);
  transition:opacity 900ms var(--ease) 200ms, transform 1200ms var(--ease) 200ms;
}
.gate--door.is-ready::before{opacity:1;transform:none}
.gate--door.is-open::before{opacity:0;transform:scale(1.06);
  transition:opacity 500ms var(--ease-exit), transform 900ms var(--ease-swap)}

/* ---------- the photograph, cut down the middle into two leaves ----------
   The doorway sits at 49% of the frame, so splitting the picture there and
   swinging the halves outward reads as the door itself opening. The page is
   already behind the gate, so what you see through the opening is the site. */
.dr-stage{
  position:absolute;inset:0;
  perspective:1600px;perspective-origin:50% 52%;
  transform:scale(1.04);
  transition:transform var(--t-curtain) var(--ease-door);
  will-change:transform;
}
.gate--door.is-ready .dr-stage{transform:scale(1)}
.gate--door.is-open  .dr-stage{transform:scale(1.11)}

.dr-leaf{
  position:absolute;top:0;bottom:0;width:50.1%;overflow:hidden;
  backface-visibility:hidden;
  transition:transform var(--t-curtain) var(--ease-door);
  will-change:transform;
}
.dr-leaf--l{left:0;transform-origin:left center}
.dr-leaf--r{right:0;transform-origin:right center}
/* the shading a leaf picks up as it turns away from the light: an overlay
   that fades, rather than a filter animating on a full-screen photograph */
.dr-leaf::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, rgba(38,31,24,.42), rgba(38,31,24,.06));
  transition:opacity var(--t-curtain) var(--ease-door);
}
.dr-leaf--r::after{background:linear-gradient(270deg, rgba(38,31,24,.42), rgba(38,31,24,.06))}
.gate--door.is-open .dr-leaf::after{opacity:1}
.gate--door.is-open .dr-leaf--l{transform:rotateY(76deg)}
.gate--door.is-open .dr-leaf--r{transform:rotateY(-76deg);transition-delay:70ms}

/* each leaf holds the whole picture, positioned so the two halves line up */
.dr-img{position:absolute;top:0;height:100%;width:100vw;max-width:none;
  object-fit:cover;object-position:50% 50%}
.dr-leaf--l .dr-img{left:0}
.dr-leaf--r .dr-img{right:0}
.dr-tall{display:none}
@media (max-width:820px){
  .dr-wide{display:none}
  .dr-tall{display:block}
}

/* the light warms as the scene settles, then floods on the way through */
.dr-warm{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(58% 44% at 49% 50%, rgba(255,226,178,.5), transparent 70%);
  mix-blend-mode:screen;
  transition:opacity 1400ms var(--ease) 300ms;
}
.gate--door.is-ready .dr-warm{opacity:.85;animation:drBreathe 4.6s ease-in-out 1.6s infinite alternate}
.gate--door.is-open .dr-warm{opacity:0;animation:none;transition:opacity 500ms linear}
@keyframes drBreathe{from{opacity:.7}to{opacity:1}}

/* Light spilling from the opening. Kept low: at full strength it flooded the
   whole frame white and hid the very thing the door is opening onto. */
.dr-through{
  position:absolute;left:50%;top:52%;width:30vmin;height:60vmin;
  transform:translate(-50%,-50%) scale(.35);border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,248,235,.55) 0 38%, rgba(255,244,224,.22) 62%, transparent 78%);
  opacity:0;pointer-events:none;filter:blur(18px);
  transition:opacity 700ms var(--ease), transform var(--t-curtain) var(--ease-swap);
}
.gate--door.is-open .dr-through{opacity:1;transform:translate(-50%,-50%) scale(2.2);
  transition:opacity 900ms var(--ease) 160ms, transform var(--t-curtain) var(--ease-door)}

/* ---------- the words ---------- */
.dr-copy{
  position:relative;z-index:2;text-align:center;
  padding:0 24px clamp(54px,9vh,110px);
  width:min(760px,92vw);
}
.dr-copy::before{                        /* just enough ground to read on */
  content:"";position:absolute;left:-14vw;right:-14vw;bottom:0;top:-64px;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%, rgba(250,244,235,.94), rgba(250,244,235,0) 76%);
}
.dr-line,.dr-cue{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease);
}
.gate--door.is-ready .dr-line{opacity:1;transform:none;transition-delay:480ms}
.gate--door.is-ready .dr-cue {opacity:1;transform:none;transition-delay:820ms}
/* the words clear before the doors are much open, so they never float over
   the gap you are meant to be looking through */
.gate--door.is-open .dr-copy{opacity:0;transform:translate3d(0,-8px,0);
  transition:opacity 300ms linear, transform 500ms var(--ease-exit)}

.dr-mark{
  margin:0 0 14px;font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:#8A6E42;
}
/* Slimmer than it was: at fifty pixels the line sat across the whole doorway
   and read as a poster rather than an invitation. */
.dr-line{
  margin:0 0 20px;font-family:'Playfair Display',Georgia,serif;font-weight:400;
  font-size:clamp(19px,2.3vw,30px);line-height:1.22;letter-spacing:-.004em;color:#2B241C;
  max-width:19ch;margin-inline:auto;
}

/* the wait, run down as a hairline so the door never just jumps by itself */
.dr-timer{
  display:block;width:180px;height:1px;margin:20px auto 0;
  background:rgba(140,110,66,.22);overflow:hidden;
  opacity:0;transition:opacity 600ms var(--ease) 1200ms;
}
.dr-timer i{display:block;height:100%;background:rgba(140,110,66,.75);
  transform:scaleX(0);transform-origin:left}
.gate--door.is-ready .dr-timer{opacity:1}
.gate--door.is-ready .dr-timer i{transform:scaleX(1);transition:transform 2100ms linear 1100ms}
.gate--door.is-open .dr-timer{opacity:0;transition:opacity 300ms linear}
.dr-cue{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:#5E4A2E;
  padding:14px 26px;border:1px solid rgba(140,110,66,.42);border-radius:999px;
  background:rgba(255,252,246,.62);backdrop-filter:blur(3px);
}
.dr-cue::after{
  content:"";width:7px;height:7px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(-45deg);
  animation:drNudge 2.6s var(--ease) infinite;
}
@keyframes drNudge{0%,72%,100%{transform:rotate(-45deg) translate(0,0)}84%{transform:rotate(-45deg) translate(3px,3px)}}

/* the whole scene is the button */
.dr-hit{
  position:absolute;inset:0;z-index:3;
  background:transparent;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dr-hit:focus-visible{outline:2px solid #8A6E42;outline-offset:-8px}

.gate--door .gate-skip{
  position:absolute;right:22px;top:20px;bottom:auto;z-index:4;
  font-family:'Jost','Helvetica Neue',Arial,sans-serif;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#6B573A;text-decoration:none;padding:10px 14px;
  border-bottom:1px solid rgba(107,87,58,.35);
}
.gate--door .gate-skip:hover{color:#241E18;border-color:#241E18}

@media (prefers-reduced-motion: reduce){
  .demo1{--t-curtain:200ms}
  .gate--door.is-open{animation:none}
  .gate--door::before{opacity:1;transform:none;transition:none}
  .dr-timer{display:none}
  .gate--door.is-ready .dr-warm{animation:none}
  .dr-stage{transform:none;transition:none}
  .gate--door.is-open .dr-stage{transform:none}
  .dr-line,.dr-cue{opacity:1;transform:none;transition:none}
  .dr-warm{opacity:.7;transition:none}
  .dr-cue::after{animation:none}
}