/* =========================================================
   animations.css – icons, scroll reveal, hover effects
   Everything respects "reduce motion" (see the bottom).
   ========================================================= */

/* ---------- 1. Page load + scroll progress bar ---------- */
body { animation: page-in .5s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 50;
  background: var(--beam); transform-origin: left; transform: scaleX(0); }

/* ---------- 2. Scroll reveal (JS adds .is-visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 3. Menu ---------- */
nav a { transition: color .2s ease; }
.sub { animation: drop-in .2s ease; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.has-sub.closed .sub { display: none !important; }
.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .25s ease; }
.has-sub:hover > a::after, .has-sub:focus-within > a::after { transform: translateY(0) rotate(225deg); }

/* ---------- 4. Icon base ---------- */
.icon { width: 56px; height: 56px; flex: none; color: var(--beam); overflow: visible; --play: paused; }
.icon-large { width: 92px; height: 92px; }
.icon * { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.icon .soft  { stroke: #b9ccd2; }
.icon .thick { stroke-width: 8; }
.icon .fillc { fill: currentColor; stroke: none; }
.icon .accent { stroke: #e8a33d; }

/* animations that loop only while hovered / focused (or always on big icons) */
.tool-item:hover .icon, .tool-item:focus-within .icon, .icon-live { --play: running; }

/* draw-in: lines "write themselves" when the icon first appears */
.icon .draw { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease; }
.js .icon:not(.drawn) .draw { stroke-dashoffset: 100; }
.icon .draw:nth-of-type(2) { transition-delay: .15s; }
.icon .draw:nth-of-type(3) { transition-delay: .3s; }
.tool-item:hover .icon .draw, .tool-item:focus-within .icon .draw { animation: redraw .9s ease; }
@keyframes redraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- 5. Individual icons ---------- */
/* Ansys Lumerical – light pulse running along a waveguide */
.ic-light, .g-light { stroke: #e8a33d; stroke-dasharray: 12 88; animation: travel 2.4s linear infinite;
  animation-play-state: var(--play, running); }
@keyframes travel { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -88; } }

/* Adobe Illustrator – pulsing bezier handles */
.ic-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.2s ease-in-out infinite;
  animation-play-state: var(--play); }
@keyframes pulse { 50% { transform: scale(1.7); } }

/* Adobe Photoshop – layers breathe apart and together */
.ic-l1 { animation: lift-up 1.4s ease-in-out infinite alternate; animation-play-state: var(--play); }
.ic-l3 { animation: lift-down 1.4s ease-in-out infinite alternate; animation-play-state: var(--play); }
@keyframes lift-up   { to { transform: translateY(-6px); } }
@keyframes lift-down { to { transform: translateY(6px); } }

/* MS Office – text lines draw one after another (delays above) */

/* CapCut – play button pulse */
.ic-play { fill: currentColor; transform-box: fill-box; transform-origin: center;
  animation: pulse-soft 1.3s ease-in-out infinite; animation-play-state: var(--play); }
@keyframes pulse-soft { 50% { transform: scale(1.25); } }

/* Research – dashed ring slowly rotating */
.ic-ring { stroke-dasharray: 6 5; transform-box: fill-box; transform-origin: center;
  animation: spin 6s linear infinite; animation-play-state: var(--play); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Education – tassel swinging */
.ic-tassel { transform-box: fill-box; transform-origin: top center;
  animation: swing 1.6s ease-in-out infinite alternate; animation-play-state: var(--play); }
@keyframes swing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }

/* Computer – blinking cursor */
.ic-cursor { animation: blink 1s steps(2, start) infinite; animation-play-state: var(--play); }
@keyframes blink { to { opacity: 0; } }

/* Contact – envelope floating */
.ic-env { animation: float 1.6s ease-in-out infinite alternate; animation-play-state: var(--play); }
@keyframes float { to { transform: translateY(-5px); } }

/* ---------- 6. Home page waveguide divider ---------- */
.guide { display: block; width: 100%; height: 56px; margin: 8px 0 0; }
.guide path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.g-core { stroke: var(--line); stroke-width: 12; }
.g-light { stroke-width: 3; animation-duration: 4.5s; --play: running; }

/* ---------- 7. Lists, pills, images ---------- */
.page-title { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.page-title h1 { margin-bottom: 6px; }

.tool-list li.tool-item { padding: 0; }
.tool-list a.tool-link { display: flex; align-items: center; gap: 20px; padding: 16px 8px;
  color: inherit; text-decoration: none; font-weight: 400; border-radius: 8px;
  transition: background .25s ease; }
.tool-list a.tool-link:hover, .tool-list a.tool-link:focus-visible { background: var(--beam-soft); }
.tool-text { display: block; transition: transform .25s ease; }
.tool-text strong { display: block; color: var(--beam); font-size: 1.1rem; }
.tool-text span { display: block; color: var(--muted); font-size: 16px; }
.tool-link:hover .tool-text { transform: translateX(6px); }

.pills li { transition: transform .2s ease, background .2s ease; }
.pills li:hover { transform: translateY(-3px); background: #c7e7ea; }

.row img { transition: transform .3s ease, box-shadow .3s ease; }
.row img:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(23,32,51,.14); }

.intro img { transition: transform .4s ease; }
.intro img:hover { transform: rotate(-4deg) scale(1.05); }

/* ---------- 8. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .icon:not(.drawn) .draw { stroke-dashoffset: 0; }
}