/* ─────────────────────────────────────────────────────────────────────────────
 * _shared/micro-interactions.css — unified micro-interaction system
 *
 * Provides consistent transitions and animations for:
 * - Page load entrance
 * - Interactive element feedback (hover, focus, active)
 * - Smooth state transitions
 * - Accessibility compliance (prefers-reduced-motion)
 *
 * Uses the three-tier motion system from base.css:
 *   --ink-dur (120ms)    — direct input feedback
 *   --paper-dur (400ms)  — content arriving
 *   --press-dur (520ms)  — document transitions
 *
 * All animations maintain zero contrast regressions and use compositor-
 * only transforms where possible (no opacity fades on text).
 * ───────────────────────────────────────────────────────────────────────── */

/* ── PAGE LOAD ──────────────────────────────────────────────────────────────
   Subtle entrance: whole page fades in over 300ms. Paired with individual
   element animations (title slide, etc.) for a layered, intentional arrival.

   Applied to body with a data-section attribute (present on all main pages). */
body[data-section]{
  animation: pageLoadFadeIn 300ms ease-in forwards;
}

@keyframes pageLoadFadeIn{
  from{opacity:0}
  to{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  body[data-section]{
    animation:none;
    opacity:1
  }
}

/* ── INTERACTIVE ELEMENTS: LINKS ────────────────────────────────────────────
   Smooth transitions on hover/focus for all text links and styled anchors.
   Uses --ink-dur (120ms) for direct input feedback.

   Selectors:
   - a (text links in prose)
   - .link-primary, .link-secondary (styled button-like links)
   - .nav-link (navigation items)
   - .tag-item (category/filter tags)

   Properties animated:
   - color (text color on hover)
   - border-color (underline/border color)
   - background-color (bg on hover)
   - text-decoration-color (underline color) */

a:not([class^="no-"]):not(.button){
  transition:
    color var(--ink-dur) var(--ink-ease),
    border-color var(--ink-dur) var(--ink-ease),
    text-decoration-color var(--ink-dur) var(--ink-ease),
    background-color var(--ink-dur) var(--ink-ease);
}

/* Override for elements that should not transition */
@media(prefers-reduced-motion:reduce){
  a:not([class^="no-"]):not(.button){
    transition:none
  }
}

/* ── INTERACTIVE ELEMENTS: BUTTONS ──────────────────────────────────────────
   Smooth feedback on hover, focus, active states. */
button, input[type="button"], input[type="submit"], .button{
  transition:
    background-color var(--ink-dur) var(--ink-ease),
    color var(--ink-dur) var(--ink-ease),
    border-color var(--ink-dur) var(--ink-ease),
    box-shadow var(--ink-dur) var(--ink-ease),
    transform var(--ink-dur) var(--ink-ease);
}

button:hover, button:focus-visible,
input[type="button"]:hover, input[type="button"]:focus-visible,
input[type="submit"]:hover, input[type="submit"]:focus-visible,
.button:hover, .button:focus-visible{
  outline:none
}

button:active, input[type="button"]:active, input[type="submit"]:active, .button:active{
  transform:scale(0.98)
}

@media(prefers-reduced-motion:reduce){
  button, input[type="button"], input[type="submit"], .button{
    transition:none
  }
  button:active, input[type="button"]:active, input[type="submit"]:active, .button:active{
    transform:none
  }
}

/* ── INTERACTIVE ELEMENTS: FORM INPUTS ──────────────────────────────────────
   Smooth transition on focus: subtle border and shadow animation.
   Uses --ink-dur for direct input feedback. */
input:not([type="button"]):not([type="submit"]),
textarea, select{
  transition:
    border-color var(--ink-dur) var(--ink-ease),
    box-shadow var(--ink-dur) var(--ink-ease),
    background-color var(--ink-dur) var(--ink-ease);
}

input:focus-visible:not([type="button"]):not([type="submit"]),
textarea:focus-visible,
select:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(200, 16, 46, 0.1)
}

@media(prefers-reduced-motion:reduce){
  input:not([type="button"]):not([type="submit"]),
  textarea, select{
    transition:none
  }
}

/* ── INTERACTIVE ELEMENTS: FOCUS-VISIBLE ────────────────────────────────────
   Ensure strong focus indicators on all interactive elements.
   Uses the accent color with smooth transition in. */
*:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
  transition:outline var(--ink-dur) var(--ink-ease)
}

@media(prefers-reduced-motion:reduce){
  *:focus-visible{
    transition:none
  }
}

/* ── CONTENT CARDS / GRID ITEMS ─────────────────────────────────────────────
   Smooth hover feedback for card-based layouts (grid items, list items).
   Apply to .card, .grid-item, or individual <li> and <figure> items. */
.card, .grid-item, .plate-card{
  transition:
    transform var(--ink-dur) var(--ink-ease),
    box-shadow var(--ink-dur) var(--ink-ease),
    background-color var(--ink-dur) var(--ink-ease);
}

.card:hover, .grid-item:hover, .plate-card:hover{
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)
}

@media(prefers-reduced-motion:reduce){
  .card, .grid-item, .plate-card{
    transition:none
  }
  .card:hover, .grid-item:hover, .plate-card:hover{
    box-shadow:none
  }
}

/* ── STATE TRANSITIONS: EXPAND/COLLAPSE ─────────────────────────────────────
   Smooth animations for expanding/collapsing content.
   Uses --paper-dur (400ms) for content arrival. */
.expandable, [aria-expanded]{
  transition:
    max-height var(--paper-dur) var(--paper-ease),
    opacity var(--paper-dur) var(--paper-ease),
    margin var(--paper-dur) var(--paper-ease),
    padding var(--paper-dur) var(--paper-ease);
}

.expandable.collapsed{
  max-height:0;
  overflow:hidden;
  opacity:0;
  margin:0;
  padding:0
}

@media(prefers-reduced-motion:reduce){
  .expandable, [aria-expanded]{
    transition:none
  }
}

/* ── LOADING STATES ─────────────────────────────────────────────────────────
   Pulse animation for loading indicators and skeleton screens.

   Usage:
   - <div class="skeleton"></div> for skeleton screens
   - <div class="loading-pulse"></div> for loader indicators */

@keyframes loadingPulse{
  0%, 100%{opacity:1}
  50%{opacity:0.4}
}

.loading-pulse, .skeleton{
  animation:loadingPulse 1.5s ease-in-out infinite;
  background:linear-gradient(
    90deg,
    var(--surface, rgba(17, 16, 16, 0.05)) 0%,
    var(--surface, rgba(17, 16, 16, 0.08)) 50%,
    var(--surface, rgba(17, 16, 16, 0.05)) 100%
  );
}

@media(prefers-reduced-motion:reduce){
  .loading-pulse, .skeleton{
    animation:none;
    opacity:0.6
  }
}

/* ── SMOOTH SCROLLING ──────────────────────────────────────────────────────
   Already in base.css, but documented here for completeness. */
html{
  scroll-behavior:smooth
}

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

/* ── DRAWER / MODAL TRANSITIONS ─────────────────────────────────────────────
   Smooth in/out for drawer panels, modals, tooltips.
   Uses --paper-dur (400ms) for document-level transitions. */
.drawer, .modal, .tooltip{
  transition:
    opacity var(--paper-dur) var(--paper-ease),
    transform var(--paper-dur) var(--paper-ease),
    visibility var(--paper-dur) var(--paper-ease);
}

.drawer.hidden, .modal.hidden, .tooltip.hidden{
  opacity:0;
  pointer-events:none;
  visibility:hidden
}

@media(prefers-reduced-motion:reduce){
  .drawer, .modal, .tooltip{
    transition:none
  }
}

/* ── DROPDOWN / SELECT TRANSITIONS ──────────────────────────────────────────
   Smooth open/close for dropdown menus and select elements.
   Uses --ink-dur (120ms) for direct input. */
.dropdown-menu, .select-options{
  transition:
    opacity var(--ink-dur) var(--ink-ease),
    transform var(--ink-dur) var(--ink-ease);
}

.dropdown-menu.closed, .select-options.closed{
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none
}

@media(prefers-reduced-motion:reduce){
  .dropdown-menu, .select-options{
    transition:none
  }
}

/* ── TEXT SELECTION & HIGHLIGHTS ────────────────────────────────────────────
   Smooth transitions for selection states and highlights.
   Used for emphasis, active filters, selected items. */
.selected, .active, [aria-selected="true"]{
  transition:
    background-color var(--ink-dur) var(--ink-ease),
    color var(--ink-dur) var(--ink-ease),
    border-color var(--ink-dur) var(--ink-ease);
}

@media(prefers-reduced-motion:reduce){
  .selected, .active, [aria-selected="true"]{
    transition:none
  }
}

/* ── UTILITY: NO-TRANSITION ────────────────────────────────────────────────
   Applied to elements that should never transition.
   Example: .no-transition { transition: none !important; } */
.no-transition, .no-transition *{
  transition:none !important
}

/* ── PERFORMANCE: WILL-CHANGE ───────────────────────────────────────────────
   Applied to elements with frequent animations. Removed after animation
   completes to avoid performance cost of maintaining GPU layer. */
.animate-on-scroll, .animate-on-load{
  will-change:transform, opacity;
}

/* After animation ends, clean up the layer */
@media(prefers-reduced-motion:reduce){
  .animate-on-scroll, .animate-on-load{
    will-change:auto
  }
}