/* icon-animations.css */

/* Shared SVG icon behaviour */

.svg-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.16));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.icon-card:hover .svg-icon,
.icon-card:focus-visible .svg-icon {
  transform: translateY(-2px) scale(1.04);
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.14))
    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));
}

.icon-card:active .svg-icon {
  transform: translateY(0) scale(0.985);
}

.icon-disc {
  fill: #f7f8f5;
}

.icon-ring {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 5;
}


/* About */

.about-eye-shape {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-pupil {
  fill: #222220;
  transform-box: fill-box;
  transform-origin: center;
}

.icon-about:hover .about-pupil,
.icon-about:focus-visible .about-pupil {
  animation: about-glance 2.8s ease-in-out forwards;
}

@keyframes about-glance {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(6px);
  }

  65% {
    transform: translateX(6px);
  }

  100% {
    transform: translateX(0);
  }
}


.fieldnotes-spiral {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.6s cubic-bezier(0.45, 0, 0.2, 1),
    stroke-width 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}

.icon-fieldnotes:hover .fieldnotes-spiral,
.icon-fieldnotes:focus-visible .fieldnotes-spiral {
  transform: scale(0.92);
  stroke-width: 6.5;
}

/* Art */

.art-centre-ring {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 5;
}

.art-mark {
  stroke: #1d1d1b;
  stroke-width: 6;
  stroke-linecap: round;
  transition: transform 0.42s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.art-core {
  transition: transform 0.42s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.art-centre {
  fill: #222220;
}

.icon-art:hover .art-core,
.icon-art:focus-visible .art-core {
  transform: scale(1.08);
}

.icon-art:hover .art-mark-north,
.icon-art:focus-visible .art-mark-north {
  transform: translateY(-6px);
}

.icon-art:hover .art-mark-east,
.icon-art:focus-visible .art-mark-east {
  transform: translateX(6px);
}

.icon-art:hover .art-mark-south,
.icon-art:focus-visible .art-mark-south {
  transform: translateY(6px);
}

.icon-art:hover .art-mark-west,
.icon-art:focus-visible .art-mark-west {
  transform: translateX(-6px);
}


/* Media */

.media-inner-ring {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 5;
  transition: transform 0.45s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.media-centre {
  fill: #222220;
  transition: transform 0.45s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.icon-media:hover .media-inner-ring,
.icon-media:focus-visible .media-inner-ring {
  transform: scale(1.05);
}

.icon-media:hover .media-centre,
.icon-media:focus-visible .media-centre {
  transform: scale(0.92);
}


/* Code */

.code-bracket {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.42s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.code-cursor {
  fill: #222220;
  transform-box: fill-box;
  transform-origin: center;
}

.icon-code:hover .code-bracket-left,
.icon-code:focus-visible .code-bracket-left {
  transform: translateX(-6px);
}

.icon-code:hover .code-bracket-right,
.icon-code:focus-visible .code-bracket-right {
  transform: translateX(6px);
}

.icon-code:hover .code-cursor,
.icon-code:focus-visible .code-cursor {
  animation: code-blink 0.9s ease-in-out forwards;
}

@keyframes code-blink {
  0%, 35% {
    opacity: 1;
  }

  48%, 68% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Music */

.music-wave {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}

.icon-music:hover .music-wave,
.icon-music:focus-visible .music-wave {
  transform: scaleY(0.75);
}

/* Seeds */

.seeds-cradle {
  fill: #1d1d1b;
}

.seeds-stem,
.seeds-leaf {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seeds-sprout,
.seeds-sprout-position,
.seeds-cradle-position {
  transform-box: fill-box;
  transform-origin: center;
}

.seeds-sprout {
  transition: transform 0.45s ease;
}

.seeds-cradle-position {
  transition: transform 0.45s ease;
}

.icon-seeds:hover .seeds-sprout,
.icon-seeds:focus-visible .seeds-sprout {
  transform: translateY(-5px) scale(1.06);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .svg-icon,
  .art-mark,
  .art-core,
  .media-inner-ring,
  .media-centre,
  .code-bracket {
    transition: none;
  }

  .about-pupil,
  .fieldnotes-highlight,
  .code-cursor {
    animation: none !important;
  }
}