/* Motion layer, after the taste-skill motion spec (references/motion.md):
   1. the hero's entrance, once on load; 2. one moment (word-highlight in "Chi sono");
   3. hover and press on every button, link and field. Nothing moves on scroll but the moment.
   Transform, scale, opacity and colour only. Everything rests under reduced motion. */
:root {
  --m-in: 150ms; --m-out: 120ms; --m-press: 90ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --m-ease-enter: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 3. Hover and press ---------- */
.m-btn { display: inline-block; transition: transform var(--m-out) var(--ease), background-color var(--m-out) var(--ease), border-color var(--m-out) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .m-btn:hover { transform: translateY(-1px); transition-duration: var(--m-in); }
  .m-btn--primary:hover { background-color: #055E90 !important; }            /* the fill steps 14% toward the ink */
  .m-btn--secondary:hover { background-color: rgba(15, 23, 42, .04) !important; border-color: #94A3B8 !important; }
}
.m-btn:focus-visible { transform: translateY(-1px); }
.m-btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }

/* on a phone the hero buttons take the full width, so the two line up */
@media (max-width: 640px) { [data-enter] .m-btn { display: block; width: 100%; text-align: center; } }

/* nav and footer words: rest bare, darken, draw a 1px line 4px under the word */
.m-nav { position: relative; transition: color var(--m-out) var(--ease); }
.m-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--m-out) var(--ease); }
.m-nav:hover, .m-nav:focus-visible { color: #0F172A !important; }
footer .m-nav:hover, footer .m-nav:focus-visible { color: #FFFFFF !important; }
.m-nav:hover::after, .m-nav:focus-visible::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--m-in); }

/* a link in running text: a faint hairline at rest, an ink line draws left to right */
.m-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(rgba(3, 105, 161, .3), rgba(3, 105, 161, .3)) 0 100% / 100% 1px no-repeat; transition: background-size var(--m-out) var(--ease); }
.m-link:hover, .m-link:focus-visible { background-size: 100% 1px, 100% 1px; transition-duration: var(--m-in); }

/* fields: the action border and a 3px soft ring */
.m-field { transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.m-field:focus { border-color: #0369A1 !important; box-shadow: 0 0 0 3px rgba(3, 105, 161, .18); outline: none; }

/* ---------- 1. The hero's entrance (motion.js, GSAP) ---------- */
/* only the words wait, and only until motion.js takes over or the 1.5 s mark passes */
html.m-enter:not(.m-enter-done) [data-enter] :is([data-enter-h1], [data-enter-item]) { opacity: 0; }
html.m-enter.m-enter-done:not(.m-js) [data-enter] :is([data-enter-h1], [data-enter-item]) { opacity: 1; transition: opacity 600ms var(--ease); }
.m-line { padding-bottom: .06em; }

/* ---------- 2. The moment: the statement starts at half ink (readable, 4.6:1) ---------- */
[data-moment="word-highlight"].is-live .wh { color: #6B7686; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}