/* Eva Delonne · persistent toolbar and melody control */
:root {
  --eva-toolbar-desktop: 64px;
  --eva-toolbar-mobile: 58px;
  --eva-toolbar-width: 620px;
  --eva-toolbar-ink: #382b2d;
  --eva-toolbar-cherry: #8f5f73;
  --eva-toolbar-pencil: #a77886;
  --eva-toolbar-blue: #9facc3;
  --eva-toolbar-gold: #ad8559;
  --eva-toolbar-focus: #9f5f79;
}

html { scroll-padding-top: calc(var(--eva-toolbar-desktop) + 14px) !important; }

.site-header,
.inner-header {
  position: sticky !important;
  top: 0;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: clamp(12px, 1.8vw, 25px) !important;
  min-height: var(--eva-toolbar-desktop);
  padding-top: 8px !important;
  padding-right: max(clamp(42px, 5vw, 72px), calc(env(safe-area-inset-right) + 18px)) !important;
  padding-bottom: 8px !important;
  padding-left: max(clamp(42px, 5vw, 72px), calc(env(safe-area-inset-left) + 18px)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
  overflow: visible;
  translate: 0 0;
  transform: none;
  will-change: translate;
  transition: translate 300ms cubic-bezier(.22, .72, .24, 1);
  width: min(calc(100% - 24px), var(--eva-toolbar-width)) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

.site-header.is-toolbar-hidden,
.inner-header.is-toolbar-hidden {
  translate: 0 calc(-100% - 7px);
}

.site-header.is-toolbar-hidden::before,
.inner-header.is-toolbar-hidden::before {
  animation: eva-toolbar-paper-hide 300ms cubic-bezier(.4, 0, .2, 1) both;
}

.site-header.is-toolbar-returning::before,
.inner-header.is-toolbar-returning::before {
  animation: eva-toolbar-paper-return 520ms cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes eva-toolbar-paper-hide {
  0% { transform: translateX(0) rotate(0) skewX(0); }
  18% { transform: translateX(-1.6px) rotate(-.28deg) skewX(.12deg); }
  38% { transform: translateX(1.2px) rotate(.22deg) skewX(-.08deg); }
  58% { transform: translateX(-.8px) rotate(-.16deg) skewX(.05deg); }
  78% { transform: translateX(.4px) rotate(.08deg) skewX(-.03deg); }
  100% { transform: translateX(0) rotate(0) skewX(0); }
}

@keyframes eva-toolbar-paper-return {
  0% { transform: translateX(-1.2px) rotate(-.36deg) skewX(.12deg); }
  27% { transform: translateX(1.8px) rotate(.42deg) skewX(-.1deg); }
  49% { transform: translateX(-1.25px) rotate(-.29deg) skewX(.08deg); }
  68% { transform: translateX(.8px) rotate(.18deg) skewX(-.05deg); }
  84% { transform: translateX(-.35px) rotate(-.08deg) skewX(.02deg); }
  100% { transform: translateX(0) rotate(0) skewX(0); }
}

.site-header::before,
.inner-header::before {
  content: "";
  position: absolute;
  inset: 0 4px;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/ui/toolbar-paper-compact-v1.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 10px rgba(11, 5, 12, .2));
  transform: translateX(var(--eva-toolbar-paper-x, 0)) rotate(var(--eva-toolbar-paper-angle, 0deg));
  transform-origin: 50% 8px;
  will-change: transform;
}

.site-header::after,
.inner-header::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 126px;
  z-index: 2;
  display: block !important;
  width: 18px;
  height: 53px;
  pointer-events: none;
  background: url('/assets/ui/toolbar-paperclip-v1.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(62, 30, 35, .2));
  transform: rotate(calc(-9deg + var(--eva-toolbar-clip-wobble, 0deg))) translate(var(--eva-toolbar-clip-x, 0), var(--eva-toolbar-clip-y, 0));
  transform-origin: 50% 18%;
}

.site-header.is-toolbar-hidden::after,
.inner-header.is-toolbar-hidden::after {
  animation: eva-toolbar-clip-hide 300ms ease-in-out both;
}

.site-header.is-toolbar-returning::after,
.inner-header.is-toolbar-returning::after {
  animation: eva-toolbar-clip-return 520ms ease-in-out both;
}

html[data-toolbar-motion-preview] .site-header.is-toolbar-hidden::after,
html[data-toolbar-motion-preview] .inner-header.is-toolbar-hidden::after,
html[data-toolbar-motion-preview] .site-header.is-toolbar-returning::after,
html[data-toolbar-motion-preview] .inner-header.is-toolbar-returning::after {
  animation: none;
}

html[data-toolbar-motion-preview] .site-header,
html[data-toolbar-motion-preview] .inner-header {
  transition: none !important;
}

html[data-toolbar-motion-preview] .site-header.is-toolbar-hidden::before,
html[data-toolbar-motion-preview] .inner-header.is-toolbar-hidden::before,
html[data-toolbar-motion-preview] .site-header.is-toolbar-returning::before,
html[data-toolbar-motion-preview] .inner-header.is-toolbar-returning::before {
  animation: none;
}

@keyframes eva-toolbar-clip-hide {
  0% { transform: rotate(-9deg) translate(0, 0); }
  28% { transform: rotate(-11.4deg) translate(-.6px, -.3px); }
  58% { transform: rotate(-7.8deg) translate(.5px, .2px); }
  100% { transform: rotate(-9deg) translate(0, 0); }
}

@keyframes eva-toolbar-clip-return {
  0% { transform: rotate(-11.8deg) translate(-.5px, -.6px); }
  30% { transform: rotate(-6.8deg) translate(.7px, .3px); }
  54% { transform: rotate(-10.5deg) translate(-.4px, -.2px); }
  76% { transform: rotate(-8.1deg) translate(.25px, .1px); }
  100% { transform: rotate(-9deg) translate(0, 0); }
}

.site-header > *,
.inner-header > * {
  position: relative;
  z-index: 1;
}

.site-header .home-charm,
.inner-header .home-charm {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--eva-toolbar-ink) !important;
  background: transparent !important;
  filter: none;
  transition: transform 180ms ease;
}

.home-charm:hover {
  transform: translateY(-1px) rotate(-2deg) scale(1.045);
}

.home-charm:active { transform: translateY(0) scale(.96); }
.home-charm:focus-visible { outline: 3px solid var(--eva-toolbar-focus); outline-offset: 1px; }

.home-charm__icon {
  display: block;
  width: 29px;
  height: 29px;
  overflow: visible;
  transform: rotate(-1.5deg);
}

.home-charm__roof,
.home-charm__walls,
.home-charm__door {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-charm__roof { stroke: #8f4961; stroke-width: 1.9; }
.home-charm__walls { fill: rgba(190, 130, 149, .07); stroke: #765064; stroke-width: 1.45; }
.home-charm__door { stroke: var(--eva-toolbar-gold); stroke-width: 1.45; }
.home-charm__heart { fill: var(--eva-toolbar-blue); stroke: #7d4961; stroke-width: .45; }
.home-charm__chimney { fill: var(--eva-toolbar-gold); }

.site-header .site-nav,
.inner-header .inner-nav {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: auto !important;
  max-width: none !important;
  gap: clamp(18px, 2vw, 29px) !important;
  padding: 0 !important;
  color: var(--eva-toolbar-ink) !important;
  font-family: var(--hand, 'Caveat', cursive);
  font-size: clamp(18px, 1.45vw, 20px) !important;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .002em;
  text-shadow: none !important;
}

.site-header .site-nav a,
.inner-header .inner-nav a {
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap;
  color: inherit !important;
  transition: color 180ms ease, transform 180ms ease;
}

.site-header .site-nav a::after,
.inner-header .inner-nav a::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 8px;
  left: -2px;
  height: 1.5px;
  border-radius: 53% 42% 58% 37%;
  background: linear-gradient(90deg, transparent, rgba(157, 108, 124, .25) 7%, var(--eva-toolbar-pencil) 21%, rgba(157, 108, 124, .64) 82%, transparent);
  opacity: 0;
  transform: rotate(-1.4deg) scaleX(.72);
  transform-origin: 45% center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-header .site-nav a:hover,
.inner-header .inner-nav a:hover,
.inner-header .inner-nav a[aria-current="page"] { color: var(--eva-toolbar-cherry) !important; }

.site-header .site-nav a:focus-visible,
.inner-header .inner-nav a:focus-visible {
  outline: 3px solid var(--eva-toolbar-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-header .site-nav a:hover::after,
.inner-header .inner-nav a:hover::after,
.inner-header .inner-nav a[aria-current="page"]::after {
  opacity: .78;
  transform: rotate(-1.1deg) scaleX(.94);
}

.eva-audio-player {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.eva-melody-button {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 14px;
  color: var(--eva-toolbar-ink);
  background: transparent;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, filter 220ms ease, opacity 220ms ease;
}

.eva-melody-button::before {
  display: none;
}

.eva-melody-button:hover {
  filter: none;
  transform: translateY(-1px) rotate(2deg) scale(1.045);
}

.eva-melody-button:active { transform: translateY(0) scale(.96); }

.eva-melody-button:focus-visible {
  outline: 3px solid var(--eva-toolbar-focus);
  outline-offset: 1px;
}

.eva-melody-mark {
  position: relative;
  z-index: 1;
  display: block;
  width: 31px;
  height: 35px;
  overflow: visible;
  transform: rotate(1.5deg);
}

.eva-melody-heart,
.eva-melody-note,
.eva-melody-slash {
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  transition: fill 260ms ease, stroke 260ms ease, opacity 220ms ease, transform 260ms ease;
}

.eva-melody-heart {
  fill: rgba(171, 102, 126, .08);
  stroke: #8f4961;
  stroke-width: 1.55;
}

.eva-melody-note {
  fill: none;
  stroke: #654153;
  stroke-width: 1.85;
}

.eva-melody-slash {
  fill: none;
  stroke: #9c5970;
  stroke-width: 1.55;
  opacity: .84;
}

.eva-melody-dot--blue { fill: var(--eva-toolbar-blue); }
.eva-melody-dot--gold { fill: var(--eva-toolbar-gold); }

.eva-melody-button[aria-pressed="true"] .eva-melody-heart { fill: rgba(155, 169, 194, .16); stroke: #7d4057; transform: scale(1.02); }
.eva-melody-button[aria-pressed="true"] .eva-melody-note { stroke: #697795; }
.eva-melody-button[aria-pressed="true"] .eva-melody-slash { opacity: 0; transform: scale(.72); }
.eva-melody-button.is-loading .eva-melody-mark { opacity: .58; }
.eva-melody-button.has-error { opacity: .56; }

.eva-melody-status,
.eva-route-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.turbo-progress-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--eva-toolbar-blue), var(--eva-toolbar-pencil), var(--eva-toolbar-gold));
  box-shadow: 0 0 6px rgba(167, 120, 134, .3);
}

@media (max-width: 700px) {
  html { scroll-padding-top: calc(var(--eva-toolbar-mobile) + 12px) !important; }

  .site-header::before,
  .inner-header::before {
    inset-inline: 3px;
    filter: drop-shadow(0 5px 8px rgba(11, 5, 12, .23));
  }

  .site-header::after,
  .inner-header::after {
    top: 2px;
    left: max(54px, calc(env(safe-area-inset-left) + 50px));
    width: 15px;
    height: 48px;
  }

  .site-header,
  .inner-header,
  .v16-song .inner-header,
  .studio-page .inner-header {
    width: calc(100% - 8px) !important;
    max-width: var(--eva-toolbar-width);
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-rows: 42px !important;
    gap: 0 8px !important;
    min-height: var(--eva-toolbar-mobile);
    padding-top: 8px !important;
    padding-right: max(10px, calc(env(safe-area-inset-right) + 6px)) !important;
    padding-bottom: 8px !important;
    padding-left: max(10px, calc(env(safe-area-inset-left) + 6px)) !important;
  }

  .site-header .home-charm,
  .inner-header .home-charm {
    grid-column: 1;
    grid-row: 1;
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .home-charm__icon { width: 27px; height: 27px; }

  .eva-audio-player {
    grid-column: 3;
    grid-row: 1;
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .eva-melody-button { width: 42px; height: 42px; border-radius: 14px; }
  .eva-melody-mark { width: 29px; height: 33px; }

  .site-header .site-nav,
  .inner-header .inner-nav,
  .v16-song .inner-header .inner-nav,
  .studio-page .inner-header .inner-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: clamp(10px, 4.2vw, 20px) !important;
    font-size: 17.5px !important;
  }

  .site-header .site-nav a,
  .inner-header .inner-nav a { min-height: 40px; }
  .site-header .site-nav a::after,
  .inner-header .inner-nav a::after { bottom: 8px; }
}

@media (max-width: 520px) {
  .site-header::before,
  .inner-header::before {
    background-image: url('/assets/ui/toolbar-paper-mobile-v1.png');
  }
}

@media (max-width: 360px) {
  .site-header,
  .inner-header,
  .v16-song .inner-header,
  .studio-page .inner-header {
    padding-right: max(7px, calc(env(safe-area-inset-right) + 4px)) !important;
    padding-left: max(7px, calc(env(safe-area-inset-left) + 4px)) !important;
    gap: 0 5px !important;
  }

  .site-header .site-nav,
  .inner-header .inner-nav,
  .v16-song .inner-header .inner-nav,
  .studio-page .inner-header .inner-nav { gap: 8px !important; font-size: 16.5px !important; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav a,
  .inner-header .inner-nav a,
  .site-header .site-nav a::after,
  .inner-header .inner-nav a::after,
  .home-charm,
  .eva-melody-button,
  .eva-melody-heart,
  .eva-melody-note,
  .eva-melody-slash { transition: none !important; }

  html:not([data-toolbar-motion-preview]) .site-header,
  html:not([data-toolbar-motion-preview]) .inner-header { transition: none !important; animation: none !important; }

  html:not([data-toolbar-motion-preview]) .site-header::after,
  html:not([data-toolbar-motion-preview]) .inner-header::after,
  html:not([data-toolbar-motion-preview]) .site-header::before,
  html:not([data-toolbar-motion-preview]) .inner-header::before { animation: none !important; }

  html:not([data-toolbar-motion-preview]) .site-header.is-toolbar-returning,
  html:not([data-toolbar-motion-preview]) .inner-header.is-toolbar-returning { animation: none !important; transform: none; }

  .home-charm:hover,
  .home-charm:active,
  .eva-melody-button:hover,
  .eva-melody-button:active { transform: none; }
}