/* motion.css — logo and menu animations for aartimkarande.in (v1, 2026-11-07).
   Loaded after modern.css. Respects prefers-reduced-motion. */

/* ---------- AK logo ---------- */
.brand { perspective: 600px; }
.brand-mark {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: none;
  animation: akPop .9s cubic-bezier(.2,.9,.25,1.25) .1s backwards, akGlow 4.5s ease-in-out 1.6s infinite;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), border-radius .4s;
  transform-style: preserve-3d;
}
.brand-mark::after { /* gold base bar that draws itself in */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ak-gold); transform-origin: left center;
  animation: akBar .7s ease-out .75s backwards;
}
.brand-mark::before { /* light sweep every few seconds */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: akShine 6s ease-in-out 1.8s infinite;
  pointer-events: none;
}
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: rotateY(360deg); border-radius: .75rem; }
.brand:hover .brand-mark::after { animation: akBar .5s ease-out both; }
.brand-text { animation: akSlideIn .7s ease-out .45s backwards; }
.brand-text small { animation: akFade .8s ease-out .9s backwards; }

@keyframes akPop { 0% { transform: scale(.3) rotate(-120deg); opacity: 0; } 65% { transform: scale(1.12) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes akBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes akShine { 0%, 72% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes akGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(201,162,39,0)); } 50% { filter: drop-shadow(0 0 6px rgba(201,162,39,.55)); } }
@keyframes akSlideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes akFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Main menu ---------- */
.site-header .navbar-nav > .nav-item { animation: akDrop .55s ease-out backwards; }
.site-header .navbar-nav > .nav-item:nth-child(1) { animation-delay: .35s; }
.site-header .navbar-nav > .nav-item:nth-child(2) { animation-delay: .43s; }
.site-header .navbar-nav > .nav-item:nth-child(3) { animation-delay: .51s; }
.site-header .navbar-nav > .nav-item:nth-child(4) { animation-delay: .59s; }
.site-header .navbar-nav > .nav-item:nth-child(5) { animation-delay: .67s; }
.site-header .navbar-nav > .nav-item:nth-child(6) { animation-delay: .75s; }
.site-header .navbar-nav > .nav-item:nth-child(7) { animation-delay: .83s; }
.site-header .navbar-nav > .nav-item:nth-child(8) { animation-delay: .91s; }
@keyframes akDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.site-header .nav-link { position: relative; transition: color .25s, transform .25s; }
.site-header .dropdown-toggle::after { transition: transform .3s ease; }
.site-header .dropdown-toggle.show::after { transform: rotate(180deg); }

@media (min-width: 1200px) {
  .site-header .nav-link::before { /* underline that grows from the centre */
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem; height: 2px;
    background: linear-gradient(90deg, var(--ak-blue), var(--ak-gold));
    border-radius: 2px; transform: scaleX(0); transform-origin: center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .site-header .nav-link:hover::before, .site-header .nav-link:focus-visible::before,
  .site-header .nav-link.show::before, .site-header .nav-link.active::before { transform: scaleX(1); }
  .site-header .nav-link.active { box-shadow: none; border-radius: .375rem; }
  .site-header .nav-link:hover { transform: translateY(-2px); }
}

/* dropdowns open with a soft drop and staggered items */
.site-header .dropdown-menu.show { animation: akMenu .28s cubic-bezier(.2,.8,.2,1); transform-origin: top center; }
.site-header .dropdown-menu.show > li { animation: akItem .35s ease-out backwards; }
.site-header .dropdown-menu.show > li:nth-child(1) { animation-delay: .04s; }
.site-header .dropdown-menu.show > li:nth-child(2) { animation-delay: .08s; }
.site-header .dropdown-menu.show > li:nth-child(3) { animation-delay: .12s; }
.site-header .dropdown-menu.show > li:nth-child(4) { animation-delay: .16s; }
.site-header .dropdown-menu.show > li:nth-child(5) { animation-delay: .20s; }
.site-header .dropdown-menu.show > li:nth-child(6) { animation-delay: .24s; }
.site-header .dropdown-menu.show > li:nth-child(7) { animation-delay: .28s; }
.site-header .dropdown-menu.show > li:nth-child(n+8) { animation-delay: .32s; }
@keyframes akMenu { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes akItem { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.site-header .dropdown-item { position: relative; transition: background-color .2s, color .2s, padding-left .25s; }
.site-header .dropdown-item::before {
  content: ""; position: absolute; left: .35rem; top: 25%; bottom: 25%; width: 3px; border-radius: 2px;
  background: var(--ak-gold); transform: scaleY(0); transition: transform .25s ease;
}
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus-visible { padding-left: 1.15rem; }
.site-header .dropdown-item:hover::before, .site-header .dropdown-item:focus-visible::before, .site-header .dropdown-item.active::before { transform: scaleY(1); }

/* "Get in touch" button: light sweep on hover */
.site-header .btn-primary-ak { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.site-header .btn-primary-ak::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-150%) skewX(-20deg); transition: transform .6s ease;
}
.site-header .btn-primary-ak:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,37,69,.18); }
.site-header .btn-primary-ak:hover::after { transform: translateX(320%) skewX(-20deg); }

/* mobile menu: toggler spins, items slide in when the menu opens */
.navbar-toggler i { display: inline-block; transition: transform .35s ease; }
.navbar-toggler[aria-expanded="true"] i { transform: rotate(90deg); }
@media (max-width: 1199.98px) {
  .site-header .navbar-collapse.show .navbar-nav > .nav-item { animation: akItem .4s ease-out backwards; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-mark::before, .brand-mark::after, .brand-text, .brand-text small,
  .site-header .navbar-nav > .nav-item, .site-header .dropdown-menu.show, .site-header .dropdown-menu.show > li { animation: none !important; }
  .brand:hover .brand-mark { transform: none; }
  .brand-mark::before { display: none; }
}