/* Small, finite movements. Every element remains usable without JavaScript. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-soft: cubic-bezier(.2, .65, .3, 1);
}

.site-header {
  transition: box-shadow .35s ease, border-color .35s ease;
}
.site-header.has-scrolled {
  border-bottom-color: #dce5e899;
  box-shadow: 0 7px 28px #263f4a0a;
}
.reading-progress {
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  bottom: -1px;
  background: var(--blue);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
}

@keyframes canan-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes canan-hero-settle {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}
@keyframes canan-scroll-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@keyframes canan-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes canan-dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes canan-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .hero-image {
    animation: canan-hero-settle 5s var(--motion-soft) backwards;
  }
  .motion-enabled .hero-content > * {
    animation: canan-rise .85s var(--motion-ease) backwards;
  }
  .motion-enabled .hero-content > :nth-child(1) { animation-delay: .06s; }
  .motion-enabled .hero-content > :nth-child(2) { animation-delay: .16s; }
  .motion-enabled .hero-content > :nth-child(3) { animation-delay: .27s; }
  .motion-enabled .hero-content > :nth-child(4) { animation-delay: .38s; }
  .motion-enabled .hero-content > :nth-child(5) { animation-delay: .46s; }
  .motion-enabled .hero-scroll {
    animation: canan-fade-in .8s .65s backwards;
  }
  .motion-enabled .hero-scroll span {
    animation: canan-scroll-hint 1.6s .8s 2;
  }
  .motion-enabled .trust-strip > span {
    animation: canan-rise .7s .45s var(--motion-ease) backwards;
  }
  .motion-enabled .trust-strip > span:nth-of-type(2) { animation-delay: .55s; }
  .motion-enabled .trust-strip > span:nth-of-type(3) { animation-delay: .65s; }
  .detail-dialog[open] {
    animation: canan-dialog-in .34s var(--motion-ease) backwards;
  }
  .detail-dialog[open]::backdrop {
    animation: canan-fade-in .28s ease backwards;
  }
  .form-status:not(:empty) {
    animation: canan-rise .35s var(--motion-ease) backwards;
  }
}

.button {
  transition: transform .3s var(--motion-ease), background .3s ease, box-shadow .3s ease;
}
.button svg, .card-link svg, .service-extra .circle-arrow, .back-top {
  transition: transform .4s var(--motion-ease), background .25s ease, color .25s ease;
}
.main-nav a {
  transition: color .25s ease, background .25s ease;
  border-radius: 28px;
}
.service-card, .service-extra, .detail-card {
  transition: transform .45s var(--motion-ease), box-shadow .45s ease, border-color .3s ease;
}
.service-card > img, .detail-card > img, .about-visual > img {
  transition: transform .85s var(--motion-ease);
}
.image-caption {
  transition: transform .65s var(--motion-ease), box-shadow .65s ease;
}
.field input, .field select, .field textarea {
  transition: box-shadow .25s ease, border-color .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 5px #89c0d326;
}
.button:active:not(:disabled), .menu-toggle:active {
  transform: translateY(0) scale(.98);
}
.dialog-close {
  transition: background .25s ease, transform .3s var(--motion-ease);
}

/* Hover effects run on devices with a real pointer, avoiding sticky touch states. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .main-nav a:hover { background: #ffffff10; }
  .button:hover:not(:disabled) { box-shadow: 0 8px 22px #132c3a1c; }
  .button:hover:not(:disabled) svg { transform: translateX(4px); }
  .service-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px #263f4a20; }
  .service-card:hover > img { transform: scale(1.045); }
  .service-card:hover .card-link svg { transform: translateX(4px); }
  .service-extra:hover, .detail-card:hover {
    transform: translateY(-4px);
    border-color: #89c0d3;
    box-shadow: 0 12px 26px #263f4a0e;
  }
  .detail-card:hover > img { transform: scale(1.025); }
  .service-extra:hover .circle-arrow { transform: rotate(-35deg); }
  .about-visual:hover > img { transform: scale(1.012); }
  .about-visual:hover .image-caption {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px #263f4a1c;
  }
  .dialog-close:hover { transform: rotate(90deg); background: #dcebef; }
  .back-top:hover { transform: translateY(-4px); }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .main-nav.open { animation: canan-menu-in .32s var(--motion-ease) backwards; }
  .main-nav.open a { animation: canan-rise .4s var(--motion-ease) backwards; }
  .main-nav.open a:nth-child(2) { animation-delay: .025s; }
  .main-nav.open a:nth-child(3) { animation-delay: .05s; }
  .main-nav.open a:nth-child(4) { animation-delay: .075s; }
  .main-nav.open a:nth-child(5) { animation-delay: .1s; }
  .main-nav.open a:nth-child(6) { animation-delay: .125s; }
  .main-nav.open a:nth-child(7) { animation-delay: .15s; }
}

@media (hover: none), (pointer: coarse) {
  .service-card:hover > img, .detail-card:hover, .button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reading-progress { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .service-card:hover, .service-card:hover > img, .detail-card:hover,
  .button:hover, .button:active:not(:disabled), .menu-toggle:active, .text-link:hover svg {
    transform: none;
  }
}