/* Events App setup hero geometry and animations, adapted to the couple's palette. */
#pwaSetup{--ob-ink:#60353a;--ob-yellow:#dfc38e;--ob-pink:#9e2432;--ob-sky:#b4ced8;--ob-violet:#c5cdb9;position:absolute;inset:0;z-index:1100;display:grid;grid-template-rows:42px minmax(70px,1fr) auto;overflow:hidden;container-type:size;background:radial-gradient(ellipse at 15% 10%,#e7c7c0,transparent 65%),radial-gradient(ellipse at 95% 40%,#b7d6e1,transparent 65%),#e9efe9;color:#60353a;font-family:var(--sans)}
.pwa-top{display:flex;align-items:center;justify-content:space-between;padding:14px 25px 0}.pwa-top>b{font:400 20px var(--serif);color:#9e2432}.pwa-progress{display:flex;gap:7px}.pwa-progress i{width:32px;height:5px;background:#fff8;border-radius:9px;border:1px solid #60353a33}.pwa-progress i.on{background:#9e2432}.pwa-art{display:grid;place-items:center;min-height:0;overflow:hidden}
.pwa-sheet{position:relative;background:#fffaf1;border-radius:32px 32px 0 0;padding:22px 24px max(12px,env(safe-area-inset-bottom));box-shadow:0 -1px 0 #60353a26;display:flex;flex-direction:column;gap:10px;min-height:0}.pwa-copy{text-align:left}.pwa-copy small{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#9e2432}.pwa-copy h1{font:400 clamp(26px,4.8cqh,38px)/1.05 var(--serif);margin:8px 0}.pwa-copy>p{font-size:13px;line-height:1.4;color:#6e7674;margin:0 0 12px;max-width:320px}.pwa-instructions{display:grid;gap:7px}.pwa-step{display:flex;align-items:center;gap:12px;border:1.5px solid #b49a79;border-radius:13px;padding:8px 11px;background:#f2f5f2;box-shadow:2px 3px 0 #b49a7938}.pwa-step>b{width:27px;height:27px;display:grid;place-items:center;background:#dfc38e;border:1px solid #a48c68;border-radius:8px;color:#60353a;font:600 20px var(--sans)}.pwa-step>span{flex:1;font-size:12px;line-height:1.25;font-weight:600}.pwa-step>em{font:400 11px var(--serif);opacity:.5}
.pwa-actions{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:8px}.pwa-actions button{font-family:var(--sans);cursor:pointer;touch-action:manipulation}.pwa-primary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:10px 12px 10px 20px;border-radius:99px;border:2px solid #60353a;background:#9e2432;color:#fffaf0;box-shadow:3px 4px 0 #60353a;font-weight:700;font-size:16px}.pwa-primary>b{background:#fffaf0;color:#9e2432;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:22px}.pwa-primary:active{transform:translate(3px,4px);box-shadow:none}.pwa-skip,.pwa-text{background:transparent;min-height:32px;padding:5px 10px;font-size:12px;color:#6e7674}.pwa-text{color:#9e2432;font-weight:600}.pwa-status{font-size:11px;color:#9e2432;line-height:1.3;margin:0;text-align:center}.pwa-status:empty{display:none}#pwaSetup button:focus-visible{outline:2px solid #9e2432;outline-offset:3px}.pwa-pass-button{width:100%;margin:12px 0;padding:16px;border:1px solid #c8b58e;border-radius:18px;background:#fffaf0;text-align:left;color:#365663;font:600 13px var(--sans)}
/* ═══ Hero pictures ═════════════════════════════════════════ */
.pwa-event-hero { position: relative; width: min(100%, 340px); height: 190px; display: grid; place-items: center; }
.pwa-event-hero-spark { position: absolute; width: 12px; height: 12px; border-radius: 3px; animation: hero-twinkle 2.4s ease-in-out infinite; }
.pwa-event-hero-spark.s1 { left: 12%; top: 22%; background: var(--ob-yellow); transform: rotate(20deg); }
.pwa-event-hero-spark.s2 { right: 14%; top: 14%; background: var(--ob-sky); border-radius: 50%; animation-delay: -0.8s; }
.pwa-event-hero-spark.s3 { right: 22%; bottom: 14%; background: var(--ob-pink); animation-delay: -1.6s; }
@keyframes hero-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(25deg); } }

/* install: a phone, the In Dino icon drops onto its home screen */
.pwa-event-hero-phone {
  position: relative;
  width: 122px;
  height: 188px;
  padding: 12px 12px 0;
  border-radius: 28px;
  border: 3px solid var(--ob-ink);
  background: #fff;
  box-shadow: 5px 6px 0 rgb(96 53 58 / 0.6);
  transform: rotate(-5deg);
}
.pwa-event-hero-pill { display: block; width: 34px; height: 7px; margin: 0 auto 14px; border-radius: 99px; background: var(--ob-ink); opacity: 0.85; }
.pwa-event-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.pwa-event-hero-grid i { display: block; aspect-ratio: 1; border-radius: 30%; opacity: 0.45; }
.pwa-event-hero-grid i.pwa-event-hero-slot { background: transparent !important; border: 2.5px dashed var(--ob-pink); opacity: 1; }
.pwa-event-hero-app {
  position: absolute;
  right: 12px;
  top: 67px;
  width: 25px;
  height: 25px;
  transform-origin: center;
  animation: hero-land 3.6s cubic-bezier(0.3, 1.4, 0.5, 1) infinite;
}
.pwa-event-hero-app img { width: 100%; height: 100%; display: block; border-radius: 30%; box-shadow: 1.5px 2px 0 var(--ob-ink); }
.pwa-event-hero-app b { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ob-pink); border: 2px solid var(--ob-ink); color: #fff; }
@keyframes hero-land {
  0% { transform: translate3d(-24px, -90px, 0) scale(2.2) rotate(-14deg); opacity: 0; }
  30% { transform: translate3d(0, 0, 0) scale(1.35) rotate(3deg); opacity: 1; }
  42% { transform: translate3d(0, 0, 0) scale(0.92); }
  52%, 88% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
}

/* notify: ringing bell + floating notification pills */
.pwa-event-hero-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 3px solid var(--ob-ink);
  background: var(--ob-yellow);
  color: var(--ob-ink);
  box-shadow: 5px 6px 0 rgb(96 53 58 / 0.6);
}
.pwa-event-hero-bell svg { transform-origin: 50% 12%; animation: hero-ring 2.6s ease-in-out infinite; }
.pwa-event-hero-bell b { position: absolute; right: 14px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--ob-pink); border: 2.5px solid var(--ob-ink); animation: ob-pop 0.6s 0.4s cubic-bezier(0.3, 1.7, 0.5, 1) both; }
.pwa-event-hero-bell.is-compass svg { transform-origin: 50% 50%; animation: hero-spin 5s ease-in-out infinite; }
@keyframes hero-ring { 0%, 60%, 100% { transform: rotate(0); } 6% { transform: rotate(16deg); } 14% { transform: rotate(-14deg); } 22% { transform: rotate(10deg); } 30% { transform: rotate(-8deg); } 38% { transform: rotate(4deg); } }
@keyframes hero-spin { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(35deg); } }
.pwa-event-hero-notify { width: min(100%, 360px); }
.pwa-event-hero-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border-radius: 99px;
  border: 2px solid var(--ob-ink);
  background: #fff;
  box-shadow: 2px 3px 0 rgb(96 53 58 / 0.6);
  font-size: 13px;
  font-weight: 800;
  color: var(--ob-ink);
  white-space: nowrap;
  animation: hero-float 3.6s ease-in-out infinite;
}
.pwa-event-hero-note i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ob-pink); color: #fff; }
.pwa-event-hero-note.p1 { left: 0; top: 14px; }
.pwa-event-hero-note.p2 { right: 0; top: 30px; animation-delay: -0.9s; }
.pwa-event-hero-note.p2 i { background: var(--ob-violet); }
.pwa-event-hero-note.p3 { left: 6px; bottom: 16px; animation-delay: -1.8s; }
.pwa-event-hero-note.p3 i { background: var(--ob-sky); color: var(--ob-ink); }
.pwa-event-hero-note.p4 { right: 4px; bottom: 6px; animation-delay: -2.7s; }
.pwa-event-hero-note.p4 i { background: var(--ob-yellow); color: var(--ob-ink); }
@keyframes hero-float { 50% { transform: translate3d(0, -7px, 0) rotate(1.5deg); } }

/* long instructions: shrink the picture so the steps get the room */
.pwa-event-hero.is-compact { height: 120px; }
.pwa-event-hero.is-compact > * { scale: 0.62; }
.pwa-event-hero.is-compact .pwa-event-hero-note { scale: 0.85; }

@media (min-width: 900px) {
  .setup-gate .ob-sheet { flex: none; height: auto; max-height: min(680px, calc(100dvh - 150px)); }
  .pwa-event-hero.is-compact { height: 300px; }
  .pwa-event-hero.is-compact > * { scale: 1; }
  .setup-gate .ob-passwrap { width: 380px; }
  .pwa-event-hero { height: 300px; width: 360px; }
  .pwa-event-hero-phone { width: 170px; height: 262px; padding: 16px 16px 0; border-radius: 36px; }
  .pwa-event-hero-pill { width: 46px; height: 9px; margin-bottom: 20px; }
  .pwa-event-hero-grid { gap: 13px; }
  .pwa-event-hero-app { width: 35px; height: 35px; right: 16px; top: 93px; }
  .pwa-event-hero-bell { width: 160px; height: 160px; }
  .pwa-event-hero-bell svg { width: 84px; height: 84px; }
  .pwa-event-hero-note { font-size: 15px; }
  .pwa-event-hero-note i { width: 30px; height: 30px; }
  .pwa-event-hero-note.p1 { top: 20px; }
  .pwa-event-hero-note.p2 { top: 60px; }
  .pwa-event-hero-note.p3 { bottom: 34px; }
  .pwa-event-hero-note.p4 { bottom: 10px; }
}
@media (max-width: 380px) {
  .pwa-event-hero { height: 176px; }
  .pwa-event-hero-note { font-size: 12px; }
}
@media (max-height: 660px) and (max-width: 899px) {
  .setup-gate .ob-passwrap { min-height: 150px; padding-bottom: 6px; }
  .pwa-event-hero { height: 150px; }
  .pwa-event-hero-phone { width: 96px; height: 148px; padding: 9px 9px 0; border-radius: 22px; }
  .pwa-event-hero-pill { margin-bottom: 9px; }
  .pwa-event-hero-grid { gap: 7px; }
  .pwa-event-hero-app { width: 19px; height: 19px; right: 9px; top: 51px; }
  .pwa-event-hero-bell { width: 92px; height: 92px; }
  .pwa-event-hero-bell svg { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-event-hero-app { animation: none !important; opacity: 1 !important; }
  .pwa-event-hero-spark { animation: none !important; opacity: 1; }
}

/* ═══ v2 heroes: bigger, livelier pictures ══════════════════ */
.pwa-event-hero { height: clamp(210px, 32dvh, 330px); width: min(100%, 360px); }
.pwa-event-hero-glow {
  position: absolute;
  inset: -12% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.08) 60%, transparent);
  animation: hero-breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-breathe { 50% { transform: scale(1.08); opacity: 0.75; } }
.pwa-event-hero-spark.s4 { left: 6%; bottom: 20%; background: var(--ob-sky); transform: rotate(45deg); animation-delay: -1.2s; }
.pwa-event-hero-spark.s5 { right: 8%; top: 48%; background: var(--ob-yellow); border-radius: 50%; width: 9px; height: 9px; animation-delay: -2s; }

/* install: a fuller home screen, the icon lands in the dashed slot, a finger-tap ripple follows */
.pwa-event-hero-install .pwa-event-hero-phone { width: min(43%, 158px); height: auto; aspect-ratio: 0.66; padding: 14px 13px 0; border-radius: 30px; transform: rotate(-4deg); }
.pwa-event-hero-grid { gap: 10px 8px; }
.pwa-event-hero-grid > span { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.pwa-event-hero-grid > span i { width: 100%; aspect-ratio: 1; border-radius: 28%; opacity: 0.55; box-shadow: 0 2px 0 rgb(96 53 58 / 0.25); }
.pwa-event-hero-grid > span em { font-style: normal; font-size: 7.5px; font-weight: 800; color: rgb(96 53 58 / 0.55); letter-spacing: 0.02em; line-height: 1; }
.pwa-event-hero-grid > .pwa-event-hero-slot i { background: transparent !important; border: 2.5px dashed var(--ob-pink); box-shadow: none; opacity: 1; animation: hero-slot 1.8s ease-in-out infinite; }
.pwa-event-hero-grid > .pwa-event-hero-slot em { color: var(--ob-pink); opacity: 0; animation: hero-label 3.6s ease infinite; }
@keyframes hero-slot { 50% { background: rgb(158 36 50 / 0.16) !important; } }
@keyframes hero-label { 0%, 40% { opacity: 0; } 55%, 88% { opacity: 1; color: var(--ob-ink); } 100% { opacity: 0; } }
.pwa-event-hero-install .pwa-event-hero-app { width: 22.4%; height: auto; aspect-ratio: 1; right: 13px; top: auto; bottom: auto; }
.pwa-event-hero-dock { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 7px 6px; border-radius: 18px; background: rgb(96 53 58 / 0.1); }
.pwa-event-hero-dock i { width: 22%; aspect-ratio: 1; border-radius: 28%; opacity: 0.85; }
.pwa-event-hero-tap {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ob-pink);
  opacity: 0;
  animation: hero-tap 3.6s ease-out infinite;
}
@keyframes hero-tap { 0%, 30% { transform: scale(0.3); opacity: 0; } 34% { opacity: 0.9; } 62% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }

/* notify: the bell (app/hero-bell.tsx), the glow, the pings and the sparks */
.pwa-event-hero-notify { width: min(100%, 360px); }
.pwa-event-hero-ping { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgb(255 255 255 / 0.7); opacity: 0; animation: hero-ping 2.6s ease-out infinite; }
.pwa-event-hero-ping.p2 { animation-delay: 1.3s; }
@keyframes hero-ping { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (min-width: 900px) {
  .pwa-event-hero-install .pwa-event-hero-phone { width: 190px; }
}
@media (max-height: 660px) and (max-width: 899px) {
  .pwa-event-hero { height: 170px; }
  .pwa-event-hero-install .pwa-event-hero-phone { width: 104px; padding: 9px 8px 0; border-radius: 22px; }
  .pwa-event-hero-grid > span em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-event-hero-ping, .pwa-event-hero-tap, .pwa-event-hero-glow { animation: none !important; }
}
/* the lock screen rises out of the white sheet */
.setup-gate .ob-passwrap:has(.pwa-event-hero-notify) { align-items: flex-end; padding-bottom: 0; }
.pwa-event-hero.pwa-event-hero-notify:not(.is-compact) { height: clamp(260px, 44dvh, 430px); }
.pwa-event-hero-notify .pwa-event-hero-lock { border-radius: 34px 34px 0 0; }
.pwa-event-hero-notify .hl-stack { gap: 9px; }
.pwa-event-hero-notify .hl-card { padding: 10px 12px 10px 9px; }
/* the icon lands exactly in its slot */
.pwa-event-hero-install .pwa-event-hero-grid > .pwa-event-hero-slot { position: relative; }
.pwa-event-hero-install .pwa-event-hero-slot .pwa-event-hero-app { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: auto; aspect-ratio: 1; }
.pwa-event-hero-install .pwa-event-hero-slot .pwa-event-hero-app img { border-radius: 28%; box-shadow: 0 2px 0 rgb(96 53 58 / 0.4), 0 0 0 2px var(--ob-ink); }
.pwa-event-hero-install .pwa-event-hero-slot .pwa-event-hero-app b { right: -7px; top: -7px; width: 17px; height: 17px; }
.pwa-event-hero-install .pwa-event-hero-slot .pwa-event-hero-tap { left: 50%; top: 0; margin: 0 0 0 -17px; }
.pwa-event-hero.is-compact { height: 210px; }
.pwa-event-hero.is-compact > * { scale: 0.86; }
.pwa-event-hero-install .pwa-event-hero-phone { aspect-ratio: 0.56; }
.pwa-event-hero.pwa-event-hero-notify:not(.is-compact) { height: clamp(300px, 54dvh, 500px); }


.pwa-event-hero-bellart { position: relative; z-index: 2; display: block; height: 86%; aspect-ratio: 220 / 240; filter: drop-shadow(5px 7px 0 rgb(96 53 58 / 0.6)); animation: hb-float 3.4s ease-in-out infinite; }
.pwa-event-hero-bellart svg { display: block; overflow: visible; transform-origin: 50% 11%; animation: hero-ring 2.6s ease-in-out infinite; }
.hb-clapper { transform-origin: 110px 176px; animation: hb-clap 2.6s ease-in-out infinite; }
.hb-badge { transform-origin: 164px 48px; animation: hb-badge 2.6s ease-in-out infinite; }
.hb-wave { opacity: 0; animation: hb-wave 2.6s ease-out infinite; }
.hb-wave-r { animation-delay: 0.05s; }
@keyframes hb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes hb-clap { 0%, 60%, 100% { transform: rotate(0); } 6% { transform: rotate(-26deg); } 14% { transform: rotate(24deg); } 22% { transform: rotate(-18deg); } 30% { transform: rotate(12deg); } 38% { transform: rotate(-6deg); } }
@keyframes hb-badge { 0%, 60%, 100% { transform: scale(1); } 8% { transform: scale(1.18); } 18% { transform: scale(0.96); } 28% { transform: scale(1.06); } }
@keyframes hb-wave { 0%, 4% { opacity: 0; } 8%, 20% { opacity: 1; } 34%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pwa-event-hero-bellart, .pwa-event-hero-bellart svg, .hb-clapper, .hb-badge { animation: none !important; }
  .hb-wave { animation: none !important; opacity: 0.9; }
}

/* Keep the illustration and actions within the phone; never a scrolling form. */
#pwaSetup .pwa-event-hero{height:100%;max-height:330px;width:min(100%,340px);min-height:0}
#pwaSetup .pwa-event-hero-install .pwa-event-hero-phone{width:auto;height:82%;max-height:245px;aspect-ratio:.56;padding:12px 11px 0;box-sizing:border-box}
#pwaSetup .pwa-event-hero-bellart{height:80%;max-height:240px;filter:drop-shadow(4px 5px 0 #60353a55)}
#pwaSetup .pwa-event-hero-grid{gap:8px 7px}#pwaSetup .pwa-event-hero-grid>span em{font-size:6px}#pwaSetup .pwa-event-hero-pill{margin-bottom:10px}#pwaSetup .pwa-event-hero-dock{padding:6px;bottom:8px}
@container(max-height:620px){.pwa-sheet{padding:14px 20px 8px;gap:6px}.pwa-copy h1{font-size:27px;margin:5px 0}.pwa-copy>p{font-size:12px;margin-bottom:8px}.pwa-step{padding:6px 9px}.pwa-step>b{height:23px;width:23px}.pwa-primary{min-height:46px;font-size:14px}.pwa-actions{gap:2px;margin-top:4px}}
@container(max-height:490px){.pwa-sheet{padding:9px 16px 5px}.pwa-copy h1{font-size:23px}.pwa-copy small{display:none}.pwa-copy>p{font-size:11px;margin-bottom:5px}.pwa-instructions{gap:4px}.pwa-step{padding:4px 7px}.pwa-step>span{font-size:11px}.pwa-primary{min-height:40px}.pwa-skip,.pwa-text{min-height:26px;font-size:11px}#pwaSetup .pwa-event-hero-install .pwa-event-hero-phone{padding:7px}#pwaSetup .pwa-event-hero-grid>span em{display:none}}