/* ==========================================================================
   Nexa SMS — motion system
   Every animation ends in a visible resting state, and all of it is disabled
   under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

/* ---------- 1. staged entrance (hero, on page load) ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:none}
}
@keyframes riseBlur{
  from{opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
@keyframes popIn{
  0%  {opacity:0;transform:scale(.9)}
  60% {opacity:1;transform:scale(1.02)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes slideRight{
  from{opacity:0;transform:translateX(-22px)}
  to  {opacity:1;transform:none}
}

.anim{animation:rise .72s var(--ease) both;animation-delay:var(--d,0ms)}
.anim-blur{animation:riseBlur .85s var(--ease) both;animation-delay:var(--d,0ms)}
.anim-pop{animation:popIn .6s var(--ease) both;animation-delay:var(--d,0ms)}
.anim-left{animation:slideRight .7s var(--ease) both;animation-delay:var(--d,0ms)}

/* headline, line by line */
.h-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.h-line > span{display:block;animation:riseBlur .9s var(--ease) both;animation-delay:var(--d,0ms)}

/* ---------- 2. living gold gradient ---------- */
@keyframes shimmer{
  0%  {background-position:0% 50%}
  100%{background-position:200% 50%}
}
/* metallic 3D gold: light on top, deep amber at the base, plus a cast edge */
.gold-text{
  background-image:linear-gradient(178deg,
      #fff6d8 0%, #ffe6a3 18%, #f7c959 40%, #e8a92f 58%,
      #cf8b1c 74%, #a9660f 90%, #8d5309 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(90,52,4,.55)) drop-shadow(0 3px 10px rgba(232,150,40,.22));
}
/* the moving sheen runs on the hero headline only — one element, not forty.
   NOTE: use background-image, never the `background` shorthand — the shorthand
   resets background-clip and the gradient paints over the letters as a block. */
.hero h1 .gold-text{
  background-image:
    linear-gradient(105deg,transparent 42%,rgba(255,255,255,.72) 50%,transparent 58%),
    linear-gradient(178deg,#fffaea 0%,#ffeeb8 14%,#ffd772 32%,#f7b93d 50%,
                    #e89422 66%,#c8720f 82%,#9c5406 100%);
  background-size:260% 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-70% 0, 0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(80,44,2,.45));
  animation:sheen 6.5s ease-in-out infinite;
}
@keyframes sheen{
  0%,12%  {background-position:-70% 0, 0 0}
  55%,100%{background-position:170% 0, 0 0}
}

.plat-text{
  background-image:linear-gradient(100deg,#8e96a8,#ffffff 30%,#d7dde8 60%,#8e96a8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* eyebrow badge breathing glow */
@keyframes badgeGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(232,184,75,.22)}
  50%    {box-shadow:0 0 22px 2px rgba(232,184,75,.22)}
}
.hero .eyebrow{animation:badgeGlow 3.4s ease-in-out infinite}
.hero .eyebrow.anim{animation:rise .72s var(--ease) both, badgeGlow 3.4s ease-in-out 1s infinite;
  animation-delay:var(--d,0ms), calc(var(--d,0ms) + .8s)}
.flame{filter:drop-shadow(0 0 6px rgba(255,150,40,.6));display:inline-block;
  animation:flick 2.2s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.12) rotate(-4deg)}}

/* ---------- 3. scroll reveal + stagger ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.00s}
.stagger.in > *:nth-child(2){transition-delay:.08s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.24s}
.stagger.in > *:nth-child(5){transition-delay:.32s}
.stagger.in > *:nth-child(6){transition-delay:.40s}
.stagger.in > *:nth-child(7){transition-delay:.48s}

/* timeline steps draw their connector as they arrive */
.timeline{--line-h:0%}
.timeline::after{content:"";position:absolute;left:29px;top:14px;width:2px;
  height:var(--line-h);background:linear-gradient(180deg,#f7dc94,#e8b84b);
  transition:height 1.4s var(--ease);border-radius:2px}
.step.in .step-num{animation:popIn .55s var(--ease) both}

/* section headings get a hairline that draws in */
.sec-head h2{position:relative}
.sec-head.in h2::after{content:"";position:absolute;left:50%;bottom:-14px;height:2px;width:0;
  background:var(--grad-gold);border-radius:2px;transform:translateX(-50%);
  animation:drawRule .8s var(--ease) .25s forwards}
@keyframes drawRule{to{width:68px}}

/* ---------- 4. buttons: hover, ripple, loading ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(100deg,#ffe9b0,#e8b84b 50%,#d4a233);
  transition:opacity .3s var(--ease);
}
.btn-gold:hover::before{opacity:1}
.btn:active{transform:translateY(1px) scale(.985)}

.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.42);animation:rip .6s ease-out forwards}
.btn-gold .ripple{background:rgba(60,40,0,.28)}
@keyframes rip{to{transform:scale(2.6);opacity:0}}

.btn.is-loading{pointer-events:none;opacity:.85}
.btn .ldr{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;display:inline-block;animation:spin .65s linear infinite;vertical-align:-3px}

/* ---------- 5. cards & rows ---------- */
.card,.stat,.channel{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover .icon,.channel:hover .icon{transform:translateY(-3px) rotate(-4deg)}
.icon{transition:transform .4s var(--ease)}
tbody tr{transition:background .25s var(--ease)}

/* menu rows slide in one after another */
.mobile-menu.open .menu-inner > *{animation:slideRight .42s var(--ease) both}
.mobile-menu.open .menu-inner > *:nth-child(-n+3){animation-delay:.04s}
.mobile-menu.open .menu-inner > *:nth-child(n+4){animation-delay:.09s}
.mobile-menu.open .menu-inner > *:nth-child(n+7){animation-delay:.14s}
.mobile-menu.open .menu-inner > *:nth-child(n+10){animation-delay:.19s}

/* ---------- 6. form success / error ---------- */
@keyframes noticePop{
  0%  {opacity:0;transform:translateY(10px) scale(.97)}
  55% {opacity:1;transform:translateY(0) scale(1.015)}
  100%{opacity:1;transform:none}
}
.notice.show{animation:noticePop .5s var(--ease) both}
.notice .tick-wrap{display:flex;align-items:center;gap:11px}
.notice svg.tick-svg{width:26px;height:26px;flex-shrink:0;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.notice svg.tick-svg circle{stroke-dasharray:64;stroke-dashoffset:64;
  animation:draw .5s var(--ease) .05s forwards}
.notice svg.tick-svg path{stroke-dasharray:22;stroke-dashoffset:22;
  animation:draw .35s var(--ease) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* celebratory sparks on a successful submit */
.sparks{position:absolute;inset:0;overflow:visible;pointer-events:none}
.spark{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--gold-light);animation:fly .9s ease-out forwards}
@keyframes fly{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.2)}
}

/* ---------- 7. panel hand-off overlay ---------- */
.gate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;
  background:radial-gradient(700px 420px at 50% 40%,rgba(232,184,75,.14),rgba(4,5,9,.97) 70%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:gateIn .35s var(--ease) both;
}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
.gate img{height:64px;width:auto;margin:0 auto 22px;animation:popIn .6s var(--ease) both}
.gate p{color:var(--gold-light);font-family:"Sora",sans-serif;font-size:1.02rem;margin:0 0 20px}
.gate .track{width:230px;height:4px;border-radius:4px;background:rgba(255,255,255,.09);
  overflow:hidden;margin:0 auto}
.gate .track i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad-gold);
  animation:fill 1.25s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.gate small{display:block;margin-top:16px;color:var(--dim);font-size:.82rem}

/* ---------- 8. page transition (preview router) ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pv-page:not([hidden]){animation:pageIn .45s var(--ease) both}

/* ---------- 9. admin: status change + toast ---------- */
@keyframes toastIn{
  0%  {opacity:0;transform:translateY(-14px) scale(.96)}
  60% {opacity:1;transform:translateY(0) scale(1.02)}
  100%{opacity:1;transform:none}
}
.flash{animation:toastIn .55s var(--ease) both;display:flex;align-items:center;gap:11px}
.flash svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.flash svg circle{stroke-dasharray:64;stroke-dashoffset:64;animation:draw .5s var(--ease) .1s forwards}
.flash svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:draw .35s var(--ease) .5s forwards}

@keyframes stPulse{
  0%  {transform:scale(1);box-shadow:0 0 0 0 currentColor}
  50% {transform:scale(1.12)}
  100%{transform:scale(1);box-shadow:0 0 0 12px transparent}
}
.st.just-changed{animation:stPulse .9s var(--ease) both}

/* rows arrive one after another */
.table-wrap.in tbody tr{animation:rise .5s var(--ease) both}
.table-wrap.in tbody tr:nth-child(1){animation-delay:.02s}
.table-wrap.in tbody tr:nth-child(2){animation-delay:.07s}
.table-wrap.in tbody tr:nth-child(3){animation-delay:.12s}
.table-wrap.in tbody tr:nth-child(4){animation-delay:.17s}
.table-wrap.in tbody tr:nth-child(5){animation-delay:.22s}
.table-wrap.in tbody tr:nth-child(6){animation-delay:.27s}
.table-wrap.in tbody tr:nth-child(n+7){animation-delay:.3s}

/* ---------- 10. scroll progress bar ---------- */
.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:var(--grad-gold);box-shadow:0 0 12px rgba(232,184,75,.6);
  transition:width .12s linear}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .anim,.anim-blur,.anim-pop,.anim-left,.h-line > span,
  .reveal,.stagger > *,.pv-page:not([hidden]){opacity:1!important;transform:none!important;filter:none!important}
  .scroll-bar,.sparks{display:none}
}

/* ==========================================================================
   Floating support launcher
   ========================================================================== */
.fab-wrap{position:fixed;right:22px;bottom:22px;z-index:90;transition:opacity .25s var(--ease);display:flex;flex-direction:column;
  align-items:flex-end;gap:12px;pointer-events:none}
.fab-wrap > *{pointer-events:auto}
body.menu-open .fab-wrap{opacity:0;pointer-events:none}

.fab{
  position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad-gold);color:#1a1206;display:grid;place-items:center;
  box-shadow:0 14px 38px rgba(232,184,75,.34);transition:.3s var(--ease);
}
.fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 46px rgba(232,184,75,.46)}
.fab svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;transition:.3s var(--ease)}
.fab .fab-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.fab.open .fab-open{opacity:0;transform:rotate(90deg) scale(.6)}
.fab.open .fab-close{opacity:1;transform:none}

.fab-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);
  animation:fabPing 2.6s cubic-bezier(0,0,.2,1) infinite;pointer-events:none}
.fab.open .fab-ring{display:none}
@keyframes fabPing{
  0%  {transform:scale(1);opacity:.7}
  70% {transform:scale(1.65);opacity:0}
  100%{transform:scale(1.65);opacity:0}
}

.fab-hint{
  font-size:.74rem;letter-spacing:.05em;color:var(--gold-light);
  background:rgba(6,7,12,.9);border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  animation:rise .6s var(--ease) 1.6s both;
}
.fab.open ~ .fab-hint{display:none}

.fab-menu{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab-menu[hidden]{display:none}
.fab-item{
  display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-soft);min-width:255px;
  box-shadow:var(--shadow);transition:.25s var(--ease);
  animation:fabIn .38s var(--ease) both;animation-delay:var(--fd,0ms);
}
.fab-item:hover{border-color:rgba(232,184,75,.45);transform:translateX(-4px)}
@keyframes fabIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to  {opacity:1;transform:none}
}
.fab-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line-soft)}
.fab-ic svg{width:20px;height:20px;fill:currentColor;stroke:none}
.fab-ic--mail{background:rgba(234,67,53,.16);border-color:rgba(234,67,53,.3);color:#ff8175}
.fab-ic--teams{background:rgba(98,100,167,.24);border-color:rgba(124,126,205,.34);color:#a2a4f0}
.fab-ic--wa{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.3);color:#54dd88}
.fab-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.fab-tx b{font-size:.9rem;font-weight:650}
.fab-tx i{font-style:normal;font-size:.76rem;color:var(--dim);
  font-family:"JetBrains Mono",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:520px){
  .fab-wrap{right:14px;bottom:14px}
  .fab{width:54px;height:54px}
  .fab-hint{display:none}
  .fab-item{min-width:0;max-width:calc(100vw - 40px)}
}
@media (prefers-reduced-motion:reduce){
  .fab-ring{display:none}
  .fab-item{animation:none}
}

/* preview-only toast */
.pv-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  max-width:min(460px,calc(100vw - 32px));padding:13px 18px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--gold-light);
  font-size:.88rem;line-height:1.5;box-shadow:var(--shadow);
  animation:toastIn .4s var(--ease) both;
}
.pv-toast.gone{opacity:0;transform:translate(-50%,10px);transition:.35s var(--ease)}


/* ==========================================================================
   Opening animation — plays once per visit, then gets out of the way
   ========================================================================== */
.intro{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:radial-gradient(760px 480px at 50% 45%,#12141f 0%,#06070c 68%);
  animation:introOut .55s var(--ease) 1.05s forwards;
}
.intro-mark{display:flex;flex-direction:column;align-items:center;gap:18px}
.intro img{height:clamp(46px,7vw,72px);width:auto;
  animation:introLogo .8s var(--ease) both}
.intro .bar{width:150px;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.intro .bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--grad-gold);
  animation:introBar 1s var(--ease) .12s forwards}
@keyframes introLogo{
  0%  {opacity:0;transform:scale(.9) translateY(10px);filter:blur(8px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes introBar{to{width:100%}}
@keyframes introOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro.done{display:none}

@media (prefers-reduced-motion:reduce){ .intro{display:none} }