/* ============================================================
   Closing CTA · Launch UI "CTA with Glow" / "CTA with Rectangle" panel over a
   thinned Kokonut UI "Background Paths" plane, inside a hero style layer act.
   Attribution and every changed value: assets/CTA-GLOW-SOURCE.md.
   Markup: #cta-end.ctag > .ctag-act.layer-act (halo far, paths mid, floor)
   + .container > .ctag-card (glow, two hairline frames, the untouched .sec-head).
   The layer engine is assets/hero-layers.js (data-parallax on the planes).
   ============================================================ */

/* ---------- section ground and stacking ---------- */
#cta-end.ctag{background:#fff; isolation:isolate}
/* The card itself is 980px at most; the container adds the page gutters around it. */
#cta-end.ctag .container{position:relative; z-index:2; max-width:calc(980px + 2 * var(--pad-x,64px))}
/* The floor fade resolves the page into the footer ground, so no hairline between them,
   the same rule the layered hero applies to the section after it. */
main:has(#cta-end.ctag) + .site-footer{border-top-color:transparent}

/* ---------- layer act: halo (far, rate -1.2), paths (mid, rate -0.6), floor ---------- */
#cta-end .ctag-act{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
#cta-end .ctag-plane{
  position:absolute; pointer-events:none;
  will-change:transform;
  transition:opacity .6s ease-out;   /* opacity only; never transform */
}
/* Far plane: one soft lavender halo behind the card, blurred as distance, full section width. */
#cta-end .ctag-halo{
  inset:-30% 0;
  background:radial-gradient(46% 46% at 50% 42%,rgba(167,139,250,.46),rgba(167,139,250,.16) 50%,transparent 74%);
  filter:blur(24px);
}
/* Mid plane: the thinned Background Paths, full width, dissolving at the top edge and into the floor. */
#cta-end .ctag-paths{
  inset:-12% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);
}
#cta-end .ctag-paths-in{position:absolute; inset:0; transform-origin:50% 50%}
#cta-end .ctag-wave{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  will-change:transform;
}
/* Source group opacities: primary 1, secondary .8, accent .6. */
#cta-end .ctag-wave-b{opacity:.8}
#cta-end .ctag-wave-c{opacity:.6}
/* Source float: y 0 to -15 / -10 / -5 and back, 8s / 6s / 4s, easeInOut, infinite. */
#cta-end .ctag-wave-a{animation:ctag-float-a 8s ease-in-out infinite}
#cta-end .ctag-wave-b{animation:ctag-float-b 6s ease-in-out infinite}
#cta-end .ctag-wave-c{animation:ctag-float-c 4s ease-in-out infinite}
@keyframes ctag-float-a{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-15px,0)}}
@keyframes ctag-float-b{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-10px,0)}}
@keyframes ctag-float-c{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-5px,0)}}
/* Source entrance (opacity 0 and scale up to 1 over 1s) plays once when the section enters the
   viewport; assets/ctag-glow.js sets the attribute, so without JS the final state is the default. */
#cta-end[data-ctag-enter="wait"] .ctag-paths-in{opacity:0; transform:scale(.9)}
#cta-end[data-ctag-enter="in"] .ctag-paths-in{animation:ctag-enter 1s ease-out both}
@keyframes ctag-enter{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:none}}
/* Paused offscreen and in a hidden tab (data attribute set by assets/ctag-glow.js). */
#cta-end[data-ctag-paused="true"] .ctag-wave{animation-play-state:paused}
/* Floor: fade to the footer ground over the last 240px, above every plane. */
#cta-end .ctag-floor{
  position:absolute; left:0; right:0; bottom:0; height:240px; z-index:1;
  background:linear-gradient(to bottom,rgba(247,244,255,0),#F7F4FF);
  pointer-events:none;
}

/* ---------- the card: white panel, 22px radius, tinted shadow, edge light ---------- */
#cta-end .ctag-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radius,22px);
  background:#fff;
  border:1px solid var(--line,#E8E1FA);
  padding:clamp(48px,6.5vw,84px) clamp(28px,5vw,64px);
  box-shadow:0 1px 2px rgba(30,26,51,.04), 0 8px 18px -4px rgba(60,30,120,.18), 0 36px 72px -28px rgba(60,30,120,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
/* .sec-head keeps its own markup, inline centring and reveal; inside the card it sits above the glow. */
#cta-end .ctag-card .sec-head{position:relative; z-index:2; max-width:760px}
/* Rectangle variant: two nested hairline frames, radius following the card's own corner. */
#cta-end .ctag-frame{
  position:absolute; inset:12px; z-index:1; pointer-events:none;
  border:1px solid rgba(124,77,238,.11);
  border-radius:max(6px,calc(var(--radius,22px) - 12px));
}
#cta-end .ctag-frame-2{
  inset:24px;
  border-color:rgba(124,77,238,.07);
  border-radius:max(4px,calc(var(--radius,22px) - 24px));
}

/* ---------- Launch UI Glow, variant bottom, light mode ----------
   Wrapper: absolute, full card, translate-y 1rem, opacity .8, 500ms ease-in-out,
   on hover translate-y -2rem and opacity 1 (group-hover becomes the card's :hover,
   plus :focus-within so a keyboard focus on the button lifts it too). */
#cta-end .ctag-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  transform:translate3d(0,1rem,0); opacity:.8;
  transition:transform .5s ease-in-out, opacity .5s ease-in-out;
}
#cta-end .ctag-card:hover .ctag-glow,
#cta-end .ctag-card:focus-within .ctag-glow{transform:translate3d(0,-2rem,0); opacity:1}
/* Glow variant "bottom": absolute w-full bottom-0. */
#cta-end .ctag-glow-bottom{position:absolute; left:0; right:0; bottom:0; width:100%}
/* Two radial ellipses (brand to transparent, 10% to 60%), 60% and 40% wide, scaled 2.5 and 2,
   opacity .2 in light mode rising to .35 on hover. The source stops sit at .5 and .3 of a
   pale brand foreground; on white with SiloV purple they are 1 and .6 so the glow reads. */
#cta-end .ctag-glow-a,
#cta-end .ctag-glow-b{
  position:absolute; left:50%; top:0; border-radius:50%;
  opacity:.2;
  transition:opacity .5s ease-in-out;
}
#cta-end .ctag-glow-a{
  width:60%; height:256px;
  transform:translateX(-50%) scale(2.5);
  background:radial-gradient(ellipse farthest-corner at center,rgba(124,77,238,1) 10%,rgba(124,77,238,0) 60%);
}
#cta-end .ctag-glow-b{
  width:40%; height:128px;
  transform:translateX(-50%) scale(2);
  background:radial-gradient(ellipse farthest-corner at center,rgba(124,77,238,.6) 10%,rgba(124,77,238,0) 60%);
}
@media (min-width:640px){
  #cta-end .ctag-glow-a{height:512px}
  #cta-end .ctag-glow-b{height:256px}
}
#cta-end .ctag-card:hover .ctag-glow-a,
#cta-end .ctag-card:hover .ctag-glow-b,
#cta-end .ctag-card:focus-within .ctag-glow-a,
#cta-end .ctag-card:focus-within .ctag-glow-b{opacity:.35}

/* ---------- narrow screens ---------- */
@media (max-width:900px){
  #cta-end .ctag-halo{inset:-36% -10%; background:radial-gradient(70% 40% at 50% 38%,rgba(167,139,250,.42),rgba(167,139,250,.14) 50%,transparent 74%)}
  #cta-end .ctag-floor{height:180px}
  #cta-end .ctag-frame{inset:10px; border-radius:max(6px,calc(var(--radius,22px) - 10px))}
  #cta-end .ctag-frame-2{inset:20px; border-radius:max(4px,calc(var(--radius,22px) - 20px))}
}

/* ---------- reduced motion: static final state everywhere ---------- */
@media (prefers-reduced-motion:reduce){
  #cta-end .ctag-plane{transform:none !important}
  #cta-end .ctag-wave{animation:none !important}
  #cta-end .ctag-paths-in{animation:none !important; opacity:1 !important; transform:none !important}
  #cta-end .ctag-glow,#cta-end .ctag-glow-a,#cta-end .ctag-glow-b{transition:none}
}
html.a11y-nomotion #cta-end .ctag-plane{transform:none !important}
html.a11y-nomotion #cta-end .ctag-wave{animation:none !important}
html.a11y-nomotion #cta-end .ctag-paths-in{animation:none !important; opacity:1 !important; transform:none !important}