/* Luvia's two-piece mark, rendered as an inline vector object. No raster / WebGL. */
.atelier-motion {
  --float-y: 14px;
  --float-x: 5px;
  --float-roll: .9deg;
  --piece-lift: 8px;
  --piece-roll: .65deg;
  --motion-rx: 0deg;
  --motion-ry: 0deg;
  --motion-light-x: 0px;
  --motion-light-y: 0px;
  position: relative;
  isolation: isolate;
  perspective: 1100px;
  aspect-ratio: 1;
}
.atelier-motion__tilt { transform: rotateX(var(--motion-rx)) rotateY(var(--motion-ry)); }
.atelier-motion__float { position: relative; transform-origin: 50% 50%; }
.atelier-motion::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 14%;
  bottom: 9%;
  height: 9%;
  z-index: -1;
  background: radial-gradient(ellipse, #3732f044, #24206116 45%, transparent 72%);
  opacity: .55;
  pointer-events: none;
}
.luvia-brand-object { display: block; width: 100%; height: auto; overflow: visible; }
.atelier-motion__aura {
  position: absolute;
  inset: 6%;
  background: radial-gradient(ellipse at 50% 46%, #4742ff25, #3933bb0b 45%, transparent 69%);
  opacity: .5;
  pointer-events: none;
}
.luvia-mark__arrival, .luvia-mark__piece { transform-box: view-box; transform-origin: 50% 50%; }
.luvia-mark__piece--upper { transform-origin: 268px 210px; }
.luvia-mark__piece--lower { transform-origin: 352px 402px; }
.luvia-mark__glint { opacity: 0; transform-box: view-box; }
.luvia-mark__pointer-light { transform: translate(var(--motion-light-x), var(--motion-light-y)); }
.luvia-mark__edge-light {
  fill: none;
  stroke: #e9e6ff;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 0;
  opacity: 0;
}
[data-luvia-motion][data-motion-ready] .atelier-motion__float {
  animation: luvia-mark-float 12s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .atelier-motion__aura {
  animation: luvia-mark-aura 12s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__arrival--upper {
  animation: luvia-mark-assemble-upper 2.4s cubic-bezier(.22, .75, .2, 1) both;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__arrival--lower {
  animation: luvia-mark-assemble-lower 2.4s .12s cubic-bezier(.22, .75, .2, 1) both;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__glint {
  animation: luvia-mark-light 10s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__piece--upper {
  animation: luvia-mark-levitate-upper 12s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__piece--lower {
  animation: luvia-mark-levitate-lower 12s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__edge-light {
  animation: luvia-mark-edge 10s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-ready] .luvia-mark__piece--lower .luvia-mark__edge-light {
  animation-delay: 3.15s;
}
[data-luvia-motion][data-motion-ready] .atelier-motion::after {
  animation: luvia-mark-ground 12s 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
[data-luvia-motion][data-motion-state="running"] .atelier-motion__float,
[data-luvia-motion][data-motion-state="running"] .atelier-motion__aura,
[data-luvia-motion][data-motion-state="running"] .atelier-motion::after,
[data-luvia-motion][data-motion-state="running"] .luvia-mark__arrival,
[data-luvia-motion][data-motion-state="running"] .luvia-mark__piece,
[data-luvia-motion][data-motion-state="running"] .luvia-mark__edge-light,
[data-luvia-motion][data-motion-state="running"] .luvia-mark__glint { animation-play-state: running; }
[data-luvia-motion][data-motion-state="running"] .atelier-motion__tilt,
[data-luvia-motion][data-motion-state="running"] .atelier-motion__float { will-change: transform; }
.atelier-hero__art[data-luvia-motion] figcaption {
  position: relative;
  inset: auto;
  margin: -40px 60px 24px 80px;
  align-items: center;
  z-index: 2;
  gap: 16px;
}
.atelier-motion-controls { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 10px !important; line-height: 1.4 !important; }
.atelier-motion-toggle, .atelier-motion-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0 8px 10px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #b4b4ce;
  font-size: 10px !important;
  line-height: 1.4;
  letter-spacing: .015em;
}
.atelier-motion-toggle[hidden], .atelier-motion-replay[hidden] { display: none; }
.atelier-motion-toggle:hover, .atelier-motion-replay:hover { color: #fff; }
.atelier-motion-toggle:disabled, .atelier-motion-replay:disabled { cursor: default; color: #b4b4ce; }
.atelier-motion-toggle [data-motion-icon] { font-size: 13px; width: 13px; }
.atelier-motion-replay { width: 44px; padding: 0; border-radius: 50%; border: 1px solid #6a68a245; }
.atelier-motion-replay > span { font-size: 22px; line-height: 1; }
.atelier-motion-replay:hover:not(:disabled) { background: #6964ff12; border-color: #8b86f3; }
@keyframes luvia-mark-assemble-upper {
  0% { transform: translate3d(60px, -80px, 0) rotate(-6deg); opacity: .1; }
  68% { transform: translate3d(-2px, 4px, 0) rotate(.35deg); opacity: 1; }
  86% { transform: translate3d(1px, -1px, 0) rotate(-.1deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
}
@keyframes luvia-mark-assemble-lower {
  0% { transform: translate3d(-60px, 80px, 0) rotate(6deg); opacity: .1; }
  68% { transform: translate3d(2px, -4px, 0) rotate(-.35deg); opacity: 1; }
  86% { transform: translate3d(-1px, 1px, 0) rotate(.1deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
}
@keyframes luvia-mark-levitate-upper {
  0%, 100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(calc(-1 * var(--piece-lift))) rotate(calc(-1 * var(--piece-roll))); }
  75% { transform: translateY(calc(.3 * var(--piece-lift))) rotate(calc(.2 * var(--piece-roll))); }
}
@keyframes luvia-mark-levitate-lower {
  0%, 100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(calc(.75 * var(--piece-lift))) rotate(var(--piece-roll)); }
  75% { transform: translateY(calc(-.3 * var(--piece-lift))) rotate(calc(-.2 * var(--piece-roll))); }
}
@keyframes luvia-mark-edge {
  0%, 5% { stroke-dashoffset: 10; opacity: 0; }
  11% { opacity: .95; }
  38% { opacity: .75; }
  48%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes luvia-mark-ground {
  0%, 100% { transform: scale(1); opacity: .55; }
  30% { transform: scale(.87, .72); opacity: .35; }
  70% { transform: scale(1.045, 1.08); opacity: .65; }
}
@keyframes luvia-mark-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  30% { transform: translate3d(var(--float-x), calc(-1 * var(--float-y)), 0) rotate(var(--float-roll)); }
  70% { transform: translate3d(calc(-1 * var(--float-x)), calc(.6 * var(--float-y)), 0) rotate(calc(-1 * var(--float-roll))); }
}
@keyframes luvia-mark-aura {
  0%, 100% { opacity: .4; transform: scale(.97); }
  50% { opacity: .8; transform: scale(1.03); }
}
@keyframes luvia-mark-light {
  0%, 12% { opacity: 0; transform: translate3d(-280px, 0, 0); }
  23% { opacity: .65; }
  44% { opacity: .4; }
  54%, 100% { opacity: 0; transform: translate3d(280px, 0, 0); }
}
@media (max-width: 1099px) {
  .atelier-hero__art[data-luvia-motion] figcaption { margin-inline: 65px 45px; }
}
@media (max-width: 767px), (pointer: coarse) {
  .atelier-motion { --float-y: 5px; --float-x: 1.5px; --float-roll: .25deg; --piece-lift: 3px; --piece-roll: .2deg; }
  .atelier-motion__tilt { transform: none; }
  .atelier-motion-toggle { font-size: 9px !important; }
}
@media (max-width: 600px) {
  .atelier-hero__art[data-luvia-motion] { max-height: none; }
  .atelier-hero__art[data-luvia-motion] figcaption { margin: -20px 16px 18px; }
}
/* No-JS shows the complete mark. The OS motion preference cannot be overridden. */
@media (prefers-reduced-motion: reduce) {
  [data-luvia-motion] .atelier-motion__float,
  [data-luvia-motion] .atelier-motion__tilt,
  [data-luvia-motion] .atelier-motion__aura,
  [data-luvia-motion] .atelier-motion::after,
  [data-luvia-motion] .luvia-mark__arrival,
  [data-luvia-motion] .luvia-mark__piece,
  [data-luvia-motion] .luvia-mark__pointer-light,
  [data-luvia-motion] .luvia-mark__edge-light,
  [data-luvia-motion] .luvia-mark__glint {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  [data-luvia-motion] .luvia-mark__arrival, [data-luvia-motion] .luvia-mark__piece { opacity: 1; }
  [data-luvia-motion] .luvia-mark__glint, [data-luvia-motion] .luvia-mark__edge-light { opacity: 0; }
}