#ctp-splash{
    position:fixed; inset:0; z-index:var(--z-splash);
    display:flex; align-items:center; justify-content:center;
    background:#ffffff;
    opacity:1; transition:opacity 0.7s cubic-bezier(.4,0,.2,1);
  }
  #ctp-splash.ctp-splash-hide{ opacity:0; pointer-events:none; }
  .ctp-splash-inner{
    display:flex; flex-direction:column; align-items:center; gap:26px;
    text-align:center; padding:24px;
    animation:ctpSplashRise 0.55s cubic-bezier(.16,1,.3,1) both;
  }
  /* Logo is the hero — large, plain, no filter/shadow (same treatment as
     the proposal so it reads as the logo, not a logo-in-a-box). */
  #ctp-splash-logo{
    width:560px; max-width:80vw; height:auto; display:block;
  }
  /* Tagline in the logo's teal so it ties to the trademark; restrained tracking. */
  .ctp-splash-tag{
    color:#3F8190; font-family:'Inter','Segoe UI',Arial,sans-serif;
    font-size:13px; font-weight:600; letter-spacing:3.2px; text-transform:uppercase;
    position:relative; padding-top:16px; opacity:.92;
  }
  .ctp-splash-tag::before{
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:52px; height:1.5px; border-radius:2px;
    background:linear-gradient(90deg, transparent, rgba(63,129,144,.55), transparent);
  }
  /* Corner labels — subtle, in the logo teal, anchored to the splash edges.
     Fade in slightly after the logo so the eye reads logo first, then labels. */
  .ctp-splash-corner{
    position:absolute; bottom:28px;
    font-family:'Inter','Segoe UI',Arial,sans-serif;
    font-size:11px; font-weight:600; letter-spacing:2.4px;
    text-transform:uppercase; color:#3F8190; opacity:0;
    animation:ctpSplashCornerFade .5s cubic-bezier(.16,1,.3,1) .3s forwards;
  }
  .ctp-splash-corner-l{ left:32px; }
  .ctp-splash-corner-r{ right:32px; }
  @keyframes ctpSplashCornerFade{
    from{ opacity:0; transform:translateY(4px); }
    to{   opacity:.78; transform:translateY(0); }
  }
  @keyframes ctpSplashRise{
    from{ opacity:0; transform:translateY(14px) scale(.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion:reduce){
    .ctp-splash-inner{ animation:none; }
    .ctp-splash-corner{ animation:none; opacity:.78; }
    #ctp-splash{ transition:opacity .2s linear; }
  }
  /* CTP-SPLASH START — dark on-brand splash + deliberate handoff (white flash killed; bright ribbon).
     The brand lockup is the app's existing logo art re-toned for the dark ribbon purely in CSS:
     invert + hue-rotate + screen knocks out its white plate and yields white cursive + cyan TRADEMARK.
     (Swap in a transparent --ctp-logo later for a 1:1 asset; this needs no new file and matches the
     resting-frame reference.) Timing lives in the SPLASH_TOTAL controller below. */
  /* Scrim baked into the background stack (not a ::before) so the logo's mix-blend-mode blends
     directly against the ribbon — a separate scrim layer would sit in between and leave a dark plate. */
  #ctp-splash{ background:
      radial-gradient(ellipse 60% 52% at 50% 45%, rgba(5,9,13,.5), rgba(5,9,13,0) 65%),
      var(--ctp-bg) 62% 50%/cover no-repeat fixed,
      #06090c;
    transition:opacity .82s cubic-bezier(.4,0,.2,1), transform .82s cubic-bezier(.4,0,.2,1); }
  #ctp-splash.ctp-splash-hide{ opacity:0; transform:scale(1.03); pointer-events:none; }
  /* The rise lives on the LOGO itself, not on .inner: a transform on an ANCESTOR makes a stacking
     context that isolates the logo's mix-blend-mode (dark plate). The logo's own transform doesn't. */
  .ctp-splash-inner{ position:relative; animation:none; }
  #ctp-splash-logo{ display:block; width:560px; max-width:80vw; height:auto;
    filter:invert(1) hue-rotate(168deg) saturate(1.35) brightness(1.06); mix-blend-mode:screen;
    animation:ctpSplashRise .8s cubic-bezier(.16,1,.3,1) both; }
  .ctp-splash-tag{ color:#cdeef1; opacity:.96; animation:ctpSplashCornerFade .7s ease .28s both; }
  .ctp-splash-tag::before{ background:linear-gradient(90deg, transparent, rgba(120,240,246,.6), transparent); }
  .ctp-splash-corner{ color:#8fc7cd; }
  @media (prefers-reduced-motion:reduce){
    .ctp-splash-inner{ animation:none; }
    #ctp-splash{ transition:opacity .2s linear; }
    #ctp-splash.ctp-splash-hide{ transform:none; }
  }
  /* CTP-SPLASH END */