:root {
  --hero-brand-blue: #88c5fd;
  --hero-signature-blue: #49a7e9;
  --hero-muted-blue: #55718f;
  --hero-line-blue: #8dbce3;
  --hero-heart-blue: #66aef0;
  --hero-note-glow: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #fff);
  --hero-note-en-glow: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff);
  --hero-note-en-angle: -8deg;
  --hero-title-glow: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ffffffd9);
  --hero-reveal-duration: 1.5s;
  --hero-reveal-easing: cubic-bezier(.2, .8, .2, 1);
}

/* Shared hero contract. Page styles only provide unique coordinates and artwork sizes. */
:is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero) {
  position: relative;
  isolation: isolate;
  min-width: 0;
}

:is(.achievements-hero, .commands-hero, .paid-hero, .drawing-hero) {
  display: block;
  padding: 0;
  overflow: visible;
  text-align: center;
}

:is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero) .sparkles {
  pointer-events: none;
}

:is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero) .decoration {
  filter: var(--hero-note-glow);
}

:is(.achievements-hero, .commands-hero) .decoration--heart {
  color: var(--decoration-pink);
}

:is(.achievements-hero, .commands-hero) :is(.decoration--2, .decoration--6, .decoration--10) {
  z-index: 5;
}

:is(.lettering-note, .achievement-note, .command-hero-note, .paid-note, .drawing-hero-note) {
  position: absolute;
  z-index: 4;
  object-fit: contain;
  filter: var(--hero-note-glow);
  transition: none;
}

:is(.lettering-note--ko, .achievement-note--ko, .command-hero-note--ko, .paid-note--ko, .drawing-hero-note--ko) {
  rotate: -7deg;
  animation: hero-note-float-ko 9s ease-in-out infinite;
}

:is(.lettering-note--en, .achievement-note--en, .command-hero-note--en, .paid-note--en, .drawing-hero-note--en) {
  filter: var(--hero-note-en-glow);
  rotate: none;
  transform: rotate(var(--hero-note-en-angle)) !important;
  animation: hero-note-float-en 10.2s ease-in-out infinite;
}

@keyframes hero-note-float-ko {
  0%, 100% { translate: 0 0; }
  30% { translate: 5px -4px; }
  62% { translate: -4px 5px; }
  82% { translate: 3px 2px; }
}

@keyframes hero-note-float-en {
  0%, 100% { translate: 0 0; }
  27% { translate: -4px 3px; }
  57% { translate: 4px -5px; }
  79% { translate: -3px -1px; }
}

:is(.poster-wordmark, .achievement-title-art, .command-title-art, .paid-title, .drawing-title-art) {
  position: absolute;
  z-index: 3;
  left: 50%;
  height: auto;
  object-fit: contain;
  filter: var(--hero-title-glow);
}

:is(.achievement-title-art, .command-title-art, .paid-title, .drawing-title-art) {
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fffffff0);
}

:is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero)
  :is(.lettering-signature, .achievement-signature, .command-signature, .paid-signature, .drawing-signature) {
  position: absolute;
  z-index: 4;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hero-signature-gap);
  max-width: none;
  margin: 0;
  color: var(--hero-signature-blue);
  font-size: var(--hero-signature-size);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: var(--hero-signature-spacing);
  white-space: nowrap;
  text-shadow: 0 1px 0 #fff, 0 0 9px #fff;
}

:is(.lettering-paw .icon, .achievement-signature .icon, .command-signature .icon, .paid-signature svg, .drawing-signature svg) {
  width: var(--hero-signature-paw-size);
  height: var(--hero-signature-paw-size);
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  :is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero)
    :is(.lettering-signature, .achievement-signature, .command-signature, .paid-signature, .drawing-signature) {
    gap: .5rem;
    font-size: .62rem;
    letter-spacing: .32em;
  }
}

@media (min-width: 640px) {
  :is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero)
    :is(.lettering-signature, .achievement-signature, .command-signature, .paid-signature, .drawing-signature) {
    gap: 1rem;
    font-size: .82rem;
  }
}

@media (min-width: 1000px) {
  :is(.home-lettering, .achievements-hero, .commands-hero, .paid-hero, .drawing-hero)
    :is(.lettering-signature, .achievement-signature, .command-signature, .paid-signature, .drawing-signature) {
    gap: 1rem;
    font-size: .88rem;
    letter-spacing: var(--hero-signature-spacing);
  }
}

:is(.achievements-hero, .paid-hero, .drawing-hero)
  :is(.achievement-hero-subtitle, .paid-hero-subtitle, .drawing-hero-subtitle) {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding-inline: 1rem;
  translate: none;
  margin: 0 auto;
  color: var(--hero-muted-blue);
  text-align: center;
  text-shadow: 0 1px 4px #fff;
}

:is(.achievement-divider, .paid-hero-divider, .drawing-divider) {
  position: absolute;
  z-index: 4;
  left: 50%;
  translate: -50% 0;
}

.commands-page .commands-hero .command-signature::before,
.achievements-page .achievements-hero .achievement-divider,
.paid-page .paid-hero .paid-hero-divider,
.page-drawing .drawing-hero .drawing-divider {
  content: "";
  display: block;
  width: 8.8496rem;
  height: 20px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 20'%3E%3Cpath d='M0 10H44.8' fill='none' stroke='%238DBCE3' stroke-width='1'/%3E%3Csvg x='61' y='0' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2366AEF0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21S2 15 2 8a5 5 0 0 1 10-1A5 5 0 0 1 22 8c0 7-10 13-10 13Z'/%3E%3C/svg%3E%3Cpath d='M97.2 10H142' fill='none' stroke='%238DBCE3' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  text-shadow: none;
}

:is(.achievement-divider, .paid-hero-divider, .drawing-divider) > * {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  :is(.lettering-note, .achievement-note, .command-hero-note, .paid-note, .drawing-hero-note,
      .achievement-symbol, .command-hero-symbol, .drawing-pencil-art) {
    animation: none;
    translate: 0 0;
  }
}

/* One reveal implementation; it never changes positioning transforms or translate. */
@keyframes hero-system-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.home-lettering .poster-wordmark,
.achievement-title-art,
.command-title-art {
  animation: hero-system-reveal var(--hero-reveal-duration) var(--hero-reveal-easing) both;
}

.home-lettering .lettering-signature,
.achievement-signature,
.command-signature {
  animation: hero-system-reveal var(--hero-reveal-duration) .12s var(--hero-reveal-easing) both;
}

.home-page--lettering .introduction,
.achievement-hero-subtitle {
  animation: hero-system-reveal var(--hero-reveal-duration) .24s var(--hero-reveal-easing) both;
}

.achievement-divider {
  animation: hero-system-reveal var(--hero-reveal-duration) .34s var(--hero-reveal-easing) both;
}

/* Shared perimeter distribution for the four hearts. */
:is(.commands-hero, .achievements-hero, .paid-hero, .drawing-hero) .decoration--2 {
  left: 4%; right: auto; top: 44%;
}
:is(.commands-hero, .achievements-hero, .paid-hero, .drawing-hero) .decoration--4 {
  left: 42%; right: auto; top: 13%;
}
:is(.commands-hero, .achievements-hero, .paid-hero, .drawing-hero) .decoration--9 {
  left: 83%; right: auto; top: 45%;
}
:is(.commands-hero, .achievements-hero, .paid-hero, .drawing-hero) .decoration--12 {
  left: 10%; right: auto; top: 86%;
}

/* Final page parameters selected during visual review. */
.achievement-note--en {
  content: url('/assets/brand/achievements-note-en.png?v=4');
  width: 87.48px;
}

.paid-page .paid-hero .paid-note--ko {
  left: -1%;
  top: 7%;
  width: 118px;
  animation: paidNoteReveal 1.5s cubic-bezier(.2, .72, .2, 1) both,
    hero-note-float-ko 9s ease-in-out 1.5s infinite;
}
.paid-page .paid-hero .paid-note--en {
  left: auto;
  right: -1%;
  top: 4%;
  width: 103px;
  animation: paidNoteReveal 1.5s cubic-bezier(.2, .72, .2, 1) .14s both,
    hero-note-float-en 10.2s ease-in-out 1.64s infinite;
}
.paid-page .paid-hero .decoration--1 { left: 29%; top: 29%; }
.paid-page .paid-hero .decoration--13 { left: 46%; top: 22%; }
.paid-page .paid-hero .decoration--14 { left: 48%; top: 64%; }

.page-drawing .drawing-hero-note--en {
  width: 139.15px;
}
.page-drawing .drawing-hero .drawing-hero-note--ko {
  left: -1%;
  top: 7%;
  width: 116px;
  animation: drawingNoteReveal 1.5s cubic-bezier(.2, .72, .2, 1) both,
    hero-note-float-ko 9s ease-in-out 1.5s infinite;
}
.page-drawing .drawing-hero .drawing-hero-note--en {
  top: 5%;
  right: -3%;
  left: auto;
  animation: drawingNoteReveal 1.5s cubic-bezier(.2, .72, .2, 1) .14s both,
    hero-note-float-en 10.2s ease-in-out 1.64s infinite;
}

/* Shared pink treatment for the matching upper-left hero hearts. */
.paid-page .decoration--heart.decoration--2,
.paid-page .decoration--heart.decoration--4,
.page-drawing .decoration--heart.decoration--2,
.page-drawing .decoration--heart.decoration--4 {
  color: var(--decoration-pink);
}

@media (max-width: 639px) {
  :is(.achievements-hero, .paid-hero, .drawing-hero)
    :is(.achievement-hero-subtitle, .paid-hero-subtitle, .drawing-hero-subtitle) {
    top: 84%;
  }
}

@media (min-width: 769px) {
  :is(.achievements-hero, .paid-hero, .drawing-hero)
    :is(.achievement-hero-subtitle, .paid-hero-subtitle, .drawing-hero-subtitle) {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-lettering .poster-wordmark,
  .home-lettering .lettering-signature,
  .home-page--lettering .introduction,
  .achievement-title-art,
  .achievement-signature,
  .achievement-hero-subtitle,
  .achievement-divider,
  .command-title-art,
  .command-signature {
    animation: none;
  }
}