/* AiBoss v3.5.8 — Adaptive Motion & AI Experience
 * Visitor-only, event-driven micro-interactions. No polling/background timers.
 */
.aiboss358-motion-surface{
  --aiboss358-cyan:#64e9ff;
  --aiboss358-blue:#5d7cff;
  --aiboss358-violet:#9b6cff;
  --aiboss358-magenta:#ff4fd8;
  --aiboss358-glow:rgba(100,233,255,.28);
  --aiboss358-depth:0 18px 55px rgba(5,11,38,.22);
}

/* Brand mark gets a quiet AI-orbit treatment while preserving the original logo. */
.aiboss358-motion-surface .aiboss358-brand-mark{
  position:relative;
  display:inline-grid;
  place-items:center;
  isolation:isolate;
  flex:0 0 auto;
}
.aiboss358-motion-surface .aiboss358-brand-mark img{
  position:relative;
  z-index:2;
}
.aiboss358-motion-surface .aiboss358-brand-mark::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:0;
  border-radius:999px;
  border:1px solid rgba(100,233,255,.24);
  box-shadow:0 0 18px rgba(100,233,255,.13), inset 0 0 12px rgba(155,108,255,.08);
  opacity:.7;
}
.aiboss358-motion-surface .aiboss358-brand-mark::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--aiboss358-cyan),var(--aiboss358-magenta));
  box-shadow:0 0 10px rgba(100,233,255,.7);
  z-index:3;
  top:-3px;
  left:50%;
  margin-left:-2.5px;
  transform-origin:2.5px calc(50% + 19px);
  opacity:.88;
}

/* JS adds these roles only on visitor surfaces. */
.aiboss358-motion-surface .aiboss358-ai-actor{
  will-change:auto;
  transform-style:preserve-3d;
}
.aiboss358-motion-surface .aiboss358-reveal{
  transition:opacity .54s cubic-bezier(.2,.75,.25,1), translate .54s cubic-bezier(.2,.75,.25,1);
}
html.aiboss358-motion-active .aiboss358-motion-surface .aiboss358-reveal:not(.is-ai-visible){
  opacity:0;
  translate:0 18px;
  /* Avoid filter blur during scrolling; keep text sharp. */
}
html.aiboss358-motion-active .aiboss358-motion-surface .aiboss358-reveal.is-ai-visible{
  opacity:1;
  translate:0 0;
}

.aiboss358-motion-surface .aiboss358-scan-surface{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.aiboss358-motion-surface .aiboss358-scan-line{
  position:absolute;
  left:7%;
  right:7%;
  top:8%;
  height:1px;
  z-index:8;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(100,233,255,.12),rgba(100,233,255,.72),rgba(255,79,216,.28),transparent);
  box-shadow:0 0 14px rgba(100,233,255,.22);
}

.aiboss358-motion-surface .aiboss358-depth{
  --aiboss358-rx:0deg;
  --aiboss358-ry:0deg;
  --aiboss358-lift:0px;
  transform:perspective(1100px) rotateX(var(--aiboss358-rx)) rotateY(var(--aiboss358-ry)) translateY(var(--aiboss358-lift));
  transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .aiboss358-motion-surface .aiboss358-depth:hover{
    --aiboss358-lift:-2px;
    box-shadow:var(--aiboss358-depth);
  }
  /* Stage 9: scope motion to key CTA controls rather than every link or button. */
  .aiboss358-motion-surface :is(.aixdv281-hero-actions,.aixdv281-final-copy) .aixdv281-art-cta{
    transition:transform .22s cubic-bezier(.2,.75,.2,1),filter .22s ease;
  }
  .aiboss358-motion-surface .aixdv281-final-copy .aixdv281-art-cta:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
  }
}

.aiboss358-motion-surface [data-aiboss358-count]{
  font-variant-numeric:tabular-nums;
}
.aiboss358-motion-surface .aiboss358-count-ready{
  text-shadow:0 0 20px rgba(100,233,255,.12);
}

/* Stage 5: one-shot hero choreography; no continuous flashing or extra palette. */
@media(prefers-reduced-motion:no-preference){
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > :is(
    .aixdv281-eyebrow,h1,p,.aixdv281-hero-actions,.aixdv281-trust
  ){
    animation:aiboss358-hero-enter .56s cubic-bezier(.2,.75,.2,1) both;
  }
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > .aixdv281-eyebrow{animation-delay:.04s}
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > h1{animation-delay:.12s}
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > p{animation-delay:.20s}
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > .aixdv281-hero-actions{animation-delay:.28s}
  body.aixdv281-public.abv-motion-ready .aixdv281-hero-copy > .aixdv281-trust{animation-delay:.34s}
}
@keyframes aiboss358-hero-enter{
  from{opacity:.32;translate:0 10px}
  to{opacity:1;translate:0 0}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.aixdv281-public .aixdv281-program-grid article,
  body.aixdv281-public .aiboss359-trust-card{
    transition:transform .25s cubic-bezier(.2,.75,.2,1),box-shadow .25s ease!important;
  }
  body.aixdv281-public .aixdv281-program-grid article:hover,
  body.aixdv281-public .aiboss359-trust-card:hover{
    transform:translateY(-3px)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.19)!important;
  }
  body.aixdv281-public .aixdv281-trust>span{
    transition:transform .22s ease!important;
  }
  body.aixdv281-public .aixdv281-trust>span:hover{
    transform:translateY(-2px)!important;
  }
}
@media(prefers-reduced-motion:no-preference){
  body.aixdv281-public .aixdv281-hero-actions .aixdv281-art-cta:active{
    transform:scale(.985)!important;
  }
}
/* Stage 10: Mobile content must never depend on long-section scroll reveal.
   Sections 02 / Kesadaran through 03 / Cara Lama are taller than the viewport. */
@media(max-width:820px){
  html.aiboss358-motion-active body.aixdv281-public.aiboss358-motion-surface
  :is(#kesadaran,#problem-awareness,#pain-audit,#cara-lama).aiboss358-reveal,
  body.aixdv281-public.aiboss358-motion-surface
  :is(#kesadaran,#problem-awareness,#pain-audit,#cara-lama).aiboss358-reveal{
    opacity:1!important;
    visibility:visible!important;
    translate:none!important;
    transform:none!important;
    transition:none!important;
  }
}
/* Stage 7: pause decorative motion offscreen and behind the welcome poster.
   No new glow, border or palette. */
html.aiboss358-motion-active .aiboss358-motion-surface .aiboss358-ai-actor:not(.is-ai-inview),
html.aiboss358-popup-open .aiboss358-motion-surface .aiboss358-ai-actor,
html.aiboss358-popup-open .aiboss358-motion-surface .aiboss358-scan-line,
html.aiboss358-popup-open .aiboss358-motion-surface .aiboss358-brand-mark::before,
html.aiboss358-popup-open .aiboss358-motion-surface .aiboss358-brand-mark::after{
  animation-play-state:paused!important;
}
/* Stage 6 / selective card choreography. Single pass, capped by visitor-motion JS.
   Uses opacity + translate only, so existing glass colors/borders remain unchanged. */
body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro{
  transition:opacity .48s cubic-bezier(.2,.75,.25,1),
             translate .48s cubic-bezier(.2,.75,.25,1);
  transition-delay:var(--aiboss358-micro-delay,0ms);
}
html.aiboss358-motion-active body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro:not(.is-ai-visible){
  opacity:0;
  translate:0 12px;
}
html.aiboss358-motion-active body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro.is-ai-visible{
  opacity:1;
  translate:0 0;
}
html.aiboss358-motion-lite body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro{
  transition-duration:.28s;
  transition-delay:0ms;
}
html.aiboss358-motion-lite body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro:not(.is-ai-visible){
  translate:0 5px;
}
/* Hover is deliberate and shallow, never another neon layer. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.aixdv281-public .aixdv281-final-tags>span,
  body.aixdv281-public .aiboss357-landing-education-cta a{
    transition:transform .22s cubic-bezier(.2,.75,.2,1),opacity .22s ease!important;
  }
  body.aixdv281-public .aixdv281-final-tags>span:hover,
  body.aixdv281-public .aiboss357-landing-education-cta a:hover{
    transform:translateY(-2px)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.aixdv281-public.aiboss358-motion-surface .aiboss358-micro{
    transition:none!important;
    transition-delay:0ms!important;
    opacity:1!important;
    translate:0 0!important;
  }
  body.aixdv281-public .aixdv281-final-tags>span:hover,
  body.aixdv281-public .aiboss357-landing-education-cta a:hover{transform:none!important}
}
/* Focus pulse is visual only and never replaces the native focus outline. */
.aiboss358-motion-surface :is(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(100,233,255,.88);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(100,233,255,.10);
}

html.aiboss358-motion-full:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-brand-mark::before{
  animation:aiboss358-orbit-ring 8.5s linear infinite;
}
html.aiboss358-motion-full:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-brand-mark::after{
  animation:aiboss358-orbit-dot 5.8s linear infinite;
}
html.aiboss358-motion-full:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-ai-actor{
  animation:aiboss358-idle 4.8s ease-in-out infinite;
}
html.aiboss358-motion-full:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-scan-surface.is-ai-visible .aiboss358-scan-line{
  animation:aiboss358-scan 4.4s cubic-bezier(.25,.75,.25,1) 1 both;
}
html.aiboss358-motion-lite:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-brand-mark::before{
  animation:aiboss358-pulse 5s ease-in-out infinite;
}
html.aiboss358-motion-lite:not(.aiboss358-motion-paused) .aiboss358-motion-surface .aiboss358-ai-actor{
  animation:aiboss358-idle-lite 6s ease-in-out infinite;
}

@keyframes aiboss358-orbit-ring{
  0%,100%{opacity:.56;transform:scale(.985)}
  50%{opacity:.78;transform:scale(1.018)}
}
@keyframes aiboss358-orbit-dot{
  0%{transform:rotate(0deg) translateY(-21px) rotate(0deg)}
  100%{transform:rotate(360deg) translateY(-21px) rotate(-360deg)}
}
@keyframes aiboss358-pulse{
  0%,100%{opacity:.48;scale:.96}
  50%{opacity:.78;scale:1.03}
}
@keyframes aiboss358-idle{
  0%,100%{translate:0 0}
  50%{translate:0 -5px}
}
@keyframes aiboss358-idle-lite{
  0%,100%{translate:0 0}
  50%{translate:0 -2px}
}
@keyframes aiboss358-scan{
  0%{top:9%;opacity:0}
  12%{opacity:.68}
  82%{opacity:.45}
  100%{top:91%;opacity:0}
}

html.aiboss358-motion-paused .aiboss358-motion-surface *,
html.aiboss358-motion-paused .aiboss358-motion-surface *::before,
html.aiboss358-motion-paused .aiboss358-motion-surface *::after{
  animation-play-state:paused!important;
}

html.aiboss358-motion-off .aiboss358-motion-surface .aiboss358-reveal,
html.aiboss358-motion-off .aiboss358-motion-surface .aiboss358-ai-actor,
html.aiboss358-motion-off .aiboss358-motion-surface .aiboss358-depth{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  translate:0 0!important;
  transform:none!important;
  filter:none!important;
}
html.aiboss358-motion-off .aiboss358-motion-surface .aiboss358-scan-line,
html.aiboss358-motion-off .aiboss358-motion-surface .aiboss358-brand-mark::after{
  display:none!important;
}

@media (max-width:767px){
  .aiboss358-motion-surface .aiboss358-reveal{transition-duration:.48s}
  html.aiboss358-motion-active .aiboss358-motion-surface .aiboss358-reveal:not(.is-ai-visible){translate:0 12px;filter:none}
  .aiboss358-motion-surface .aiboss358-scan-line{left:4%;right:4%}
}

@media (prefers-reduced-motion:reduce){
  .aiboss358-motion-surface *,
  .aiboss358-motion-surface *::before,
  .aiboss358-motion-surface *::after{
    scroll-behavior:auto!important;
  }
  .aiboss358-motion-surface .aiboss358-reveal,
  .aiboss358-motion-surface .aiboss358-ai-actor,
  .aiboss358-motion-surface .aiboss358-depth{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    translate:0 0!important;
    transform:none!important;
    filter:none!important;
  }
  .aiboss358-motion-surface .aiboss358-scan-line,
  .aiboss358-motion-surface .aiboss358-brand-mark::after{display:none!important}
}

/* Existing public CSS uses broad .aixdv250-brand span rules; keep the new mark wrapper neutral. */
.aiboss358-motion-surface .aixdv250-brand .aiboss358-brand-mark{
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
  font-weight:400!important;
}