/* TeachIn launch invitation — v1: a gift box that opens into the globe, then sign in. */
.ti-inv{position:fixed;inset:0;overflow:hidden;background:radial-gradient(70% 60% at 50% 38%,#8E2244 0%,#5C0E27 55%,#2A0810 100%);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))}
.ti-inv-sparks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease}
.ti-inv.is-open .ti-inv-sparks{opacity:1}
.ti-inv-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:#F0C46A;opacity:0;box-shadow:0 0 12px rgba(240,196,106,.9)}
.ti-inv.is-open .ti-inv-spark{animation:tinvSpark 1.5s ease-out forwards}
/* the gift box */
.ti-inv-stage{position:relative;width:min(320px,80vw);height:min(320px,80vw);perspective:900px;transition:opacity .5s ease,transform .6s ease}
.ti-inv.is-open .ti-inv-stage{opacity:0;transform:scale(1.25);pointer-events:none}
.ti-inv-box{position:absolute;left:50%;bottom:8%;width:72%;height:54%;margin-left:-36%;border-radius:12px;
  background:linear-gradient(160deg,#A8294F 0%,#8E2244 45%,#5C0E27 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 26px 44px rgba(0,0,0,.5);animation:tinvBreathe 3.4s ease-in-out infinite}
.ti-inv-box::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:16%;margin-left:-8%;
  background:linear-gradient(180deg,#F7DC9A,#F0C46A 40%,#C8923A);box-shadow:0 0 14px rgba(240,196,106,.45)}
.ti-inv-lid{position:absolute;left:50%;bottom:58%;width:84%;height:16%;margin-left:-42%;border-radius:10px;transform-origin:50% 100%;
  background:linear-gradient(160deg,#B8365C 0%,#8E2244 60%,#6E1532 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 10px 22px rgba(0,0,0,.45);
  transition:transform .75s cubic-bezier(.3,.9,.3,1.1),opacity .5s ease .4s}
.ti-inv-lid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:14%;margin-left:-7%;
  background:linear-gradient(180deg,#F7DC9A,#F0C46A 50%,#C8923A)}
.ti-inv.is-open .ti-inv-lid{transform:translateY(-120px) rotateX(58deg) rotate(-12deg);opacity:0}
.ti-inv-bow{position:absolute;left:50%;bottom:66%;width:46%;height:30%;margin-left:-23%;transition:transform .7s cubic-bezier(.3,.9,.3,1.1),opacity .45s ease .3s}
.ti-inv.is-open .ti-inv-bow{transform:translateY(-160px) rotate(16deg) scale(.8);opacity:0}
.ti-inv-glow{position:absolute;left:50%;bottom:52%;width:60%;height:34%;margin-left:-30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,240,200,.95),rgba(240,196,106,0));opacity:0;transition:opacity .5s ease .25s}
.ti-inv.is-open .ti-inv-glow{opacity:1}
/* the globe comes out of the box */
.ti-inv-globe{position:absolute;top:4%;left:50%;width:min(340px,66vw);height:min(340px,66vw);margin-left:min(-170px,-33vw);opacity:0;transform:translateY(40px) scale(.7);
  transition:opacity .7s ease .35s,transform .9s cubic-bezier(.2,.9,.25,1.05) .35s;pointer-events:none}
.ti-inv.is-open .ti-inv-globe{opacity:1;transform:none}
.ti-inv-globe canvas{width:100%;height:100%;display:block}
.ti-inv-still{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-50%);opacity:.9}
.ti-inv-globe.is-live .ti-inv-still{display:none}
/* words and buttons */
.ti-inv-say{position:relative;z-index:2;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ti-inv-kicker{font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:#F0C46A;font-weight:700}
.ti-inv-say h1{margin:0;font-size:clamp(1.9rem,6vw,3rem);line-height:1.1;font-weight:800}
.ti-inv-say p{margin:0;font-size:clamp(1rem,2.6vw,1.15rem);color:#F6E3EA;line-height:1.5}
.ti-inv-tap{margin-top:6px;font-size:.95rem;color:#F0C46A;font-weight:700;animation:tinvPulse 2s ease-in-out infinite}
.ti-inv.is-open .ti-inv-tap{display:none}
.ti-inv-say{transition:transform .8s cubic-bezier(.2,.9,.25,1.02) .3s}
.ti-inv.is-open .ti-inv-say{transform:translateY(13vh)}
@media (max-height:700px){.ti-inv.is-open .ti-inv-say{transform:translateY(9vh)}}
.ti-inv-after{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.ti-inv.is-done .ti-inv-after{opacity:1;transform:none;pointer-events:auto}
.ti-inv-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ti-inv-btns a{min-height:48px;padding:0 22px;border-radius:24px;display:inline-flex;align-items:center;font-weight:700;text-decoration:none;font-size:1rem}
.ti-inv-go{background:#F0C46A;color:#2A0A14}
.ti-inv-alt{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.ti-inv-count{font-size:.85rem;color:#EBCBD6}
.ti-inv-who{font-size:.95rem!important;color:#F0C46A!important;font-weight:600}
.ti-inv-go{letter-spacing:.04em;text-transform:uppercase;font-size:1.02rem;padding:0 26px;box-shadow:0 12px 30px rgba(240,196,106,.35)}
.ti-inv-share{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;justify-content:center;z-index:3}
.ti-inv-share a,.ti-inv-share button{min-height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:.85rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.ti-inv-toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:#2A0A14;color:#fff;padding:10px 16px;border-radius:20px;
  font-size:.9rem;font-weight:600;z-index:9}
@keyframes tinvBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tinvPulse{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes tinvSpark{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .ti-inv-box,.ti-inv-tap{animation:none}
  .ti-inv-stage,.ti-inv-lid,.ti-inv-bow,.ti-inv-globe,.ti-inv-after{transition:none}
  .ti-inv.is-open .ti-inv-spark{animation:none}
}
