/* ==========================================================
   Hero intro video (round player with a handwritten note)
   Markup: .intro-video in index.html · behaviour: js/intro-video.js
   ========================================================== */
.div40.intro-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding-top: 1rem;
}
.intro-video {
  --size: 360px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: none;
  margin: 0 auto 4rem;
}

/* the circle */
.intro-media {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray, #f2f2f2);
  box-shadow: 0 24px 60px -24px rgba(22, 14, 8, .35);
  transform: translateZ(0);
}
.intro-media video,
.intro-media .intro-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-media .intro-poster { transition: opacity .45s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.intro-video:not([data-state="idle"]) .intro-poster { opacity: 0; transform: scale(1.04); pointer-events: none; }
.intro-video[data-state="idle"]:hover .intro-poster { transform: scale(1.03); }

/* progress ring around the circle */
.intro-ring {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.intro-ring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.intro-ring .ring-track { stroke: rgba(22, 14, 8, .08); }
.intro-ring .ring-bar { stroke: var(--orange, #5aa598); }
.intro-video:not([data-state="idle"]) .intro-ring { opacity: 1; }

/* whole circle is the button */
.intro-hit {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro-hit:focus-visible { outline: 3px solid var(--orange, #5aa598); outline-offset: 12px; }

/* play / pause chip at the bottom of the circle */
.intro-chip {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 84px;
  height: 84px;
  margin-left: -42px;
  border-radius: 50%;
  background: #fff;
  color: #160e08;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.intro-chip svg { width: 30px; height: 30px; }
.intro-chip .icon-pause { display: none; }
.intro-video[data-state="playing"] .intro-chip .icon-play,
.intro-video[data-state="paused"] .intro-chip .icon-pause { display: none; }
.intro-video[data-state="playing"] .intro-chip .icon-pause { display: block; }
.intro-video[data-state="playing"] .intro-chip { opacity: 0; transform: scale(.6); }
.intro-video[data-state="playing"]:hover .intro-chip,
.intro-video[data-state="playing"] .intro-hit:focus-visible .intro-chip { opacity: 1; transform: scale(.82); }
.intro-video[data-state="idle"]:hover .intro-chip,
.intro-video[data-state="paused"]:hover .intro-chip { transform: scale(1.08); }

/* handwritten note + arrow */
.intro-note {
  position: absolute;
  left: calc(var(--size) * -0.44);
  top: 54%;
  width: calc(var(--size) * 0.4);
  font-family: inherit;
  font-size: max(16px, calc(var(--size) * 0.056));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #160e08;
  transform: rotate(-14deg);
  transform-origin: 100% 0;
  text-align: right;
  pointer-events: none;
}
.intro-note span { display: block; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.intro-note .note-alt { position: absolute; right: 0; top: 0; opacity: 0; transform: translateY(8px); }
.intro-video:not([data-state="idle"]) .intro-note .note-main { opacity: 0; transform: translateY(-8px); }
.intro-video:not([data-state="idle"]) .intro-note .note-alt { opacity: 1; transform: none; }
.intro-arrow {
  position: absolute;
  left: calc(var(--size) * -0.15);
  top: calc(100% - var(--size) * 0.2);
  width: calc(var(--size) * 0.53);
  height: calc(var(--size) * 0.223);
  overflow: visible;
  pointer-events: none;
  transition: opacity .3s ease;
}
.intro-arrow path { fill: none; stroke: #160e08; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.intro-video:not([data-state="idle"]) .intro-arrow { opacity: 0; }

/* entrance */
.intro-video.is-pre .intro-media { opacity: 0; transform: scale(.92); }
.intro-video.is-pre .intro-chip { opacity: 0; transform: scale(.4); }
.intro-video.is-pre .intro-note .note-main > i { opacity: 0; transform: translateY(10px); }
.intro-video .intro-media { transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.intro-note .note-main > i { display: block; font-style: normal; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.intro-note .note-main > i:nth-child(2) { transition-delay: .08s; }
.intro-note .note-main > i:nth-child(3) { transition-delay: .16s; }
.intro-arrow .draw { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
.intro-video.is-drawn .intro-arrow .draw { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1); }
.intro-video.is-drawn .intro-arrow .draw.head { transition-delay: .75s; transition-duration: .3s; }

@media screen and (max-width: 991px) {
  .div40.intro-col { width: 100%; padding-top: 0; margin-top: 1rem; }
  .intro-video { --size: 320px; }
}
@media screen and (max-width: 479px) {
  /* phones: circle centred; note + arrow sit above it so they're seen first */
  .div40.intro-col { margin-top: 1rem; }
  .intro-video { --size: min(72vw, 310px); margin: calc(var(--size) * 0.3) auto 2.5rem; }
  .section.work { padding-top: 2.5rem; }
  .intro-chip { width: 72px; height: 72px; margin-left: -36px; bottom: -12px; }
  .intro-chip svg { width: 26px; height: 26px; }
  .intro-note {
    left: calc(var(--size) * -0.1);
    top: calc(var(--size) * -0.29);
    width: auto;
    font-size: 17px;
    text-align: left;
    transform: rotate(-6deg);
    transform-origin: 0 0;
  }
  .intro-note .note-alt { right: auto; left: 0; white-space: nowrap; }
  .intro-arrow { display: none; }
  .intro-arrow.intro-arrow-m {
    display: block;
    left: calc(var(--size) * 0.2);
    top: calc(var(--size) * -0.165);
    width: calc(var(--size) * 0.17);
    height: calc(var(--size) * 0.18);
    z-index: 2;
  }
}
.intro-arrow.intro-arrow-m { display: none; }
@media screen and (max-width: 479px) { .intro-arrow.intro-arrow-m { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .intro-video *, .intro-video .intro-media { transition: none !important; }
}