/* AmirParviz Design System — Canonical Interaction & Motion System — RC18
   Load AFTER canonical-rc16.css.
   Canonical AmirParviz behavior, motion and accessibility contracts. */

:root,
[data-theme="amirparviz-brand-light"]{
  /* Semantic motion roles */
  --th-motion-feedback:100ms;
  --th-motion-state:160ms;
  --th-motion-ui:180ms;
  --th-motion-spatial:280ms;
  --th-motion-crossfade:120ms;
  --th-motion-fast:var(--th-motion-ui); /* RC16 compatibility alias */

  --th-ease-standard:cubic-bezier(.2,0,0,1);
  --th-ease-enter:cubic-bezier(.16,1,.3,1);
  --th-ease-exit:cubic-bezier(.7,0,.84,0);

  /* Spring metadata is consumed by components/interaction.js. */
  --th-spring-standard-damping:1;
  --th-spring-standard-response:.35;
  --th-spring-momentum-damping:.8;
  --th-spring-momentum-response:.35;
  --th-gesture-hysteresis:10px;
  --th-gesture-rubberband:.55;
  --th-gesture-deceleration:.998;

  /* Optional floating material. Flat surfaces remain canonical by default. */
  --th-material-floating-bg:rgba(255,255,255,.90);
  --th-material-floating-blur:14px;
  --th-material-floating-border:rgba(201,203,214,.78);
  --th-material-floating-shadow:0 14px 38px -20px rgba(0,0,91,.32);
}

/* Preserve RC16 visual scale while allowing browser/user root-size scaling. */
.th-type-body{font-size:1rem}
.th-type-body-lg{font-size:1.125rem}
.th-type-small{font-size:.875rem}
.th-type-h4{font-size:1.25rem}
.th-type-h2{font-size:1.75rem}
.th-type-h1,.th-display-hero{font-size:2.5rem}
.th-reading{font-size:1.125rem}
.th-btn{font-size:1rem}
.th-btn--sm{font-size:.875rem}
.th-field__label{font-size:.9375rem}
.th-input,.th-select,.th-textarea{font-size:1rem}

/* Persian connected script does not inherit Latin negative-tracking heuristics. */
:lang(fa),[lang="fa"]{letter-spacing:normal}

/* Immediate press feedback. The semantic action still commits through native activation. */
.th-btn,
.th-icon-btn,
.th-tab,
.th-menu__item,
.th-context-menu__item,
.th-command__item,
.th-nav-menu__link,
.th-nav-menu__trigger,
.th-toast__close{
  transition-property:background-color,color,border-color,box-shadow,opacity,transform;
  transition-duration:var(--th-motion-state),var(--th-motion-state),var(--th-motion-state),var(--th-motion-state),var(--th-motion-state),var(--th-motion-feedback);
  transition-timing-function:var(--th-ease-standard);
}
.th-btn:not([disabled]):active,
.th-icon-btn:not([disabled]):active,
.th-tab:not([disabled]):active,
.th-menu__item:not([disabled]):active,
.th-context-menu__item:not([disabled]):active,
.th-command__item:not([disabled]):active,
.th-nav-menu__link:active,
.th-nav-menu__trigger:not([disabled]):active,
.th-toast__close:not([disabled]):active{
  transform:scale(.985);
  filter:none;
}

/* Entire-card press is only canonical when the whole card is semantically actionable. */
.th-card--interactive:is(a,[role="link"],[role="button"]):active,
.th-service-card:is(a,[role="link"],[role="button"]):active,
.th-benefit-card:is(a,[role="link"],[role="button"]):active,
.th-post-card:is(a,[role="link"],[role="button"]):active{
  transform:translateY(0) scale(.995);
  transition-duration:var(--th-motion-feedback);
}

/* Busy controls preserve geometry and expose state without decorative motion. */
.th-btn[aria-busy="true"],.th-icon-btn[aria-busy="true"]{cursor:progress}
.th-btn[aria-busy="true"]::after{
  content:"";
  width:1em;height:1em;border-radius:50%;
  border:2px solid currentColor;border-inline-end-color:transparent;
  animation:th-motion-spin .72s linear infinite;
}
@keyframes th-motion-spin{to{transform:rotate(360deg)}}

/* Optional floating material: never the default card/surface style. */
.th-material--floating{
  background:var(--th-material-floating-bg)!important;
  border-color:var(--th-material-floating-border)!important;
  backdrop-filter:blur(var(--th-material-floating-blur)) saturate(135%);
  -webkit-backdrop-filter:blur(var(--th-material-floating-blur)) saturate(135%);
  box-shadow:var(--th-material-floating-shadow)!important;
}

/* Spatial fallback if the optional interaction runtime is not present. */
html:not(.th-interaction-runtime) .th-dialog[open]{animation:th-motion-dialog-in var(--th-motion-ui) var(--th-ease-enter)}
html:not(.th-interaction-runtime) .th-overlay-dialog[open] .th-sheet{animation:th-motion-sheet-in var(--th-motion-spatial) var(--th-ease-enter)}
html:not(.th-interaction-runtime) .th-overlay-dialog[open] .th-drawer{animation:th-motion-drawer-in var(--th-motion-spatial) var(--th-ease-enter)}
@keyframes th-motion-dialog-in{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
@keyframes th-motion-sheet-in{from{opacity:.65;transform:translateX(-24px)}to{opacity:1;transform:none}}
[dir="ltr"] html:not(.th-interaction-runtime) .th-overlay-dialog[open] .th-sheet,
html[dir="ltr"]:not(.th-interaction-runtime) .th-overlay-dialog[open] .th-sheet{animation-name:th-motion-sheet-in-ltr}
@keyframes th-motion-sheet-in-ltr{from{opacity:.65;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes th-motion-drawer-in{from{opacity:.65;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Runtime owns spatial enter/exit when present, avoiding competing animations. */
html.th-interaction-runtime .th-dialog[open],
html.th-interaction-runtime .th-overlay-dialog[open] .th-sheet,
html.th-interaction-runtime .th-overlay-dialog[open] .th-drawer,
html.th-interaction-runtime .th-command[open]{animation:none!important}

/* Optional draggable drawer affordance. The runtime only enables drag when data-th-draggable is present. */
.th-drawer[data-th-draggable="true"]{touch-action:pan-x;will-change:transform}
.th-drawer [data-th-drag-handle]{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.th-drawer[data-th-dragging="true"] [data-th-drag-handle]{cursor:grabbing}

/* Popover remains visually AmirParviz; RC17 only improves source-aware motion where supported. */
.th-popover__panel{
  transform-origin:var(--th-popover-origin-x,100%) var(--th-popover-origin-y,0%);
}
.th-popover__panel:not([hidden]){animation:th-motion-popover-in var(--th-motion-state) var(--th-ease-enter)}
@keyframes th-motion-popover-in{from{opacity:0;transform:translateY(-3px) scale(.985)}to{opacity:1;transform:none}}

/* Accessibility: reduced motion keeps informative feedback but removes spatial/spring movement. */
@media(prefers-reduced-motion:reduce){
  .th-btn,.th-icon-btn,.th-tab,.th-menu__item,.th-context-menu__item,.th-command__item,.th-nav-menu__link,.th-nav-menu__trigger,.th-toast__close,
  .th-card--interactive,.th-service-card,.th-benefit-card,.th-post-card{
    transform:none!important;
    transition-property:background-color,color,border-color,box-shadow,opacity!important;
    transition-duration:var(--th-motion-crossfade)!important;
  }
  .th-dialog[open],.th-overlay-dialog[open] .th-sheet,.th-overlay-dialog[open] .th-drawer,.th-command[open],.th-popover__panel:not([hidden]),.th-toast{
    animation:none!important;
    transform:none!important;
  }
  .th-btn[aria-busy="true"]::after{animation:none;border-inline-end-color:currentColor;opacity:.55}
  .th-drawer[data-th-draggable="true"]{will-change:auto}
}

/* Progressive enhancement: solid material fallback when transparency is reduced. */
@media(prefers-reduced-transparency:reduce){
  .th-material--floating,.th-dialog,.th-sheet,.th-drawer,.th-command,.th-popover__panel{
    background:var(--th-surface)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* High contrast preserves brand but strengthens structure and focus. */
@media(prefers-contrast:more){
  .th-btn:focus-visible,.th-icon-btn:focus-visible,.th-tab:focus-visible,
  .th-input:focus,.th-select:focus,.th-textarea:focus{
    outline-width:3px!important;
    outline-color:var(--th-brand-navy)!important;
  }
  .th-card,.th-service-card,.th-benefit-card,.th-post-card,.th-dialog,.th-sheet,.th-drawer,.th-popover__panel,.th-toast{
    border-color:var(--th-neutral-strong)!important;
  }
  .th-material--floating{background:var(--th-surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}