/* ============================================================
   AIOOS — taste layer for the Liquid Glass hero
   Anti-slop upgrades (taste-skill principles): bolder type with a
   living gradient, premium spring entrances, scroll-depth parallax,
   richer liquid glass with a moving specular sheen, CTA shimmer.
   Scoped to the hero so the rest of the page is untouched.
   ============================================================ */

/* --- hero ambient depth: a soft conic aura that slowly turns behind it all --- */
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  width:780px; height:780px; right:-160px; top:-180px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(45,108,246,.10), rgba(34,211,238,.12), rgba(20,184,166,.08), rgba(96,177,255,.12), rgba(45,108,246,.10));
  filter:blur(60px); opacity:.7;
}
@media (prefers-reduced-motion:no-preference){ .hero::before{animation:auraTurn 28s linear infinite} }
@keyframes auraTurn{to{transform:rotate(360deg)}}
@media (max-width:980px){ .hero::before{display:none} }

/* --- headline: more confident, living gradient on the accent --- */
.hero h1{ letter-spacing:-2.4px; }
.hero h1 .g{
  background:linear-gradient(96deg,#0A4FE0,#2D6CF6 28%,#37A6FF 52%,#22D3EE 74%,#2D6CF6 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion:no-preference){ .hero h1 .g{animation:gradFlow 8s ease-in-out infinite} }
@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* --- premium spring entrance (overrides the plain fadeUp, capture-safe: base stays visible) --- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal .col-left .fade{animation:tasteRise 1.05s cubic-bezier(.16,1.06,.3,1) both}
    .reveal .col-right{animation:tasteSceneIn 1.2s cubic-bezier(.16,1.02,.3,1) both}
  }
}
@keyframes tasteRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes tasteSceneIn{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}

/* --- liquid glass finesse on the floating channel cards --- */
.gcard{
  background:linear-gradient(150deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -16px 30px -22px rgba(20,50,110,.3),
    0 26px 52px -24px rgba(20,50,110,.5),
    0 4px 12px -6px rgba(20,50,110,.25);
  overflow:hidden;
}
/* slow specular sheen sweeping across the glass */
.gcard::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  background-size:250% 100%; background-position:200% 0; mix-blend-mode:screen;
}
@media (prefers-reduced-motion:no-preference){
  .gcard.card-tel::after{animation:sheen 6.5s ease-in-out .4s infinite}
  .gcard.card-web::after{animation:sheen 6.5s ease-in-out 1.8s infinite}
  .gcard.card-wa::after{animation:sheen 6.5s ease-in-out 3.1s infinite}
  .gcard.card-mob::after{animation:sheen 6.5s ease-in-out 4.4s infinite}
}
@keyframes sheen{0%{background-position:200% 0}38%,100%{background-position:-120% 0}}

/* depth: the cards lift toward the cursor (set via JS --ll) */
.scene{ perspective:1200px; }
.gcard{ transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s; will-change:transform; }

/* --- CTA: shimmer sweep + crisper depth --- */
.cta{ position:relative; overflow:hidden; }
.cta::after{
  content:''; position:absolute; top:0; bottom:0; width:42%; left:-60%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-18deg); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){ .cta::after{animation:ctaShimmer 5.5s ease-in-out 1.2s infinite} }
@keyframes ctaShimmer{0%{left:-60%}24%,100%{left:140%}}

/* --- rating pill: gentle float so the top-left corner feels alive --- */
@media (prefers-reduced-motion:no-preference){
  .rate{animation:rateFloat 7s ease-in-out infinite}
}
@keyframes rateFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* --- scroll-depth parallax targets (JS sets --sy) --- */
.hero-emblem{ will-change:transform; }