/* Golden hour — the invitation
   Photo-led. The frame fills the page, warm and slightly blurred, and the ticket
   floats over it as frosted glass. The photograph is the invitation; the pass is
   the caption. */
:root{--paper:rgba(253,250,244,.82);--stubpaper:rgba(246,240,226,.82);
--rule:rgba(90,105,103,.28);--ink:#1e2426;--dim:#6c665b}
body{background:#2a2119;position:relative;isolation:isolate}
/* the photograph, behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-2;
background:url("/static/bg.jpg") center 46%/cover no-repeat;
/* 6px: a light soft focus. The cove reads clearly as a place; people in the
   frame stay discernible at this radius, which is the deliberate trade. */
filter:blur(6px) saturate(1.08) brightness(.82);
transform:scale(1.1);
animation:breathe 26s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1.1)}to{transform:scale(1.19)}}
body::after{content:"";position:fixed;inset:0;z-index:-1;
background:linear-gradient(165deg,rgba(255,216,156,.24),rgba(62,48,33,.52) 54%,rgba(40,30,20,.74))}
.pass{background:transparent;box-shadow:0 34px 90px rgba(20,14,8,.5);
backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
border:1px solid rgba(255,255,255,.28);border-radius:6px;overflow:hidden;
animation:lift 1.1s cubic-bezier(.2,1,.3,1) both}
@keyframes lift{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
.main{background:var(--paper)}
.stub{background:var(--stubpaper)}
.shot img{animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.11)}}
h1{letter-spacing:-.035em}
/* No panel behind the aircraft — a translucent one reads as a white box over the
   frosted card. Punch a gap in the route instead. The line moves to a pseudo
   element so the mask takes the dashes and leaves the glyph alone; masking .leg
   itself would erase the aircraft with it. */
.leg{background:none}
.leg::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(90deg,var(--rule) 0 5px,transparent 5px 10px);
-webkit-mask-image:linear-gradient(90deg,#000 calc(50% - 42px),transparent calc(50% - 42px),
transparent calc(50% + 42px),#000 calc(50% + 42px));
mask-image:linear-gradient(90deg,#000 calc(50% - 42px),transparent calc(50% - 42px),
transparent calc(50% + 42px),#000 calc(50% + 42px))}
.leg i{background:none;padding:0;z-index:1}
.brand{color:#7a6a4e}
.main::before{background:linear-gradient(var(--marigold),rgba(242,189,80,.35))}
.note{color:#3f474a}
/* content arrives after the card has landed */
.top,h1,.sub,.route,.fields,.note,.act{animation:up .7s both}
h1{animation-delay:.34s}.sub{animation-delay:.42s}.route{animation-delay:.5s}
.fields{animation-delay:.58s}.note{animation-delay:.66s}.act{animation-delay:.74s}
.top{animation-delay:.26s}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card{background:var(--paper);backdrop-filter:blur(22px) saturate(1.2);
-webkit-backdrop-filter:blur(22px) saturate(1.2);border-radius:6px;
border:1px solid rgba(255,255,255,.28)}
input[type=text],input[type=email],input[type=tel],textarea,select{
background:rgba(255,255,255,.72);border-color:rgba(90,105,103,.3)}
.choice span{background:rgba(255,255,255,.72);border-color:rgba(90,105,103,.3)}
@media(prefers-reduced-motion:reduce){
  body::before,.shot img{animation:none}
  .pass,.top,h1,.sub,.route,.fields,.note,.act{animation:none;opacity:1;transform:none}}