/* ===========================================================================
   BLENDer brand kit: the personalised workshop look. Atmosphere, logo tile, hero type,
   prompt chips and the welcome intro. Shared by the attendee app (index.html) and the
   organizer's live preview (organizer.html), so what an organizer previews is what attendees get.
   Variants come from data attributes on any ancestor:
     data-bk-hero = modern | clean | bold     data-bk-bg = glow | waves | none
   The accent is --c-purple (set per workshop).
   =========================================================================== */

/* ---------------------------------------------------------------- Atmosphere */
.bk-atmo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #fbfcfe; }
.bk-atmo::before {
  content: ""; position: absolute; inset: -12%;
  background:
    radial-gradient(38% 44% at 12% 16%, rgba(158, 204, 255, 0.42), transparent 70%),
    radial-gradient(34% 40% at 88% 12%, rgba(196, 222, 255, 0.5), transparent 70%),
    radial-gradient(38% 42% at 86% 80%, color-mix(in srgb, var(--c-purple, #9467bd) 15%, transparent), transparent 70%),
    radial-gradient(36% 40% at 10% 84%, rgba(186, 240, 212, 0.42), transparent 70%),
    radial-gradient(28% 30% at 66% 94%, rgba(255, 222, 200, 0.32), transparent 70%);
  animation: bkDrift 22s ease-in-out infinite alternate;
}
[data-bk-bg="none"] .bk-atmo::before { display: none; }
[data-bk-hero="bold"] .bk-atmo { background: color-mix(in srgb, var(--c-purple, #9467bd) 6%, #fbfcfe); }
[data-bk-hero="bold"] .bk-atmo::before { filter: saturate(1.35); }
.bk-waves { display: none; position: absolute; left: -2%; right: -2%; bottom: 0; height: 36%; background: url("/assets/bk-waves.svg") center bottom / 100% 100% no-repeat; }
[data-bk-bg="waves"] .bk-waves { display: block; }

.bk-orbit {
  position: absolute; left: 50%; top: 50%; width: min(1180px, 118%); aspect-ratio: 1.6;
  transform: translate(-50%, -52%); border-radius: 50%; border: 1px solid rgba(120, 150, 210, 0.15);
}
.bk-orbit.o2 { width: min(900px, 92%); border: 1.5px dotted rgba(120, 150, 210, 0.24); transform: translate(-50%, -50%) rotate(-7deg); }
.bk-orb {
  position: absolute; border-radius: 50%; opacity: 0.6;
  background: radial-gradient(circle at 32% 30%, #fff 0, color-mix(in srgb, var(--bk-c, #9cc2ff) 72%, #fff) 48%, var(--bk-c, #9cc2ff) 100%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bk-c, #9cc2ff) 40%, transparent);
  animation: bkFloat 10s ease-in-out infinite;
}
.bk-orb.a { width: 26px; height: 26px; left: 17%; top: 23%; --bk-c: #a9c8ff; }
.bk-orb.b { width: 38px; height: 38px; right: 15%; top: 35%; --bk-c: #c8d4ff; animation-delay: -3.5s; }
.bk-orb.c { width: 14px; height: 14px; left: 57%; top: 13%; --bk-c: #9fe3c4; animation-delay: -6s; }
[data-bk-hero="clean"] .bk-orbit, [data-bk-hero="clean"] .bk-orb { display: none; }

/* --------------------------------------------------------------- Hero pieces */
.bk-logo {
  width: 116px; height: 116px; border-radius: 30px; background: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 18px 40px rgba(3, 45, 96, 0.1), 0 2px 6px rgba(3, 45, 96, 0.05), inset 0 0 0 1px rgba(3, 45, 96, 0.05);
}
.bk-logo img { max-width: 70%; max-height: 70%; object-fit: contain; }
[data-bk-hero="bold"] .bk-logo {
  box-shadow: 0 18px 44px color-mix(in srgb, var(--c-purple, #9467bd) 26%, transparent), 0 0 0 4px color-mix(in srgb, var(--c-purple, #9467bd) 16%, #fff);
}
[data-bk-hero="clean"] .bk-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(3, 45, 96, 0.08); }
.bk-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #5b6475; }
.bk-title {
  margin: 0; font-size: clamp(34px, 4.4cqw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  color: var(--sf-navy, #032d60); text-wrap: balance;
}
[data-bk-hero="bold"] .bk-title {
  background: linear-gradient(100deg, var(--sf-navy, #032d60) 15%, color-mix(in srgb, var(--c-purple, #9467bd) 80%, #000) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-bk-hero="clean"] .bk-title { font-weight: 700; letter-spacing: -0.025em; font-size: clamp(30px, 3.6cqw, 48px); }
.bk-msg { margin: 16px auto 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: #5e6676; white-space: pre-line; text-wrap: pretty; }
.bk-msg:empty { display: none; }

/* ---------------------------------------------------------------- Composer */
.bk-composer {
  background: #fff; border-radius: 22px; padding: 16px 16px 12px 22px; text-align: left;
  box-shadow: 0 14px 44px rgba(3, 45, 96, 0.08), 0 0 0 1.5px color-mix(in srgb, var(--c-purple, #9467bd) 36%, #fff);
}
.bk-composer-q { display: flex; align-items: center; gap: 12px; font-size: 17px; color: #6b7385; }
.bk-composer-q svg { color: var(--c-purple, #9467bd); width: 20px; height: 20px; flex: none; }
.bk-composer-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-left: 32px; font-size: 13px; color: #9aa1ae; }
.bk-composer-row kbd { font: inherit; border: 1px solid #e6e8ee; border-radius: 5px; padding: 0 5px; }
.bk-send { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c-purple, #9467bd); box-shadow: 0 6px 16px color-mix(in srgb, var(--c-purple, #9467bd) 35%, transparent); }

/* ------------------------------------------------------------------ Chips */
.bk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(3, 45, 96, 0.07); color: #1f2a3c;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: left;
  box-shadow: 0 6px 20px rgba(3, 45, 96, 0.06); backdrop-filter: blur(6px);
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.18s, border-color 0.18s;
}
.bk-chip:hover, .bk-chip:focus-visible {
  transform: translateY(-2px); outline: none; color: #1f2a3c; background: #fff;
  border-color: color-mix(in srgb, var(--c-purple, #9467bd) 30%, #fff); box-shadow: 0 12px 28px rgba(3, 45, 96, 0.11);
}
.bk-chip svg { width: 20px; height: 20px; flex: none; }
.bk-chip.surprise {
  font-weight: 700; color: var(--sf-navy, #032d60); border: 1.5px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #ffb020, #ff8fb1, #7aa8ff);
  background-origin: border-box; background-clip: padding-box, border-box;
}

/* Narrow screens (phones, and the organizer's mobile preview). */
@container (max-width: 560px) {
  .bk-logo { width: 84px; height: 84px; border-radius: 22px; }
  .bk-msg { font-size: 15.5px; }
  .bk-eyebrow { font-size: 11.5px; }
  .bk-chip { padding: 10px 14px; font-size: 14px; }
}

/* ------------------------------------------------------------------ Intro */
.bk-intro {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center;
  container-type: size; cursor: default; animation: bkIn 0.35s ease-out both;
}
.bk-intro.inline { position: absolute; z-index: 5; }
.bk-intro.out { animation: bkOut 0.45s ease-in both; }
.bk-sc { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 24px; transition: opacity 0.6s ease, transform 0.6s ease; }
.bk-sc2 { opacity: 0; transform: translateY(16px); pointer-events: none; }
.bk-intro.s2 .bk-sc1 { opacity: 0; transform: translateY(-16px) scale(0.98); }
.bk-intro.s2 .bk-sc2 { opacity: 1; transform: none; }

.bk-sc1 > * { opacity: 0; }
.bk-intro.play .bk-sc1 > * { animation: bkUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.bk-intro.play .bk-sc1 > .bk-logo { animation: bkPop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.1s forwards; }
.bk-intro.play .bk-sc1 > :nth-child(2) { animation-delay: 0.45s; }
.bk-intro.play .bk-sc1 > :nth-child(3) { animation-delay: 0.6s; }
.bk-intro.play .bk-sc1 > :nth-child(4) { animation-delay: 0.9s; }
.bk-intro.play .bk-sc1 > :nth-child(5) { animation-delay: 1.1s; }
.bk-sc1 .bk-logo { width: 150px; height: 150px; border-radius: 38px; margin-bottom: 26px; }
.bk-hello { font-size: 20px; font-weight: 500; letter-spacing: 0.32em; color: #4b5568; margin-bottom: 8px; }
.bk-name { font-size: clamp(40px, 7cqw, 92px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; color: var(--sf-navy, #032d60); max-width: 92cqw; text-wrap: balance; }
[data-bk-hero="bold"] .bk-name { background: linear-gradient(100deg, var(--sf-navy, #032d60) 20%, color-mix(in srgb, var(--c-purple, #9467bd) 80%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bk-by { margin-top: 18px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: #5b6475; }
.bk-tag { margin-top: 30px; font-size: 20px; color: #5e6676; }
.bk-tag:empty { display: none; }
.bk-ibfly { position: absolute; z-index: 1; right: 13cqw; top: 33cqh; width: 104px; filter: drop-shadow(0 10px 18px rgba(58, 40, 120, 0.2)); opacity: 0; transition: opacity 0.6s; }
.bk-intro.play .bk-ibfly { opacity: 1; animation: bkFlutter 4.5s ease-in-out infinite; }
.bk-intro.s2 .bk-ibfly { opacity: 0; }

.bk-chart { position: relative; width: min(470px, 80cqw); aspect-ratio: 470 / 250; margin-bottom: 26px; }
.bk-chart svg { width: 100%; height: 100%; overflow: visible; }
.bk-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.bk-intro.s2 .bk-bar { animation: bkRise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards; }
.bk-intro.s2 .bk-bar:nth-of-type(2) { animation-delay: 0.08s; }
.bk-intro.s2 .bk-bar:nth-of-type(3) { animation-delay: 0.16s; }
.bk-intro.s2 .bk-bar:nth-of-type(4) { animation-delay: 0.24s; }
.bk-intro.s2 .bk-bar:nth-of-type(5) { animation-delay: 0.32s; }
.bk-orbit-path { stroke-dasharray: 760; stroke-dashoffset: 760; }
.bk-intro.s2 .bk-orbit-path { animation: bkDraw 1.4s ease-out 0.3s forwards; }
.bk-cbfly { position: absolute; right: 4%; top: -6%; width: 70px; filter: drop-shadow(0 8px 14px rgba(58, 40, 120, 0.2)); animation: bkFlutter 4s ease-in-out infinite; }
.bk-prep { margin: 0; font-size: clamp(26px, 3.4cqw, 44px); font-weight: 800; letter-spacing: -0.03em; color: var(--sf-navy, #032d60); }
.bk-prep-sub { margin: 10px 0 0; font-size: 18px; color: #5e6676; }
.bk-steps { display: flex; align-items: flex-start; margin-top: 36px; }
.bk-step { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 170px; font-size: 15.5px; color: #5e6676; opacity: 0.35; }
.bk-step .ic { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--c); box-shadow: 0 6px 18px rgba(3, 45, 96, 0.08); transition: box-shadow 0.4s; }
.bk-step .ic svg { width: 26px; height: 26px; }
.bk-step.st1 { --c: #8b5cf6; } .bk-step.st2 { --c: #2f7de1; } .bk-step.st3 { --c: #1fa971; }
.bk-step-line { width: 100px; height: 2px; margin: 28px -36px 0; border-radius: 2px; background: rgba(3, 45, 96, 0.1); position: relative; overflow: hidden; }
.bk-step-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #8b5cf6, #2f7de1); transform-origin: left; transform: scaleX(0); }
.bk-intro.s2 .bk-step { animation: bkOn 0.45s ease forwards; }
.bk-intro.s2 .bk-step.st1 { animation-delay: 0.5s; } .bk-intro.s2 .bk-step.st2 { animation-delay: 1.2s; } .bk-intro.s2 .bk-step.st3 { animation-delay: 1.9s; }
.bk-intro.s2 .bk-step-line::after { animation: bkFill 0.6s ease forwards 0.8s; }
.bk-intro.s2 .bk-step-line.l2::after { animation-delay: 1.5s; background: linear-gradient(90deg, #2f7de1, #1fa971); }
.bk-intro.s2 .bk-step .ic { box-shadow: 0 6px 18px rgba(3, 45, 96, 0.08), 0 0 0 6px color-mix(in srgb, var(--c) 12%, transparent); }

.bk-prog { position: absolute; z-index: 2; bottom: 6cqh; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.bk-prog i { width: 46px; height: 4px; border-radius: 4px; background: rgba(3, 45, 96, 0.12); overflow: hidden; position: relative; }
.bk-prog i::after { content: ""; position: absolute; inset: 0; background: var(--c-purple, #9467bd); transform-origin: left; transform: scaleX(0); }
.bk-intro.play .bk-prog i:nth-child(1)::after { animation: bkFill var(--s1, 2.7s) linear forwards; }
.bk-intro.s2 .bk-prog i:nth-child(1)::after { animation: none; transform: none; }
.bk-intro.s2 .bk-prog i:nth-child(2)::after { animation: bkFill var(--s2, 2.9s) linear forwards; }
.bk-skip {
  position: absolute; z-index: 2; right: 4cqw; bottom: 5.5cqh; display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 16px; color: #5e6676; cursor: pointer;
}
.bk-skip:hover, .bk-skip:focus-visible { color: var(--sf-navy, #032d60); background: rgba(255, 255, 255, 0.7); outline: none; }

@keyframes bkDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.05); } }
@keyframes bkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bkFlutter { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes bkUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bkPop { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes bkRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
@keyframes bkFill { to { transform: scaleX(1); } }
@keyframes bkOn { to { opacity: 1; } }
@keyframes bkIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkOut { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bk-atmo::before, .bk-orb, .bk-cbfly, .bk-intro.play .bk-ibfly { animation: none; }
  .bk-intro.play .bk-sc1 > *, .bk-intro.play .bk-sc1 > .bk-logo { animation: bkIn 0.3s ease-out forwards; }
  .bk-intro.s2 .bk-bar { animation: none; transform: none; }
  .bk-intro.s2 .bk-orbit-path { animation: none; stroke-dashoffset: 0; }
  .bk-chip { transition: none; } .bk-chip:hover { transform: none; }
}