/* Scene 9 — Closing. Modules fold into the badge → the rhythmic three-line
   beat → the ecosystem line → the badge grows and crossfades into the
   brand, with any contact details the presenter has filled in. */

.cl .scene-bg { opacity: .16; }
.cl .scene-scrim {
  background: radial-gradient(90% 70% at 50% 20%, rgba(228, 193, 105, .12) 0%, transparent 62%),
              linear-gradient(180deg, #0E100C 0%, #0B0C0A 100%);
}

.cl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  gap: clamp(10px, 1.8vh, 26px);
  max-width: 1100px;
  margin: 0 auto;
}

/* ------------------------------------------------------------- fold zone */
/* .cl-mods and .cl-badge-wrap are stacked in the same grid cell, so they
   always share one true centre — the badge is often taller than the module
   grid, and this keeps the fold converging on the right point regardless. */
.cl-fold-zone {
  display: grid;
  width: 100%;
  max-width: clamp(460px, 48vw, 700px);
  margin: 0 auto clamp(14px, 2.2vh, 26px);
}

.cl-mods {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(4px, .6vw, 10px);
}
.cl-mod {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(30px, 3.6vh, 46px);
  padding: .35em .5em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  font-size: clamp(13px, .64vw, 17px);
  line-height: 1.15;
  color: var(--paper-dim);
  transition: transform 1.1s var(--t), opacity .9s var(--t), filter .9s var(--t);
}

/* the fold — modules fly toward centre and dissolve into the badge */
.cl-fold-zone.is-folded .cl-mod {
  transform: translate(calc(var(--dx, 0) * -118%), calc(var(--dy, 0) * -150%)) scale(.12);
  opacity: 0;
  filter: blur(2px);
}

/* the badge everything folds into */
.cl-badge-wrap {
  grid-area: 1 / 1;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cl-badge-shell { perspective: 1200px; }

.cl-badge {
  position: relative;
  width: clamp(108px, 9vw, 168px);
  aspect-ratio: 0.66;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(165deg, #23261B 0%, #15170F 100%);
  display: grid;
  grid-template-rows: auto 1fr;
  animation: clFloat 7s ease-in-out infinite alternate;
  transition: transform 1.1s var(--t), box-shadow 1.1s var(--t);
}
@keyframes clFloat {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}

/* a one-shot pulse the instant the modules land */
.cl-fold-zone.is-folded .cl-badge {
  animation: clFloat 7s ease-in-out infinite alternate, clAbsorb 1s var(--t);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(228, 193, 105, .35);
}
@keyframes clAbsorb {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* the badge grows into the brand plate at the very end */
.cl-badge.is-brand { transform: scale(1.14); }

.cl-badge-strip { padding: 9% 0; background: var(--grad-gold); }

.cl-badge-face { position: relative; }
.cl-badge-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14%;
  transition: opacity .8s var(--t), transform .8s var(--t);
}
.cl-badge.is-brand .cl-badge-mark { opacity: 0; transform: scale(.5); }

/* three soft "orbs" — the badge's face before it becomes the wordmark */
.cl-orb-cluster { position: relative; width: 62%; aspect-ratio: 1; }
.cl-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 16px rgba(228, 193, 105, .5);
}
.cl-orb-a { width: 58%; height: 58%; top: 0;    left: 6%;  opacity: .92; }
.cl-orb-b { width: 48%; height: 48%; bottom: 2%; right: 0;  opacity: .74; }
.cl-orb-c { width: 38%; height: 38%; top: 30%;  left: 32%; opacity: .98; }

.cl-badge-logo-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16%;
}
.cl-badge-logo { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ------------------------------------------------------------------ lines */
.cl-lines { display: grid; gap: clamp(2px, .6vh, 8px); justify-items: center; }
.cl-line { font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.cl-line-1 { font-size: clamp(26px, 3.4vw, 54px); }
.cl-line-2 { font-size: clamp(30px, 4.2vw, 68px); }
.cl-line-3 { font-size: clamp(36px, 5.6vw, 94px); }

/* -------------------------------------------------------------- ecosystem */
.cl-ecosystem { max-width: 62ch; margin: 0 auto; text-align: center; }

/* ------------------------------------------------------------------ brand */
.cl-brand { display: flex; flex-direction: column; align-items: center; gap: .55em; }
.cl-brand-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(30px, 3.4vw, 64px);
}
.cl-brand-logo { height: clamp(32px, 3.4vw, 64px); width: auto; object-fit: contain; }
.cl-brand-tagline {
  font-size: clamp(13px, 1.1vw, 22px);
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--gold-hi);
}

.cl-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9em;
  margin-top: clamp(6px, 1.2vh, 16px);
}
.cl-contact-item {
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  font-size: clamp(13px, .9vw, 17px);
  color: var(--paper-dim);
}
.cl-contact-item.is-name { font-size: clamp(13px, 1.05vw, 20px); color: var(--paper); font-weight: 700; }
.cl-contact-label { font-size: .76em; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.cl-contact-value { color: var(--paper); }
.cl-contact-sep { width: 1px; height: 1em; background: var(--line-2); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .cl-mods { grid-template-columns: repeat(4, 1fr); }
  .cl-fold-zone { max-width: 86vw; }
}
@media (max-width: 700px) {
  .cl-mods { grid-template-columns: repeat(3, 1fr); }
  .cl-line-3 { font-size: clamp(30px, 8vw, 60px); }
}