/* ClaimFocus Pulse: TV display. A 1920×1080 stage scaled to fit. */
:root { color-scheme: dark; }
* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #081C1D; overflow: hidden; }
body { cursor: none; font: 24px/1.4 "Instrument Sans", "Segoe UI", Arial, sans-serif; }
body.preview { cursor: default; }

.stage {
  --ink: #081C1D; --ink2: #0E2A2B; --card: #123335; --card2: #17403F; --track: #0B2627; --line: #1F4A4A;
  --tx: #EAF3F0; --tx2: #9FBDB7; --gold: #F2A541; --mint: #6FD3B2; --coral: #FF7A66; --sky: #7FD4EC;
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  background: var(--ink); color: var(--tx); overflow: hidden;
}
.shift { position: absolute; inset: 0; transition: transform 4s ease; }
.num { font-family: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hd { font-family: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }

/* header */
.tvhead { position: absolute; left: 0; right: 0; top: 0; height: 112px; display: flex; align-items: center; justify-content: space-between; padding: 0 64px; }
.brand { display: flex; align-items: center; gap: 18px; }
.brand img { width: 56px; height: 56px; border-radius: 14px; }
.brand b { font: 800 36px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.brand span { color: var(--tx2); font-size: 28px; margin-left: 4px; }
.clock { display: flex; align-items: center; gap: 28px; font-size: 26px; color: var(--tx2); }
.clock .t { font: 700 42px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--tx); }
.live { display: flex; align-items: center; gap: 10px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mint); animation: pulse 2s infinite; }
.live.stale .dot { background: var(--coral); animation: none; }
.live.stale { color: var(--coral); }
.live.offline .dot { background: var(--tx2); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(111,211,178,.55); } 70% { box-shadow: 0 0 0 14px rgba(111,211,178,0); } 100% { box-shadow: 0 0 0 0 rgba(111,211,178,0); } }
.badge { border: 2px solid var(--gold); color: var(--gold); border-radius: 999px; padding: 2px 16px; font-size: 24px; font-weight: 600; }

/* slides */
.slides { position: absolute; left: 64px; right: 64px; top: 128px; bottom: 124px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.slide.on { opacity: 1; }
.stitle { font: 700 56px/1.05 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; margin: 0 0 8px; }
.ssub { font-size: 28px; color: var(--tx2); margin: 0 0 32px; }
.empty { height: 640px; border-radius: 28px; background: var(--card); display: grid; place-items: center; text-align: center; color: var(--tx2); font-size: 34px; padding: 40px; }
.empty b { display: block; color: var(--tx); font: 700 48px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; margin-bottom: 12px; }

/* footer */
.tvfoot { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; display: flex; align-items: center; gap: 36px; padding: 0 64px; background: var(--ink2); }
.dots { display: flex; gap: 12px; flex: none; }
.dots i { display: block; height: 12px; width: 12px; border-radius: 6px; background: #2E5857; transition: width .4s; }
.dots i.on { width: 44px; background: var(--gold); }
.ticker { flex: 1; overflow: hidden; white-space: nowrap; font-size: 28px; color: var(--tx2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker span { display: inline-block; padding-left: 100%; animation: tick 70s linear infinite; }
.ticker em { font-style: normal; color: var(--gold); margin: 0 18px; }
@keyframes tick { to { transform: translateX(-100%); } }
.prog { position: absolute; left: 0; bottom: 104px; height: 6px; background: var(--gold); width: 0; }

/* logo slide */
.logo-wrap { position: absolute; inset: -16px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.logo-orb { position: relative; width: 420px; height: 420px; display: grid; place-items: center; margin-bottom: 56px; }
.logo-orb img { width: 300px; height: 300px; border-radius: 64px; position: relative; z-index: 1; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; animation: ring 4.5s ease-out infinite; }
.ring.r2 { animation-delay: 1.5s; border-color: var(--mint); }
.ring.r3 { animation-delay: 3s; border-color: var(--sky); }
@keyframes ring { 0% { transform: scale(.72); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.wordmark { font: 800 128px/1 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; letter-spacing: -.03em; margin: 0; }
.wordmark span { color: var(--gold); }

/* today */
.kgrid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; height: 690px; }
.k { background: var(--card); border-radius: 28px; padding: 34px 38px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.k.big { grid-row: span 2; background: var(--gold); color: #1E1A0E; }
.k .lab { font-size: 30px; color: var(--tx2); font-weight: 500; }
.k.big .lab, .k.big .d { color: #4A3A12; }
.k .v { font-size: 120px; line-height: .9; }
.k .v.money { font-size: 96px; }
.k.big .v { font-size: 240px; }
.k .d { font-size: 26px; color: var(--tx2); font-weight: 600; }
.d.up { color: var(--mint); } .d.down { color: var(--coral); }

/* pendency */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 24px; height: 690px; }
.p { background: var(--card); border-radius: 28px; padding: 34px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.p::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--accent, var(--sky)); }
.p .lab { font-size: 32px; font-weight: 600; }
.p .desc { font-size: 24px; color: var(--tx2); margin-top: 4px; }
.p .v { font-size: 150px; line-height: 1; margin-top: auto; color: var(--accent, var(--tx)); }
.p.total { background: var(--card2); }
.p.total .v { color: var(--gold); }

/* sla */
.sla { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 24px; height: 690px; }
.gauge { background: var(--card); border-radius: 28px; padding: 34px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gauge h3 { margin: 0 0 6px; font: 700 36px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.gauge p { margin: 0; color: var(--tx2); font-size: 24px; }
.gauge svg { margin: 18px 0 10px; }
.gstats { display: flex; gap: 48px; margin-top: auto; }
.gstats div { font-size: 24px; color: var(--tx2); }
.gstats b { display: block; font: 800 60px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--tx); }
.gstats b.bad { color: var(--coral); }
.na { margin-top: auto; margin-bottom: auto; font-size: 28px; color: var(--tx2); max-width: 20ch; }
.na b { display: block; color: var(--tx); font: 700 40px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; margin-bottom: 10px; }
.queue { background: var(--card); border-radius: 28px; padding: 34px 40px; }
.queue h3 { margin: 0 0 26px; font: 700 36px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.qrow { margin-bottom: 28px; }
.qrow .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 28px; margin-bottom: 10px; }
.qrow .top b { font: 800 40px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.track { height: 18px; border-radius: 9px; background: var(--track); }
.fill { height: 100%; border-radius: 9px; background: var(--sky); }

/* charts */
.panel { background: var(--card); border-radius: 28px; padding: 32px 38px; }
.panel h3 { margin: 0; font: 700 34px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.panel .hl { font-size: 26px; color: var(--tx2); margin: 6px 0 0; }
.panel .hl b { color: var(--mint); }
.trend { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; height: 690px; }
.activity { height: 690px; display: flex; flex-direction: column; }
.acthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.chips { display: flex; gap: 14px; }
.chip { display: inline-flex; align-items: baseline; gap: 12px; padding: 10px 20px; border-radius: 16px; background: var(--track); font-size: 24px; color: var(--tx2); font-weight: 600; white-space: nowrap; }
.chip b { font: 800 36px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--c, var(--tx)); }
.legend { display: flex; gap: 28px; font-size: 24px; color: var(--tx2); margin-top: 14px; }
.legend i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; vertical-align: -1px; }
.activity svg { display: block; margin-top: 12px; }

/* stars */
.stars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; height: 470px; }
.star { background: var(--card); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; }
.star.first { background: var(--card2); box-shadow: inset 0 0 0 3px var(--gold); }
.av { width: 120px; height: 120px; border-radius: 60px 60px 18px 18px; display: grid; place-items: center; font: 800 46px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: #1E1A0E; margin-bottom: 24px; }
.star h3 { margin: 0; font: 700 42px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.star .role { color: var(--tx2); font-size: 26px; margin: 2px 0 auto; }
.star .m { display: flex; gap: 40px; margin-top: 20px; }
.star .m div { font-size: 24px; color: var(--tx2); }
.star .m b { display: block; font: 800 54px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--tx); }
.shout { margin-top: 24px; height: 196px; border-radius: 28px; background: var(--gold); color: #1E1A0E; display: flex; align-items: center; gap: 36px; padding: 0 48px; }
.shout .e { font-size: 84px; }
.shout b { display: block; font: 800 46px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.shout span { font-size: 30px; }

/* hospitals */
table.lb { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: 32px; }
.lb th { text-align: left; color: var(--tx2); font-weight: 500; font-size: 26px; padding: 0 28px; }
.lb td { background: var(--card); padding: 16px 28px; }
.lb td:first-child { border-radius: 22px 0 0 22px; width: 90px; }
.lb td:last-child { border-radius: 0 22px 22px 0; }
.lb .rk { font: 800 46px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--gold); }
.lb .nm { font-weight: 600; }
.lb .nm small { display: block; color: var(--tx2); font-size: 24px; font-weight: 400; }
.lb .n { font: 800 42px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 6px 18px; border-radius: 999px; background: var(--track); color: var(--mint); font-size: 26px; font-weight: 600; }

/* celebrations */
.cult { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; height: 690px; }
.cult.two { grid-template-columns: repeat(2, 1fr); }
.cult.one { grid-template-columns: 1fr; }
.cc { border-radius: 28px; padding: 44px; display: flex; flex-direction: column; }
.cc .e { font-size: 100px; line-height: 1; }
.cc h3 { margin: 28px 0 8px; font: 700 32px "Instrument Sans", "Segoe UI", Arial, sans-serif; opacity: .8; }
.cc b { font: 800 60px/1.05 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; }
.cc p { font-size: 30px; margin: 14px 0 0; opacity: .85; }
.cc.birthday { background: var(--coral); color: #2A0E08; }
.cc.anniversary { background: var(--sky); color: #08262E; }
.cc.new_joiner { background: var(--mint); color: #082A20; }
.cc.new_hospital { background: var(--gold); color: #1E1A0E; }

/* motivation */
.moti { position: absolute; inset: -16px 0 0; }
.moti .quote { position: absolute; left: 80px; right: 80px; top: 30px; text-align: center; }
.moti blockquote { margin: 0 auto; max-width: 30ch; font: 800 68px/1.12 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.moti blockquote::before { content: "“"; color: var(--gold); }
.moti blockquote::after { content: "”"; color: var(--gold); }
.moti cite { display: block; margin-top: 22px; font-style: normal; font-size: 32px; color: var(--tx2); }
.moti .scene { position: absolute; left: 0; right: 0; bottom: 0; height: 470px; }
.moti .ground { position: absolute; left: 120px; right: 120px; bottom: 36px; height: 10px; border-radius: 5px; background: var(--card2); }
.moti svg.chars { position: absolute; left: 50%; bottom: 40px; width: 1500px; height: 440px; transform: translateX(-50%); overflow: visible; }
.moti .spark { position: absolute; font-size: 44px; opacity: 0; animation: spark 5s ease-in-out infinite; }
@keyframes spark { 0%, 100% { opacity: 0; transform: translateY(20px) scale(.6); } 40%, 60% { opacity: 1; transform: translateY(-20px) scale(1); } }
.chars g { transform-box: fill-box; }
.wave { transform-origin: 10% 90%; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-60deg); } }
.hop { animation: hop 1.4s cubic-bezier(.3,.0,.3,1) infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 45% { transform: translateY(-48px) scale(.97, 1.03); } 60% { transform: translateY(-48px) scale(1, 1); } }
.nod { animation: nod 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes nod { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.clapL { transform-origin: 90% 50%; animation: clapL .5s ease-in-out infinite alternate; }
.clapR { transform-origin: 10% 50%; animation: clapR .5s ease-in-out infinite alternate; }
@keyframes clapL { from { transform: rotate(10deg); } to { transform: rotate(-25deg); } }
@keyframes clapR { from { transform: rotate(-10deg); } to { transform: rotate(25deg); } }
.blink { transform-origin: 50% 50%; animation: blink 4s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.twinkle { transform-origin: 50% 50%; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(20deg) scale(1.2); } }
.sway { transform-origin: 50% 100%; animation: sway 3s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* motivation scenes 2–5 */
.rocketFly { transform-origin: 50% 100%; animation: rocketFly 2.6s ease-in-out infinite; }
@keyframes rocketFly { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-26px) rotate(1.5deg); } }
.flame { transform-origin: 50% 0%; animation: flame .18s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(.8) scaleX(.95); } to { transform: scaleY(1.25) scaleX(1.05); } }
.drift { animation: drift 9s ease-in-out infinite alternate; }
.drift.slow { animation-duration: 14s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-70px); } }
.lift { animation: lift 1.2s ease-in-out infinite; }
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.fallC { transform-origin: 50% 50%; animation: fallC 3.6s linear infinite; }
@keyframes fallC { from { transform: translateY(0) rotate(0); } to { transform: translateY(470px) rotate(540deg); } }
.flagWave { transform-origin: 0% 50%; animation: flagWave 1.1s ease-in-out infinite alternate; }
@keyframes flagWave { from { transform: skewY(-6deg) scaleX(.92); } to { transform: skewY(6deg) scaleX(1.05); } }
.climb { animation: climb 7s ease-in-out infinite; }
@keyframes climb { 0% { transform: translate(-70px, 70px); } 75%, 90% { transform: translate(150px, -150px); } 100% { transform: translate(-70px, 70px); } }
.grow { transform-origin: 50% 100%; animation: grow 4s ease-in-out infinite; }
@keyframes grow { 0% { transform: scaleY(.25); } 45%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.25); } }
.glow { transform-origin: 50% 50%; animation: glow 3s ease-in-out infinite; }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* RAHY Healthcare slide */
.brand-card { width: 1180px; border-radius: 48px; background: #170F65; box-shadow: 0 30px 90px rgba(0,0,0,.5); padding: 60px 80px; display: grid; place-items: center; animation: float 6s ease-in-out infinite; }
.brand-card img { width: 1000px; height: auto; display: block; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.webaddr { font: 800 72px/1 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; letter-spacing: -.01em; margin: 56px 0 0; color: var(--tx); }
.webaddr span { color: var(--gold); }

/* finance */
.fgrid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; height: 690px; }
.fgrid .k.big { grid-row: span 2; }
.fgrid .k .v.money { font-size: 88px; }
.fgrid .k.big .v.money { font-size: 132px; line-height: 1; }
.minibars { display: flex; align-items: flex-end; gap: 10px; height: 170px; margin: 18px 0 8px; }
.minibars i { flex: 1; background: rgba(30,26,14,.25); border-radius: 8px 8px 3px 3px; min-height: 6px; }
.minibars i.today { background: #1E1A0E; }

/* health and wellness */
.well { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; height: 810px; margin-top: -10px; }
.well .tipcard { background: var(--card2); border-radius: 28px; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; }
.well .tag { align-self: flex-start; background: var(--mint); color: #082A20; border-radius: 999px; padding: 6px 22px; font-size: 26px; font-weight: 700; margin-bottom: 30px; }
.well h2 { margin: 0 0 24px; font: 800 80px/1.02 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
.well p { font-size: 40px; line-height: 1.35; color: #CFE2DD; margin: 0; max-width: 24ch; }
.well .count { margin-top: auto; padding-top: 30px; font-size: 26px; color: var(--tx2); }
.well .art { background: var(--card); border-radius: 28px; display: grid; place-items: center; overflow: hidden; }
.well .art svg { width: 92%; height: auto; }
.fillUp { transform-origin: 50% 100%; animation: fillUp 4s ease-in-out infinite; }
@keyframes fillUp { 0% { transform: scaleY(.15); } 60%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
.drip { animation: drip 1.8s ease-in infinite; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.pulseX { transform-origin: 50% 50%; animation: pulseX 2s ease-in-out infinite; }
@keyframes pulseX { 0%, 100% { transform: scaleX(.9); } 50% { transform: scaleX(1.06); } }
.fadeWave { animation: fadeWave 1.8s ease-in-out infinite; }
@keyframes fadeWave { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.bob { animation: lift 2.4s ease-in-out infinite; }
.look { animation: look 5s ease-in-out infinite; }
@keyframes look { 0%, 20% { transform: translateX(0); } 35%, 55% { transform: translateX(-80px); } 70%, 90% { transform: translateX(80px); } 100% { transform: translateX(0); } }
.lid { transform-origin: 50% 0%; animation: lid 5s ease-in-out infinite; }
@keyframes lid { 0%, 40%, 46%, 100% { transform: scaleY(0); } 43% { transform: scaleY(1); } }
.lean { transform-origin: 50% 100%; animation: lean 3s ease-in-out infinite; }
@keyframes lean { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.legA, .legB { transform-origin: 50% 0%; animation: leg .6s ease-in-out infinite alternate; }
.legB { animation-direction: alternate-reverse; }
@keyframes leg { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.swingArm { transform-origin: 0% 0%; animation: leg .6s ease-in-out infinite alternate-reverse; }
.walkAcross { animation: walkAcross 9s linear infinite; }
@keyframes walkAcross { from { transform: translateX(-120px); } to { transform: translateX(820px); } }
.breath { transform-origin: 50% 50%; animation: breath 8s ease-in-out infinite; }
@keyframes breath { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.08); } }
.breatheIn { animation: breatheIn 8s linear infinite; }
.breatheOut { animation: breatheIn 8s linear infinite; animation-delay: -4s; }
@keyframes breatheIn { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }

/* today: settlements this month */
.k .v2 { font: 800 44px/1 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; color: var(--mint); margin-top: 6px; }
.k .v2 small { font: 600 26px "Instrument Sans", "Segoe UI", Arial, sans-serif; color: var(--tx2); margin-left: 8px; }

/* celebration overlay */
.cele { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,28,29,.88); opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 5; }
.cele.on { opacity: 1; }
.cele .box { text-align: center; transform: scale(.9); transition: transform .6s cubic-bezier(.2,1.4,.4,1); padding: 0 120px; }
.cele.on .box { transform: scale(1); }
.cele .e { font-size: 170px; }
.cele h2 { font: 800 104px/1 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; margin: 18px 0; color: var(--gold); }
.cele p { font-size: 44px; margin: 0; color: var(--tx); }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -30px; width: 16px; height: 26px; border-radius: 3px; animation: fall 3.2s linear forwards; }
@keyframes fall { to { transform: translateY(1140px) rotate(720deg); } }

/* dimming (outside office hours) */
.dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 3s; z-index: 6; }
.dim.on { opacity: .55; }

/* pairing */
.pairing { position: absolute; inset: 0; display: none; place-items: center; background: var(--ink); z-index: 8; }
.pairing.on { display: grid; }
.pairbox { width: 1100px; text-align: center; }
.pairbox img { width: 140px; height: 140px; border-radius: 34px; }
.pairbox h1 { font: 800 80px/1.05 "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; margin: 30px 0 12px; }
.pairbox p { font-size: 32px; color: var(--tx2); margin: 0 0 40px; }
.pairform { display: flex; gap: 20px; justify-content: center; }
.pairform input { width: 520px; font: 800 72px "Bricolage Grotesque", "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-align: center; text-transform: uppercase; background: var(--card); color: var(--tx); border: 4px solid var(--card2); border-radius: 24px; padding: 18px 20px; }
.pairform input:focus { outline: none; border-color: var(--gold); }
.pairform button { font: 700 44px "Instrument Sans", "Segoe UI", Arial, sans-serif; background: var(--gold); color: #1E1A0E; border: 0; border-radius: 24px; padding: 0 56px; cursor: pointer; }
.pairform button:focus { outline: 4px solid var(--tx); outline-offset: 4px; }
.pairmsg { min-height: 48px; margin-top: 30px; font-size: 32px; color: var(--coral); }
.pairmsg.ok { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .slide, .cele, .cele .box, .shift { transition: none; }
  .dot, .ticker span, .confetti i, .ring, .wave, .hop, .nod, .clapL, .clapR, .blink, .twinkle, .sway, .spark, .rocketFly, .flame, .drift, .lift, .fallC, .flagWave, .climb, .grow, .glow, .brand-card, .fillUp, .drip, .pulseX, .fadeWave, .bob, .look, .lid, .lean, .legA, .legB, .swingArm, .walkAcross, .breath, .breatheIn, .breatheOut { animation: none; }
}