/* ===================================================================
   IONA — Motion System
   Emil Kowalski-style motion primitives with spring easing.
   Spring easing: cubic-bezier(.16,.84,.34,1)
=================================================================== */

/* ── Scroll reveal ───────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .7s cubic-bezier(.16,.84,.34,1),
    transform .7s cubic-bezier(.16,.84,.34,1),
    filter .7s cubic-bezier(.16,.84,.34,1);
  will-change: opacity, transform;
}

[data-reveal].reveal-in {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="blur"]              { filter: blur(8px); }
[data-reveal="blur"].reveal-in    { filter: blur(0); }
[data-reveal="scale"]             { transform: translateY(0) scale(.96); }
[data-reveal="scale"].reveal-in   { transform: translateY(0) scale(1); }
[data-reveal="rise"]              { transform: translateY(28px); }

/* ── Magnetic / tilt ─────────────────────────────────────────────── */

[data-magnetic] {
  transition: transform .35s cubic-bezier(.16,.84,.34,1);
  will-change: transform;
}

/* ── Hover lift utility ──────────────────────────────────────────── */

.lift {
  transition:
    transform .35s cubic-bezier(.16,.84,.34,1),
    box-shadow .35s cubic-bezier(.16,.84,.34,1);
  will-change: transform;
}

.lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -18px rgba(20,30,28,0.18), 0 0 0 1px rgba(20,30,28,0.06);
}

/* ── Image zoom inside a clipped frame ───────────────────────────── */

.zoom-frame { overflow: hidden; }

.zoom-frame > * {
  transition: transform .9s cubic-bezier(.16,.84,.34,1);
  will-change: transform;
}

.zoom-frame:hover > * { transform: scale(1.04); }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
  transition:
    transform .25s cubic-bezier(.16,.84,.34,1),
    background .2s ease,
    box-shadow .25s ease,
    border-color .2s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }

/* Shine sweep for primary buttons */
.btn-primary { position: relative; overflow: hidden; }

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transition: left .9s cubic-bezier(.16,.84,.34,1);
  pointer-events: none;
}

.btn-primary:hover::before { left: 130%; }

/* ── Thumbnail switcher ──────────────────────────────────────────── */

.thumb {
  transition:
    transform .35s cubic-bezier(.16,.84,.34,1),
    border-color .25s ease,
    box-shadow .25s ease;
  will-change: transform;
}

.thumb:hover { transform: translateY(-2px); }

.thumb.active {
  box-shadow: 0 0 0 2px var(--emerald),
              0 6px 18px -8px color-mix(in oklab, var(--emerald) 60%, transparent);
}

/* ── Tab underline glide ─────────────────────────────────────────── */

.tabs { position: relative; }

.tabs .tab-underline {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--emerald);
  transition: transform .45s cubic-bezier(.16,.84,.34,1), width .45s cubic-bezier(.16,.84,.34,1);
  transform-origin: left;
  pointer-events: none;
}

/* ── FAQ / accordion collapse ────────────────────────────────────── */

.faq-a, .accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.16,.84,.34,1);
}

.faq-a > *, .accordion-body > * {
  overflow: hidden;
  min-height: 0;
}

.faq.open .faq-a,
.accordion.open .accordion-body { grid-template-rows: 1fr; }

/* ── Spec row hover (product page) ───────────────────────────────── */

.spec-row {
  transition: background .2s ease, padding-left .25s cubic-bezier(.16,.84,.34,1);
}

.spec-row:hover {
  background: var(--surface-2);
  padding-left: 6px;
}

/* ── Case cell hover ─────────────────────────────────────────────── */

.case-cell {
  transition: transform .35s cubic-bezier(.16,.84,.34,1);
}

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

.case-cell .ic {
  transition: transform .35s cubic-bezier(.16,.84,.34,1), background .25s ease;
}

.case-cell:hover .ic {
  transform: rotate(-6deg) scale(1.08);
}

/* ── Timeline dot hover ──────────────────────────────────────────── */

.timeline .dot {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}

.timeline li:hover .dot { transform: scale(1.4); background: var(--emerald); }

/* ── Floating badge breathing ─────────────────────────────────────── */

@keyframes breathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 22px -8px rgba(20,30,28,.18); }
  50% { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(20,30,28,.22); }
}

.breathe { animation: breathe 4.5s ease-in-out infinite; }

/* ── Pulse dot (verified status) ─────────────────────────────────── */

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--emerald) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in oklab, var(--emerald) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.pulse-dot {
  width: 8px; height: 8px;
  background: var(--emerald);
  border-radius: 50%;
  display: inline-block;
  animation: pulseRing 2.2s ease-out infinite;
}

/* ── Card hover transitions ──────────────────────────────────────── */

.work-card,
.post-card,
.teaser,
.mini {
  transition:
    transform .25s cubic-bezier(.16,.84,.34,1),
    box-shadow .25s ease,
    border-color .2s ease;
}

.work-card:hover,
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.teaser:hover,
.mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ev-card image zoom (WooCommerce loop cards) */
.ev-card {
  transition:
    transform .25s cubic-bezier(.16,.84,.34,1),
    box-shadow .25s ease,
    border-color .2s ease;
}

/* ── Page load fade-in ───────────────────────────────────────────── */

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.dom-ready .iona-page-hero,
body.dom-ready .iona-hero,
body.dom-ready .hero-art,
body.dom-ready .iona-hero-home h1,
body.dom-ready .iona-hero-home .hero-cta {
  animation: pageFadeIn .6s cubic-bezier(.16,.84,.34,1) both;
}

body.dom-ready .iona-hero-home .hero-cta { animation-delay: .12s; }

/* ── Skeleton shimmer (for loading states) ───────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--line) 37%,
    var(--surface-2) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Disable scroll-triggered reveals immediately */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Disable all animations, but preserve instant transitions for state feedback */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Keep instant transitions on interactive elements for state feedback */
  .btn,
  .elementor-button,
  a,
  button {
    transition:
      background .001ms,
      border-color .001ms,
      color .001ms !important;
  }

  /* No parallax / zoom on images */
  .hero-art img,
  .hero-art .art-ph,
  .work-card .art-ph,
  .work-card img,
  .ev-card img,
  .post-card .art-ph,
  .zoom-frame > * {
    transition: none !important;
    transform: none !important;
  }

  /* No page load animation */
  body.dom-ready .iona-page-hero,
  body.dom-ready .iona-hero,
  body.dom-ready .hero-art,
  body.dom-ready .iona-hero-home h1,
  body.dom-ready .iona-hero-home .hero-cta {
    animation: none !important;
  }
}