/* ── CTA banner ────────────────────────────────────────────────────────────
   The closing "Try Ariyel" banner for pages other than the homepage, modelled
   on Meta's Muse banner: a centered app icon, overline, headline and Start Now
   on a soft gradient card, with 3D everyday objects hugging both edges and
   clipped by the card. Self-contained: a page adds this file and the markup
   block (see README, "The CTA banner"). The objects are decorative (alt="",
   aria-hidden) and ignore the pointer. */
.cta-banner{
  padding:var(--s-17) var(--gutter);
}
.cta-banner__card{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  max-width:var(--container-wide);
  margin:0 auto;
  padding:var(--s-17) var(--s-9);
  overflow:hidden;
  border-radius:var(--r-5xl);
  background:
    radial-gradient(40% 55% at 50% 55%, var(--n-0) 0%, transparent 100%),
    radial-gradient(40% 70% at 22% 0%, var(--accent-200) 0%, transparent 100%),
    radial-gradient(40% 70% at 80% 10%, var(--tag-blue-ring) 0%, transparent 100%),
    radial-gradient(50% 60% at 50% 100%, var(--accent-100) 0%, transparent 100%),
    linear-gradient(180deg, var(--info-ring) 0%, var(--tag-purple-ring) 100%);
}

.cta-banner__art{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
/* Sizes and positions are fractions of the card, so the arrangement scales
   with it: two loose columns per side, the outer one cut by the card edge. */
.cta-banner__obj{
  position:absolute;
  display:block;
  height:auto;
  rotate:var(--cta-tilt, 0deg);
}
.cta-banner__obj--envelope{ top:-7%;    left:11%;   width:11.5%; --cta-tilt:-10deg; --cta-float:7s;   --cta-delay:-1s; }
.cta-banner__obj--mug     { top:17%;    left:-2%;   width:10.5%; --cta-tilt:8deg;   --cta-float:8s;   --cta-delay:-4s; }
.cta-banner__obj--ari     { top:36%;    left:13%;   width:11%;   --cta-tilt:-4deg;  --cta-float:6s;   --cta-delay:-2s; }
.cta-banner__obj--headset { top:61%;    left:-2.5%; width:10.5%; --cta-tilt:-12deg; --cta-float:7.5s; --cta-delay:-5s; }
.cta-banner__obj--notebook{ bottom:-16%; left:12%;  width:9%;    --cta-tilt:14deg;  --cta-float:8.5s; --cta-delay:-3s; }
.cta-banner__obj--rocket  { top:-5%;    right:13%;  width:8%;    --cta-tilt:18deg;  --cta-float:6.5s; --cta-delay:-2.5s; }
.cta-banner__obj--trophy  { top:15%;    right:-2.5%; width:11%;  --cta-tilt:-8deg;  --cta-float:7s;   --cta-delay:-6s; }
.cta-banner__obj--phone   { top:36%;    right:14%;  width:7%;    --cta-tilt:10deg;  --cta-float:8s;   --cta-delay:-1.5s; }
.cta-banner__obj--plant   { top:63%;    right:-1.5%; width:9.5%; --cta-tilt:-6deg;  --cta-float:6.5s; --cta-delay:-3.5s; }
.cta-banner__obj--laptop  { bottom:-14%; right:10%; width:13.5%; --cta-tilt:-8deg;  --cta-float:9s;   --cta-delay:-4.5s; }

.cta-banner__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:calc(var(--container-text) - var(--s-19) * 2);
  text-align:center;
}
.cta-banner__icon{
  display:block;
  width:calc(var(--s-15) + var(--s-7));
  height:auto;
}
.cta-banner__overline{
  margin:var(--s-8) 0 0;
  color:var(--ink);
  font-size:var(--t-overline);
  line-height:var(--t-overline-lh);
  letter-spacing:var(--t-overline-ls);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
}
.cta-banner__title{
  max-width:13em;
  margin:var(--s-5) 0 0;
  color:var(--ink);
  font-size:clamp(var(--t-display-md), 3.4vw, var(--t-display-lg));
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  text-wrap:balance;
}
.cta-banner__content .btn--cta{
  margin-top:var(--s-10);
}

@media (prefers-reduced-motion:no-preference){
  .cta-banner__obj{ animation:cta-float var(--cta-float) ease-in-out var(--cta-delay) infinite alternate; }
}
@keyframes cta-float{
  from{ translate:0 0; }
  to{ translate:0 calc(var(--s-5) * -1); }
}

/* Narrower cards: the inner columns would crowd the headline, so each side
   keeps two objects: mug over Ari, trophy over the laptop. */
@media (max-width:1000px){
  .cta-banner__obj--envelope,
  .cta-banner__obj--notebook,
  .cta-banner__obj--headset,
  .cta-banner__obj--rocket,
  .cta-banner__obj--phone,
  .cta-banner__obj--plant{ display:none; }
  .cta-banner__obj--ari   { top:auto; bottom:6%; left:4%; }
}
/* Phones: the headline takes the width, so art moves to the four corners of
   a taller card. */
@media (max-width:760px){
  .cta-banner{ padding:var(--s-15) var(--s-4); }
  .cta-banner__card{
    padding:var(--s-19) var(--s-7);
    border-radius:var(--r-4xl);
  }
  .cta-banner__obj--mug,
  .cta-banner__obj--headset,
  .cta-banner__obj--plant{ display:none; }
  .cta-banner__obj--envelope{ display:block; top:-3%; left:-4%; width:26%; }
  .cta-banner__obj--rocket  { display:block; top:-4%; right:4%; width:16%; }
  .cta-banner__obj--ari     { bottom:-2%; left:3%; width:24%; }
  .cta-banner__obj--trophy  { top:auto; bottom:-4%; right:-3%; width:26%; }
  .cta-banner__obj--laptop  { display:none; }
}