/* ==========================================================================
   Ricki Labs v3 concept: layered on top of the live styles.css (unchanged).
   Palette, fonts and structure come from styles.css; this file only adds
   the 3D hero and quiet polish.
   ========================================================================== */

/* ---------- HERO ---------- */
.hero.hero-v3{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(560px,calc(100svh - 104px),880px);display:flex;align-items:center;justify-content:center;
  padding-top:96px;padding-bottom:96px}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* a soft warm bloom behind the headline, drawn from the site's own peach and pink */
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 46% at 50% 46%,rgba(255,179,138,.13),transparent 70%),
             radial-gradient(30% 30% at 66% 60%,rgba(255,43,109,.10),transparent 70%)}
.hero-inner{position:relative;z-index:1;max-width:1100px;will-change:opacity,transform}
.hero-v3 .eyebrow{margin-bottom:30px}
.hero-v3 h1{font-size:clamp(52px,8.2vw,120px);letter-spacing:-.058em;line-height:.98;margin-bottom:34px}
.hero-v3 p{font-size:20px;margin-bottom:38px}
.hero-v3 .primary{box-shadow:0 10px 30px rgba(11,20,88,.25)}
.hero-v3 .secondary{transition:border-color .2s,color .2s}
.hero-v3 .secondary:hover{border-color:var(--peach);color:#fff}

@media(max-width:700px){
  .hero.hero-v3{min-height:clamp(520px,calc(100svh - 90px),760px);padding-top:64px;padding-bottom:64px}
  .hero-v3 h1{font-size:clamp(44px,11vw,66px);margin-bottom:26px}
  .hero-v3 p{font-size:17px;margin-bottom:32px}
}
@media(max-width:420px){ .hero.hero-v3{min-height:clamp(500px,calc(100svh - 156px),720px)} }

/* ---------- QUIET POLISH (only applied when JS runs and motion is allowed) ---------- */
/* scroll reveals */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* header nav: underline that grows on hover */
nav a:not(.contact-link){background:linear-gradient(var(--pink),var(--pink)) left bottom/0 2px no-repeat;transition:background-size .25s ease,color .15s}
nav a:not(.contact-link):hover{background-size:100% 2px}

/* experience strip: logos lift gently on hover */
.networks figure,.brands figure{transition:transform .25s ease}
.networks figure:hover,.brands figure:hover{transform:translateY(-3px)}

/* product cards: soft hover depth */
.feature{transition:box-shadow .35s ease,border-color .35s ease}
.feature:hover{box-shadow:0 24px 60px rgba(11,20,88,.08);border-color:#d6cbd0}
.preview{transition:transform .3s ease,box-shadow .3s ease}
.preview:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,20,88,.08)}

/* product visual: phone gets gentle depth (chat animation lives in v3-chat.js) */
.mobile-preview-shot{perspective:1100px}
.mobile-app-crop{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;will-change:transform}

/* portrait: very light scroll parallax inside its frame */
.portrait img{transform:scale(1.06);will-change:transform}

/* footer: a whisper of the hero's particle field ties the page together */
footer{position:relative;overflow:hidden;isolation:isolate}
footer::before{content:"";position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 33.4% 20.7%,rgba(255,247,239,0.39) 0 1px,transparent 1.8px),radial-gradient(circle at 37.4% 12.9%,rgba(255,247,239,0.47) 0 2px,transparent 2.8px),radial-gradient(circle at 43.8% 13.9%,rgba(255,247,239,0.65) 0 1px,transparent 1.8px),radial-gradient(circle at 80.7% 18.4%,rgba(255,247,239,0.70) 0 1px,transparent 1.8px),radial-gradient(circle at 57.2% 41.3%,rgba(255,247,239,0.38) 0 1px,transparent 1.8px),radial-gradient(circle at 30.2% 20.1%,rgba(255,247,239,0.66) 0 1px,transparent 1.8px),radial-gradient(circle at 12.7% 56.0%,rgba(255,247,239,0.55) 0 1px,transparent 1.8px),radial-gradient(circle at 56.1% 60.0%,rgba(255,43,109,0.72) 0 1.5px,transparent 2.3px),radial-gradient(circle at 76.1% 47.1%,rgba(255,247,239,0.55) 0 1.5px,transparent 2.3px),radial-gradient(circle at 77.7% 66.7%,rgba(255,179,138,0.40) 0 1px,transparent 1.8px),radial-gradient(circle at 52.4% 81.5%,rgba(255,247,239,0.51) 0 1.5px,transparent 2.3px),radial-gradient(circle at 14.1% 43.1%,rgba(255,43,109,0.43) 0 1.2px,transparent 2.0px),radial-gradient(circle at 42.6% 88.8%,rgba(255,179,138,0.77) 0 1px,transparent 1.8px),radial-gradient(circle at 35.0% 37.4%,rgba(255,43,109,0.67) 0 1.5px,transparent 2.3px),radial-gradient(circle at 9.5% 15.9%,rgba(255,247,239,0.61) 0 1.2px,transparent 2.0px),radial-gradient(circle at 8.7% 66.9%,rgba(255,43,109,0.90) 0 2px,transparent 2.8px),radial-gradient(circle at 29.8% 40.4%,rgba(255,43,109,0.36) 0 1.2px,transparent 2.0px),radial-gradient(circle at 36.4% 59.3%,rgba(255,179,138,0.38) 0 1.5px,transparent 2.3px),radial-gradient(circle at 15.2% 28.8%,rgba(255,43,109,0.85) 0 1.5px,transparent 2.3px),radial-gradient(circle at 10.6% 45.7%,rgba(255,247,239,0.50) 0 2px,transparent 2.8px),radial-gradient(circle at 80.0% 80.6%,rgba(255,179,138,0.74) 0 1.2px,transparent 2.0px),radial-gradient(circle at 67.2% 40.0%,rgba(255,247,239,0.43) 0 1px,transparent 1.8px);
  animation:rl-drift 60s ease-in-out infinite alternate}
@keyframes rl-drift{to{transform:translate3d(-2%,-6%,0)}}


@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  footer::before{animation:none}
  .portrait img{transform:none}
}

/* hide hero copy only until the intro takes over (class added by an inline script, removed at the end or after 7 s) */
html.rl-intro .hero-v3 .hero-inner>*{opacity:0}

/* ---------- v4: living product previews ---------- */
.chat-stage{position:relative}
.illustrated-composer.chat-composer{transition:color .2s}
.illustrated-composer.is-typing{color:#211b69}
.illustrated-composer>span{display:inline-block;transition:color .2s}
.illustrated-composer>span.is-live{color:var(--pink)}
.chat-caret{display:inline-block;width:1.5px;height:1.05em;margin:0 auto 0 1px;vertical-align:-.18em;background:currentColor;font-style:normal}
.illustrated-composer .chat-caret{margin-right:auto}
.chat-typing{position:absolute;display:flex;align-items:center;gap:6px;padding:15px 18px;background:#efebf6;border-radius:20px 20px 20px 4px;pointer-events:none;opacity:0}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:#342877}
/* phone: overlays cut from the real screenshot */
.mobile-app-crop{position:relative;container-type:inline-size}
.chat-phone-layer{position:absolute;inset:0;pointer-events:none}
.chat-slice,.chat-cover{position:absolute;overflow:hidden}
.chat-slice img{position:absolute;max-width:none;height:auto;display:block}
.chat-slice.user{transform-origin:100% 100%}
.chat-slice.reply{transform-origin:0 0}
.chat-slice.send{border-radius:50%}
.mobile-app-crop .chat-emoji{display:inline-block;width:1.08em;height:1.08em;margin-left:.06em;max-width:none;border-radius:0}
.chat-typed{position:absolute;display:flex;align-items:center;white-space:pre;font-family:RickiSora,Arial,sans-serif;font-size:3.42cqw;color:#1a1b66;letter-spacing:.005em}
.chat-typed .chat-caret{width:.12cqw;min-width:1px;margin-left:.15em;background:#1a1b66}
.chat-typing-phone{padding:0;justify-content:center;gap:1.4cqw;background:rgb(237,234,243);border-radius:6cqw 6cqw 6cqw 1.2cqw}
.chat-typing-phone span{width:1.7cqw;height:1.7cqw;background:#1a1b66}
/* tiny replay link */
.chat-replay{margin-left:10px;padding:0 0 1px;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.chat-replay::before{content:"↻ ";}
.chat-replay:hover{color:var(--navy);border-bottom-color:var(--pink)}
.chat-replay:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.chat-replay{display:none}}

/* ---------- v5: Ricki's briefing as four separate incoming chat bubbles (also the no-JS / reduced-motion state) ---------- */
.briefing-conversation .briefing-answer{background:none;padding:0;border-radius:0}
.briefing-conversation .briefing-answer .briefing-items{gap:5px}
.briefing-conversation .briefing-answer .briefing-items li{justify-self:start;max-width:88%;display:grid;grid-template-columns:1fr;gap:2px;
  padding:10px 16px 11px;background:#efebf6;border:0;border-radius:6px 20px 20px 6px;font-size:15.5px;line-height:1.5;transform-origin:0 100%}
.briefing-conversation .briefing-answer .briefing-items li:first-child{border-radius:20px 20px 20px 6px;padding-top:10px}
.briefing-conversation .briefing-answer .briefing-items li:last-child{border-radius:6px 20px 20px 4px;padding-bottom:11px}
.briefing-conversation .briefing-answer .briefing-items li:only-child{border-radius:20px 20px 20px 4px}
.briefing-conversation .briefing-answer .briefing-items strong{font-size:12px;color:#342877;padding:0}
.chat-stage>.chat-typing{border-radius:20px 20px 20px 6px}
@media(max-width:700px){
  .briefing-conversation .briefing-answer .briefing-items li{max-width:94%;padding:9px 14px 10px;font-size:15px}
}