/* Small extensions of the existing mascot, limited to the concept preview. */
:root {
  --dino-tail: url('/_assets/dino-tail-arrow.88b9ad58f0f9564e.svg');
  --dino-corner: 5px 18px 18px 12px;
}

/* One friendly nibble per hover/focus, then a still smiling head. */
.site-header nav { gap: 52px; }
.site-header nav a::after { display: none; }
.site-header nav a { isolation: isolate; }
.nav-label { display: inline-block; transform-origin: right center; }
.nav-nibbler {
  position: absolute;
  left: calc(100% - 10px);
  top: calc(50% - 27px);
  width: 56px;
  height: 44px;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.nav-nibbler svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nibble-facing { transform: translateX(120px) scaleX(-1); }
.nibble-neck, .nibble-skin { fill: #824bc6; }
.nibble-eye { fill: #302039; }
.nibble-tooth { fill: #fff9e7; }
.nibble-smile { stroke: #302039; stroke-width: 2.4; stroke-linecap: round; }
.nibble-mouth { fill: #432853; visibility: hidden; }
.nibble-jaw { transform-origin: 56px 55px; }
.site-header nav a:is(:hover, :focus-visible) { color: var(--accent-dark); }
.site-header nav a:is(:hover, :focus-visible) .nav-nibbler {
  visibility: visible;
  opacity: 1;
  animation: nibble-arrive 1.15s both;
}
.site-header nav a:is(:hover, :focus-visible) .nibble-jaw {
  animation: nibble-jaw 1.15s both;
}
.site-header nav a:is(:hover, :focus-visible) .nibble-mouth {
  animation: nibble-mouth 1.15s both;
}
.site-header nav a:is(:hover, :focus-visible) .nav-label {
  animation: nibble-label 1.15s both;
}
@keyframes nibble-arrive {
  0% { transform: translate(4px, 7px) rotate(3deg); }
  24% { transform: translate(3px, 0) rotate(0); }
  44% { transform: translate(-5px, 0) rotate(-3deg); }
  55% { transform: translate(-5px, 0) rotate(-3deg); }
  76%, 100% { transform: translate(3px, 2px); }
}
@keyframes nibble-jaw {
  0%, 18% { transform: rotate(0); }
  32%, 44% { transform: rotate(24deg); }
  52%, 100% { transform: rotate(0); }
}
@keyframes nibble-mouth {
  0%, 20%, 52%, 100% { visibility: hidden; }
  30%, 44% { visibility: visible; }
}
@keyframes nibble-label {
  0%, 43%, 76%, 100% { transform: none; clip-path: inset(0); }
  52%, 58% {
    transform: translateX(-1.5px) rotate(-1deg);
    clip-path: polygon(0 0, 100% 0, 100% 30%, calc(100% - 4px) 48%, 100% 68%, 100% 100%, 0 100%);
  }
}
.language-switch :is(button,a) {
  border-radius: 4px 12px 12px 8px;
  min-width: 36px;
}
.language-switch :is(button,a)[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* The long snout informs control corners; the curl replaces a generic arrow. */
.text-link {
  gap: 24px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 5px 25px 25px 16px;
  background: var(--accent-soft);
  transition: background .18s ease, border-color .18s ease;
}
.text-link > span:last-child,
.email-link > span {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 28px;
  font-size: 0;
  background: currentColor;
  mask: var(--dino-tail) center / contain no-repeat;
  transition: transform .2s ease;
}
.text-link > span:last-child { color: var(--accent-dark); }
.text-link:is(:hover, :focus-visible) {
  border-color: var(--accent);
  background: #e7def7;
}
:is(.text-link, .email-link):is(:hover, :focus-visible) > span:last-child {
  transform: translateX(3px) rotate(-6deg);
}

.skill-trigger {
  min-height: 44px;
  border-radius: var(--dino-corner);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.skill-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.skill-panel { border-radius: 6px 24px 18px 18px; border-top: 2px solid var(--accent); }
.skill-close, .close-dialog { border-radius: var(--dino-corner); }

/* SVG avoids iOS substituting a color emoji for the diagonal-arrow character. */
.project-arrow { display: none; }
.project-title-row { align-items: center; }
.project-title-row::after {
  content: '';
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 18 18 6M6 6h12v12' stroke='%236343b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.project-open:is(:hover, :focus-visible) .project-title-row::after {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 18 18 6M6 6h12v12' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.project-open:focus-visible .project-image img { transform: none; }

/* A small tooth sits in the contact panel's upper edge. */
.contact-section::after {
  content: '';
  position: absolute;
  right: 34px;
  top: -1px;
  width: 14px;
  height: 19px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 60% 88%, 43% 100%, 28% 85%);
  pointer-events: none;
}

/* A real portrait with a small mascot sticker, arranged around the existing bio. */
.intro-with-portrait {
  grid-template-columns: minmax(180px, 220px) minmax(230px, .85fr) minmax(0, 1.45fr);
  grid-template-areas: 'portrait heading copy';
  align-items: center;
  gap: 48px;
  padding-block: 54px;
}
.intro-heading { grid-area: heading; }
.intro-with-portrait .intro-copy { grid-area: copy; }
.intro-portrait {
  grid-area: portrait;
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0;
  isolation: isolate;
}
.portrait-frame {
  padding: 6px;
  border: 1px solid #d9d0e9;
  border-radius: 7px 25px 7px 7px;
  background: var(--white);
  box-shadow: 7px 8px 0 var(--accent-soft);
  transform: rotate(-2deg);
}
.portrait-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px 19px 3px 3px;
}
.portrait-sticker {
  position: absolute;
  z-index: 1;
  width: 88px;
  height: auto;
  right: -25px;
  bottom: -15px;
  transform: rotate(9deg);
  filter: drop-shadow(2px 0 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(0 -2px 0 white);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .site-header nav { gap: 40px; }
  .nav-nibbler { width: 46px; height: 37px; top: calc(50% - 23px); }
  .intro-with-portrait {
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-areas: 'portrait heading' 'portrait copy';
    gap: 18px 46px;
  }
  .intro-with-portrait h2 { max-width: 550px; }
}
@media (max-width: 760px) {
  .site-header nav { gap: 12px; }
  .project-title-row::after { flex-basis: 32px; width: 32px; height: 32px; background-size: 18px 18px; }
  .nav-nibbler { display: none; }
  .site-header nav a:is(:hover, :focus-visible) .nav-label { animation: none; }
  .skill-panel { position: relative; top: auto; left: auto; }
  .text-link { gap: 19px; }
  .email-link { gap: 10px; }
  .email-link > span { flex-basis: 32px; width: 32px; }
  .contact-section::after { right: 25px; width: 12px; height: 16px; }
  .intro-with-portrait {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'heading' 'portrait' 'copy';
    gap: 30px;
    padding-block: 34px;
  }
  .intro-portrait { width: 210px; max-width: calc(100% - 50px); justify-self: center; margin: 2px 0 8px; }
  .portrait-sticker { width: 80px; right: -23px; bottom: -13px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header nav a:is(:hover, :focus-visible) .nav-nibbler {
    visibility: visible;
    opacity: 1;
    transform: translate(3px, 2px);
  }
  :is(.text-link, .email-link):is(:hover, :focus-visible) > span:last-child {
    transform: none;
  }
}