/* transitions.dev modal and anchored dropdown motion. */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}

:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

:root{--duration-quick:150ms;--duration-fast:250ms;--duration-slow:400ms;--duration-very-slow:500ms;--ease-smooth-out:cubic-bezier(0.22,1,0.36,1)}
@media(hover:hover) and (pointer:fine){
 .feature-card,.product{transition:transform var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out)}
 .feature-card:hover,.product:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(83,39,56,.08)}
 .feature-card .round-arrow,.text-link .icon,.primary-link .icon{transition:transform var(--duration-fast) var(--ease-smooth-out)}
 .feature-card:hover .round-arrow{transform:translateX(3px)}
 .text-link:hover .icon,.primary-link:hover .icon{transform:translateX(3px)}
 .btn,.nav-start,.mail-button{transition:transform var(--duration-quick) var(--ease-smooth-out),background-color var(--duration-quick) ease}
 .btn:active,.nav-start:active,.mail-button:active{transform:scale(.98)}
}
.field input,.field textarea{transition:border-color var(--duration-quick) ease,box-shadow var(--duration-quick) ease}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.mail-dialog::backdrop{transition:opacity var(--modal-open-dur) var(--modal-ease)}
.mail-dialog.is-closing::backdrop{opacity:0}
@media(prefers-reduced-motion:reduce){
 .feature-card,.product,.feature-card .round-arrow,.text-link .icon,.primary-link .icon,.btn,.nav-start,.mail-button,.field input,.field textarea,.mail-dialog::backdrop{transition:none!important;transform:none!important}
}