/* DocForms Motion System
   - Scroll reveals + stagger
   - Premium micro-interactions
   - Respects prefers-reduced-motion
*/

:root{
  --df-accent: #58A8D0;
  --df-navy: #003a70;
  --df-navy2: #002b55;
  --df-ease: cubic-bezier(.2,.9,.2,1);
}

html{ scroll-behavior: smooth; }

/* --- Scroll reveal primitives --- */
.df-reveal{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(10px);
  transition: opacity 700ms var(--df-ease), transform 700ms var(--df-ease), filter 700ms var(--df-ease);
  will-change: opacity, transform, filter;
}

.df-reveal[data-reveal="down"]{ transform: translate3d(0, -18px, 0); }
.df-reveal[data-reveal="up"]{ transform: translate3d(0, 18px, 0); }
.df-reveal[data-reveal="left"]{ transform: translate3d(18px, 0, 0); }
.df-reveal[data-reveal="right"]{ transform: translate3d(-18px, 0, 0); }
.df-reveal[data-reveal="zoom"]{ transform: translate3d(0, 0, 0) scale(.98); }

.df-reveal.is-visible{
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* --- Elevation & soft hover lift (applies once JS tags elements) --- */
.df-card{
  transition: transform 420ms var(--df-ease), box-shadow 420ms var(--df-ease), border-color 420ms var(--df-ease);
  will-change: transform, box-shadow;
}

.df-card:hover{
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 16px 40px rgba(2, 8, 23, .10);
}

/* --- Tilt (JS drives CSS vars) --- */
.df-tilt{
  transform-style: preserve-3d;
  transition: transform 220ms var(--df-ease);
  will-change: transform;
}

.df-tilt.df-tilting{
  transform: perspective(900px) rotateX(var(--df-rx, 0deg)) rotateY(var(--df-ry, 0deg)) translate3d(0,-3px,0);
}

/* --- Buttons: ripple + subtle shine --- */
.df-btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.df-btn::after{
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  transform: translateX(-40%) rotate(12deg);
  opacity: 0;
  transition: opacity 420ms var(--df-ease), transform 700ms var(--df-ease);
  pointer-events: none;
}

.df-btn:hover::after{
  opacity: .9;
  transform: translateX(10%) rotate(12deg);
}

.df-ripple{
  position: absolute;
  border-radius: 999px;
  transform: scale(0);
  opacity: .5;
  background: rgba(255,255,255,.65);
  animation: dfRipple 520ms var(--df-ease) forwards;
  pointer-events: none;
}

@keyframes dfRipple{
  to{ transform: scale(1); opacity: 0; }
}

/* --- Header chrome (JS toggles these classes) --- */
.df-chrome{
  transition: transform 520ms var(--df-ease), box-shadow 520ms var(--df-ease), backdrop-filter 520ms var(--df-ease);
}

.df-header--scrolled{
  box-shadow: 0 12px 38px rgba(2, 8, 23, .22);
  backdrop-filter: blur(10px);
}

.df-header--hidden{
  transform: translate3d(0, -110%, 0);
}

/* --- Top progress bar --- */
#df-progress{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
}

#df-progress .df-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(88,168,208,.35), rgba(88,168,208,1));
}

/* --- Back-to-top --- */
#df-backtop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
  box-shadow: 0 18px 44px rgba(2, 8, 23, .14);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 420ms var(--df-ease), transform 420ms var(--df-ease);
}

html.dark #df-backtop{
  background: rgba(15,23,42,.75);
  border-color: rgba(148,163,184,.22);
}

#df-backtop.is-visible{
  opacity: 1;
  transform: none;
}

#df-backtop:hover{ transform: translate3d(0,-2px,0); }

/* --- Page transitions --- */
body.df-page-out{
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .df-reveal{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .df-card{ transition: none !important; }
  .df-btn::after{ display: none; }
  #df-backtop, #df-progress{ display: none; }
  .df-chrome{ transition: none !important; }
}

/* --- Aurora background (injected by JS into hero sections) --- */
.df-aurora{
  position:absolute;
  inset:-40% -30% auto -30%;
  height: 380px;
  pointer-events:none;
  opacity:.85;
  filter: blur(40px) saturate(120%);
  transform: translate3d(0,0,0);
}

.df-aurora::before,
.df-aurora::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 35%, rgba(88,168,208,.55), rgba(88,168,208,0) 55%),
    radial-gradient(circle at 70% 40%, rgba(0,58,112,.35), rgba(0,58,112,0) 55%),
    radial-gradient(circle at 55% 75%, rgba(88,168,208,.22), rgba(88,168,208,0) 60%);
  animation: dfAurora 12s var(--df-ease) infinite;
}

.df-aurora::after{
  opacity:.7;
  animation-duration: 16s;
  animation-direction: reverse;
}

@keyframes dfAurora{
  0%{ transform: translate3d(-4%, -2%, 0) rotate(-6deg) scale(1); }
  50%{ transform: translate3d(3%, 2%, 0) rotate(6deg) scale(1.03); }
  100%{ transform: translate3d(-4%, -2%, 0) rotate(-6deg) scale(1); }
}

html.dark .df-aurora{ opacity:.55; }

/* Subtle mobile nav dropdown (no scrollspy, no focus trap) */
.df-nav-toggle{ display:none; }

@media (max-width: 1023px){
  header.df-chrome{ position: sticky; }
  header.df-chrome > div{ position: relative; }

  .df-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
  }
  .df-nav-toggle:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
  .df-nav-toggle:active{ transform: scale(.98); }
  .df-nav-toggle svg{ width:20px; height:20px; }

  header.df-chrome nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:60;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding: 10px 14px 14px;
    background: #002b55;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);

    opacity:0;
    transform: translate3d(0,-10px,0);
    max-height:0;
    overflow:hidden;
    pointer-events:none;
    transition: opacity 220ms ease, transform 220ms ease, max-height 260ms ease;
  }

  header.df-chrome nav > a{
    display:flex;
    width:100%;
    justify-content:flex-start;
    opacity:0;
    transform: translate3d(0,-6px,0);
    transition: opacity 220ms ease, transform 220ms ease;
  }
  header.df-chrome nav > a.inline-flex{
    justify-content:center;
  }
  header.df-chrome nav > a.ml-1{ margin-left:0 !important; }

  header.df-nav-open nav{
    opacity:1;
    transform: translate3d(0,0,0);
    max-height: 70vh;
    pointer-events:auto;
  }

  header.df-nav-open nav > a{
    opacity:1;
    transform:none;
  }

  header.df-nav-open nav > a:nth-child(1){ transition-delay: 20ms; }
  header.df-nav-open nav > a:nth-child(2){ transition-delay: 40ms; }
  header.df-nav-open nav > a:nth-child(3){ transition-delay: 60ms; }
  header.df-nav-open nav > a:nth-child(4){ transition-delay: 80ms; }
  header.df-nav-open nav > a:nth-child(5){ transition-delay: 100ms; }
  header.df-nav-open nav > a:nth-child(6){ transition-delay: 120ms; }
  header.df-nav-open nav > a:nth-child(7){ transition-delay: 140ms; }
  header.df-nav-open nav > a:nth-child(8){ transition-delay: 160ms; }
}

/* Ensure page is visible when restored from bfcache */
html:not(.df-page-transitioning) body{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  header.df-chrome nav,
  header.df-chrome nav > a{ transition: none !important; transform: none !important; }
}