/* css/interactions.css */
/* Runtime UI state and SVG internals that are not editor nodes. */

/* Theme toggle (Figma: Atoms/Theme Toggle).
   Morph dark <-> light: 600ms, CSS transform only. The first cutout slides out of the disc (moon -> full sun),
   the ring scales up and fades in. The "-next" shapes only take part in the hover cycle. */
.tt-cutout, .tt-cutout-next, .tt-ring, .tt-ring-next { transform-box: view-box; transform-origin: 9px 9px; }
.tt-cutout { transform: translate(4px, -3px); transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.tt-cutout-next { transform: translate(10px, -7.5px); }
.tt-ring { transform: scale(.6); opacity: 0; transition: transform 600ms cubic-bezier(.2, .7, .2, 1), opacity 500ms ease; }
.tt-ring-next { transform: scale(.706); opacity: 0; stroke-width: 0; }
:root[data-theme="light"] .tt-cutout { transform: translate(10px, -7.5px); }
:root[data-theme="light"] .tt-ring { transform: scale(1); opacity: 1; }

/* Hover, one 1.6s cycle per pointer entry (js/theme.js adds .tt-play and removes it on animationend).
   Every cycle ends in the resting pose, so there is no jump when the class comes off. */
/* Moon: the shadow crosses the disc from top right to bottom left while a second shadow
   descends the same path at the same speed and settles in the starting position. */
:root:not([data-theme="light"]) .tt-play .tt-cutout { animation: tt-moon-out 1.6s linear both; }
:root:not([data-theme="light"]) .tt-play .tt-cutout-next { animation: tt-moon-in 1.6s linear both; }
@keyframes tt-moon-out {
  from { transform: translate(4px, -3px); }
  to { transform: translate(-10px, 7.5px); }
}
@keyframes tt-moon-in {
  0%, 57.14% { transform: translate(10px, -7.5px); }
  100% { transform: translate(4px, -3px); }
}
/* Sun: the outline grows and thins until it is gone while a new outline emerges from the
   edge of the disc (r6) and grows into its place (r8.5). */
:root[data-theme="light"] .tt-play .tt-ring { animation: tt-sun-out 1.6s cubic-bezier(.3, 0, .4, 1) both; }
:root[data-theme="light"] .tt-play .tt-ring-next { animation: tt-sun-in 1.6s cubic-bezier(.3, 0, .4, 1) both; }
@keyframes tt-sun-out {
  from { transform: scale(1); stroke-width: 1px; opacity: 1; }
  to { transform: scale(1.5); stroke-width: 0; opacity: 0; }
}
@keyframes tt-sun-in {
  from { transform: scale(.706); stroke-width: 0; opacity: 0; }
  to { transform: scale(1); stroke-width: 1px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-cutout, .tt-ring { transition: none; }
  .tt-play .tt-cutout, .tt-play .tt-cutout-next, .tt-play .tt-ring, .tt-play .tt-ring-next { animation: none; }
}

/* Mobile menu open state (Figma: Organisms/Nav, Menu = Open), toggled by js/menu.js. */
@media (max-width: 768px) {
  .nav[data-open] { position: fixed; top: 0; left: 0; right: 0; }
  .nav[data-open] .nav-menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%); overflow-y: auto; background-color: var(--bg-page); }
}
html[data-menu-open] { overflow: hidden; }

/* Logo marks (Figma: Logo – Sergiu Văcărescu, Logo / SV monogram). The body uses currentColor = logo/primary;
   the pointer is icon/success and the ring text text/accent, so both follow the theme. */
.logo-svg-success { fill: var(--icon-success); }
.logo-svg-accent { fill: var(--text-accent); }

/* Arrow device (→), wrapped by js/arrows.js. Hover: the arrow exits right while a second one enters
   from the left; one 1.6s cycle per pointer entry, same timing and easing as the theme toggle hover. */
.arrow { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; margin-left: 5px; }
.arrow-glyph { display: inline-block; }
.arrow::after { content: "\2192"; position: absolute; top: 0; left: 0; transform: translateX(-110%); }
.arrow-play .arrow-glyph { animation: arrow-out 1.6s cubic-bezier(.3, 0, .4, 1) both; }
.arrow-play::after { animation: arrow-in 1.6s cubic-bezier(.3, 0, .4, 1) both; }
@keyframes arrow-out {
  from { transform: translateX(0); }
  to { transform: translateX(110%); }
}
@keyframes arrow-in {
  from { transform: translateX(-110%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arrow-play .arrow-glyph, .arrow-play::after { animation: none; }
}

/* Client logos: inline SVG fills bound to logo tokens (Figma logo/primary|secondary|tertiary) */
.client-logo .lf1 { fill: var(--logo-primary); }
.client-logo .lf2 { fill: var(--logo-secondary); }
.client-logo .lf3 { fill: var(--logo-tertiary); }

/* Social links: hover probe used by js/hover-width.js to measure the hover width */
.social-link.hover-probe { font-family: var(--font-heading); font-weight: 700; font-size: 0.9375rem; }

/* Client logo marquee (js/marquee.js wraps .client-logos in .marquee and duplicates the items) */
.marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.marquee .client-logos { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; will-change: transform;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite; }
.marquee .client-logos > li { flex: none; padding-right: var(--spacing-96); }
.marquee:hover .client-logos { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .marquee .client-logos > li { padding-right: var(--spacing-48); }
  .marquee { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
                     mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } }
@media (prefers-reduced-motion: reduce) { .marquee .client-logos { animation: none; } }