/* ===========================================================================
Gcourses — shared visual experience
Intro "open from center" animation · animated loop logo · "G" buddy helper
Drop in
and before .
=========================================================================== */
:root {
--gc-purple: #a0509f;
--gc-lavender: #dab5d5;
--gc-blush: #f3e7f3;
--gc-deep: #3b1a3a;
--gc-mid: #6b3569;
--gc-white: #fdfafd;
}
/* ----------------------------------------------------------------------------
1. Intro overlay — two panels that split from the centre to the sides
---------------------------------------------------------------------------- */
.gc-intro {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
overflow: hidden;
}
.gc-intro__panel {
position: absolute;
top: 0;
bottom: 0;
width: 50.5%; /* slight overlap so no seam shows */
background: linear-gradient(135deg, #4a1f48 0%, #6b3569 55%, #a0509f 100%);
will-change: transform;
transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.gc-intro__panel--left { left: 0; transform: translateX(0); }
.gc-intro__panel--right { right: 0; transform: translateX(0); }
/* centred logo lock-up that fades as the panels part */
.gc-intro__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
opacity: 0;
transform: scale(0.86);
transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gc-intro__tag {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gc-lavender);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}
/* --- play states (toggled by JS) --- */
.gc-intro.is-revealing .gc-intro__center { opacity: 1; transform: scale(1); }
.gc-intro.is-revealing .gc-intro__tag { opacity: 1; transform: translateY(0); }
.gc-intro.is-opening .gc-intro__panel--left { transform: translateX(-100%); }
.gc-intro.is-opening .gc-intro__panel--right { transform: translateX(100%); }
.gc-intro.is-opening .gc-intro__center {
opacity: 0;
transform: scale(1.12);
transition: opacity 0.45s ease, transform 0.7s ease;
}
/* lock scroll while the curtain is up */
html.gc-intro-lock, html.gc-intro-lock body { overflow: hidden; }
/* ----------------------------------------------------------------------------
2. Animated loop logo — "Out of the Loop" inspired orbit around the mark
---------------------------------------------------------------------------- */
.gc-logo {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gc-logo__img {
position: relative;
z-index: 2;
display: block;
animation: gc-logo-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* the looping orbit lives in an SVG laid over the mark */
.gc-logo__loop {
position: absolute;
z-index: 1;
inset: -22% -16%;
width: 132%;
height: 144%;
pointer-events: none;
overflow: visible;
}
.gc-logo__path {
fill: none;
stroke: var(--gc-lavender);
stroke-width: 2.5;
stroke-linecap: round;
opacity: 0.5;
stroke-dasharray: 6 10;
animation: gc-loop-dash 6s linear infinite;
}
.gc-logo__dot {
fill: var(--gc-purple);
filter: drop-shadow(0 0 6px rgba(160, 80, 159, 0.65));
}
.gc-logo__dot--2 { fill: var(--gc-lavender); opacity: 0.9; }
@keyframes gc-loop-dash { to { stroke-dashoffset: -160; } }
@keyframes gc-logo-pop {
0% { opacity: 0; transform: scale(0.6) rotate(-8deg); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* ----------------------------------------------------------------------------
3. The "G" buddy — floating helper character
---------------------------------------------------------------------------- */
.gc-buddy {
position: fixed;
right: clamp(14px, 3vw, 34px);
bottom: clamp(14px, 3vw, 30px);
z-index: 9000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
font-family: 'Montserrat', system-ui, sans-serif;
}
.gc-buddy.is-hidden { display: none; }
/* the chat panel that opens above the character */
.gc-buddy__panel {
width: min(330px, calc(100vw - 28px));
background: var(--gc-white);
border: 1.5px solid var(--gc-lavender);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(59, 26, 58, 0.22);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: min(70vh, 520px);
opacity: 0;
transform: translateY(12px) scale(0.97);
transform-origin: bottom right;
transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
.gc-buddy.is-open .gc-buddy__panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.gc-buddy__head {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, #6b3569, #a0509f);
color: #fff;
}
.gc-buddy__avatar {
width: 38px; height: 38px;
border-radius: 50%;
object-fit: cover;
background: rgba(255, 255, 255, 0.2);
flex: 0 0 auto;
}
.gc-buddy__head-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.gc-buddy__head-txt strong { font-size: 0.92rem; }
.gc-buddy__head-txt span { font-size: 0.68rem; opacity: 0.85; }
.gc-buddy__close {
border: none; background: none; color: #fff;
font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: 0.85;
}
.gc-buddy__close:hover { opacity: 1; }
.gc-buddy__msgs {
padding: 14px;
display: flex; flex-direction: column; gap: 8px;
overflow-y: auto;
background: var(--gc-blush);
flex: 1;
min-height: 80px;
}
.gc-buddy__msg {
max-width: 85%;
font-size: 0.86rem;
line-height: 1.45;
padding: 9px 12px;
border-radius: 14px;
white-space: pre-wrap;
word-break: break-word;
}
.gc-buddy__msg--in { align-self: flex-start; background: #fff; color: var(--gc-deep); border-bottom-left-radius: 5px; }
.gc-buddy__msg--out { align-self: flex-end; background: var(--gc-purple); color: #fff; border-bottom-right-radius: 5px; }
.gc-buddy__form { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; background: var(--gc-white); }
.gc-buddy__field {
width: 100%;
border: 1.5px solid var(--gc-lavender);
border-radius: 10px;
padding: 9px 11px;
font-family: inherit;
font-size: 0.85rem;
color: var(--gc-deep);
outline: none;
background: var(--gc-white);
}
.gc-buddy__field:focus { border-color: var(--gc-purple); }
.gc-buddy__ta { min-height: 64px; resize: vertical; line-height: 1.4; }
.gc-buddy__send {
border: none;
background: var(--gc-purple);
color: #fff;
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
padding: 10px;
border-radius: 100px;
cursor: pointer;
transition: background 0.2s;
}
.gc-buddy__send:hover { background: var(--gc-mid); }
.gc-buddy__send:disabled { opacity: 0.6; cursor: default; }
.gc-buddy__status { font-size: 0.76rem; color: var(--gc-mid); min-height: 0.9rem; text-align: center; }
.gc-buddy__char {
position: relative;
width: clamp(74px, 12vw, 104px);
border: none;
background: none;
padding: 0;
cursor: pointer;
filter: drop-shadow(0 10px 18px rgba(107, 53, 105, 0.28));
animation: gc-buddy-float 4.2s ease-in-out infinite;
transition: transform 0.25s ease;
}
.gc-buddy__char:hover { transform: translateY(-4px) rotate(-2deg); }
.gc-buddy__char:active { transform: scale(0.95); }
.gc-buddy__char img { width: 100%; display: block; pointer-events: none; }
/* a soft glow that breathes behind the character */
.gc-buddy__char::before {
content: '';
position: absolute;
inset: 12% 10% 4%;
background: radial-gradient(circle, rgba(218, 181, 213, 0.55), transparent 70%);
border-radius: 50%;
z-index: -1;
animation: gc-buddy-glow 4.2s ease-in-out infinite;
}
/* little "tip" badge when the buddy has something to say */
.gc-buddy__poke {
position: absolute;
top: -4px;
left: -4px;
width: 22px;
height: 22px;
background: var(--gc-purple);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(160, 80, 159, 0.5);
animation: gc-buddy-poke 1.8s ease-in-out infinite;
}
.gc-buddy.is-open .gc-buddy__poke { display: none; }
@keyframes gc-buddy-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes gc-buddy-glow {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes gc-buddy-poke {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* respect reduced-motion preferences everywhere */
@media (prefers-reduced-motion: reduce) {
.gc-intro__panel,
.gc-logo__img,
.gc-logo__path,
.gc-buddy__char,
.gc-buddy__char::before,
.gc-buddy__poke { animation: none !important; transition: none !important; }
}