/* Talori motion: touch, response, settle. Content never depends on animation. */
:root {
  --motion-press: 110ms;
  --motion-response: 180ms;
  --motion-surface: 280ms;
  --motion-editorial: 620ms;
  --motion-hero: 850ms;
  --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --ease-response: cubic-bezier(.2, .75, .25, 1);
}

html.talori-motion .hero-copy,
html.talori-motion .hero-product { animation: none; }
html.talori-motion .trust-photo { overflow: clip; }

/* The header keeps its existing dimensions and anchored position. */
html.talori-motion .site-header::before {
  transition: background-color var(--motion-surface), box-shadow var(--motion-surface),
    border-color var(--motion-surface);
}
html.talori-motion .site-header.is-scrolled::before {
  background-color: rgba(8, 14, 19, .97);
  border-bottom-color: rgba(235, 242, 247, .14);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
html.talori-motion .site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--cyan);
  opacity: .75;
  transform: scaleX(var(--read-progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* Editorial links share an underline, without altering official store artwork. */
html.talori-motion :is(.main-nav a, .hero-discover, .text-link, .footer-bottom a) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 7px);
  background-size: 0 1px;
  transition: color var(--motion-response), background-size var(--motion-surface) var(--ease-settle),
    border-color var(--motion-response), transform var(--motion-response) var(--ease-response);
}
html.talori-motion .main-nav a:hover { border-bottom-color: transparent; }
html.talori-motion :is(.main-nav a, .hero-discover, .text-link, .footer-bottom a):is(:hover, :focus-visible) {
  background-size: 100% 1px;
}
html.talori-motion :is(.text-link, .hero-discover, .hero-bottom a) .icon {
  transition: transform var(--motion-surface) var(--ease-settle);
}
html.talori-motion .text-link:is(:hover, :focus-visible) .icon { transform: translateX(5px); }
html.talori-motion :is(.hero-discover, .hero-bottom a):is(:hover, :focus-visible) .icon { transform: translateY(3px); }

html.talori-motion :is(.button, .example-controls button, .contact-submit, .header-store-badge, .app-store-badge,
  .language-switch > summary, .mobile-navigation > summary) {
  transition: color var(--motion-response), background-color var(--motion-response),
    border-color var(--motion-response), box-shadow var(--motion-surface),
    transform var(--motion-surface) var(--ease-settle), filter var(--motion-response),
    opacity var(--motion-response);
}
html.talori-motion :is(.button, .example-controls button, .contact-submit:not(:disabled),
  .header-store-badge:not(:disabled), .app-store-badge:not(:disabled), .language-switch > summary, .mobile-navigation > summary):active {
  transform: translateY(1px) scale(.975);
  transition-duration: var(--motion-press);
}
html.talori-motion :is(.button, .example-controls button, .contact-submit:not(:disabled)):focus-visible {
  box-shadow: 0 0 0 5px rgba(87, 199, 243, .12);
}

/* Local light is bounded by the existing card radius and cannot intercept input. */
html.talori-motion .motion-surface {
  position: relative;
  isolation: isolate;
  transition: translate 420ms var(--ease-settle), box-shadow 420ms var(--ease-settle),
    border-color var(--motion-surface);
}
html.talori-motion .motion-surface::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 360px 250px at var(--surface-x, 50%) var(--surface-y, 30%),
    rgba(87, 199, 243, .13), transparent 75%);
  opacity: 0;
  transition: opacity 420ms var(--ease-settle);
  pointer-events: none;
}
html.talori-motion .motion-surface:focus-within::before { opacity: .7; }
html.talori-motion .motion-phone {
  transform: perspective(1100px) translate3d(var(--phone-x, 0px), var(--phone-y, 0px), 0)
    rotateX(var(--phone-rx, 0deg)) rotateY(var(--phone-ry, 0deg));
  transform-origin: center center;
  transition: transform 480ms var(--ease-settle);
}

html.talori-motion .feature-icon {
  transition: color var(--motion-response), background-color var(--motion-surface),
    border-color var(--motion-surface), transform 420ms var(--ease-settle);
}
html.talori-motion .feature-icon .icon,
html.talori-motion .contact-app-identity .talori-app-icon,
html.talori-motion .device-number {
  transition: transform 420ms var(--ease-settle), color var(--motion-response), box-shadow var(--motion-surface);
}
html.talori-motion .contact-app-identity:focus-visible .talori-app-icon {
  box-shadow: 0 0 0 4px rgba(87, 199, 243, .16), 0 6px 18px #0003;
}
html.talori-motion .contact-form-panel {
  transition: border-color var(--motion-surface), box-shadow 420ms var(--ease-settle);
}
html.talori-motion .contact-form-panel:focus-within {
  border-color: #4c6f80;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .18), 0 0 0 1px rgba(87, 199, 243, .045);
}
html.talori-motion .form-field label,
html.talori-motion .form-field label > span {
  transition: color var(--motion-response);
}
html.talori-motion .form-field:focus-within label { color: var(--cyan); }
html.talori-motion .form-field :is(input, textarea, select):active { transform: none; }

/* Native disclosure semantics stay intact; JS owns only the open/close motion. */
html.talori-controls .faq-list details[open] p,
html.talori-controls .language-switch[open] .language-options,
html.talori-controls .mobile-navigation[open] .mobile-nav-panel { animation: none; }
html.talori-motion .faq-list summary::before,
html.talori-motion .faq-list summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 32px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--motion-surface) var(--ease-settle), opacity var(--motion-response);
}
html.talori-motion .faq-list summary::after { transform: rotate(90deg); }
html.talori-motion .faq-list details[open] summary::after { transform: rotate(0deg); opacity: 0; }
html.talori-motion .language-chevron { transition: transform var(--motion-surface) var(--ease-settle); }
html.talori-motion .language-switch[open] .language-chevron { transform: rotate(180deg); }
html.talori-motion .language-options a {
  transition: color var(--motion-response), background-color var(--motion-response), transform var(--motion-surface) var(--ease-settle);
}

/* Legal reading stays still and immediately available; only orientation responds. */
html.talori-motion .legal-toc a {
  position: relative;
  transition: color var(--motion-response);
}
html.talori-motion .legal-toc a::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-surface) var(--ease-settle);
  pointer-events: none;
}
html.talori-motion .legal-toc a.is-current { color: var(--cyan); }
html.talori-motion .legal-toc a.is-current::after { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.talori-motion .motion-surface:hover {
    translate: 0 -4px;
    border-color: #5b9eb7;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
  }
  html.talori-motion .motion-surface:hover::before { opacity: 1; }
  html.talori-motion .feature-row:hover .feature-icon {
    color: #176b86;
    background-color: rgba(87, 199, 243, .1);
    border-color: #60a7bd;
    transform: translateY(-2px);
  }
  html.talori-motion .feature-row:hover .feature-icon .icon { transform: scale(1.08); }
  html.talori-motion .device-family:hover .device-number { color: #176b86; transform: translateY(-3px); }
  html.talori-motion .contact-app-identity:hover .talori-app-icon { transform: rotate(-3deg) translateY(-2px); }
  html.talori-motion .language-options a:hover { transform: translateX(2px); }
}

@media (hover: none), (pointer: coarse) {
  html.talori-motion .motion-phone { transform: none; }
  html.talori-motion .motion-surface:hover { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.talori-motion { scroll-behavior: auto; }
  html.talori-motion .motion-phone,
  html.talori-motion .motion-surface,
  html.talori-motion :is(.button, .example-controls button, .contact-submit, .header-store-badge,
    .app-store-badge, .contact-app-identity .talori-app-icon, .feature-icon, .device-number,
    .language-options a, .language-switch > summary, .mobile-navigation > summary),
  html.talori-motion :is(.text-link, .hero-discover, .hero-bottom a, .feature-icon) .icon {
    transform: none !important;
    translate: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.talori-motion *, html.talori-motion *::before, html.talori-motion *::after {
    transition-duration: 0s !important;
    animation: none !important;
  }
  html.talori-motion .motion-surface::before { display: none; }
  html.talori-motion .site-header::after { display: none; }
}