/*
  Bon Papétit · Coming soon
  ---------------------------------------------------------------
  Ported 1:1 from the approved Claude Design canvas
  (design-source/canvas/Main.dc.html, the <helmet><style> block).

  DESIGN-LOCKED: every value in this file and every inline style in
  index.html was copied from the approved design. Do not "tidy",
  round, or re-theme values. Run the visual regression check
  (tests/visual.spec.js) after any change.

  Brand colour: #993399 (all text, logo, button, rules on focus)
  Paper:        #FDF6EE (page)   #FFFBF6 (RSVP card)
*/

/* ---------- Fonts (self-hosted, Latin subset WOFF) ---------- */
@font-face{font-family:'Apothecary';src:url(/fonts/Apothecary.woff) format('woff');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Schooner Script';src:url(/fonts/SchoonerScript-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Cormorant Garamond';src:url(/fonts/CormorantGaramond-Light.woff) format('woff');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(/fonts/CormorantGaramond-LightItalic.woff) format('woff');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(/fonts/CormorantGaramond-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(/fonts/CormorantGaramond-Italic.woff) format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(/fonts/CormorantGaramond-Medium.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant SC';src:url(/fonts/CormorantSC-Medium.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Page basics (from design) ---------- */
body{margin:0;background:#FDF6EE}
a{color:#993399;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:#993399}

/* ---------- Animation 1: "Exquisitely yours" write-on (mask wipe) ---------- */
.write{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 60%,transparent 100%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;animation:bp-write 1.5s cubic-bezier(.6,.05,.35,1) .45s forwards}
@keyframes bp-write{to{-webkit-mask-position:0 0;mask-position:0 0}}

/* ---------- Animation 2: staggered fade-up ("rise") ---------- */
.rise{opacity:0;transform:translateY(14px);animation:bp-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:1.6s}.d3{animation-delay:1.8s}.d4{animation-delay:2s}.d5{animation-delay:2.2s}
@keyframes bp-rise{to{opacity:1;transform:none}}

/* ---------- Animation 3: "Served early 2027" letter drop + plate line ---------- */
.serve{display:inline-block;opacity:0;transform:translateY(-.8em) rotate(-14deg) scale(.85);animation:bp-serve .75s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes bp-serve{55%{opacity:1}to{opacity:1;transform:none}}
.plate{transform:scaleX(0);animation:bp-plate .9s cubic-bezier(.2,.7,.2,1) 2.85s forwards}
@keyframes bp-plate{to{transform:scaleX(1)}}

@media (prefers-reduced-motion: reduce){
  .write{animation:none;-webkit-mask-image:none;mask-image:none}
  .rise{animation:none;opacity:1;transform:none}
  .serve{animation:none;opacity:1;transform:none}
  .plate{animation:none;transform:none}
}

/* ---------- Production addition: hold the intro until brand fonts are ready ----------
   main.js adds .fonts-ready to <html> once Apothecary + Schooner Script have loaded
   (or after a 2.5s safety timeout). Until then the intro is paused on frame 0, so the
   write-on never plays over invisible text on a slow connection. Timings are unchanged,
   they simply start from font-ready instead of first paint. Without JS, <noscript> in
   index.html adds the class equivalent so nothing stays hidden. */
html.js:not(.fonts-ready) .write,
html.js:not(.fonts-ready) .rise,
html.js:not(.fonts-ready) .serve,
html.js:not(.fonts-ready) .plate{animation-play-state:paused}

/* ---------- Form controls (from design) ---------- */
.bp-input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid rgba(43,39,36,.35);background:transparent;padding:10px 0 9px;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:400;color:#993399;border-radius:0;outline:none;min-height:46px;-webkit-appearance:none;appearance:none}
.bp-input::placeholder{color:rgba(153,51,153,.6);font-style:italic;font-weight:300}
.bp-input:focus{border-bottom-color:#993399;box-shadow:0 1px 0 0 #993399}
.bp-btn{transition:background-color .25s ease,letter-spacing .35s ease}
.bp-btn:hover{letter-spacing:.26em}
.bp-btn:focus-visible{outline:2px solid #993399;outline-offset:3px}

/* Production addition: iOS Safari centres date values and gives empty date inputs no height. */
.bp-input[type="date"]{text-align:left}
.bp-input::-webkit-date-and-time-value{text-align:left}
.bp-input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}

/* Production addition: invalid field marker (set by main.js on validation error). */
.bp-input[aria-invalid="true"]{border-bottom-color:#993399;box-shadow:0 1px 0 0 #993399}

/* ---------- Production addition: loading state ---------- */
.bp-btn[aria-busy="true"]{cursor:progress;opacity:.78}
.bp-btn[aria-busy="true"]:hover{letter-spacing:.22em}
.bp-btn:disabled{cursor:progress}

/* ---------- Production addition: honeypot (spam trap, never visible) ---------- */
.bp-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------- Production addition: form → thank-you transition ---------- */
[hidden]{display:none!important}
.bp-leave{animation:bp-leave .35s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bp-leave{to{opacity:0;transform:translateY(-8px)}}
.bp-enter{opacity:0;transform:translateY(14px);animation:bp-rise .9s cubic-bezier(.2,.7,.2,1) .05s forwards}
.bp-beat{animation:bp-beat 1.1s cubic-bezier(.3,.7,.3,1) .6s 1 both}
@keyframes bp-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}55%{transform:scale(.96)}75%{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.bp-leave,.bp-enter,.bp-beat{animation:none;opacity:1;transform:none}}

/* Visually hidden text for screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}