/* iMake motion system — Phase 7
   Calm, short, transform/opacity only. */

:root{
  --motion-fast:180ms;
  --motion-mid:320ms;
  --motion-slow:460ms;
  --motion-ease:cubic-bezier(.22, 1, .36, 1);
}

html{
  overflow-x:clip;
}

/* Buttons / links */

.btn .btn-icon,
.btn-ghost .btn-icon,
.text-link span[aria-hidden]{
  display:inline-block;
  margin-left:.35rem;
  transition:transform var(--motion-fast) var(--motion-ease);
}

.text-link,
.need-row__actions a,
.work .text-link,
.svc .text-link{
  background-image:linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-size var(--motion-mid) var(--motion-ease),
    border-color var(--motion-mid) var(--motion-ease);
}

@media(hover:hover) and (pointer:fine){
  .btn:hover .btn-icon,
  .btn-ghost:hover .btn-icon,
  .text-link:hover span[aria-hidden]{
    transform:translateX(4px);
  }

  .btn:hover,
  a.btn:hover{
    transform:translateY(-1px);
  }

  .text-link:hover,
  .need-row__actions a:hover{
    background-size:100% 1px;
  }
}

.btn:focus-visible,
.btn-ghost:focus-visible,
.start-product:focus-within,
.need-pick:focus-within,
.site-nav a:focus-visible,
.nav-screen a:focus-visible,
.apple-seg__btn:focus-visible,
.menu-toggle:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Nav dropdown */

.site-nav__sub{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

.site-nav__group:hover .site-nav__sub,
.site-nav__group:focus-within .site-nav__sub{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

.site-nav > a,
.site-nav__group > a{
  position:relative;
}

.site-nav > a::after,
.site-nav__group > a::after{
  content:"";
  position:absolute;
  left:.8rem;
  right:.8rem;
  bottom:.28rem;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--motion-mid) var(--motion-ease);
}

.site-nav > a:hover::after,
.site-nav__group:hover > a::after,
.site-nav [aria-current="page"]::after{
  transform:scaleX(1);
}

.site-nav .btn::after,
.site-nav__cta::after{ display:none; }

.site-header{
  transition:
    background var(--motion-mid) var(--motion-ease),
    border-color var(--motion-mid) var(--motion-ease),
    box-shadow var(--motion-mid) var(--motion-ease);
}

.site-header.is-scrolled{
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.menu-toggle__icon i{
  transition:transform var(--motion-fast) var(--motion-ease);
}

body.nav-open .menu-toggle__icon i:first-child{
  transform:translateY(3px) rotate(45deg);
}

body.nav-open .menu-toggle__icon i:last-child{
  transform:translateY(-3px) rotate(-45deg);
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible{
  border-color:rgba(255,122,0,.6);
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.apple-seg__btn{
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

/* Mobile menu */

@media(max-width:1119px){
  .nav-backdrop.is-open{
    animation:imakeFade var(--motion-mid) var(--motion-ease);
  }

  .nav-screen.is-open{
    animation:imakeRise var(--motion-slow) var(--motion-ease);
  }

  .nav-screen.is-open .nav-screen__links a{
    animation:imakeRise var(--motion-slow) var(--motion-ease) both;
  }

  .nav-screen.is-open .nav-screen__links a:nth-child(1){ animation-delay:40ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(2){ animation-delay:70ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(3){ animation-delay:90ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(4){ animation-delay:110ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(5){ animation-delay:130ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(6){ animation-delay:150ms; }
  .nav-screen.is-open .nav-screen__links a:nth-child(7){ animation-delay:170ms; }
  .nav-screen.is-open .nav-screen__cta{ animation:imakeRise var(--motion-slow) var(--motion-ease) 200ms both; }
}

@keyframes imakeFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes imakeRise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

@keyframes imakeNotice{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:none; }
}

@keyframes imakeShake{
  from, to{ transform:none; }
  35%{ transform:translateX(-3px); }
  70%{ transform:translateX(3px); }
}

/* Reveals — content stays readable if JS/CSS fail */

html.js-reveal-ready .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}

html.js-reveal-ready .reveal.is-visible{
  opacity:1;
  transform:none;
}

/* FAQ / notices */

.faq-chevron{
  background:transparent !important;
  border-color:var(--line) !important;
  color:var(--muted) !important;
  transition:transform var(--motion-mid) var(--motion-ease), color var(--motion-mid) var(--motion-ease);
}

.faq-card.open .faq-chevron{
  background:transparent !important;
  color:var(--paper) !important;
}

.notice.error,
.notice.success{
  animation:imakeNotice var(--motion-mid) var(--motion-ease);
}

.notice.error.is-shake{
  animation:imakeShake var(--motion-mid) var(--motion-ease);
}

/* Builder / contact steps */

.js .start-step.is-active,
.js .starter-step.is-active{
  animation:imakeRise var(--motion-mid) var(--motion-ease);
}

.start-progress,
.starter-progress{
  position:relative;
}

.start-progress::after,
.starter-progress::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  width:var(--progress, 25%);
  background:var(--accent);
  pointer-events:none;
  transition:width var(--motion-mid) var(--motion-ease);
}

.start-progress [aria-current="step"],
.starter-progress [aria-current="step"]{
  transition:border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

/* Shared editorial hovers */

@media(hover:hover) and (pointer:fine){
  .need-split__item,
  .svc-line,
  .about-points li,
  .price-row,
  .need-pick,
  .start-product,
  .start-opt{
    transition:
      transform var(--motion-mid) var(--motion-ease),
      border-color var(--motion-mid) var(--motion-ease),
      background var(--motion-mid) var(--motion-ease);
  }

  .need-split__item:hover{
    transform:translateX(.3rem);
  }

  .need-split__item p,
  .svc-line span:not(.badge),
  .need-row p{
    transition:color var(--motion-mid) var(--motion-ease);
  }

  .need-split__item:hover p,
  .svc-line:hover span:not(.badge),
  .need-row:hover p{
    color:var(--paper);
  }

  .case-next a{
    transition:transform var(--motion-mid) var(--motion-ease);
  }

  .case-next a:hover{
    transform:translateY(-2px);
  }
}

/* Mobile safety */

@media(max-width:430px){
  .btn,
  .btn-ghost,
  a.btn,
  a.btn-ghost,
  .start-opt,
  .apple-seg__btn{
    min-height:48px;
  }

  .home-hero,
  .work,
  .svc,
  .convert,
  .start{
    overflow-x:clip;
  }
}

@media(max-width:375px){
  .home-hero,
  .home-hero__stage,
  .work,
  .svc,
  .convert,
  .start{
    overflow-x:clip;
  }
}

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  html.home-motion:not(.home-motion-ready) .home-hero .eyebrow,
  html.home-motion:not(.home-motion-ready) .home-hero__sub,
  html.home-motion:not(.home-motion-ready) .home-hero__lead,
  html.home-motion:not(.home-motion-ready) .home-hero .btns,
  html.home-motion:not(.home-motion-ready) .home-hero .line > span,
  html.home-motion:not(.home-motion-ready) .home-hero .device,
  html.js-reveal-ready .reveal,
  html.js-reveal-ready .reveal.is-visible{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    --dev-op:1 !important;
    --rise:0px !important;
  }

  .nav-backdrop.is-open,
  .nav-screen.is-open,
  .nav-screen.is-open .nav-screen__links a,
  .nav-screen.is-open .nav-screen__cta,
  .notice.error,
  .notice.success,
  .notice.error.is-shake,
  .js .start-step.is-active,
  .js .starter-step.is-active{
    animation:none !important;
  }

  .btn .btn-icon,
  .btn-ghost .btn-icon,
  .site-nav__sub,
  .site-nav > a::after,
  .site-nav__group > a::after,
  .site-header,
  .faq-chevron,
  .start-progress::after,
  .starter-progress::after,
  .menu-toggle__icon i,
  .text-link,
  .need-row__actions a{
    transition:none !important;
  }

  .site-nav > a::after,
  .site-nav__group > a::after{
    transform:scaleX(0);
  }

  .site-nav [aria-current="page"]::after{
    transform:scaleX(1);
  }
}