:root {
  --interaction-surface: color-mix(in srgb, var(--accent) 12%, var(--paper));
  --interaction-shadow: rgb(27 30 24 / 9%);
  --interaction-edge: color-mix(in srgb, var(--accent-ink) 35%, var(--line));
  --interaction-duration: 300ms;
  --interaction-ease: cubic-bezier(.4, 0, .2, 1);
}

.skill { transition: opacity var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease), background-color var(--interaction-duration) var(--interaction-ease), border-color var(--interaction-duration) var(--interaction-ease), box-shadow var(--interaction-duration) var(--interaction-ease), scale 180ms var(--interaction-ease); }
.skill[data-impulsing="true"] { will-change: translate; }
.skill.is-pressed { scale: .998; }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) { border-color: var(--accent-ink); box-shadow: 0 10px 24px var(--interaction-shadow); }
.skill:not(.skill-growth):not(.skill-ai):is([data-expanded="true"], :not([data-expanded])[open]) { background: var(--interaction-surface); }
.skill-ai:is([data-expanded="true"], :not([data-expanded])[open]) { border-color: var(--accent); }
.skill summary { grid-template-columns: minmax(0, 1fr) 32px; }
.disclosure-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); transition: background-color var(--interaction-duration) var(--interaction-ease), border-color var(--interaction-duration) var(--interaction-ease), color var(--interaction-duration) var(--interaction-ease); }
.disclosure-icon > .icon { display: block; grid-area: 1 / 1; transition: opacity var(--interaction-duration) var(--interaction-ease), transform 360ms var(--interaction-ease); }
.skill summary h3 { transition: color var(--interaction-duration) var(--interaction-ease); }
.skill .disclosure-icon .when-open { display: block; opacity: 0; transform: rotate(-90deg) scale(.7); }
.skill .disclosure-icon .when-closed { display: block; opacity: 1; transform: rotate(0) scale(1); }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .disclosure-icon { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .disclosure-icon .when-open { opacity: 1; transform: rotate(0) scale(1); }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .disclosure-icon .when-closed { opacity: 0; transform: rotate(90deg) scale(.7); }
.skill-ai .disclosure-icon { background: transparent; border-color: var(--accent-ink); color: var(--accent); }
.skill .skill-more .icon { transition: transform 360ms var(--interaction-ease); }
.skill .skill-more .more-open { display: none; }
.skill .skill-more .more-closed { display: inline; }
.skill .skill-more .icon { transform: rotate(90deg); }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .skill-more .more-open { display: inline; }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .skill-more .more-closed { display: none; }
.skill:is([data-expanded="true"], :not([data-expanded])[open]) .skill-more .icon { transform: rotate(-90deg); }

.project-arrow { transition: transform 180ms var(--ease), color 180ms var(--ease); }
.project-preview { outline: 1px solid transparent; outline-offset: 3px; transition: outline-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.karta-preview img, .image-preview:not(.is-contained) img, .video-preview video, .video-gallery-trigger img { transition: scale 300ms var(--ease); }
.nav-link { position: relative; transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.nav-link::before { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent-ink); content: ''; opacity: 0; transform: scaleY(.5); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.nav-link.is-active::before { opacity: 1; transform: scaleY(1); }
.button { transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.book-buy-links a { transition: transform 180ms var(--ease), opacity 180ms var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .skill:hover { border-color: var(--interaction-edge); box-shadow: 0 10px 24px var(--interaction-shadow); }
  .skill summary:hover h3 { color: var(--accent-ink); }
  .skill summary:hover .disclosure-icon { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .skill-ai:hover { border-color: var(--accent); }
  .skill-ai summary:hover h3 { color: var(--accent); }
  .project:hover .project-arrow { transform: translate(3px, -3px); }
  .project:hover .project-preview { outline-color: var(--interaction-edge); box-shadow: 0 8px 20px var(--interaction-shadow); }
  .project:hover .karta-preview img, .project:hover .image-preview:not(.is-contained) img, .video-preview:hover video, .video-gallery-trigger:hover img { scale: 1.025; }
  .project-crypto:hover .image-preview:not(.is-contained) img { scale: 1; }
  .button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px var(--interaction-shadow); }
  .book-buy-links a:hover { transform: translateY(-2px); opacity: 1; }
  .nav-link:hover { background: var(--interaction-surface); }
}
@media (prefers-reduced-motion: no-preference) {
  .button:active { transform: translateY(0) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .skill, .skill.is-pressed { scale: 1; translate: none; }
  .project:hover .project-arrow, .button:hover, .book-buy-links a:hover { transform: none; }
  .project:hover .karta-preview img, .project:hover .image-preview:not(.is-contained) img, .video-preview:hover video, .video-gallery-trigger:hover img { scale: 1; }
}