/* ORBIX Gate — see orbix-gate.js. Colours come from --og-a/b/c/d set per app. */

/* ---------- full-screen lock / free tier gate ---------- */
.og {
  position: fixed; inset: 0; z-index: 999990;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 38%, color-mix(in srgb, var(--og-a) 22%, transparent), transparent 70%),
    radial-gradient(50% 40% at 80% 90%, color-mix(in srgb, var(--og-b) 16%, transparent), transparent 70%),
    #07090f;
  color: #fff;
  font-family: 'Outfit', 'Poppins', system-ui, -apple-system, sans-serif;
  animation: og-fade .45s ease both;
}
.og-bg { position: absolute; inset: 0; pointer-events: none; }
.og-bg span {
  position: absolute; left: calc(var(--x) * 1%); bottom: -20px;
  width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%;
  background: var(--og-a); opacity: 0;
  animation: og-rise calc(7s + var(--i) * .45s) linear calc(var(--i) * -.8s) infinite;
}
.og-bg span:nth-child(3n) { background: var(--og-b); }
.og-bg span:nth-child(4n) { background: var(--og-c); }

.og-card {
  position: relative; width: 100%; max-width: 440px; text-align: center;
  padding: 28px 26px 24px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--og-a) 18%, transparent) inset;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  animation: og-in .7s cubic-bezier(.2,.9,.25,1.15) both;
}
.og-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--og-ang, 0deg), transparent 0 70%, var(--og-a), var(--og-b), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: og-orbit 6s linear infinite;
}
@property --og-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.og-stage { width: 168px; height: 168px; margin: -6px auto 10px; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--og-a) 40%, transparent)); }
.og-scene { width: 100%; height: 100%; overflow: visible; display: block; }
.og-eyebrow {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--og-c); background: color-mix(in srgb, var(--og-a) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--og-a) 35%, transparent);
  animation: og-up .5s .25s ease both;
}
.og-title {
  margin: 0 0 10px; font-size: clamp(24px, 6vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 20%, var(--og-c) 50%, #fff 80%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: og-up .5s .35s ease both, og-sheen 5s 1.2s ease-in-out infinite;
}
.og-desc, .og-note { margin: 0 auto 8px; max-width: 360px; font-size: 14.5px; line-height: 1.6; color: #a3a9b8; animation: og-up .5s .45s ease both; }
.og-note { font-size: 13px; color: #7c8396; animation-delay: .52s; }
.og-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; animation: og-up .5s .6s ease both; }
.og-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 14px; text-decoration: none;
  font-weight: 800; font-size: 14.5px; color: #0b0d14;
  background: linear-gradient(135deg, var(--og-a), var(--og-b));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--og-a) 40%, transparent);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s;
}
.og-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.og-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--og-a) 55%, transparent); }
.og-btn:hover svg { transform: translateX(3px); }
.og-btn:active { transform: scale(.97); }
.og-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: og-shine 3.2s 1.4s ease-in-out infinite; }
.og-btn:focus-visible, .og-ghost:focus-visible { outline: 2px solid var(--og-c); outline-offset: 3px; }
.og-ghost { padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #8c93a6; text-decoration: none; transition: color .2s, background .2s; }
.og-ghost:hover { color: #fff; background: rgba(255,255,255,.06); }

/* ---------- padlock stories ---------- */
.og-lock { animation: og-lockdrop .7s .2s cubic-bezier(.3,1.5,.5,1) both; }
.og-shackle { transform: translateY(-7px); }
.og-kind-signin .og-shackle { animation: og-bob 2.2s 1s ease-in-out infinite; }
.og-kind-signin .og-lock { animation: og-lockdrop .7s .2s cubic-bezier(.3,1.5,.5,1) both, og-wiggle 4s 2s ease-in-out infinite; }
.og-kind-tier .og-meter { transform-origin: -30px 0; animation: og-drain 1.6s .5s cubic-bezier(.6,0,.4,1) both; }
.og-kind-tier .og-shackle { animation: og-clamp .35s 2.05s cubic-bezier(.5,0,.5,1.6) both; }
.og-kind-tier .og-lock { animation: og-lockdrop .7s .2s cubic-bezier(.3,1.5,.5,1) both, og-thunk .4s 2.3s ease both; }
.og-kind-trial .og-meter { transform-origin: -30px 0; animation: og-drain 1.6s .5s cubic-bezier(.6,0,.4,1) both; }
.og-kind-trial .og-shackle { animation: og-clamp .35s 2.05s cubic-bezier(.5,0,.5,1.6) both; }
.og-kind-trial .og-lock { animation: og-lockdrop .7s .2s cubic-bezier(.3,1.5,.5,1) both, og-thunk .4s 2.3s ease both; }
.og-kind-suspended .og-shackle { animation: og-clamp .35s .8s cubic-bezier(.5,0,.5,1.6) both; }
.og-slash { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-stroke .5s 1.15s ease forwards; }
.og-kind-suspended .og-scene > *:not(defs) { }
.og-kind-suspended .og-stage { filter: grayscale(.55) drop-shadow(0 12px 30px rgba(239,68,68,.3)); }

/* ---------- per-app scene motion ---------- */
.og-wave { animation: og-wave 3.2s calc(var(--i) * -.7s) ease-in-out infinite alternate; }
.og-spin { animation: og-spin 6s linear infinite; }
.og-spin.og-slow { animation-duration: 14s; }
.og-spin.og-rev { animation-direction: reverse; animation-duration: 9s; }
.og-twinkle { animation: og-twinkle 2.4s calc(var(--i) * .37s) ease-in-out infinite; }
.og-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-stroke .5s calc(.3s + var(--i) * .12s) ease forwards, og-pulse-op 3s calc(1.4s + var(--i) * .25s) ease-in-out infinite; }
.og-pop { transform: scale(0); animation: og-pop .45s calc(.35s + var(--i) * .12s) cubic-bezier(.3,1.6,.5,1) forwards, og-breathe 3s calc(1.5s + var(--i) * .3s) ease-in-out infinite; }
.og-wind { animation: og-flow calc(2.2s + var(--i) * .35s) linear infinite; }
.og-petal { animation: og-fall calc(5s + var(--i) * .5s) calc(var(--i) * -.9s) linear infinite; }
.og-breathe { animation: og-breathe 3.4s ease-in-out infinite; }
.og-scan { animation: og-scan 2.4s linear infinite; }
.og-glitch { opacity: 0; animation: og-glitch 1.6s calc(var(--i) * .31s) steps(2) infinite; }
.og-app-cyber .og-lock { animation: og-lockdrop .7s .2s cubic-bezier(.3,1.5,.5,1) both, og-jitter 3s 1.5s steps(1) infinite; }
.og-block { transform: translateY(-130px); animation: og-blockfall .5s calc(.25s + var(--i) * .16s) steps(6) forwards; }
.og-flip { animation: og-flip 3.6s 1s ease-in-out infinite; }
.og-ink { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-stroke .6s calc(.4s + var(--i) * .2s) ease forwards; }
.og-fan { transform: rotate(0deg); animation: og-fan 3.4s .3s cubic-bezier(.4,1.4,.5,1) infinite; }
.og-coin { transform: translateY(-20px); opacity: 0; animation: og-coin 2.6s calc(.3s + var(--i) * .45s) cubic-bezier(.5,0,.75,0) infinite; }
.og-coinspin { animation: og-coinspin .8s linear infinite; }
.og-ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-ring 3.6s calc(var(--i) * .3s) cubic-bezier(.6,0,.3,1) infinite; }
.og-venn { animation: og-venn 4s calc(var(--i) * .08s) cubic-bezier(.5,0,.3,1) infinite alternate; }
.og-glass { animation: og-hourflip 4.8s ease-in-out infinite; }
.og-sand-top { transform-origin: 0 -3px; animation: og-sandtop 4.8s linear infinite; }
.og-sand-bot { transform-origin: 0 37px; animation: og-sandbot 4.8s linear infinite; }
.og-sand-fall { animation: og-sandfall 4.8s linear infinite; }

/* per-app ambient particles */
.og-app-craft .og-bg span { border-radius: 0; }
.og-app-cyber .og-bg span { width: 2px; height: 26px; border-radius: 0; }
.og-app-lavender .og-bg span { border-radius: 60% 0; width: 9px; height: 9px; }
.og-app-finance .og-bg span { background: var(--og-b); box-shadow: 0 0 8px var(--og-b); }
.og-app-paper .og-bg span { border-radius: 2px; width: 10px; height: 13px; background: var(--og-c); opacity: .2; }
.og-app-cards .og-bg span { border-radius: 3px; width: 9px; height: 13px; }

/* ---------- per-app entrances (gate card + install card) ---------- */
.og-app-aura .og-card,      .og-install.og-play.og-app-aura > div      { animation: og-in-aura .8s cubic-bezier(.2,.8,.2,1) both !important; }
.og-app-subtopics .og-card, .og-install.og-play.og-app-subtopics > div { animation: og-in-subtopics .7s cubic-bezier(.7,0,.2,1) both !important; }
.og-app-zephyros .og-card,  .og-install.og-play.og-app-zephyros > div  { animation: og-in-zephyros .7s cubic-bezier(.2,.9,.25,1.1) both !important; }
.og-app-lavender .og-card,  .og-install.og-play.og-app-lavender > div  { animation: og-in-lavender 1s cubic-bezier(.2,.8,.2,1) both !important; }
.og-app-cyber .og-card,     .og-install.og-play.og-app-cyber > div     { animation: og-in-cyber .6s steps(1) both !important; }
.og-app-craft .og-card,     .og-install.og-play.og-app-craft > div     { animation: og-in-craft .5s steps(5) both !important; }
.og-app-paper .og-card,     .og-install.og-play.og-app-paper > div     { transform-origin: 50% 0; animation: og-in-paper .8s cubic-bezier(.2,.9,.3,1.1) both; }
.og-app-cards .og-card,     .og-install.og-play.og-app-cards > div     { animation: og-in-cards .75s cubic-bezier(.2,.9,.3,1.15) both !important; }
.og-app-finance .og-card,   .og-install.og-play.og-app-finance > div   { animation: og-in-finance .8s cubic-bezier(.3,1.4,.5,1) both !important; }
.og-app-life .og-card,      .og-install.og-play.og-app-life > div      { animation: og-in-life .8s cubic-bezier(.3,1.2,.4,1) both !important; }
.og-app-ikigai .og-card,    .og-install.og-play.og-app-ikigai > div    { animation: og-in-ikigai .9s cubic-bezier(.6,0,.2,1) both !important; }
.og-app-community .og-card, .og-install.og-play.og-app-community > div { animation: og-in-community .7s cubic-bezier(.2,.9,.3,1.2) both !important; }
.og-app-store .og-card,     .og-store.og-play .lock-card               { animation: og-in-aura .8s cubic-bezier(.2,.8,.2,1) both !important; }

/* ---------- install popup (#orbix-pwa-guide-modal) ---------- */
.og-install { backdrop-filter: blur(12px) saturate(1.2) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2) !important; }
.og-install.og-play { animation: og-fade .3s ease both; }
.og-install > div {
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--og-a) 20%, transparent), transparent 70%),
    linear-gradient(170deg, #12141f, #0b0d14) !important;
  border: 1px solid color-mix(in srgb, var(--og-a) 30%, rgba(255,255,255,.1)) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--og-a) 14%, transparent) !important;
}
.og-install #orbix-modal-icon { font-size: 0 !important; margin: -8px auto 6px !important; width: 132px; height: 132px; }
.og-install #orbix-modal-title { animation: og-up .45s .25s ease both; }
.og-install #orbix-modal-desc { animation: og-up .45s .32s ease both; }
.og-install #orbix-pwa-direct-install, .og-install #orbix-pwa-direct-launch {
  position: relative; overflow: hidden; background: linear-gradient(135deg, var(--og-a), var(--og-b)) !important; color: #0b0d14 !important;
  border-radius: 14px !important; transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s !important;
  animation: og-up .45s .4s ease both;
}
.og-install #orbix-pwa-direct-install:hover, .og-install #orbix-pwa-direct-launch:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--og-a) 45%, transparent) !important; }
.og-install #orbix-pwa-direct-install::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-120%); animation: og-shine 3s 1.2s ease-in-out infinite; }
.og-install.og-leaving { animation: og-fade .26s ease reverse both; }
.og-install.og-leaving > div { animation: og-out .26s ease both !important; }

.og-phone { animation: og-float 3.6s ease-in-out infinite; }
.og-drop { transform: translateY(-80px); opacity: 0; animation: og-dropin 4s .4s cubic-bezier(.5,0,.3,1.4) infinite; }
.og-progress { transform-origin: -18px 0; transform: scaleX(0); animation: og-progress 4s .4s ease-in-out infinite; }
.og-tick { transform: scale(0); animation: og-tick 4s .4s cubic-bezier(.3,1.6,.5,1) infinite; }
.og-mini { opacity: .55; }

/* bottom "Install" pill */
.og-pill { overflow: hidden !important; background: linear-gradient(135deg, var(--og-a), var(--og-b)) !important; color: #0b0d14 !important; animation: og-pillin .6s cubic-bezier(.2,.9,.3,1.3) both, og-glow 3s 1s ease-in-out infinite; }
.og-pill::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: og-shine 3.6s 1.5s ease-in-out infinite; }
.og-pill:hover { transform: translateY(-2px) scale(1.03); }

/* store trial expired overlay (index.html) */
.og-store .lock-icon { width: 140px; height: 140px; margin: 0 auto 18px !important; font-size: 0 !important; }

/* ---------- keyframes ---------- */
@keyframes og-fade { from { opacity: 0; } }
@keyframes og-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes og-out { to { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes og-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes og-orbit { to { --og-ang: 360deg; } }
@keyframes og-sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: -120% 0; } }
@keyframes og-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes og-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .5; } 85% { opacity: .35; } 100% { transform: translateY(-110vh) rotate(160deg); opacity: 0; } }
@keyframes og-lockdrop { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
@keyframes og-bob { 50% { transform: translateY(-10px); } }
@keyframes og-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(7deg); } 97% { transform: rotate(-3deg); } }
@keyframes og-clamp { to { transform: translateY(0); } }
@keyframes og-thunk { 40% { transform: scale(1.12, .9); } 70% { transform: scale(.97, 1.04); } }
@keyframes og-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes og-stroke { to { stroke-dashoffset: 0; } }
@keyframes og-pulse-op { 50% { stroke-opacity: .2; } }
@keyframes og-pop { to { transform: scale(1); } }
@keyframes og-breathe { 50% { transform: scale(1.12); } }
@keyframes og-wave { from { transform: translateX(-8px); } to { transform: translateX(8px) scaleY(1.3); } }
@keyframes og-spin { to { transform: rotate(360deg); } }
@keyframes og-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes og-flow { to { stroke-dashoffset: -1; } }
@keyframes og-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(14px, 140px) rotate(320deg); opacity: 0; } }
@keyframes og-scan { from { transform: translateY(-6px); } to { transform: translateY(120px); } }
@keyframes og-glitch { 0% { opacity: .9; transform: translateX(0); } 50% { opacity: 0; transform: translateX(10px); } }
@keyframes og-jitter { 0%, 90%, 100% { transform: none; filter: none; } 92% { transform: translateX(-3px); filter: drop-shadow(3px 0 var(--og-b)) drop-shadow(-3px 0 var(--og-a)); } 95% { transform: translateX(3px); } }
@keyframes og-blockfall { to { transform: translateY(0); } }
@keyframes og-flip { 0%, 30% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 80%, 100% { transform: scaleX(1); } }
@keyframes og-fan { 0%, 15% { transform: rotate(0); } 45%, 70% { transform: rotate(calc(var(--d) * 22deg)); } 100% { transform: rotate(0); } }
@keyframes og-coin { 0% { transform: translateY(-20px); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateY(98px); opacity: 1; } 76%, 100% { transform: translateY(98px) scale(.4); opacity: 0; } }
@keyframes og-coinspin { 50% { transform: scaleX(.15); } }
@keyframes og-ring { 0% { stroke-dashoffset: 1; } 55%, 80% { stroke-dashoffset: .12; } 100% { stroke-dashoffset: 1; } }
@keyframes og-venn { from { transform: translate(calc(var(--x) * 30px), calc(var(--y) * 30px)); } to { transform: translate(calc(var(--x) * 13px), calc(var(--y) * 13px)); } }
@keyframes og-hourflip { 0%, 78% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes og-sandtop { 0% { transform: scaleY(1); } 75%, 100% { transform: scaleY(0); } }
@keyframes og-sandbot { 0% { transform: scaleY(0); } 75%, 100% { transform: scaleY(1); } }
@keyframes og-sandfall { 0%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes og-float { 50% { transform: translateY(-4px); } }
@keyframes og-dropin { 0% { transform: translateY(-80px); opacity: 0; } 12% { opacity: 1; } 30%, 70% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(0) scale(.5); opacity: 0; } }
@keyframes og-progress { 0%, 30% { transform: scaleX(0); } 62%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes og-tick { 0%, 62% { transform: scale(0); } 70%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes og-pillin { from { opacity: 0; transform: translateY(30px) scale(.9); } }
@keyframes og-glow { 50% { box-shadow: 0 8px 30px color-mix(in srgb, var(--og-a) 55%, transparent); } }

@keyframes og-in-aura { from { opacity: 0; transform: scale(.9); filter: blur(14px) brightness(1.6); } }
@keyframes og-in-subtopics { from { clip-path: inset(50% 0 50% 0 round 26px); opacity: .4; } to { clip-path: inset(0 0 0 0 round 26px); } }
@keyframes og-in-zephyros { from { opacity: 0; transform: translateX(-60px) skewX(12deg); } 70% { transform: translateX(6px) skewX(-2deg); } }
@keyframes og-in-lavender { from { opacity: 0; transform: translateY(30px) rotate(-3deg); filter: blur(8px); } }
@keyframes og-in-cyber {
  0% { opacity: 0; } 10% { opacity: 1; clip-path: inset(10% 0 60% 0); transform: translateX(-12px); }
  25% { clip-path: inset(50% 0 20% 0); transform: translateX(10px); } 40% { clip-path: inset(30% 0 40% 0); transform: translateX(-5px); }
  55% { clip-path: inset(0 0 0 0); transform: translateX(3px); filter: drop-shadow(4px 0 #f0abfc) drop-shadow(-4px 0 #22d3ee); } 75%, 100% { clip-path: none; transform: none; filter: none; }
}
@keyframes og-in-craft { from { opacity: 0; transform: scale(.4); } }
@keyframes og-in-paper { from { opacity: 0; transform: perspective(900px) rotateX(-75deg); } 70% { transform: perspective(900px) rotateX(6deg); } }
@keyframes og-in-cards { from { opacity: 0; transform: perspective(900px) rotateY(95deg) scale(.9); } }
@keyframes og-in-finance { from { opacity: 0; transform: translateY(-90px); } 60% { opacity: 1; transform: translateY(8px); } 80% { transform: translateY(-3px); } }
@keyframes og-in-life { from { opacity: 0; clip-path: circle(8% at 50% 50%); transform: scale(.7); } to { clip-path: circle(110% at 50% 50%); } }
@keyframes og-in-ikigai { from { clip-path: circle(0% at 50% 30%); } to { clip-path: circle(140% at 50% 30%); } }
@keyframes og-in-community { from { opacity: 0; transform: translateY(50px) scale(.94); } }

/* ---------- in-app Google sign-in (signed-out screen, Workspace flow) ---------- */
.og-google {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 20px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: #fff; color: #1f1f1f;
  font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.2;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--og-a) 32%, transparent);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s;
}
.og-google svg { width: 19px; height: 19px; flex: none; }
/* a soft sweep in the app's own colour, so each app's button still feels like that app */
.og-google::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--og-a) 22%, transparent) 50%, transparent 70%); transform: translateX(-120%); animation: og-shine 3.6s 1.6s ease-in-out infinite; }
.og-google:hover { transform: translateY(-2px); box-shadow: 0 16px 36px color-mix(in srgb, var(--og-a) 48%, transparent); }
.og-google:active { transform: scale(.97); transition-duration: .12s; }
.og-google:focus-visible, .og-alt:focus-visible, .og-foot a:focus-visible { outline: 2px solid var(--og-c); outline-offset: 3px; }
.og-google[aria-busy="true"] { pointer-events: none; opacity: .75; }
.og-google[aria-busy="true"] svg { animation: og-gspin 1s linear infinite; }
@keyframes og-gspin { to { transform: rotate(360deg); } }
.og-alt { padding: 6px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--og-c); text-decoration: none; opacity: .9; transition: opacity .2s, background .2s; }
.og-alt:hover { opacity: 1; background: rgba(255,255,255,.05); }
.og-err { margin: 0; font-size: 12.5px; line-height: 1.4; color: #fca5a5; }
.og-err:empty { display: none; }
.og-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; font-size: 12.5px; }
.og-foot a { color: #8c93a6; text-decoration: none; padding: 4px 6px; border-radius: 8px; transition: color .2s, background .2s; }
.og-foot a:hover { color: #fff; background: rgba(255,255,255,.06); }
.og-foot span { width: 3px; height: 3px; border-radius: 50%; background: #4b5163; }
/* signed in: the card lifts away while the app reloads unlocked */
.og-welcome .og-card { animation: og-leave .6s cubic-bezier(.4,0,.2,1) .15s both !important; }
.og-welcome .og-actions { opacity: 0; transition: opacity .2s; }
@keyframes og-leave { to { opacity: 0; transform: translateY(-14px) scale(1.04); filter: blur(6px); } }

/* ---------- demo countdown chip (?demo=true, 10 minutes per app) ---------- */
.og-demo-chip {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 2147483000;
  transform: translateX(-50%); pointer-events: none;
  font: 600 12px/1 Outfit, Poppins, system-ui, -apple-system, sans-serif; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: #fff; padding: 8px 12px; border-radius: 999px;
  background: rgba(12,14,22,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--og-a) 45%, transparent) inset;
  animation: og-chip-in .5s cubic-bezier(.2,.9,.3,1.2) both;
}
.og-demo-chip.og-demo-low { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px #f87171 inset; animation: og-chip-in .5s cubic-bezier(.2,.9,.3,1.2) both, og-chip-pulse 1.6s ease-in-out infinite; }
@keyframes og-chip-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } }
@keyframes og-chip-pulse { 50% { transform: translateX(-50%) scale(1.04); } }

/* ---------- reduced motion: keep end states, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .og *, .og, .og-install *, .og-install, .og-pill, .og-store *, .og-demo-chip { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}