/* CodeByCP Who I Train — frontend styles */

.cbcp-train{
  --ink:#0B0E18;
  --ivory:#F4ECDC;
  --magenta:#FB39FB;
  --purple:#C64DF1;
  --cyan:#35D3FB;
  --dur:700ms;
  --stag:90ms;

  --ivory-soft:color-mix(in srgb, var(--ivory) 74%, transparent);
  --ivory-dim:color-mix(in srgb, var(--ivory) 50%, transparent);
  --line:color-mix(in srgb, var(--ivory) 12%, transparent);
  --prism:linear-gradient(100deg, var(--magenta) 0%, var(--purple) 48%, var(--cyan) 100%);

  position:relative; overflow:hidden;
  display:flex; align-items:center;
  background:
    radial-gradient(110% 70% at 50% -10%, color-mix(in srgb, var(--purple) 13%, var(--ink)) 0%, rgba(0,0,0,0) 60%),
    var(--ink);
  color:var(--ivory);
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(54px,7vw,104px) clamp(20px,5vw,72px);
  isolation:isolate; border-radius:inherit;
}
.cbcp-train *{box-sizing:border-box;}

.cbcp-train .cbcp-train-aura{
  position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:720px; max-height:720px;
  top:-22%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--purple) 26%, transparent), color-mix(in srgb, var(--cyan) 9%, transparent) 46%, transparent 68%);
  filter:blur(96px); opacity:.5;
}
.cbcp-train.cbcp-no-glow .cbcp-train-aura,
.cbcp-train.cbcp-no-glow .cbcp-train-card-glow{display:none;}

.cbcp-train .cbcp-train-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; width:100%;}

/* ---------- header ---------- */
.cbcp-train .cbcp-train-head{max-width:62ch; margin:0 auto clamp(38px,5vw,62px);}
.cbcp-train .cbcp-train-eyebrow{
  display:inline-block; margin-bottom:16px;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:500;
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cbcp-train .cbcp-train-heading{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600; line-height:1.04; letter-spacing:.005em;
  font-size:clamp(38px,5.6vw,72px); color:var(--ivory); margin:0;
  position:relative; display:inline-block;
}
/* underline variant */
.cbcp-train .cbcp-train-heading.is-underline::after{
  content:""; position:absolute; left:0; bottom:-.12em; height:3px; width:100%;
  background:var(--prism); border-radius:3px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--stag) * 2);
}
.cbcp-train.cbcp-in .cbcp-train-heading.is-underline::after{transform:scaleX(1);}
/* shimmer variant */
.cbcp-train .cbcp-train-heading.is-shimmer{
  background:linear-gradient(100deg, var(--magenta), var(--purple), var(--cyan), var(--purple), var(--magenta));
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cbcp-shimmer 6s linear infinite;
}
@keyframes cbcp-shimmer{from{background-position:0% 0}to{background-position:220% 0}}
/* words variant */
.cbcp-train .cbcp-train-heading .cbcp-w{display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.04;}
.cbcp-train .cbcp-train-heading .cbcp-w > span{
  display:inline-block; transform:translateY(112%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--wi) * var(--stag));
}
.cbcp-train.cbcp-in .cbcp-train-heading .cbcp-w > span{transform:none;}

.cbcp-train .cbcp-train-intro{
  margin-top:1.1em;
  font-size:clamp(15px,1.45vw,18px); line-height:1.62; font-weight:300; color:var(--ivory-soft);
}
.cbcp-train .cbcp-train-intro p{margin:0;}

/* ---------- cards ---------- */
.cbcp-train .cbcp-train-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;
}
.cbcp-train .cbcp-train-card{
  position:relative; overflow:hidden;
  padding:30px 28px; border-radius:18px;
  border:1px solid var(--line); background:rgba(244,236,220,.035);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.cbcp-train .cbcp-train-card-glow{
  position:absolute; z-index:0; inset:-30% -30% auto auto; width:60%; height:60%;
  background:radial-gradient(circle, color-mix(in srgb, var(--purple) 30%, transparent), transparent 65%);
  filter:blur(34px); opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.cbcp-train .cbcp-train-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--purple) 45%, transparent);
  box-shadow:0 26px 54px rgba(0,0,0,.36);
}
.cbcp-train .cbcp-train-card:hover .cbcp-train-card-glow{opacity:1;}

.cbcp-train .cbcp-train-card-top{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.cbcp-train .cbcp-train-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px;
  border:1px solid var(--line); background:rgba(244,236,220,.04);
}
.cbcp-train .cbcp-train-ico i,
.cbcp-train .cbcp-train-ico svg{
  font-size:20px; width:20px; height:20px;
}
.cbcp-train .cbcp-train-ico i{
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.cbcp-train .cbcp-train-ico svg{ fill:var(--purple); }
.cbcp-train .cbcp-train-num{
  font-family:'Outfit',sans-serif; font-weight:700;
  font-size:30px; line-height:1; letter-spacing:-.02em;
  background:var(--prism); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; opacity:.55;
  font-variant-numeric:tabular-nums;
}
.cbcp-train .cbcp-train-card-title{
  position:relative; z-index:1;
  font-family:'Outfit',sans-serif; font-weight:600;
  font-size:18px; line-height:1.3; margin:0 0 18px; color:var(--ivory);
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.cbcp-train .cbcp-train-items{position:relative; z-index:1; list-style:none; margin:0; padding:0;}
.cbcp-train .cbcp-train-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:7px 0; font-size:15px; line-height:1.4; font-weight:300; color:var(--ivory-soft);
}
.cbcp-train .cbcp-train-dash{
  flex:none; margin-top:.62em; width:14px; height:2px; border-radius:2px;
  background:var(--prism);
  transition:width .3s ease;
}
.cbcp-train .cbcp-train-item:hover{color:var(--ivory);}
.cbcp-train .cbcp-train-item:hover .cbcp-train-dash{width:22px;}

/* ---------- finale ---------- */
.cbcp-train .cbcp-train-finale{
  max-width:62ch; margin:clamp(44px,6vw,72px) auto 0; text-align:center;
}
.cbcp-train .cbcp-train-closing{
  font-size:clamp(15px,1.45vw,17px); line-height:1.62; font-weight:300; color:var(--ivory-soft);
}
.cbcp-train .cbcp-train-closing p{margin:0;}
.cbcp-train .cbcp-train-tagline{
  margin:.8em 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600; font-style:italic; line-height:1.2;
  font-size:clamp(24px,3.4vw,40px);
  background:var(--prism); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:cbcp-shimmer 7s linear infinite;
}

/* ---------- reveal engine ---------- */
.cbcp-train .cbcp-reveal{
  opacity:0;
  transition:opacity var(--dur) ease calc(var(--stag) * var(--ci, 0) + var(--stag) * var(--ii, 0)),
             transform var(--dur) cubic-bezier(.2,.7,.2,1) calc(var(--stag) * var(--ci, 0) + var(--stag) * var(--ii, 0));
}
.cbcp-train.cbcp-anim-slideup   .cbcp-reveal{transform:translateY(26px);}
.cbcp-train.cbcp-anim-fade      .cbcp-reveal{transform:none;}
.cbcp-train.cbcp-anim-zoom      .cbcp-reveal{transform:scale(.95);}
.cbcp-train.cbcp-anim-slideleft .cbcp-reveal{transform:translateX(-30px);}
.cbcp-train.cbcp-in .cbcp-reveal{opacity:1; transform:none;}

/* card items cascade after their card */
.cbcp-train .cbcp-train-item{
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur) ease calc(var(--stag) * var(--ci, 1) + var(--ii) * 45ms),
             transform var(--dur) cubic-bezier(.2,.7,.2,1) calc(var(--stag) * var(--ci, 1) + var(--ii) * 45ms);
}
.cbcp-train.cbcp-in .cbcp-train-item{opacity:1; transform:none;}

/* no-anim / editor */
.cbcp-train.cbcp-no-anim .cbcp-reveal,
.cbcp-train.cbcp-no-anim .cbcp-train-item{opacity:1; transform:none; transition:none;}
.cbcp-train.cbcp-no-anim .cbcp-train-heading.is-underline::after{transform:scaleX(1); transition:none;}
.cbcp-train.cbcp-no-anim .cbcp-train-heading .cbcp-w > span{transform:none; transition:none;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cbcp-train .cbcp-train-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .cbcp-train .cbcp-train-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .cbcp-train .cbcp-reveal,
  .cbcp-train .cbcp-train-item{opacity:1 !important; transform:none !important; transition:none !important;}
  .cbcp-train .cbcp-train-heading.is-underline::after{transform:scaleX(1) !important; transition:none;}
  .cbcp-train .cbcp-train-heading .cbcp-w > span{transform:none !important;}
  .cbcp-train .cbcp-train-heading.is-shimmer,
  .cbcp-train .cbcp-train-tagline{animation:none;}
}