/* ============================================================
   CONFIRMATION SEQUENCE styles
   ------------------------------------------------------------
   Extracted from book.css so the booth page can run the same
   sequence wrapfx.js drives. book.css still carries its own
   copy and is deliberately untouched: the cart is live and
   these rules are not worth risking it over.
   ============================================================ */

/* ============================================================
   BOOKED ANIMATION, the house draws itself in light, sparks
   trace the outline, then the mark lands.
   ============================================================ */
/* ============================================================
   BOOKING CONFIRMATION SEQUENCE
   Layer order is set by z-index here, not DOM order, so the markup
   can stay readable: bg 0, dust 1, stage 2, sparks 3, flash 4.
   ============================================================ */
.wrapfx{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:#10130F;
  overflow:hidden;
  animation:wfIn .45s ease both;
}

.wrapfx[hidden]{display:none;}

.wrapfx.out{animation:wfOut .62s ease both;}

@keyframes wfIn{from{opacity:0;}to{opacity:1;}}

@keyframes wfOut{to{opacity:0;visibility:hidden;}}

/* ---- L0: ground + vignette ---- */
.wrapfx-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 42%, #22271F 0%, #14180F 46%, #0B0D09 100%);
}

.wrapfx-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}

/* a warm pool of light that swells as the mark lands */
.wrapfx-glow{
  position:absolute;z-index:0;width:min(760px,90vw);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(201,154,91,.30) 0%, rgba(201,154,91,.13) 34%, rgba(201,154,91,0) 68%);
  opacity:0;transform:scale(.55);
  transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.22,1,.36,1);
}

.wrapfx.lit .wrapfx-glow{opacity:1;transform:scale(1);}

/* ---- L1: drifting dust ---- */
.wrapfx-dust{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;}

/* ---- L3: sparks, in front of the stage but behind the flash ---- */
.wrapfx-spark{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;}

/* ---- L2/L4/L6: the stage ---- */
.wrapfx-stage{
  position:relative;z-index:2;
  display:grid;place-items:center;text-align:center;padding:24px;
}

.wrapfx-frame{
  position:relative;
  width:min(340px,68vw);aspect-ratio:200/160;
  display:grid;place-items:center;
}

.wrapfx-house{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 0 14px rgba(201,154,91,.42));
}

.wf-line{
  stroke:#C99A5B;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  vector-effect:non-scaling-stroke;
}

.wrapfx.go .wf-line{animation:wfDraw .9s cubic-bezier(.4,.9,.3,1) forwards;}

@keyframes wfDraw{to{stroke-dashoffset:0;}}

.wrapfx.go .wf-roof {animation-delay:.10s;}

.wrapfx.go .wf-walls{animation-delay:.40s;}

.wrapfx.go .wf-chim {animation-delay:.70s;}

.wrapfx.go .wf-win1 {animation-delay:.86s;}

.wrapfx.go .wf-win2 {animation-delay:.96s;}

.wrapfx.go .wf-door {animation-delay:1.06s;}

/* the house brightens the instant it is complete… */
.wrapfx.framed .wrapfx-house{
  filter:drop-shadow(0 0 26px rgba(201,154,91,.85));
  transition:filter .45s ease;
}

/* …then is taken by the shutter and dissolves into the sparks */
.wrapfx.captured .wrapfx-house{
  opacity:0;transform:scale(1.06);
  transition:opacity .42s ease, transform .6s cubic-bezier(.3,0,.7,0);
}

/* ---- viewfinder brackets ---- */
.wf-br{
  position:absolute;width:34px;height:34px;z-index:3;
  border:2.5px solid #F0DCB4;opacity:0;
  transition:opacity .35s ease, transform .62s cubic-bezier(.22,1,.36,1);
}

.wf-br-tl{top:-16px;left:-16px;border-right:0;border-bottom:0;transform:translate(-26px,-26px) scale(1.5);}

.wf-br-tr{top:-16px;right:-16px;border-left:0;border-bottom:0;transform:translate(26px,-26px) scale(1.5);}

.wf-br-bl{bottom:-16px;left:-16px;border-right:0;border-top:0;transform:translate(-26px,26px) scale(1.5);}

.wf-br-br{bottom:-16px;right:-16px;border-left:0;border-top:0;transform:translate(26px,26px) scale(1.5);}

/* sweep in from outside… */
.wrapfx.framing .wf-br{opacity:.95;transform:translate(0,0) scale(1);}

/* …and snap tight, the moment before the shutter */
.wrapfx.framed .wf-br{transform:translate(0,0) scale(.82);opacity:1;}

.wrapfx.framed .wf-br-tl{transform:translate(10px,10px) scale(.9);}

.wrapfx.framed .wf-br-tr{transform:translate(-10px,10px) scale(.9);}

.wrapfx.framed .wf-br-bl{transform:translate(10px,-10px) scale(.9);}

.wrapfx.framed .wf-br-br{transform:translate(-10px,-10px) scale(.9);}

/* after the capture they settle wide around the mark */
.wrapfx.captured .wf-br{transform:translate(0,0) scale(1);opacity:.5;}

/* ---- L5: shutter flash ---- */
.wrapfx-flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:#FFF8E9;opacity:0;
}

.wrapfx.snap .wrapfx-flash{animation:wfSnap .5s ease-out both;}

@keyframes wfSnap{
  0%{opacity:0;}
  6%{opacity:.92;}
  22%{opacity:.10;}
  38%{opacity:.34;}   /* the second curtain */
  100%{opacity:0;}
}

/* ---- the mark ---- */
.wrapfx-logo{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transform:scale(.35);
}

.wrapfx.captured .wrapfx-logo{animation:wfPop .85s cubic-bezier(.2,1.45,.4,1) forwards;}

@keyframes wfPop{
  0%{opacity:0;transform:scale(.35);}
  55%{opacity:1;transform:scale(1.07);}
  100%{opacity:1;transform:scale(1);}
}

.wrapfx-ap{
  width:42px;height:42px;color:#C99A5B;
  animation:wfSpin 22s linear infinite;
}

@keyframes wfSpin{to{transform:rotate(360deg);}}

.wrapfx-mark{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(26px,5.4vw,40px);letter-spacing:-.02em;color:#F6EFE2;
  line-height:1;white-space:nowrap;
}

.wrapfx-mark span{color:#A9C29B;}

.wrapfx-mark small{
  font-family:'JetBrains Mono',monospace;font-weight:400;
  font-size:.34em;letter-spacing:.14em;color:rgba(246,239,226,.55);
  margin-left:.18em;vertical-align:super;
}

/* ---- the words ---- */
.wrapfx-copy{
  margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:7px;
}

.wrapfx-copy > *{opacity:0;transform:translateY(14px);}

.wrapfx.said .wrapfx-copy > *{animation:wfRise .6s cubic-bezier(.22,1,.36,1) forwards;}

.wrapfx.said .wrapfx-thanks{animation-delay:.02s;}

.wrapfx.said .wrapfx-say{animation-delay:.14s;}

.wrapfx.said .wrapfx-sub{animation-delay:.26s;}

@keyframes wfRise{to{opacity:1;transform:translateY(0);}}

.wrapfx-thanks{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#C99A5B;
}

.wrapfx-say{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(19px,3.4vw,26px);color:#F6EFE2;
}

.wrapfx-sub{font-size:14.5px;color:rgba(246,239,226,.66);}
/* This is for CLAUDE: DO NOT hardcode absolute paths ever. This site moves machines often. */