/*
Theme Name: Badia Astra Motion Child
Theme URI: https://badiatarigan.com/
Description: Stable advanced UI and motion enhancements for the existing Astra and Elementor website.
Author: Badia Tarigan
Author URI: https://badiatarigan.com/
Template: astra
Version: 7.1.0
Text Domain: badia-astra-motion-child
*/

:root {
  --bmv7-accent: 18 205 229;
  --bmv7-accent-soft: 102 225 241;
  --bmv7-ink: 2 8 14;
  --bmv7-text: 238 247 252;
  --bmv7-muted: 148 165 181;
  --bmv7-panel: 7 15 23;
  --bmv7-ease-out: cubic-bezier(.16, 1, .3, 1);
  --bmv7-ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --bmv7-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --bmv7-progress: 0;
}

body.badia-motion-v7 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.badia-motion-v7 :where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid rgb(var(--bmv7-accent));
  outline-offset: 4px;
}

body.badia-motion-v7 :where(a, button, .magnetic-btn, .link-underline) {
  -webkit-tap-highlight-color: rgb(var(--bmv7-accent) / .18);
}

/* Full-screen plugin pages render their own cinematic header. Keep Astra out of
   that surface, especially on mobile where it otherwise appears as a white bar. */
body.badia-motion-v7.bt-motion-page :where(#masthead, #ast-desktop-header, #ast-mobile-header, .ast-mobile-header-wrap) {
  display: none !important;
}

body.badia-motion-v7.bt-motion-page .nav-header {
  right: 0;
  width: 100%;
  background-color: rgb(var(--bmv7-ink) / .78);
  border-bottom: 1px solid rgb(255 255 255 / .075);
  box-shadow: 0 10px 38px rgb(0 0 0 / .12);
  transition: background-color 280ms var(--bmv7-ease-standard),
              border-color 280ms var(--bmv7-ease-standard),
              box-shadow 280ms var(--bmv7-ease-standard);
}

body.badia-motion-v7.bt-motion-page.bmv7-scrolled .nav-header {
  background-color: rgb(var(--bmv7-ink) / .92);
  border-bottom-color: rgb(var(--bmv7-accent) / .16);
  box-shadow: 0 16px 46px rgb(0 0 0 / .26);
}

/* Header treatment: appearance only, never dimensions or layout. */
body.badia-motion-v7 :where(#masthead, .site-header, .ast-primary-header-bar) {
  transition: background-color 280ms var(--bmv7-ease-standard),
              border-color 280ms var(--bmv7-ease-standard),
              box-shadow 280ms var(--bmv7-ease-standard),
              backdrop-filter 280ms var(--bmv7-ease-standard);
}
body.badia-motion-v7.bmv7-scrolled :where(#masthead, .site-header) {
  background-color: rgb(var(--bmv7-ink) / .86);
  border-bottom-color: rgb(var(--bmv7-accent) / .13);
  box-shadow: 0 18px 58px rgb(0 0 0 / .2);
  -webkit-backdrop-filter: blur(17px) saturate(126%);
  backdrop-filter: blur(17px) saturate(126%);
}
body.badia-motion-v7 :where(.main-header-menu > .menu-item > a, .ast-builder-menu-1 .menu-item > .menu-link) {
  position: relative;
}
body.badia-motion-v7 :where(.main-header-menu > .menu-item > a, .ast-builder-menu-1 .menu-item > .menu-link)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--bmv7-accent)), transparent);
  box-shadow: 0 0 12px rgb(var(--bmv7-accent) / .4);
  transition: left 260ms var(--bmv7-ease-out), right 260ms var(--bmv7-ease-out);
}
body.badia-motion-v7 :where(.main-header-menu > .current-menu-item > a, .main-header-menu > .menu-item > a:hover, .ast-builder-menu-1 .current-menu-item > .menu-link, .ast-builder-menu-1 .menu-item > .menu-link:hover)::after {
  left: 17%;
  right: 17%;
}

.bmv7-scroll-line {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--bmv7-progress));
  transform-origin: left;
  background: linear-gradient(90deg, rgb(var(--bmv7-accent)), rgb(var(--bmv7-accent-soft)), transparent 98%);
  box-shadow: 0 0 18px rgb(var(--bmv7-accent) / .42);
  will-change: transform;
}

/* Decorative hero stage. It does not alter hero sizing, flow, padding or alignment. */
.bmv7-hero {
  position: relative;
  isolation: isolate;
}
.bmv7-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  contain: layout paint size;
  transition: opacity 760ms var(--bmv7-ease-standard);
}
.bmv7-hero-stage::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  opacity: .09;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / .2) 0 .5px, transparent .8px),
    radial-gradient(circle at 76% 62%, rgb(var(--bmv7-accent) / .18) 0 .6px, transparent .9px);
  background-size: 19px 19px, 27px 27px;
  mix-blend-mode: soft-light;
  animation: bmv7-grain-drift 14s steps(7, end) infinite;
}
.bmv7-hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Existing Elementor content remains above the decorative stage. */
.bmv7-hero > :where(.e-con-inner, .elementor-container, .elementor-element) {
  z-index: 1;
}
.bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .5; }
body.badia-motion-v7.bt-motion-page .bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .32; }
.bmv7-profile-minimal .bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .22; }
.bmv7-profile-cinematic .bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .66; }
.bmv7-hero.bmv7-scene-settled .bmv7-hero-stage { opacity: .4; }
body.badia-motion-v7.bt-motion-page .bmv7-hero.bmv7-scene-settled .bmv7-hero-stage { opacity: .25; }

/* Keep technical motion away from primary copy where the layout is text-left. */
body:is(.badia-route-home, .badia-route-profil, .badia-route-layanan, .badia-route-resume, .badia-route-kontak) .bmv7-hero-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .14) 22%, #000 52%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .14) 22%, #000 52%, #000 100%);
}
body.badia-route-ayo-mancing .bmv7-hero-stage,
body.badia-route-studi-kasus .bmv7-hero-stage {
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .52), #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .52), #000 34%, #000 100%);
}

.bmv7-hero-title {
  position: relative;
  text-shadow: 0 0 0 transparent;
  transition: text-shadow 900ms var(--bmv7-ease-smooth);
}
.bmv7-hero.bmv7-scene-ready .bmv7-hero-title {
  text-shadow: 0 0 30px rgb(var(--bmv7-accent) / .05);
}
.bmv7-hero-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.15em;
  width: min(190px, 26vw);
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--bmv7-accent)), rgb(var(--bmv7-accent) / .18), transparent);
  box-shadow: 0 0 14px rgb(var(--bmv7-accent) / .22);
  transform: scaleX(0);
  transform-origin: left;
}
.bmv7-hero.bmv7-scene-ready .bmv7-hero-title::after {
  animation: bmv7-line-reveal 900ms 110ms var(--bmv7-ease-out) both;
}

/* One trace per top-level section; accordion headings and nested card headings are excluded in JS. */
.bmv7-heading-trace {
  position: relative;
}
.bmv7-heading-trace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.2em;
  width: min(154px, 23vw);
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--bmv7-accent) / .82), transparent);
  transform: scaleX(0);
  transform-origin: left;
}
.bmv7-heading-trace.bmv7-in-view::after {
  animation: bmv7-line-reveal 780ms var(--bmv7-ease-out) both;
}

.bmv7-control {
  --bmv7-mx: 0px;
  --bmv7-my: 0px;
  --bmv7-cx: 50%;
  --bmv7-cy: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  translate: var(--bmv7-mx) var(--bmv7-my);
  scale: 1;
  transition: translate 400ms var(--bmv7-ease-out),
              scale 220ms var(--bmv7-ease-standard),
              border-color 220ms var(--bmv7-ease-standard),
              box-shadow 260ms var(--bmv7-ease-standard),
              filter 220ms var(--bmv7-ease-standard);
}
body.badia-motion-v7 :where(.magnetic-btn, .bmv7-control) {
  min-height: 44px;
}
.bmv7-control::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 22%, rgb(255 255 255 / .22) 48%, transparent 74%);
  transform: translateX(-145%) skewX(-14deg);
  transition: transform 680ms var(--bmv7-ease-out);
}
.bmv7-control::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--bmv7-cx) var(--bmv7-cy), rgb(var(--bmv7-accent) / .16), transparent 55%);
  opacity: 0;
  transition: opacity 220ms var(--bmv7-ease-standard);
}

.bmv7-project-surface {
  --bmv7-rz: 0deg;
  --bmv7-dx: 0px;
  --bmv7-dy: 0px;
  translate: var(--bmv7-dx) var(--bmv7-dy);
  rotate: var(--bmv7-rz);
  transition: translate 480ms var(--bmv7-ease-out), rotate 480ms var(--bmv7-ease-out), filter 240ms var(--bmv7-ease-standard);
  transform-style: preserve-3d;
}

body.badia-motion-v7.bt-motion-page :where(.glass-card, .interactive-card) {
  border-color: rgb(255 255 255 / .105);
  transition: border-color 260ms var(--bmv7-ease-standard),
              background-color 260ms var(--bmv7-ease-standard),
              box-shadow 300ms var(--bmv7-ease-standard),
              transform 320ms var(--bmv7-ease-out),
              filter 260ms var(--bmv7-ease-standard);
}

body.badia-motion-v7.bt-motion-page .link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

body.badia-motion-v7.bt-motion-page .link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: .45;
  transform: scaleX(.42);
  transform-origin: left;
  transition: opacity 220ms var(--bmv7-ease-standard), transform 280ms var(--bmv7-ease-out);
}

body.badia-motion-v7.bt-motion-page .floating-social-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
  .bmv7-control:hover {
    scale: 1.016;
    border-color: rgb(var(--bmv7-accent) / .5);
    box-shadow: 0 15px 40px rgb(0 0 0 / .22), 0 0 28px rgb(var(--bmv7-accent) / .08);
    filter: brightness(1.04);
  }
  .bmv7-control:hover::before { transform: translateX(145%) skewX(-14deg); }
  .bmv7-control:hover::after { opacity: 1; }
  .bmv7-project-surface:hover { filter: brightness(1.024) drop-shadow(0 20px 26px rgb(0 0 0 / .17)); }
  body.badia-motion-v7.bt-motion-page :where(.glass-card, .interactive-card):hover {
    border-color: rgb(var(--bmv7-accent) / .24);
    box-shadow: 0 24px 70px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .08);
    transform: translateY(-3px);
  }
  body.badia-motion-v7.bt-motion-page .link-underline:hover::after,
  body.badia-motion-v7.bt-motion-page .link-underline:focus-visible::after {
    opacity: .9;
    transform: scaleX(1);
  }
}

/* Left navigator remains out of document flow and away from right-side social icons. */
.bmv7-section-nav {
  position: fixed;
  z-index: 9998;
  left: max(12px, env(safe-area-inset-left));
  top: 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--bmv7-ease-standard);
}
.bmv7-section-nav::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -20px;
  width: 1px;
  height: calc(100% + 40px);
  background: linear-gradient(180deg, transparent, rgb(var(--bmv7-text) / .15), transparent);
}
.bmv7-section-nav::after {
  content: "";
  position: absolute;
  left: 2px;
  top: -20px;
  width: 1px;
  height: calc((100% + 40px) * var(--bmv7-progress));
  background: rgb(var(--bmv7-accent));
  box-shadow: 0 0 13px rgb(var(--bmv7-accent) / .52);
  transform-origin: top;
}
.bmv7-section-nav.bmv7-ready { opacity: 1; pointer-events: auto; }
.bmv7-section-nav button {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  padding: 4px 8px 4px 0;
  border: 0;
  color: rgb(var(--bmv7-text) / .5);
  background: transparent;
  font: 600 9px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.bmv7-section-nav button i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--bmv7-text) / .3);
  transition: width 230ms var(--bmv7-ease-out), border-radius 230ms, background 230ms, box-shadow 230ms;
}
.bmv7-section-nav button span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-7px);
  transition: max-width 260ms var(--bmv7-ease-out), opacity 180ms, transform 260ms var(--bmv7-ease-out);
}
.bmv7-section-nav:hover button span,
.bmv7-section-nav button:focus-visible span {
  max-width: 200px;
  opacity: 1;
  transform: none;
}
.bmv7-section-nav button.bmv7-active { color: rgb(var(--bmv7-text) / .98); }
.bmv7-section-nav button.bmv7-active i {
  width: 25px;
  border-radius: 4px;
  background: rgb(var(--bmv7-accent));
  box-shadow: 0 0 17px rgb(var(--bmv7-accent) / .5);
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: bmv7-page-out 190ms ease both; }
::view-transition-new(root) { animation: bmv7-page-in 380ms var(--bmv7-ease-out) both; }

@media (max-width: 1479px) {
  .bmv7-section-nav { display: none !important; }
}

@media (max-width: 767px) {
  .bmv7-scroll-line { height: 1px; }
  .bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .2; }
  body.badia-motion-v7.bt-motion-page .bmv7-hero.bmv7-scene-ready .bmv7-hero-stage { opacity: .16; }
  body.badia-motion-v7.bt-motion-page .nav-header {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    background-color: rgb(var(--bmv7-ink) / .94);
  }
  body.badia-motion-v7.bt-motion-page .nav-header button {
    min-width: 44px;
    min-height: 44px;
  }
  body.badia-motion-v7.bt-motion-page .coding-particles-container {
    opacity: .62;
  }
  body.badia-motion-v7.bt-motion-page :where(.glass-card, .interactive-card) {
    border-radius: 14px;
  }
  body:is(.badia-route-home, .badia-route-profil, .badia-route-layanan, .badia-route-resume, .badia-route-kontak) .bmv7-hero-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 48%, #000);
  }
}

@media (max-width: 480px) {
  body.badia-motion-v7.bt-motion-page .bmv7-hero-title::after {
    width: 132px;
  }
}

.bmv7-profile-minimal .bmv7-control::before,
.bmv7-profile-minimal .bmv7-control::after,
.bmv7-profile-minimal .bmv7-hero-stage::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bmv7-hero-stage::after,
  .bmv7-hero-title::after,
  .bmv7-heading-trace::after,
  .bmv7-control::before,
  .bmv7-control::after { animation: none !important; transition: none !important; }
  .bmv7-hero-stage { opacity: .18 !important; transition: none !important; }
  .bmv7-hero-title::after,
  .bmv7-heading-trace::after { transform: scaleX(1) !important; }
  .bmv7-control,
  .bmv7-project-surface { translate: none !important; rotate: none !important; scale: 1 !important; transition: none !important; }
  .bmv7-section-nav { display: none !important; }
  body.badia-motion-v7.bt-motion-page :where(.fade-up-el, .split-title, .interactive-card, .magnetic-btn, .hover-link, .coding-outline, .coding-wireframe, .coding-solid, .coding-pulse, .coding-cursor) {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transform: none !important;
  }
  body.badia-motion-v7.bt-motion-page :where(#premium-cursor, .cursor-dot) {
    display: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

@keyframes bmv7-line-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bmv7-grain-drift { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(2.5%, -1.5%, 0); } 100% { transform: translate3d(-1.5%, 2%, 0); } }
@keyframes bmv7-page-out { to { opacity: .94; filter: saturate(.94); } }
@keyframes bmv7-page-in { from { opacity: .9; filter: saturate(.94); } }