/* THE DEPARTURE / INLINE EDITION
   The visitor's actual completed form becomes the departing object.
   All motion stays where the original form was submitted. */
.demo{max-width:880px;margin-inline:auto}
.demo-grid{display:block;min-height:0}
.form-side{width:100%;background:#fbfcf8}
.form-inner{padding:clamp(30px,5vw,65px) clamp(24px,7vw,86px)}
.form-inner h2{font-size:clamp(52px,7vw,88px)}
.form-intro{max-width:480px}
.form-top,.form-bottom{padding-inline:clamp(23px,7vw,86px)}
.form-stage{position:relative;isolation:isolate;perspective:1100px;max-width:650px;margin:0 auto;transform-style:preserve-3d}
.form-paper{position:relative;z-index:2;transform-origin:center 48%;transform-style:preserve-3d;backface-visibility:hidden}
.form-paper form{position:relative;padding:28px 30px 22px;background:#f4f5ee;box-shadow:0 4px 0 #dbe4d8,0 22px 46px #1c41301c;border:1px solid #cbd9cc;transform-style:preserve-3d;backface-visibility:hidden}
.form-paper form:before{content:"";position:absolute;inset:11px;border:1px solid #dae4d7;pointer-events:none}
.form-paper .field{position:relative;z-index:1}
.form-paper .submit{position:relative;z-index:1}
.form-paper .feedback{position:relative;z-index:1}
.fold-overlay{display:none;position:absolute;left:0;width:100%;height:50.1%;z-index:5;pointer-events:none;backface-visibility:visible;box-shadow:inset 0 1px 3px #ffffff80}
.fold-top{top:0;transform-origin:50% 0;background:linear-gradient(176deg,#eff0e7,#e2e7db)}
.fold-bottom{bottom:0;transform-origin:50% 100%;background:linear-gradient(3deg,#e9ede2,#d7e0d4)}
.form-flight{position:absolute;z-index:8;left:50%;top:36%;width:min(290px,75%);aspect-ratio:1.63;opacity:0;transform:translate(-50%,-50%) scale(.7);transform-style:preserve-3d;pointer-events:none;filter:drop-shadow(14px 24px 17px #25412f55)}
.flight-back{position:absolute;inset:0;background:#d7d6c7;border:1px solid #9baa96}
.flight-letter{position:absolute;inset:7px 12px 25px;background:#f2f5ec;z-index:2}
.flight-letter:after{content:"";position:absolute;inset:14px 25px;background:repeating-linear-gradient(to bottom,#63857099 0 1px,transparent 1px 17px);opacity:.5}
.flight-front{position:absolute;inset:0;z-index:3;background:linear-gradient(146deg,#f6f5e9,#c5d1c0);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%)}
.flight-flap{position:absolute;inset:0;z-index:4;background:linear-gradient(130deg,#eff1e6,#afc2ad);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:50% 0;transform:rotateX(180deg)}
.flight-seal{position:absolute;z-index:6;left:50%;top:55%;display:grid;place-items:center;width:41px;height:41px;border-radius:50%;border:2px solid #ac6d56;background:radial-gradient(circle at 33% 24%,#d6a28b,#874f43 67%,#58352f);box-shadow:0 4px 11px #61423866,inset 0 2px 2px #efc2a09c;color:#f7ddc7;font:700 16px Georgia,serif;transform:translate(-50%,-50%) scale(0)}
.form-success[hidden]{display:none!important}
.form-success{position:absolute;inset:0;z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:25px;opacity:0;transform:translateY(12px)}
.form-success>span{color:#5d9073;font:900 10px Arial;letter-spacing:.14em}
.form-success strong{font:italic 400 clamp(48px,7vw,82px) Georgia,serif;color:#204634}
.form-success p{font-size:15px;color:#6d8774;margin:0}
.form-success button{margin-top:15px;border:1px solid #426c53;background:transparent;color:#305b3e;padding:15px 20px;font-weight:900;letter-spacing:.08em;font-size:10px}
.form-success button:hover{background:#e5eee2}
.form-stage.is-playing .form-paper{position:absolute;top:0;left:0;width:100%;animation:paper-becomes-letter 3.65s cubic-bezier(.22,.7,.16,1) both}
.form-stage.is-playing .form-paper .field,.form-stage.is-playing .form-paper .submit,.form-stage.is-playing .form-paper .feedback{animation:form-ink-fold 1.45s ease .25s both}
.form-stage.is-playing .fold-overlay{display:block}
.form-stage.is-playing .fold-top{animation:top-fold .85s ease 1.02s both}
.form-stage.is-playing .fold-bottom{animation:bottom-fold .85s ease 1.42s both}
.form-stage.is-playing .form-flight{animation:flight-into-distance 2.8s cubic-bezier(.15,.7,.2,1) 1.85s both}
.form-stage.is-playing .flight-letter{animation:letter-slide .5s ease 2.05s both}
.form-stage.is-playing .flight-flap{animation:envelope-close .63s ease 2.57s both}
.form-stage.is-playing .flight-seal{animation:seal-form .42s cubic-bezier(.16,1.6,.22,1) 3.14s both}
.form-stage.is-playing .form-success{animation:success-appears .8s ease 4.16s both}
.form-stage.is-complete .form-paper,.form-stage.is-complete .form-flight{display:none}
.form-stage.is-complete .form-success{opacity:1;transform:none;pointer-events:auto}
@keyframes paper-becomes-letter{
  0%,12%{opacity:1;transform:translate(0,0) scale(1) rotateX(0deg);filter:brightness(1)}
  24%{transform:translate(0,-5px) scale(.99,.98) rotateX(4deg)}
  40%{transform:translate(0,2px) scale(.96,.82) rotateX(12deg)}
  60%{opacity:1;transform:translate(0,-10px) scale(.89,.56) rotateX(20deg)}
  77%{opacity:.95;transform:translate(0,-24px) scale(.65,.29) rotateX(35deg)}
  100%{opacity:0;transform:translate(0,-42px) scale(.49,.10) rotateX(67deg)}
}
@keyframes form-ink-fold{0%,18%{opacity:1;filter:blur(0)}55%{opacity:.46;filter:blur(1px)}100%{opacity:0;filter:blur(4px)}}
@keyframes top-fold{0%{opacity:0;transform:rotateX(0)}20%{opacity:.8}100%{opacity:1;transform:rotateX(-167deg)}}
@keyframes bottom-fold{0%{opacity:0;transform:rotateX(0)}20%{opacity:.9}100%{opacity:1;transform:rotateX(160deg)}}
@keyframes flight-into-distance{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.52) rotate(-5deg)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-7deg)}
  51%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-7deg)}
  65%{opacity:1;transform:translate(-46%,-56%) scale(1.04) rotate(-12deg) rotateY(-15deg)}
  82%{opacity:1;transform:translate(15%,-110%) scale(.5) rotate(-27deg) rotateY(35deg)}
  100%{opacity:0;transform:translate(235%,-240%) scale(.05) rotate(-60deg) rotateY(65deg)}
}
@keyframes letter-slide{from{transform:translateY(-38%)}to{transform:translateY(0)}}
@keyframes envelope-close{from{transform:rotateX(180deg)}to{transform:rotateX(0)}}
@keyframes seal-form{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.24)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes success-appears{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.demo{margin:0 12px}.form-paper form{padding:20px 16px 14px}.form-flight{top:33%}.form-inner{padding:34px 20px}.form-stage{perspective:850px}}
@media(prefers-reduced-motion:reduce){.form-stage.is-playing .form-paper{display:none}.form-stage.is-playing .form-success{opacity:1;transform:none}.form-stage.is-playing .form-flight{display:none}}