/* Hero: DarknessPixie, short and sweet. The name, one line and the socials beside the arched DarknessPixie
   picture on a spinning starburst with floating stickers; on phones and tablets the picture comes first, to set
   the tone. The label under the picture is the button to the About window (about.css) */

.hero {
  position: relative;
  padding: 24px 0 72px;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-3) 18%, transparent) 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-3) 18%, transparent) 2px, transparent 2px);
  background-size: 56px 56px;
  background-position: -2px -2px;
}
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 34px; }
.hero-copy { text-align: center; }
.hero h1 { margin: 0 0 16px; font-size: clamp(2.6rem, 12vw, 3.6rem); letter-spacing: -.01em; }
.hero h1 .accent-word { font-size: 1em; }
.hero-lede { max-width: 500px; margin: 0 auto; font-size: 1.12rem; font-weight: 800; line-height: 1.5; }
.hero-socials { justify-content: center; margin-top: 26px; }
/* Phones: the email as a third round button; from tablets up, the pill with the address */
.hero-socials .social-mail .social-link { background: var(--color-3); }
.hero-socials .social-mail-pill { display: none; }

.hero-art { position: relative; order: -1; width: min(78%, 300px); aspect-ratio: 1; justify-self: center; }
/* The #burst symbol; its colors are set here and carry into the symbol */
.burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--color-1); stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; animation: spin 60s linear infinite; }
/* Arched frame: 50% / 40% radii make a round top on a 4:5 frame */
.portrait {
  position: absolute;
  top: 10%;
  left: 22%;
  width: 56%;
  aspect-ratio: 4 / 5;
  padding: 10px;
  border: var(--line);
  border-radius: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(3deg);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.portrait > img, .portrait-placeholder { width: 100%; height: 100%; border: var(--line); border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px; object-fit: cover; }
.portrait-placeholder { display: grid; place-items: center; background: linear-gradient(170deg, var(--color-1), var(--color-3)); }
.portrait-initial { color: var(--paper); font-family: var(--font-display); font-size: clamp(4rem, 10vw, 8rem); line-height: 1; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); }
/* The About button: a tilted handwritten tag hanging off the frame, with a twinkling sparkle */
.portrait-label {
  position: absolute;
  left: 50%;
  bottom: -22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px 4px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 99px;
  background: var(--color-2);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 1.2rem;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%) rotate(-6deg);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background-color .2s;
}
.portrait-label svg { width: 16px; height: 16px; fill: var(--accent); stroke: var(--ink); stroke-width: 1.4px; animation: twinkle 2.4s ease-in-out infinite; }
.portrait-label:active { transform: translateX(-50%) rotate(-6deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* Stickers around the frame; on phones they keep clear of the About button */
.sticker-2 { top: 10%; right: 4%; width: 16%; animation: bob 5s ease-in-out -1s infinite; }
.sticker-3 { top: 52%; right: 0; width: 19%; animation: bob 4.5s ease-in-out -2s infinite; }
.sticker-4 { top: 30%; left: 2%; width: 12%; animation: bob 3.8s ease-in-out -.5s infinite; }
.spark { position: absolute; animation: twinkle 2.4s ease-in-out infinite; }
.spark-1 { top: 0; left: 60%; width: 28px; }
.spark-2 { top: 34%; right: -2%; width: 22px; animation-delay: -.8s; }
.spark-3 { bottom: 2%; left: 14%; width: 24px; animation-delay: -1.6s; }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .hero-art:hover .portrait { transform: rotate(-2deg) scale(1.03); }
  .portrait-label:hover { background: var(--color-1); box-shadow: 5px 5px 0 var(--ink); transform: translateX(-50%) rotate(-3deg) scale(1.05); }
}

@media (min-width: 681px) {
  .hero { padding: 60px 0 90px; }
  .hero-inner { gap: 50px; }
  .hero h1 { margin-bottom: 20px; font-size: clamp(3.1rem, 6.4vw, 5.7rem); }
  .hero-lede { font-size: 1.25rem; }
  .hero-socials { margin-top: 34px; }
  .hero-socials .social-mail { display: none; }
  .hero-socials .social-mail-pill { display: list-item; }
  .hero-art { width: min(100%, 440px); }
  .portrait { top: 12%; padding: 12px; }
  .portrait-label { bottom: -18px; font-size: 1.3rem; }
  .portrait-label svg { width: 18px; height: 18px; }
  .sticker-3 { top: auto; bottom: 4%; right: 6%; }
  .sticker-4 { top: auto; bottom: 14%; }
  .spark-1 { left: 52%; width: 34px; }
  .spark-2 { top: 44%; width: 24px; }
  .spark-3 { bottom: 0; left: 30%; width: 28px; }
}

/* Desktop: the intro beside the picture */
@media (min-width: 901px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  .hero-copy { text-align: start; }
  .hero-lede { margin-inline: 0; }
  .hero-socials { justify-content: normal; }
  .hero-art { order: 0; width: min(100%, 500px); }
}