/* ============================================================
   Neo Dental — animations
   Մաքուր CSS, 0 KB գրադարան։ Միայն transform/opacity՝
   որ 60fps լինի նաև թույլ հեռախոսների վրա։
   ============================================================ */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur: .7s;
}

/* ---------- 1. Hero՝ շարժվող լույս (aurora) ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero::before,
.hero::after{
  content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(70px); pointer-events:none;
}
.hero::before{
  width:min(58vw,620px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(6,177,125,.28), transparent 68%);
  top:-24%; inset-inline-start:-14%;
  animation:drift-a 22s var(--ease-soft) infinite alternate;
}
.hero::after{
  width:min(46vw,480px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(240,165,0,.15), transparent 68%);
  bottom:-32%; inset-inline-end:-10%;
  animation:drift-b 27s var(--ease-soft) infinite alternate;
}
@keyframes drift-a{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(9%,13%,0) scale(1.16)}
}
@keyframes drift-b{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to  {transform:translate3d(-11%,-9%,0) scale(.92)}
}
.hero > .wrap{position:relative; z-index:1}

/* ---------- 2. Մուտքի անիմացիա (էջը բացվելիս) ---------- */
@keyframes rise{
  from{opacity:0; transform:translate3d(0,22px,0)}
  to  {opacity:1; transform:none}
}
.anim-in{opacity:0; animation:rise var(--dur) var(--ease-out) forwards;
  animation-delay:var(--d,0ms)}

/* ---------- 3. Scroll reveal ---------- */
.reveal{opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .75s var(--ease-out) var(--d,0ms),
             transform .75s var(--ease-out) var(--d,0ms)}
.reveal.seen{opacity:1; transform:none}

/* ---------- 4. Քարտերի hover ---------- */
.card{transition:transform .35s var(--ease-out),
                 box-shadow .35s var(--ease-out),
                 border-color .35s var(--ease-out)}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(6,177,125,.34);
  box-shadow:0 2px 4px rgba(6,14,17,.05), 0 18px 42px rgba(6,177,125,.16);
}
.card .ico{transition:transform .4s var(--ease-out), background .3s ease}
.card:hover .ico{transform:scale(1.09) rotate(-5deg); background:rgba(6,177,125,.16)}

/* hero-card-ը՝ նույն վարքը, բայց ավելի զուսպ */
.hero-card{transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out)}
.hero-card:hover{transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(6,14,17,.05), 0 22px 48px rgba(6,177,125,.15)}

/* ---------- 5. Կոճակների փայլ ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 38%,
             rgba(255,255,255,.32) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .65s var(--ease-out);
}
.btn:hover::after{transform:translateX(120%)}
.btn{transition:transform .22s var(--ease-out), background .22s ease,
                box-shadow .22s var(--ease-out), border-color .22s ease}
.btn-primary:hover{box-shadow:0 8px 22px rgba(6,177,125,.34)}
.btn:active{transform:translateY(0) scale(.98)}

/* ---------- 6. Նավիգացիայի ընդգծում ---------- */
.nav a{position:relative; padding-bottom:3px}
.nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:100%; height:2px; border-radius:2px; background:var(--brand);
  transform:scaleX(0); transform-origin:inline-end;
  transition:transform .32s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current]::after{
  transform:scaleX(1); transform-origin:inline-start}

/* ---------- 7. Header-ը սեղմվում է սահեցնելիս ---------- */
.top{transition:height .3s var(--ease-soft), box-shadow .3s ease,
                background .3s ease}
.top .wrap{transition:height .3s var(--ease-soft)}
.top.scrolled{box-shadow:0 4px 24px rgba(6,14,17,.08)}
.top.scrolled .wrap{height:58px}
.top.scrolled .logo{font-size:18px}
.logo{transition:font-size .3s var(--ease-soft)}
.logo .mark{transition:transform .35s var(--ease-out)}
.logo:hover .mark{transform:rotate(-8deg) scale(1.06)}

/* ---------- 8. FAQ ակորդեոն ---------- */
.faq details{transition:border-color .3s ease, box-shadow .3s ease}
.faq details[open]{border-color:rgba(6,177,125,.3);
  box-shadow:0 6px 20px rgba(6,177,125,.09)}
.faq summary::after{transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .faq-body{display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease-out)}
.faq details[open] .faq-body{grid-template-rows:1fr}
.faq .faq-body > div{overflow:hidden}

/* ---------- 9. Աղյուսակի տողեր ---------- */
tbody tr{transition:background .2s ease}
tbody tr:hover{background:var(--brand-soft)}

/* ---------- 10. Բժիշկների ավատար ---------- */
.doc .avatar{transition:transform .4s var(--ease-out), background .3s ease}
.card:hover .doc .avatar,
.doc:hover .avatar{transform:scale(1.07); background:rgba(6,177,125,.17)}

/* ---------- 11. Էջերի անցում ---------- */
/* Դեկլարատիվ View Transitions-ը չենք օգտագործում՝ բրաուզերը console-ում
   AbortError է թողնում, որը սկսվում է սկրիպտից շուտ ու չի որսացվում։
   Փոխարենը՝ պարզ fade, որ ամենուր նույնն է աշխատում. */
/* ՈՒՇԱԴԻՐ՝ body-ի վրա animation/transform ՉԻ ԿԱՐԵԼԻ դնել —
   դա containing block է ստեղծում, և position:fixed-ը (ներքևի կպած գոտին)
   ու sticky header-ը կոտրվում են։ Այստեղ միայն opacity transition է. */
body{transition:opacity .18s ease}
body.page-leaving{opacity:0}

/* ---------- 12. Հարգում ենք համակարգի կարգավորումը ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .anim-in{opacity:1 !important; transform:none !important}
  .hero::before, .hero::after{animation:none}
}