/* ==========================================================================
   Motion layer (progressive enhancement).
   Everything below only applies when the html element has the "motion" class,
   which is set only if the visitor has NOT asked for reduced motion.
   ========================================================================== */

/* Scroll progress line at the very top of the page */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 3px;
  background: linear-gradient(90deg, var(--artetto-violet), var(--artetto-coral));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Hero: headline rises line by line, the rest follows */
@keyframes m-rise { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes m-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-dot { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.motion .hero__label { animation: m-fade .7s cubic-bezier(.2, .8, .2, 1) .05s both; }
.motion .hero__line { animation: m-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.motion .hero__line--1 { animation-delay: .18s; }
.motion .hero__line--2 { animation-delay: .32s; }
.motion .hero__line--3 { animation-delay: .46s; }
.motion .hero__dot { animation: m-dot .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.motion .hero__line--1 .hero__dot { animation-delay: .75s; }
.motion .hero__line--2 .hero__dot { animation-delay: .9s; }
.motion .hero__line--3 .hero__dot { animation-delay: 1.05s; }
.motion .hero__lead { animation: m-fade .8s cubic-bezier(.2, .8, .2, 1) .65s both; }
.motion .hero__cta { animation: m-fade .8s cubic-bezier(.2, .8, .2, 1) .8s both; }
.motion .hero__points { animation: m-fade .8s cubic-bezier(.2, .8, .2, 1) .95s both; }

/* Hero scene follows the pointer a little (uses the "translate" property, so it never fights the other animations) */
.motion .stage__disc { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px); transition: translate .5s ease-out; }
.motion .stage__sun { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 18px); transition: translate .5s ease-out; }
.motion .stage__dot { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -14px); transition: translate .5s ease-out; }
.motion .stage__tile--mug { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px); }
.motion .stage__tile--tee { translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * 12px); }
.motion .stage__tile--poster { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * -10px); }
.motion .stage__canvas { translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px); }

/* Slow float of decorative shapes */
@keyframes m-float { from { translate: 0 0; } to { translate: 0 -16px; } }
.motion .hero__label-dot { animation: m-pulse 2.4s ease-out infinite; }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 90, 60, 0); } }
.motion .cta__shape--sun { animation: m-float 7s ease-in-out infinite alternate; }
.motion .cta__shape--coral { animation: m-float 5s ease-in-out -2s infinite alternate; }
.motion .cta__shape--light { animation: m-float 9s ease-in-out -4s infinite alternate; }

/* Scroll reveal: JS marks elements with .reveal, and .is-in when they enter the screen */
.motion .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .reveal.is-in { opacity: 1; transform: none; }
/* Tiles keep their own hover transition once shown */
.motion .tile.reveal.is-in { transition: opacity .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms), transform .25s ease-out; }

/* Steps: the rule draws itself, the numbers pop */
.motion .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1) .2s; }
.motion .steps.is-in::before { transform: scaleX(1); }
.motion .step__num { transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(.35s + var(--i, 0) * .35s); }
.motion .steps.is-in .step__num { transform: scale(1); }

/* Benefit icons pop in after their card */
.motion .benefit.reveal svg { transform: scale(.4) rotate(-12deg); transition: transform .7s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--i, 0) * 90ms + .25s); }
.motion .benefit.reveal.is-in svg { transform: none; }

/* Tiles: a light 3D tilt toward the pointer (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .motion .tile:hover { transform: perspective(900px) translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

/* Buttons: a soft sheen sweeps across on hover */
.motion .btn--primary,
.motion .btn--action { position: relative; overflow: hidden; isolation: isolate; }
.motion .btn--primary::after,
.motion .btn--action::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: -1;
}
.motion .btn--primary:hover::after,
.motion .btn--action:hover::after { inset-inline-start: 130%; transition: inset-inline-start .8s ease; }

/* FAQ answers open smoothly where the browser can animate it */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}