/* LoadDone landing — animation layer (additive).
   Loaded after the page styles. Every initial hidden state is gated on
   html.ld-anim, which animations.js adds — remove both files and the page
   is byte-for-byte the original design. Only transform, opacity,
   stroke-dashoffset and background-position are animated. */

/* ---------- Hero entrance ---------- */
html.ld-anim .ld-line { display: block; overflow: hidden; }
html.ld-anim .ld-line-in {
  display: block;
  transform: translateY(110%);
  animation: ld-line-up .9s cubic-bezier(.2,.8,.2,1) forwards;
}
html.ld-anim .ld-line:nth-child(3) .ld-line-in { animation-delay: .12s; }
html.ld-anim .ld-line:nth-child(5) .ld-line-in { animation-delay: .24s; }
@keyframes ld-line-up { to { transform: translateY(0); } }

html.ld-anim .hero .eyebrow,
html.ld-anim .hero .intro,
html.ld-anim .hero .actions,
html.ld-anim .hero .micro {
  opacity: 0;
  animation: ld-fade-up .8s cubic-bezier(.2,.8,.2,1) forwards;
}
html.ld-anim .hero .eyebrow { animation-delay: .3s; }
html.ld-anim .hero .intro   { animation-delay: .4s; }
html.ld-anim .hero .actions { animation-delay: .5s; }
html.ld-anim .hero .micro   { animation-delay: .6s; }
@keyframes ld-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow dot pulse ring */
.hero .eyebrow { position: relative; }
.hero .eyebrow:after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  border: 1.5px solid var(--red); pointer-events: none;
  animation: ld-ring 2.2s ease-out infinite;
}
@keyframes ld-ring {
  0%   { transform: scale(1);  opacity: .8; }
  70%  { transform: scale(3);  opacity: 0; }
  100% { transform: scale(3);  opacity: 0; }
}

/* ---------- Buttons: shine sweep, hover lift, arrow nudge ---------- */
.btn { position: relative; overflow: hidden; }
.btn:after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-170%) skewX(-18deg); pointer-events: none;
  animation: ld-shine 4s ease-in-out infinite;
}
@keyframes ld-shine {
  0%, 55%  { transform: translateX(-170%) skewX(-18deg); }
  85%, 100% { transform: translateX(340%) skewX(-18deg); }
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(23,28,39,.22); }
.btn span[aria-hidden="true"] { display: inline-block; transition: transform .25s ease; }
.btn:hover span[aria-hidden="true"] { transform: translate(3px,-3px); }

/* ---------- Phone mockup ---------- */
/* Breathing glow behind the phone */
.preview-space:before {
  content: ''; position: absolute; inset: 0; border-radius: 32px;
  background: radial-gradient(ellipse at 55% 50%, rgba(233,0,50,.20) 0%, rgba(233,0,50,.06) 45%, transparent 72%);
  animation: ld-breathe 6s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes ld-breathe { from { transform: scale(1); } to { transform: scale(1.12); } }
.preview-space .app { position: relative; z-index: 1; }

/* Float (independent translate property, composes with tilt transform) */
html.ld-anim .app { animation: ld-float 6s ease-in-out infinite alternate; }
@keyframes ld-float { from { translate: 0 0; } to { translate: 0 -14px; } }
/* Pointer tilt (JS sets --rx/--ry, only on fine pointers) */
html.ld-tilt .app {
  transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(1deg);
  transition: transform .35s ease-out;
}
@media (max-width: 760px) {
  html.ld-tilt .app { transform: perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(0deg); }
}

/* Map stripes pan sideways */
.routemap:before { animation: ld-pan 12s linear infinite; }
@keyframes ld-pan { from { background-position: 0 0, 0 0; } to { background-position: 28px 0, 28px 0; } }

/* Route: red line draws itself; gray dashes march.
   The classes are added by animations.js (exact attribute values are
   case-normalized differently across engines, so JS matches them). */
.routemap svg path.ld-route-red {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: ld-draw 2.6s cubic-bezier(.4,0,.2,1) .8s forwards;
}
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
.routemap svg path.ld-route-gray { animation: ld-march 1.1s linear infinite; }
@keyframes ld-march { to { stroke-dashoffset: -10; } }

/* "Plan ready" pill */
.pill { display: inline-block; animation: ld-pill 2.6s ease-in-out infinite; }
@keyframes ld-pill { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Timeline auto-advance states */
.timeline .stop { transition: transform .5s ease; }
.timeline .stop.ld-active { transform: translateX(4px); }
.timeline .stop .dot { transition: background .4s ease, outline-color .4s ease; }
.timeline .stop.ld-active .dot { background: var(--red); outline-color: #fbaabc; }
.timeline .stop .status { opacity: 0; transition: opacity .4s ease; }
.timeline .stop.ld-active .status { opacity: 1; }
.timeline .stop:not(:last-child):after {
  content: ''; position: absolute; left: 5px; top: 16px; height: 49px; width: 1px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .6s ease;
}
.timeline .stop.ld-passed:after { transform: scaleY(1); }
.app-tabs button { transition: color .4s ease, background .4s ease; }
.app-tabs button.ld-tab-on { color: var(--red); background: #fff0f3; }

/* "From message to plan." toast loop */
html.ld-anim .float { animation: ld-toast 7s ease-in-out infinite; }
@keyframes ld-toast {
  0%       { transform: translateX(-26px); opacity: 0; }
  10%, 78% { transform: translateX(0);     opacity: 1; }
  92%, 100% { transform: translateX(0);    opacity: 0; }
}

/* ---------- Scroll progress + nav shadow ---------- */
.ld-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--red); transform-origin: left; transform: scaleX(0);
  z-index: 40; pointer-events: none;
}
.header { transition: box-shadow .3s ease; }
.header.ld-scrolled { box-shadow: 0 8px 28px rgba(23,28,39,.09); }

/* ---------- Scroll reveal ---------- */
html.ld-anim [data-anim="reveal"] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
html.ld-anim [data-anim="reveal"].ld-in { opacity: 1; transform: translateY(0); }

/* ---------- Benefits strip ---------- */
.benefits i { display: inline-block; animation: ld-bob 5s ease-in-out infinite alternate; }
.benefits > div:nth-child(2) i { animation-delay: .7s; }
.benefits > div:nth-child(3) i { animation-delay: 1.4s; }
.benefits > div:nth-child(4) i { animation-delay: 2.1s; }
@keyframes ld-bob {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-4px) rotate(8deg); }
}
.benefits > div { transition: transform .25s ease; }
.benefits > div:hover { transform: translateY(-3px); }

/* ---------- Workflow steps ---------- */
.step { position: relative; transition: transform .3s ease; }
.step:hover { transform: translateX(12px); }
.step:before {
  content: ''; position: absolute; top: -1px; left: 0; height: 2px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: left; opacity: 0;
}
html.ld-anim [data-anim="reveal"].step.ld-in:before { animation: ld-line-draw 1.4s ease .15s forwards; }
@keyframes ld-line-draw {
  0%   { transform: scaleX(0); opacity: 1; }
  65%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------- Demo typing + plan rows ---------- */
.ld-cursor {
  display: inline-block; width: 8px; height: 14px; margin-left: 2px;
  background: var(--red); vertical-align: -2px;
  animation: ld-blink 1s steps(1) infinite;
}
@keyframes ld-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.demo-line { transition: opacity .5s ease, transform .5s ease; }
.ld-typing .demo-line { opacity: 0; transform: translateX(24px); }
.ld-typing .demo-line.ld-row-in { opacity: 1; transform: translateX(0); }

/* ---------- Dark features ---------- */
.feature { position: relative; overflow: hidden; transition: transform .3s ease, border-color .3s ease; }
.feature:hover { transform: translateY(-6px); border-color: var(--red); }
.feature:before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--x,50%) var(--y,50%), rgba(233,0,50,.20), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.feature:hover:before { opacity: 1; }
.feature .icon { display: inline-block; animation: ld-bob 5.5s ease-in-out infinite alternate; }
.feature:nth-child(2) .icon { animation-delay: 1.2s; }
.dispatch-flow b { display: inline-block; animation: ld-nudge 1.3s ease-in-out infinite alternate; }
@keyframes ld-nudge { from { transform: translateX(0); } to { transform: translateX(5px); } }
.trucktags span { display: inline-block; transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.trucktags span:hover { transform: translateY(-3px); background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- FAQ smooth accordion ---------- */
details { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .4s ease; }
details[open] { grid-template-rows: auto 1fr; }
details > p { overflow: hidden; min-height: 0; }
summary:after { transition: transform .4s ease, color .4s ease; }
details[open] summary:after { content: '+'; transform: rotate(135deg); color: var(--red); }

/* ---------- Closing CTA light sweep ---------- */
.cta { position: relative; overflow: hidden; }
.cta > * { position: relative; z-index: 1; }
.cta:after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.20), transparent);
  transform: translateX(-180%) skewX(-16deg); pointer-events: none;
  animation: ld-sweep 5s ease-in-out infinite;
}
@keyframes ld-sweep {
  0%, 55%   { transform: translateX(-180%) skewX(-16deg); }
  90%, 100% { transform: translateX(420%) skewX(-16deg); }
}

/* ---------- Mobile drawer: max-height transition ---------- */
@media (max-width: 760px) {
  .navlinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
    visibility: hidden;
    transition: max-height .45s ease, padding-top .45s ease, padding-bottom .45s ease, visibility 0s linear .45s;
  }
  .navlinks.open {
    max-height: 360px; padding-top: 20px; padding-bottom: 20px; visibility: visible;
    transition: max-height .45s ease, padding-top .45s ease, padding-bottom .45s ease, visibility 0s;
  }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ld-anim *, html.ld-anim *:before, html.ld-anim *:after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.ld-anim [data-anim="reveal"],
  html.ld-anim .hero .eyebrow, html.ld-anim .hero .intro,
  html.ld-anim .hero .actions, html.ld-anim .hero .micro { opacity: 1 !important; transform: none !important; }
  html.ld-anim .ld-line-in { transform: none !important; }
  .routemap svg path.ld-route-red { stroke-dashoffset: 0 !important; }
  .timeline .stop .status { opacity: 1 !important; }
  .timeline .stop { transform: none !important; }
}