/* =====================================================================
   Kopou v2 — Home 04 "How we decide" (No assumptions, tested decisions)
   Locked 29 Oct 2026 · v1. Upload to /wp-content/uploads/kopou-decide/
   A short band: eyebrow pill, giant words sliding behind a reactive
   "Clarity core" orb, and a "More about Kopou Ads" link.
   Every rule is scoped under .kp-decide. Load after kopou-batch-1-v3.css.
   ===================================================================== */

body .kp-decide {
  --kp-carbon: #0F1417;
  --kp-mist: #F4F3F8;
  --kp-mint: #53E6D4;
  --kp-purple: #6045F4;
  --kp-ease: cubic-bezier(.2, .7, .2, 1);
  --kp-orb: 420px;          /* orb size */
  --kp-stage: 440px;        /* height of the band's visual */
  --kp-words: 104px;        /* giant word size */
  --kp-dot: 20px;           /* mint separator */
  --kp-gap: 56px;           /* space either side of the separator */
  --kp-fade: 220px;         /* white -> Mist blend at the top */

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 96px 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0px, var(--kp-mist) var(--kp-fade)) !important;
  color: var(--kp-carbon);
  font-family: 'Quicksand', system-ui, sans-serif;
}

/* Eyebrow pill (number + mint dot come from kopou-batch-1-v3.js); white on Mist */
body .kp-decide .kp-sec-head { padding: 0 !important; min-height: 0; }
body .kp-decide .kp-sec-head .kp-eyebrow-pill { background: #FFFFFF; }

/* Heading: real text for search engines and screen readers. Once the JS has
   built the moving words, it is hidden visually (the words say the same). */
body .kp-decide .kp-decide__title {
  margin: 22px 0 0;
  padding: 0 16px;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.45vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-align: center;
  color: var(--kp-carbon);
}
body .kp-decide.is-ready .kp-decide__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stage: full-bleed band that holds the words and the orb */
body .kp-decide .kp-decide__stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 0;
  min-height: 0;
  margin: 24px 0 0;
  padding: 0 !important;
  border: 0;
  background: none;
}
body .kp-decide.is-ready .kp-decide__stage { height: var(--kp-stage); }

/* Giant words */
.kp-decide .kp-decide__words {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--kp-words);
  margin-top: calc(var(--kp-words) / -2);
  overflow: hidden;
  pointer-events: none;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--kp-words);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kp-decide .kp-decide__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.kp-decide .kp-decide__set { display: flex; align-items: center; flex: none; }
.kp-decide .kp-decide__a { color: #A9A7B6; }
.kp-decide .kp-decide__b { color: #2A2F38; margin-left: .28em; }
.kp-decide .kp-decide__dot {
  flex: none;
  width: var(--kp-dot);
  height: var(--kp-dot);
  margin: 0 var(--kp-gap);
  border-radius: 999px;
  background: var(--kp-mint);
}

/* The Clarity core */
.kp-decide .kp-decide__orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--kp-orb);
  height: var(--kp-orb);
  margin: calc(var(--kp-orb) / -2) 0 0 calc(var(--kp-orb) / -2);
  -webkit-tap-highlight-color: transparent;
}
.kp-decide.is-hot .kp-decide__orb { cursor: pointer; }
.kp-decide .kp-decide__breath { position: absolute; inset: 0; }
.kp-decide .kp-decide__halo {
  position: absolute;
  inset: -26%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(200, 190, 255, .95), rgba(217, 210, 255, .6) 45%, rgba(217, 210, 255, 0) 100%);
  pointer-events: none;
}
.kp-decide .kp-decide__core {
  position: absolute;
  left: 32.69%;
  top: 29.62%;
  width: 35.38%;
  height: 35.38%;
  border-radius: 999px;
  background: linear-gradient(172deg, #C4F6EE 0%, #CEC5FF 26%, #9580F9 52%, #6045F4 76%, #4A2FE0 100%);
  filter: blur(calc(var(--kp-orb) / 140));
  box-shadow: 0 10px 40px rgba(96, 69, 244, .35);
  will-change: transform;
}
.kp-decide .kp-decide__glass {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.kp-decide .kp-decide__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Link: text + dark arrow orb (same family as the Get in Touch pill) */
body .kp-decide a.kp-decide__link,
body .kp-decide .kp-decide__link a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: none !important;
  box-shadow: none !important;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--kp-carbon) !important;
  text-decoration: none !important;
}
body .kp-decide .kp-decide__link { margin-top: 20px; padding: 0 !important; background: none !important; border: 0 !important; }
body .kp-decide .kp-decide__link a { margin-top: 0; }
body .kp-decide a.kp-decide__link::after,
body .kp-decide .kp-decide__link a::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--kp-carbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: background-color .25s var(--kp-ease), transform .25s var(--kp-ease);
}
@media (hover: hover) {
  body .kp-decide a.kp-decide__link:hover::after,
  body .kp-decide .kp-decide__link a:hover::after {
    background: var(--kp-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1417' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    transform: rotate(45deg);
  }
}
body .kp-decide a.kp-decide__link:active::after,
body .kp-decide .kp-decide__link a:active::after { transform: rotate(45deg) scale(.92); }
body .kp-decide a.kp-decide__link:focus-visible,
body .kp-decide .kp-decide__link a:focus-visible { outline: 2px solid var(--kp-purple); outline-offset: 4px; }

/* Reveal: rises in when the band enters (only when JS runs; never in the editor) */
html.kp-js body .kp-decide.is-ready > * { transition: opacity .9s var(--kp-ease), transform .9s var(--kp-ease); }
html.kp-js body .kp-decide.is-ready:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
html.kp-js body .kp-decide.is-ready > *:nth-child(2) { transition-delay: .1s; }
html.kp-js body .kp-decide.is-ready > *:nth-child(3) { transition-delay: .2s; }
html.kp-js body .kp-decide.is-ready > *:nth-child(4) { transition-delay: .3s; }
html.kp-js body .kp-decide.is-ready .kp-decide__orb { transition: opacity 1.2s var(--kp-ease), transform 1.2s var(--kp-ease); }
html.kp-js body .kp-decide.is-ready:not(.is-in) .kp-decide__orb { opacity: 0; transform: scale(.92); }

/* Breathing (CSS, so it costs nothing) */
@keyframes kpDecideBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.kp-decide.is-live .kp-decide__breath { animation: kpDecideBreath 9s ease-in-out infinite; }

/* Tablet */
@media (max-width: 1023px) {
  body .kp-decide { --kp-orb: 360px; --kp-stage: 380px; --kp-words: 84px; --kp-dot: 16px; --kp-gap: 44px; }
}
/* Phone */
@media (max-width: 767px) {
  body .kp-decide {
    --kp-orb: 300px; --kp-stage: 330px; --kp-words: 56px; --kp-dot: 12px; --kp-gap: 30px; --kp-fade: 120px;
    padding: 72px 0 !important;
  }
  body .kp-decide .kp-decide__stage { margin-top: 16px; }
  body .kp-decide .kp-decide__link { margin-top: 12px; }
  .kp-decide .kp-decide__glass { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .kp-decide .kp-decide__breath { animation: none !important; }
  html.kp-js body .kp-decide.is-ready:not(.is-in) > *,
  html.kp-js body .kp-decide.is-ready:not(.is-in) .kp-decide__orb { opacity: 1; transform: none; }
}