/* Motion is progressive enhancement; the page remains usable without JavaScript. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); --motion-glow: 70,148,255; }
.theme-violet { --motion-glow: 177,122,255; }
.hero-art { position:relative; width:110%; margin-left:-2%; z-index:1; }
.hero-art .hero-image { width:100%; margin:0; }
.art-layers { position:absolute; inset:0; visibility:hidden; pointer-events:none; }
.art-layers img { position:absolute; height:auto; max-width:none; }
.art-ready .art-layers { visibility:visible; }
.art-ready .hero-image { opacity:0; }
.art-base { width:100%; left:0; top:8.873%; z-index:1; }
.art-gear { width:22.125%; left:6.75%; top:8.873%; z-index:0; }
.art-cloud { width:19%; left:69.875%; top:0; z-index:2; }
.art-person-one { width:27%; left:3.75%; top:61.368%; z-index:2; }
.art-person-two { width:23.875%; left:67.375%; top:26.433%; z-index:2; }
.art-check { width:3.5%; left:63.625%; top:38.817%; z-index:2; }
.art-check-two { top:46.396%; }
.theme-violet .hero-art { width:114%; }
.hero-shell::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 72% 40%,rgba(var(--motion-glow),.14),transparent 57%);
}
.hero-shell::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(460px circle at var(--light-x,70%) var(--light-y,40%),rgba(var(--motion-glow),.11),transparent 75%);
  transition:opacity .65s ease;
}
.hero-shell.pointer-active::after { opacity:1; }
.hero-content { position:relative; z-index:1; }
.visual-orbit::after {
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--accent); top:14%; left:14%;
  box-shadow:0 0 0 6px rgba(var(--motion-glow),.08),0 0 22px rgba(var(--motion-glow),.4);
}
.orbit-two::after { width:5px; height:5px; background:#74bada; }
.theme-violet .visual-orbit::after { background:#c3a8ff; }
.visual-orbit { border-style:dashed; }
.orbit-two { border-style:solid; }
.button { position:relative; overflow:hidden; isolation:isolate; }
.button::after {
  content:""; pointer-events:none; position:absolute; inset:-60% auto -60% -65%; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-24deg); opacity:0;
}
.button .icon, .text-link .icon, .platform-strip .icon { transition:transform .35s var(--motion-ease); }
.button:not([aria-disabled=true]):hover .icon, .text-link:hover .icon { transform:translateX(4px); }
.button:not([aria-disabled=true]):active { transform:translateY(0) scale(.97); }
.navigation>a:not(.button) { position:relative; }
.navigation>a:not(.button)::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--motion-ease);
}
.navigation>a:not(.button):hover::after, .navigation>a:not(.button):focus-visible::after { transform:scaleX(1); }
.benefit, .access-card, .device-picker { transition:transform .4s var(--motion-ease),box-shadow .4s ease,border-color .4s ease; }
.benefit { isolation:isolate; }
.benefit::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--light-x,50%) var(--light-y,50%),rgba(var(--motion-glow),.11),transparent 78%);
  opacity:0; transition:opacity .4s ease;
}
.benefit:hover::before { opacity:1; }
.feature-icon { transition:transform .45s var(--motion-ease),box-shadow .45s ease; }
.device-tabs button { transition:background .25s,color .25s,border-color .25s; }
.device-tabs button .icon { transition:transform .3s var(--motion-ease); }
.device-tabs button[aria-selected=true] .icon { transform:translateY(-2px); }
.platform-strip a { transition:color .25s,transform .3s var(--motion-ease); }
.brand>svg { transition:transform .6s var(--motion-ease); }
.brand:hover>svg { transform:rotate(-12deg); }
.scroll-progress {
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:30; pointer-events:none;
  background:linear-gradient(90deg,var(--accent),#64c9e7,var(--accent));
  transform:scaleX(0); transform-origin:left; opacity:.85;
}
.theme-violet .scroll-progress { background:linear-gradient(90deg,#7450d4,#dea3ed,#a583ff); }
.motion-toggle {
  position:fixed; right:18px; bottom:18px; z-index:10; display:flex; gap:9px; align-items:center;
  min-height:40px; padding:8px 13px; font-size:12px; font-weight:600; line-height:1;
  color:var(--ink); background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:24px; box-shadow:0 4px 20px #18354b12;
}
.motion-toggle svg { width:14px; height:14px; }
.motion-toggle .motion-play { display:none; }
.motion-toggle[aria-pressed=false] .motion-play { display:block; }
.motion-toggle[aria-pressed=false] .motion-pause { display:none; }
.motion-toggle[hidden] { display:none; }
.motion-toggle:hover { color:var(--accent); border-color:var(--accent); }

@keyframes eliro-rise { from { opacity:0; transform:translateY(23px); } to { opacity:1; transform:none; } }
@keyframes eliro-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes eliro-sway { 0%,100% { transform:translate(0,0); } 50% { transform:translate(4px,-5px); } }
@keyframes eliro-orbit { to { transform:rotate(360deg); } }
@keyframes eliro-check { 0%,15%,100% { opacity:.35; transform:scale(.8); } 35%,75% { opacity:1; transform:scale(1); } }
@keyframes eliro-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(var(--motion-glow),.24); } 60% { box-shadow:0 0 0 9px rgba(var(--motion-glow),0); } }
@keyframes eliro-shine { 0% { left:-65%; opacity:0; } 15% { opacity:1; } 100% { left:145%; opacity:0; } }
@keyframes eliro-breathe { 0%,100% { opacity:.5; transform:scale(.97); } 50% { opacity:1; transform:scale(1.06); } }

@media (prefers-reduced-motion:no-preference) {
  html.motion-ready:not(.motion-off) .hero-copy>:nth-child(1) { animation:eliro-rise .8s .04s both; }
  html.motion-ready:not(.motion-off) .hero-copy>:nth-child(2) { animation:eliro-rise .85s .13s both; }
  html.motion-ready:not(.motion-off) .hero-copy>:nth-child(3) { animation:eliro-rise .85s .24s both; }
  html.motion-ready:not(.motion-off) .hero-copy>:nth-child(4) { animation:eliro-rise .85s .35s both; }
  html.motion-ready:not(.motion-off) .hero-copy>:nth-child(5) { animation:eliro-rise .85s .44s both; }
  html.motion-ready:not(.motion-off) .hero-visual { animation:eliro-rise 1.15s .2s both; }
  html.motion-ready:not(.motion-off) .hero-image { animation:eliro-float 7s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .art-gear { animation:eliro-orbit 38s linear infinite; }
  html.motion-ready:not(.motion-off) .art-cloud { animation:eliro-float 5.5s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .art-person-one { animation:eliro-sway 7s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .art-person-two { animation:eliro-sway 8s -3s ease-in-out infinite reverse; }
  html.motion-ready:not(.motion-off) .art-check { animation:eliro-check 4s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .art-check-two { animation-delay:1.2s; }
  html.motion-ready:not(.motion-off) .visual-label { animation:eliro-float 6s -2s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .visual-orbit { animation:eliro-orbit 70s linear infinite; }
  html.motion-ready:not(.motion-off) .orbit-two { animation-duration:48s; animation-direction:reverse; }
  html.motion-ready:not(.motion-off) .visual-plus { animation:eliro-orbit 20s linear infinite; }
  html.motion-ready:not(.motion-off) .status-dot { animation:eliro-pulse 3s ease-out infinite; }
  html.motion-ready:not(.motion-off) .hero-shell::before { animation:eliro-breathe 10s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .guide-dialog[open] { animation:eliro-rise .28s var(--motion-ease); }
  html.motion-ready:not(.motion-off) .navigation.is-open { animation:eliro-rise .25s var(--motion-ease); }
  html.motion-ready:not(.motion-off) .button:not([aria-disabled=true]):hover::after { animation:eliro-shine .75s ease; }
  html.motion-ready:not(.motion-off) .hero-art { transition:transform .65s var(--motion-ease); transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
  html.motion-ready:not(.motion-off) .final-cta .cta-ring { animation:eliro-breathe 8s ease-in-out infinite; }
  html.motion-ready:not(.motion-off) .final-cta .ring-two { animation-delay:-4s; }
  .motion-paused *, .motion-paused::before, .motion-paused::after, html.motion-suspended *, html.motion-suspended *::before, html.motion-suspended *::after { animation-play-state:paused!important; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.motion-ready:not(.motion-off) .benefit:hover { transform:translateY(-6px); }
  html.motion-ready:not(.motion-off) .benefit:hover .feature-icon { transform:translateY(-3px) rotate(-7deg); box-shadow:0 10px 22px rgba(var(--motion-glow),.16); }
  html.motion-ready:not(.motion-off) .access-card:hover, html.motion-ready:not(.motion-off) .device-picker:hover { transform:translateY(-4px); box-shadow:0 16px 45px rgba(var(--motion-glow),.11); border-color:rgba(var(--motion-glow),.55); }
  html.motion-ready:not(.motion-off) .platform-strip a:hover { transform:translateY(-3px); }
}
@media (max-width:1150px) { .hero-art { width:106%; } .theme-violet .hero-art { width:108%; } }
@media (max-width:640px) {
  .hero-art, .theme-violet .hero-art { width:100%; margin-left:0; }
  .art-layers { display:none; }
  .art-ready .hero-image { opacity:1; }
  .hero-shell::after { display:none; }
  .motion-toggle { right:12px; bottom:12px; min-height:40px; padding:9px 12px; }
  .motion-toggle span { display:none; }
  @keyframes eliro-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation:none!important; transition:none!important; }
html.motion-off .hero-art, html.motion-off .feature-icon, html.motion-off .button, html.motion-off .button .icon, html.motion-off .text-link .icon, html.motion-off .brand>svg { transform:none!important; }
html.motion-off .hero-shell::after { display:none; }
html.motion-off { scroll-behavior:auto; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  .hero-art, .feature-icon, .button .icon, .text-link .icon, .brand>svg { transform:none!important; }
  .art-layers { display:none; }
  .art-ready .hero-image { opacity:1; }
  .hero-shell::after, .scroll-progress, .motion-toggle { display:none; }
}
@media print {
  *, *::before, *::after { animation:none!important; transition:none!important; }
  .motion-toggle, .scroll-progress { display:none; }
}