/* chatgpt-intro.css: the "ChatGPT has joined the party" banner (js/chatgpt-intro.js).
 *
 * Alex, 20 Oct 2026: "I don't like these dark colors… we should be more lighthearted and
 * fun… a little fun animation… very low key… it can't be like so distracting when people
 * are in the dashboard… plays once when it loads up… a little celebration party, like
 * Claude's got a friend, ChatGPT's arrived."
 *
 * Light and playful: a soft mint-to-peach band (ChatGPT's green, Claude's warm orange),
 * white tiles, dark text. THE PARTY plays once per page load, only while `.is-playing`
 * is on the bar (the script puts it on the first time the bar is really shown and takes it
 * off when the party is over, so a banner hidden by a sheet and shown again stays still):
 *   1. ChatGPT hops in from the left to sit beside Claude, who is already there;
 *   2. Claude gives a little wiggle hello;
 *   3. a handful of confetti pops between them and fades;
 *   4. both bob twice, then rest. About two seconds in all, then nothing moves.
 * Reduced motion: no party at all, the still picture only.
 * Sits at the top of the main column, in the Spaces banner's place, never over it.
 * Large, plain text for 50+ coaches. Phone first: it stacks and the button takes the width. */
.cgi-bar {
  display: flex; align-items: center; gap: 14px 22px;
  margin: 0 0 18px; padding: 16px 56px 16px 20px; position: relative; overflow: hidden;
  border-radius: var(--radius-lg, 18px); color: #1C1E26;
  background:
    radial-gradient(220px 140px at 60px 50%, rgba(16, 163, 127, 0.16), transparent 70%),
    radial-gradient(220px 140px at 150px 50%, rgba(217, 119, 87, 0.16), transparent 70%),
    linear-gradient(100deg, #E8FAF2 0%, #F4FBF7 45%, #FFF4EC 100%);
  border: 1px solid #CDEFE1;
}
.cgi-bar[hidden] { display: none !important; }

/* The two friends. */
.cgi-marks { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.cgi-tile {
  width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(28, 30, 38, 0.06);
}
.cgi-tile-chatgpt { color: #10171A; box-shadow: 0 6px 16px rgba(16, 163, 127, 0.22); }
.cgi-tile-claude { box-shadow: 0 6px 16px rgba(217, 119, 87, 0.24); }
.cgi-heart { color: #F27E9E; font-size: 18px; line-height: 1; }

/* The confetti: still and invisible unless the party is playing. */
.cgi-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.cgi-confetti i {
  position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 2px; opacity: 0;
}
.cgi-confetti i:nth-child(1) { background: #10A37F; --dx: -26px; --dy: -30px; }
.cgi-confetti i:nth-child(2) { background: #D97757; --dx: 24px; --dy: -32px; border-radius: 50%; }
.cgi-confetti i:nth-child(3) { background: #F5C451; --dx: -6px; --dy: -38px; }
.cgi-confetti i:nth-child(4) { background: #7C9CF5; --dx: 34px; --dy: -14px; border-radius: 50%; }
.cgi-confetti i:nth-child(5) { background: #F27E9E; --dx: -34px; --dy: -10px; }
.cgi-confetti i:nth-child(6) { background: #10A37F; --dx: 12px; --dy: 30px; border-radius: 50%; }
.cgi-confetti i:nth-child(7) { background: #F5C451; --dx: -18px; --dy: 28px; border-radius: 50%; }

.cgi-body { flex: 1 1 auto; min-width: 0; }
.cgi-badge {
  display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid #9FE3C7; color: #0B6B53; background: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.cgi-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 800; color: #1C1E26; }
.cgi-text { margin: 4px 0 0; font-size: 16px; line-height: 1.45; color: #3F4350; }
.cgi-go {
  flex: 0 0 auto; min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: #0B7A5E; color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(11, 122, 94, 0.25);
}
.cgi-go:hover { background: #096A51; }
.cgi-go:focus-visible { outline: 3px solid #F5C451; outline-offset: 2px; }
.cgi-close {
  position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #5B6070; font-size: 24px; line-height: 1; cursor: pointer;
}
.cgi-close:hover, .cgi-close:focus-visible { background: rgba(28, 30, 38, 0.07); color: #1C1E26; }
.cgi-close:focus-visible { outline: 3px solid #F5C451; outline-offset: 1px; }

/* ── The party: once, about two seconds, only while .is-playing ── */
@media (prefers-reduced-motion: no-preference) {
  .cgi-bar.is-playing .cgi-tile-chatgpt { animation: cgi-hop-in 700ms cubic-bezier(.3, 1.4, .5, 1) both, cgi-bob 520ms ease-in-out 900ms 2; }
  .cgi-bar.is-playing .cgi-tile-claude { animation: cgi-wiggle 520ms ease-in-out 520ms both, cgi-bob 520ms ease-in-out 1000ms 2; }
  .cgi-bar.is-playing .cgi-heart { animation: cgi-pop 500ms ease-out 640ms both; }
  .cgi-bar.is-playing .cgi-confetti i { animation: cgi-confetti 900ms ease-out 640ms both; }
  .cgi-bar.is-playing .cgi-confetti i:nth-child(even) { animation-delay: 700ms; }
}
@keyframes cgi-hop-in {
  0%   { transform: translate(-40px, 0) rotate(-12deg); opacity: 0; }
  45%  { transform: translate(-12px, -16px) rotate(-4deg); opacity: 1; }
  75%  { transform: translate(0, 2px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}
@keyframes cgi-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  50% { transform: rotate(7deg); }
  75% { transform: rotate(-4deg); }
}
@keyframes cgi-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes cgi-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cgi-confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(160deg); opacity: 0; }
}

/* Side by side: once the text column gets narrow (the sidebars are open just above 1100px,
   and 641 to 700px) the button drops under the text rather than squeezing it (final
   review, 20 Oct; the Spaces banner's own pattern). */
@media (min-width: 641px) {
  .cgi-bar { flex-wrap: wrap; }
  .cgi-body { flex: 1 1 280px; }
}
/* At 1100px and below the app's menu button sits fixed in the top right corner, the corner
   .page-head and .cc-bar keep clear (app-styles-v2.css). The close button moves out of it,
   so it can always be pressed (final review, 20 Oct: it sat under the menu button). */
@media (max-width: 1100px) {
  .cgi-close { right: 60px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .cgi-bar { padding-right: 108px; }
}
@media (max-width: 640px) {
  .cgi-bar { flex-direction: column; align-items: stretch; padding: 16px; }
  .cgi-marks { align-self: flex-start; }
  .cgi-body { padding-right: 0; }
  .cgi-marks { padding-right: 96px; }
  .cgi-title { font-size: 19px; }
  .cgi-go { width: 100%; }
}