/* Tap Avis homepage (tapavis.com while the builder is private). Builds on tapavis-base.css. */
.home-main{position:relative;z-index:2;flex:1}
.home .top{max-width:1180px;width:100%;margin:0 auto}

/* A gold comet crosses the sky now and then. */
.comet{position:fixed;z-index:1;top:14vh;left:-20vw;width:180px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fdc609cc 70%,#fff);opacity:0;pointer-events:none;transform:rotate(-14deg);animation:comet 13s cubic-bezier(.4,0,.2,1) 4s infinite}
@keyframes comet{0%{opacity:0;transform:translate(0,0) rotate(-14deg)}2%{opacity:1}9%{opacity:0;transform:translate(130vw,-32vh) rotate(-14deg)}100%{opacity:0;transform:translate(130vw,-32vh) rotate(-14deg)}}

/* Hero */
.hero{max-width:780px;margin:0 auto;padding:54px 20px 30px;text-align:center}
.hero>*{animation:rise-in .9s cubic-bezier(.22,1,.36,1) both}
.hero>:nth-child(2){animation-delay:.08s}.hero>:nth-child(3){animation-delay:.16s}.hero>:nth-child(4){animation-delay:.26s}
.seal-line{display:inline-flex;align-items:center;gap:14px;margin:0;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.seal-line:before,.seal-line:after{content:'';width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.seal-line:after{background:linear-gradient(270deg,transparent,var(--gold))}
.hero-title{margin:22px 0 0;font:700 clamp(50px,9.6vw,98px)/.98 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.hero-title span{display:block;color:var(--gold);text-shadow:0 0 46px #fdc60959}
.hero-lede{max-width:580px;margin:26px auto 0;color:var(--muted);font-size:18px;line-height:1.6}

/* The ritual: five stars open the envelope */
.ritual{margin-top:50px}
.ritual-ask{margin:0 0 8px;font:700 21px/1.3 var(--serif)}
.ritual-hint{min-height:22px;margin:4px 0 0;color:var(--muted);font-size:14px;transition:color .3s}
.ritual-hint.gold{color:var(--gold)}
.envelope{--w:340px;--h:212px;position:relative;width:var(--w);height:calc(var(--h) + 26px);margin:22px auto 0;perspective:1100px;transition:height .8s cubic-bezier(.22,1,.36,1)}
.envelope-back,.envelope-front,.envelope-flap{position:absolute;left:0;width:var(--w);height:var(--h);bottom:0}
.envelope-back{z-index:1;border-radius:12px;background:linear-gradient(180deg,#15232e,#1a2b37);box-shadow:inset 0 0 0 1px #fdc60940,0 40px 70px -30px #000e}
.envelope-front{z-index:3;border-radius:0 0 12px 12px;background:linear-gradient(165deg,#2c4557,#223847 60%,#1d303d);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px 0 #fdc60940}
.envelope-front:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.6%,#fdc60947 50%,transparent 50.4%) left/50% 56% no-repeat,linear-gradient(to bottom left,transparent 49.6%,#fdc60947 50%,transparent 50.4%) right/50% 56% no-repeat}
.envelope-flap{z-index:4;bottom:calc(var(--h) * .4);height:calc(var(--h) * .6);background:linear-gradient(180deg,#355266,#2a4354);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .7s cubic-bezier(.4,0,.2,1),z-index 0s .35s;filter:drop-shadow(0 6px 10px #0006)}
.envelope-seal{position:absolute;z-index:5;left:50%;bottom:calc(var(--h) * .4 - 24px);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#fdc609 45%,#c99700);box-shadow:0 0 0 4px #fdc6092e,0 10px 24px #0008,inset 0 -3px 6px #9a740055;transform:translateX(-50%);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.envelope-seal svg{width:28px;height:28px;fill:#213645}
.envelope:not(.open) .envelope-seal{animation:seal-glow 2.8s ease-in-out infinite}
.envelope-slot{position:absolute;z-index:2;left:20px;right:20px;top:0;bottom:8px;overflow:hidden}
.envelope-card{position:absolute;left:0;right:0;top:calc(100% - var(--h) + 20px);display:flex;justify-content:center;transition:top 1s cubic-bezier(.22,1,.36,1)}
.home-pass{--pass-bg:#8f4529;width:280px;animation:none}
.home-pass .pass-title{margin-top:24px;font-family:var(--serif);font-size:31px}
.pass-logo{width:30px;height:30px;border:1px dashed #ffffff8c;border-radius:7px}
.home-pass .pass-qr{width:96px;height:96px;margin-top:18px}
.home-pass .pass-qr svg{width:74px;height:74px}
.envelope.open{height:calc(var(--h) + 250px)}
.envelope.open .envelope-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .envelope-seal{opacity:0;transform:translateX(-50%) scale(1.5) rotate(25deg)}
.envelope.rising .envelope-card{top:0}
.envelope.out .envelope-slot{z-index:6}
.envelope.out .home-pass{animation:float 7s ease-in-out infinite}
.ritual-after{max-width:420px;margin:18px auto 0;animation:rise-in .8s cubic-bezier(.22,1,.36,1) both}
.ritual-after p{margin:0;font:700 20px/1.35 var(--serif)}
.ritual-after .link{margin-top:4px;font-size:14px}

/* Glimpses */
.kicker{margin:0;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.section-title{margin:14px 0 0;font:700 clamp(34px,5.4vw,54px)/1.06 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.glimpses{max-width:1100px;margin:0 auto;padding:80px 20px 70px;text-align:center}
.glimpse-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:46px 0 0;padding:0;list-style:none;text-align:left}
.glimpse-list li{position:relative;padding:28px 26px 30px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(160deg,#ffffff14,#ffffff05 60%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.glimpse-n{display:block;color:var(--gold);font:700 30px/1 var(--serif)}
.glimpse-list h3{margin:22px 0 0;font:700 25px/1.15 var(--serif)}
.glimpse-list p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.glimpse-foot{max-width:560px;margin:30px auto 0;color:var(--muted);font-size:15px;line-height:1.6}

/* Why you can't sign up: an invitation card */
.velvet{padding:30px 20px 70px}
.velvet-card{position:relative;max-width:800px;margin:0 auto;padding:58px 52px 46px;border:1px solid #fdc60957;border-radius:26px;background:radial-gradient(circle at 50% 0%,#fdc6091f,transparent 55%),#1a2b37;box-shadow:0 50px 100px -50px #000;text-align:center}
.velvet-card:before{content:'';position:absolute;inset:9px;border:1px solid #fdc60924;border-radius:19px;pointer-events:none}
.velvet-mark{display:block;width:46px;height:48px;margin:0 auto}
.velvet-lede{max-width:560px;margin:18px auto 0;color:var(--muted);font-size:17px;line-height:1.65}
.velvet-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:38px 0 0;padding-top:30px;border-top:1px solid var(--line);text-align:left}
.velvet-steps dt{font:700 20px/1.2 var(--serif)}
.velvet-steps dd{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.velvet-ask{position:relative;margin:32px auto 0;max-width:520px;color:var(--faint);font-size:13px;line-height:1.55}
.velvet-ask a{color:var(--muted);text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px}
.velvet-ask a:hover{color:#fff}
.velvet-signin{position:relative;margin:18px 0 0;color:var(--muted);font-size:15px}
.velvet-signin a{color:var(--gold);font-weight:600;text-decoration:none}
.velvet-signin a:hover{text-decoration:underline;text-underline-offset:4px}
.customer-note{max-width:520px;margin:0 auto;padding:0 20px 18px;color:#ffffff80;font-size:13px;line-height:1.55;text-align:center}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}

@keyframes seal-glow{50%{box-shadow:0 0 0 9px #fdc60914,0 10px 24px #0008,inset 0 -3px 6px #9a740055}}

@media(max-width:800px){
.glimpse-list,.velvet-steps{grid-template-columns:1fr}
.glimpse-list{gap:14px}
.glimpse-list li{display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:22px 22px 24px}
.glimpse-n{grid-row:span 2;padding-top:2px;font-size:24px}
.glimpse-list h3{margin:0;font-size:22px}
.velvet-card{padding:46px 24px 36px}
.velvet-steps{gap:20px}
}
@media(max-width:640px){
.hero{padding-top:34px}
.seal-line{gap:10px;font-size:11px;letter-spacing:.18em}
.seal-line:before,.seal-line:after{width:22px}
.hero-lede{font-size:16px}
.ritual{margin-top:40px}
.envelope{--w:300px;--h:188px}
.envelope-slot{left:12px;right:12px}
.home-pass{width:262px}
.home-pass .pass-title{font-size:28px}
.glimpses{padding:60px 18px 50px}
.velvet{padding:20px 16px 56px}
}
@media(prefers-reduced-motion:reduce){.comet{display:none}}