/* Tile-and-shine treatment adapted from Aaron Iker's Card hover effect:
   https://codepen.io/aaroniker/pen/yLEPJXj
   Supplied fork copyright (c) 2026 low. MIT license: card-hover-LICENSE.txt.
   All rules are scoped to the portfolio's own cards. */
:root { --detail-ice: #9bdded; }
[data-theme="light"] { --detail-ice: #17667a; }
.digital-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --card-accent: var(--accent-secondary);
  --tile-ink: color-mix(in srgb, var(--card-accent) 8%, transparent);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background .3s ease;
}
.digital-card > * { position: relative; z-index: 1; }
.digital-card::before, .digital-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.digital-card::before {
  background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 65%);
}
.digital-card::after {
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 90% 0%, #000, transparent 65%);
}
.digital-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--card-accent) 40%, var(--border));
  box-shadow: 0 8px 26px rgba(0,0,0,.1), 0 0 22px color-mix(in srgb, var(--card-accent) 8%, transparent);
}
.digital-card:is(:hover, :focus-within)::before,
.digital-card:is(:hover, :focus-within)::after { opacity: 1; }
.digital-tiles {
  position: absolute;
  right: 0;
  top: 0;
  width: min(220px, 65%);
  height: 132px;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(135deg, transparent 5%, #000 75%);
  opacity: 0;
  transition: opacity .5s ease;
}
.digital-tiles > span {
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--tile-ink);
  opacity: 0;
}
.digital-tiles > span:nth-child(1) { right: 0; top: 0; }
.digital-tiles > span:nth-child(2) { right: 44px; top: 0; animation-delay: -2s; }
.digital-tiles > span:nth-child(3) { right: 88px; top: 0; animation-delay: -4s; }
.digital-tiles > span:nth-child(4) { right: 132px; top: 0; animation-delay: -6s; }
.digital-tiles > span:nth-child(5) { right: 0; top: 44px; animation-delay: -4s; }
.digital-tiles > span:nth-child(6) { right: 44px; top: 44px; animation-delay: -2s; }
.digital-tiles > span:nth-child(7) { right: 88px; top: 44px; animation-delay: -6s; }
.digital-tiles > span:nth-child(8) { right: 0; top: 88px; animation-delay: -2s; }
.digital-card:is(:hover, :focus-within) .digital-tiles { opacity: 1; }
.digital-card:is(:hover, :focus-within) .digital-tiles > span { animation-name: card-tile; animation-duration: 8s; animation-iteration-count: infinite; }
.note-card { --tile-ink: color-mix(in srgb, var(--card-accent) 14%, transparent); }
.note-violet { --card-accent: #8b5cf6; }
.note-blue { --card-accent: #3b82f6; }
.note-ice { --card-accent: #22b8d4; }
[data-theme="light"] .note-ice { --card-accent: #0e7490; }
[data-theme="light"] .note-violet { --card-accent: var(--accent-secondary); }
[data-theme="light"] .note-blue { --card-accent: var(--accent-primary); }
.note-card .note-symbol, .note-card .note-link i { color: var(--card-accent); }
.note-card .note-symbol { border-color: color-mix(in srgb, var(--card-accent) 22%, transparent); background: color-mix(in srgb, var(--card-accent) 9%, transparent); }
.note-card .digital-tiles > .tile-outline { background: transparent; border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent); }
.note-card:is(:hover, :focus-within) .digital-tiles > .tile-outline { animation: none; opacity: .7; }
.note-card::after { background-position: right top; background-image: linear-gradient(color-mix(in srgb, var(--card-accent) 12%, var(--border)) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 12%, var(--border)) 1px, transparent 1px); }
/* Steps, staggered columns, and a compact cluster give each note its own signature. */
.note-violet .digital-tiles > span:nth-child(1) { right: 0; top: 0; }
.note-violet .digital-tiles > span:nth-child(2) { right: 44px; top: 0; }
.note-violet .digital-tiles > span:nth-child(3) { right: 44px; top: 44px; }
.note-violet .digital-tiles > span:nth-child(4) { right: 88px; top: 44px; }
.note-violet .digital-tiles > span:nth-child(5) { right: 132px; top: 44px; }
.note-violet .digital-tiles > span:nth-child(6) { right: 88px; top: 88px; }
.note-violet .digital-tiles > span:nth-child(7) { right: 132px; top: 88px; }
.note-violet .digital-tiles > span:nth-child(8) { right: 176px; top: 88px; }
.note-blue .digital-tiles { height: 176px; }
.note-blue .digital-tiles > span:nth-child(1) { right: 0; top: 0; }
.note-blue .digital-tiles > span:nth-child(2) { right: 0; top: 44px; }
.note-blue .digital-tiles > span:nth-child(3) { right: 0; top: 88px; }
.note-blue .digital-tiles > span:nth-child(4) { right: 44px; top: 44px; }
.note-blue .digital-tiles > span:nth-child(5) { right: 44px; top: 88px; }
.note-blue .digital-tiles > span:nth-child(6) { right: 88px; top: 0; }
.note-blue .digital-tiles > span:nth-child(7) { right: 88px; top: 44px; }
.note-blue .digital-tiles > span:nth-child(8) { right: 132px; top: 88px; }
.note-ice .digital-tiles > span:nth-child(1) { right: 0; top: 0; }
.note-ice .digital-tiles > span:nth-child(2) { right: 44px; top: 0; }
.note-ice .digital-tiles > span:nth-child(3) { right: 0; top: 44px; }
.note-ice .digital-tiles > span:nth-child(4) { right: 44px; top: 44px; }
.note-ice .digital-tiles > span:nth-child(5) { right: 88px; top: 44px; }
.note-ice .digital-tiles > span:nth-child(6) { right: 0; top: 88px; }
.note-ice .digital-tiles > span:nth-child(7) { right: 44px; top: 88px; }
.note-ice .digital-tiles > span:nth-child(8) { right: 88px; top: 88px; }
@keyframes card-tile { 0%, 12.5%, 100% { opacity: 1; } 25%, 82.5% { opacity: 0; } }

/* A small tiled illustration repeats the site's cube motif in unused card space.
   Grain is painted once; only tile transforms and opacity animate. */
.tile-grain-art {
  --motif-size: 38px;
  --motif-step: 45px;
  position: relative;
  width: calc(var(--motif-step) * 5);
  height: calc(var(--motif-step) * 3);
  max-width: 100%;
  margin-top: 32px;
  pointer-events: none;
  user-select: none;
}
.tile-grain-art > span {
  position: absolute;
  left: calc(var(--motif-x) * var(--motif-step));
  top: calc(var(--motif-y) * var(--motif-step));
  width: var(--motif-size);
  height: var(--motif-size);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--motif-ink, var(--accent-primary)) 45%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--motif-ink, var(--accent-primary)) 28%, var(--surface-1));
  opacity: 0;
  transform: scale(.82);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: calc(var(--motif-order, 0) * 35ms);
}
.tile-grain-art > span::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .3;
  mix-blend-mode: soft-light;
  background-image: var(--grain-texture);
}
.tile-grain-art > span:nth-child(1) { --motif-x: 0; --motif-y: 2; --motif-order: 0; }
.tile-grain-art > span:nth-child(2) { --motif-x: 1; --motif-y: 2; --motif-order: 1; }
.tile-grain-art > span:nth-child(3) { --motif-x: 1; --motif-y: 1; --motif-order: 2; background: transparent; }
.tile-grain-art > span:nth-child(4) { --motif-x: 2; --motif-y: 1; --motif-order: 3; }
.tile-grain-art > span:nth-child(5) { --motif-x: 2; --motif-y: 0; --motif-order: 4; --motif-ink: var(--accent-secondary); }
.tile-grain-art > span:nth-child(6) { --motif-x: 3; --motif-y: 0; --motif-order: 5; --motif-ink: #78b5a0; background: linear-gradient(135deg, color-mix(in srgb, #78b5a0 34%, var(--surface-1)) 50%, color-mix(in srgb, #469d83 30%, var(--surface-1)) 50%); }
.tile-grain-art > span:nth-child(7) { --motif-x: 3; --motif-y: 1; --motif-order: 6; background: transparent; --motif-ink: var(--accent-secondary); }
.tile-grain-art > span:nth-child(8) { --motif-x: 4; --motif-y: 2; --motif-order: 7; --motif-ink: var(--detail-ice); }
.tile-grain-card:is(:hover, :focus-within) .tile-grain-art > span { opacity: 1; transform: none; }
.tile-grain-art.is-animated > span { transition: none; }
.tile-grain-art-experience { margin-left: auto; }
#contact .tile-grain-art { --motif-size: 48px; --motif-step: 55px; margin-top: 88px; }
@media (min-width: 901px) {
  #contact .contact-info { align-self: stretch; }
  #contact .tile-grain-art { margin-top: auto; }
}
.hero-footer { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.hero-footer .hero-actions { flex: 1 1 350px; }
.tile-grain-art-hero { --motif-size: 20px; --motif-step: 25px; flex: 0 0 auto; margin: 0 0 0 auto; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .tile-grain-art { --motif-size: 28px; --motif-step: 34px; }
  .tile-grain-art > span { opacity: 1; transform: none; }
  #contact .tile-grain-art { --motif-size: 32px; --motif-step: 39px; margin-top: 32px; }
  .tile-grain-art-hero { --motif-size: 18px; --motif-step: 22px; }
  .hero-footer { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-grain-art > span { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .digital-card, .digital-card::before, .digital-card::after, .digital-tiles { transition: none; }
  .digital-card:is(:hover, :focus-within) .digital-tiles > span { animation: none; opacity: .6; }
}