/* Homepage hero: a navy field with a supernova rising from its bottom edge (js/hero.js), the introduction centred
   above it (avatar → name → role), film-grain type on the name, and a scroll cue. Used by index.html.
   Order: section → canvas → introduction → avatar → film type → chips → scroll cue → responsive → preferences */

/* Section ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 140px 0 20vh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(60% 70% at 72% 60%,color-mix(in srgb,var(--blue) 26%,transparent),transparent 70%),
    var(--navy);
  color: var(--on-dark);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px;
  mix-blend-mode: overlay;
  opacity: .2;
  pointer-events: none;
  z-index: 1;
}

/* The remnant is cut cleanly by the hero's bottom edge, so the canvas fades only at the top. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg,transparent 0,#000 12%);
  mask-image: linear-gradient(180deg,transparent 0,#000 12%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-text {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

/* Introduction: the name is the anchor, the role line sits quietly beneath it. */
.h1-name {
  display: block;
  font-size: clamp(44px,8.4vw,136px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
  color: #fff;
}

.h1-name strong {
  font-weight: inherit;
}

.h1-role {
  display: block;
  margin-top: .75em;
  font-size: clamp(19px,2.2vw,32px);
  font-weight: var(--display-light);
  letter-spacing: -.02em;
  line-height: 1.3;
  color: #aebbd6;
}

/* Avatar ------------------------------------------------------------------
   A small portrait centred above the name, lit by the supernova: a grainy glow that runs cool near the portrait
   and warms toward its edge, and a fine rim of the same colours that turns slowly, like the remnant's edge. */
.h1-avatar {
  position: relative;
  isolation: isolate;
  display: block;
  width: max-content;
  margin: 0 auto 22px;
  font-size: 16px;
}

.h1-avatar .wm {
  clip-path: none;
}

.hero.is-ready .h1-avatar .wi {
  animation: avatar-in 1s var(--ease-out) .1s both;
}

@keyframes avatar-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.92);
  }
}

.h1-avatar .chip-avatar {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  transform: none;
  background: #c9d4ff url("../images/me-cartoon-small.png") center/cover no-repeat;
  box-shadow: 0 0 0 1px #ffffff33,0 16px 30px -14px #000c;
}

.h1-avatar::before,
.h1-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.h1-avatar::before {
  width: 160%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  opacity: .6;
  background-image:
    var(--grain),
    radial-gradient(closest-side,
      rgba(225,232,255,.42) 50%,
      rgba(150,150,255,.32) 60%,
      rgba(176,130,255,.2) 72%,
      rgba(255,130,165,.12) 84%,
      rgba(255,170,120,0) 100%);
  background-size: 120px 120px,100% 100%;
  background-blend-mode: overlay,normal;
  -webkit-mask-image: radial-gradient(closest-side,#000 70%,transparent);
  mask-image: radial-gradient(closest-side,#000 70%,transparent);
}

.h1-avatar::after {
  width: calc(100% + 6px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 200deg,#6080ff,#a888ff,#ff86b0,#ffaa7a,#a888ff,#6080ff);
  -webkit-mask-image: radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent);
  mask-image: radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px),#000 calc(100% - .5px),transparent);
  filter: blur(.6px) drop-shadow(0 0 4px rgba(170,140,255,.35));
  opacity: .65;
  animation: avatar-rim 40s linear infinite;
}

@keyframes avatar-rim {
  to {
    rotate: 1turn;
  }
}

/* Company logos: a white pill signing off the end of the role line, its reel cycling the companies. */
.chip {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  vertical-align: middle;
  overflow: hidden;
  background: #fff center/cover no-repeat;
  box-shadow: 0 8px 18px -8px #141c2b66,0 0 0 1px #141c2b14;
}

.chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,#ffffff73,#fff0 46%);
  box-shadow: var(--glass-rim);
  pointer-events: none;
}

.chip-logos {
  width: 2.5em;
  height: 1.3em;
  margin-left: .3em;
  transform: translateY(-.06em);
}

.chip-reel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 700%;
  animation: chip-reel 12s cubic-bezier(.65,0,.35,1) infinite;
}

.chip-reel img {
  display: block;
  width: 100%;
  height: calc(100% / 7);
  flex-shrink: 0;
  object-fit: cover;
}

/* Seven slides, the seventh a copy of the first, so the loop restart is invisible.
   The reel moves on `top`, not `transform`: iOS clips a composited child to its parent's
   rectangle and ignores the pill's radius (carried over from the previous portfolio). */
@keyframes chip-reel {
  0%,13.333333% {
    top: 0;
  }
  16.666667%,30% {
    top: -100%;
  }
  33.333333%,46.666667% {
    top: -200%;
  }
  50%,63.333333% {
    top: -300%;
  }
  66.666667%,80% {
    top: -400%;
  }
  83.333333%,96.666667% {
    top: -500%;
  }
  100% {
    top: -600%;
  }
}

/* Scroll cue: a small mouse just above the fold; it steps aside once reading starts. */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #c4d0e8;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .6s var(--ease-out),transform .6s var(--ease-out);
  /* backwards, not both: a held animation would override the fade-out below. */
  animation: rise 1s var(--ease-out) 1.4s backwards;
}

.scroll-cue:hover {
  color: #fff;
}

.scroll-cue.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.cue-mouse {
  width: 22px;
  height: 34px;
}

.cue-wheel {
  animation: cue-wheel 2.2s var(--ease-out) infinite;
}

@keyframes cue-wheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Responsive ------------------------------------------------------------- */
/* Touch and small screens scroll naturally; the cue is only for mouse users. */
@media (max-width:900px),(pointer:coarse) {
  .scroll-cue {
    display: none;
  }
}

@media (max-width:900px) {
  .hero {
    padding: 120px 0 20vh;
  }
  .h1-avatar .chip-avatar {
    width: 52px;
    height: 52px;
  }
  .h1-avatar {
    margin-bottom: 16px;
  }
}

/* Preferences ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  .cue-wheel,
  .h1-avatar::after {
    animation: none!important;
  }
}