/* Shared motion language: deliberate entrances, responsive surfaces, quiet continuous accents. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--ink); z-index: 21; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.motion-item { opacity: 1; }
.motion-enabled .motion-item {
  transition: opacity .8s var(--motion-ease) var(--entrance-delay, 0ms),
    translate .9s var(--motion-ease) var(--entrance-delay, 0ms),
    scale 1s var(--motion-ease) var(--entrance-delay, 0ms),
    box-shadow .5s ease, border-color .5s ease, padding-left .35s var(--motion-ease), background .35s ease, color .25s ease;
}
.motion-enabled .motion-item:not(.is-visible) { opacity: 0; translate: 0 32px; }
.motion-enabled .motion-card:not(.is-visible) { translate: 0 44px; scale: .97; }
.motion-enabled .motion-photo:not(.is-visible) { translate: 0 30px; scale: .96; }
.image-window { height: 380px; overflow: hidden; transform-origin: center; }
.editorial-hero-grid .image-window img { height: 100%; }
.image-window img { transition: transform 1.1s var(--motion-ease), filter .7s ease; }
.motion-enabled [data-tilt] { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .65s var(--motion-ease); }
.brand { transition: letter-spacing .35s var(--motion-ease); }
.brand-slash { display: inline-block; transition: transform .5s var(--motion-ease), opacity .3s ease; }
#site-nav > a, .text-link, .footer-links a { position: relative; width: fit-content; }
#site-nav > a::after, .text-link::after, .footer-links a::after {
  content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--motion-ease);
}
#site-nav > a:hover, .text-link:hover, .footer-links a:hover { text-decoration: none; }
.button { position: relative; isolation: isolate; overflow: hidden; transition: transform .35s var(--motion-ease), box-shadow .35s ease, background .3s ease; }
.button::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, #ffffff20 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .7s var(--motion-ease);
}
.button > span, .text-link > span, .audience-tabs button > span { display: inline-block; transition: transform .4s var(--motion-ease); }
.button:active { transform: translateY(0) scale(.98); }
.bracelet-demo { transition: box-shadow .5s ease, border-color .5s ease; }
.side-button { transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.steps li, .editorial-rule { transition: background .35s ease, padding-left .35s var(--motion-ease); }
.audience-tabs button { position: relative; transition: color .25s ease, background .35s ease, padding-left .35s var(--motion-ease); }
.audience-tabs button::after {
  content: ''; position: absolute; bottom: -1px; left: 0; height: 2px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--motion-ease);
}
.audience-tabs button[aria-selected=true]::after { transform: scaleX(1); }
.round-button { transition: transform .5s var(--motion-ease), background .3s, color .3s; }
.menu-toggle { transition: background .3s, border-color .3s; }
.menu-toggle span { transition: transform .4s var(--motion-ease); }
.menu-toggle[aria-expanded=true] span { transform: rotate(45deg); }
.motion-enabled #site-nav.open { animation: menu-arrive .35s var(--motion-ease) both; }
.motion-enabled .editorial-symbol { display: inline-block; animation: invitation-nudge 4s ease-in-out infinite; }
.motion-enabled .status-dot { animation: invitation-pulse 3s ease-in-out infinite; }
.motion-enabled .photo-sticker { animation: sticker-sway 7s ease-in-out infinite; }
.editorial-mission, .community, .prompt-section { position: relative; }
.motion-enabled .community, .motion-enabled .prompt-section { border-top-color: transparent; }
.motion-enabled .community::before, .motion-enabled .prompt-section::before {
  content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--motion-ease);
}
.motion-enabled .section-entered.community::before, .motion-enabled .section-entered.prompt-section::before { transform: scaleX(1); }
.invitation { position: relative; overflow: hidden; isolation: isolate; }
.invitation::before, .invitation::after {
  content: ''; position: absolute; z-index: -1; right: 6%; top: -65%; width: 420px; height: 420px;
  border: 1px solid currentColor; opacity: .12; border-radius: 50%; pointer-events: none;
}
.invitation::after { right: 1%; top: -37%; width: 500px; height: 500px; }
.motion-enabled .invitation::before { animation: connection-orbit 18s ease-in-out infinite alternate; }
.motion-enabled .invitation::after { animation: connection-orbit 23s ease-in-out infinite alternate-reverse; }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .image-window:hover img { transform: scale(1.075); filter: saturate(1.08); }
  .motion-enabled .brand:hover { letter-spacing: -.8px; }
  .motion-enabled .brand:hover .brand-slash { transform: rotate(-15deg) scale(1.12); opacity: 1; }
  .motion-enabled .button:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #28151b22; }
  .motion-enabled .button:hover::after { transform: translateX(120%); }
  .motion-enabled .button:hover > span, .motion-enabled .text-link:hover > span, .motion-enabled .audience-tabs button:hover > span { transform: translate(3px, -3px); }
  #site-nav > a:hover::after, .text-link:hover::after, .footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
  .motion-enabled .bracelet-demo:hover { box-shadow: 0 18px 44px #28151b15; border-color: var(--ink); }
  .motion-enabled.concept-2 .bracelet-demo:hover { box-shadow: 12px 12px 0 var(--ink); }
  .motion-enabled .editorial-rule:hover, .motion-enabled .steps li:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); padding-left: 12px; }
  .motion-enabled .audience-tabs button:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); padding-left: 12px; }
  .side-button:not(.active):hover { background: color-mix(in srgb, var(--paper) 65%, transparent); }
  .motion-enabled .round-button:hover { background: var(--ink); color: var(--paper); transform: rotate(80deg); }
}
#site-nav > a:focus-visible::after, .text-link:focus-visible::after, .footer-links a:focus-visible::after { transform: scaleX(1); }
.button:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent); }
@keyframes menu-arrive { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes invitation-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
@keyframes invitation-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent); } }
@keyframes sticker-sway { 0%, 100% { transform: rotate(10deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-6px); } }
@keyframes connection-orbit { from { transform: translate(0, 0) scale(1); } to { transform: translate(-55px, 35px) scale(1.08); } }
@media (max-width: 800px) {
  .image-window { height: 300px; }
  .motion-enabled .motion-item:not(.is-visible) { translate: 0 20px; }
  .motion-enabled .editorial-symbol { display: none; }
  #site-nav > a { width: 100%; }
  .motion-toggle { bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* Pausing and system reduced-motion apply to CSS, scroll entrances and JS transitions. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition: none !important; }
.motion-paused .motion-item { opacity: 1; translate: none; scale: none; }
.motion-paused .band-flip:hover .band-svg, .motion-paused .button:hover, .motion-paused .round-button:hover { transform: none; }
html:has(.motion-paused) { scroll-behavior: auto; }
.motion-toggle { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 22; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 4px 14px #25251e1f; opacity: .55; transition: opacity .2s, transform .2s; }
.motion-toggle:hover, .motion-toggle:focus-visible { opacity: 1; transform: translateY(-2px); }
@media (max-width: 800px) {
  .motion-toggle { font-size: 0; padding: 9px 12px; }
  .motion-toggle::after { content: 'Ⅱ'; font-size: 13px; }
  .motion-toggle[aria-pressed=true]::after { content: '▷'; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-item { opacity: 1 !important; translate: none !important; scale: none !important; }
  .band-flip:hover .band-svg, .button:hover, .round-button:hover, [data-tilt] { transform: none !important; }
}