/* เฉพาะโลโก้ใหญ่บนหน้าปก: แสงสะท้อนทุก 2 วินาที / แสงกระพริบทุก 1.8 วินาที */
.hero-logotype {
  isolation: isolate;
}

.hero-logotype .hero-logo-letters,
.hero-logotype .logo-cut,
.hero-logotype .hero-mobile-text,
.hero-logotype .hero-core-text {
  position: relative;
  display: inline-block;
  padding-inline: .06em .16em;
  margin-inline: -.06em -.16em;
}

.hero-logotype .logo-cut {
  padding-inline: .12em .32em;
  margin-inline: -.12em -.32em;
}

.hero-logotype .hero-logo-letters {
  color: #f3ead7;
  filter: drop-shadow(0 0 11px #ddb46a33);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-logotype .hero-logo-letters {
    background-image: linear-gradient(112deg, #f3ead7 0% 29%, #b8a58a 34%, #fff6e4 39%, #ffffff 42%, #f4d79d 44%, #f3ead7 48% 68%, #fff3d9 73%, #f3ead7 79% 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: core-logo-reflection 2s ease-in-out infinite;
  }

  .hero-logotype .logo-cut,
  .hero-logotype .hero-core-text {
    color: var(--accent);
    background-image: linear-gradient(112deg, #c49650 0% 29%, #e1b773 35%, #fff1cf 42%, #e8c182 45%, #c49650 51% 100%);
    background-size: 280% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: core-logo-reflection 2s .12s ease-in-out infinite;
  }
}

.hero-logotype [data-logo-text]::before,
.hero-logotype [data-logo-text]::after {
  content: attr(data-logo-text);
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: inherit;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor;
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: inset(0 0 100%);
}

.hero-logotype [data-logo-text]::before {
  color: #fff1d2;
  text-shadow: -1px 0 #e7b866, 0 0 9px #ecc984a6;
  animation: core-logo-light-slices 1.8s steps(1, end) infinite;
}

.hero-logotype [data-logo-text]::after {
  color: #f4dfb6;
  text-shadow: 1px 0 #ffeac1, 0 0 6px #ffe8bb80;
  animation: core-logo-light-echo 1.8s .09s steps(1, end) infinite;
}

.hero-logotype .hero-core-text::before,
.hero-logotype .hero-core-text::after {
  animation-delay: .18s;
}

.hero-logotype .hero-mobile-text::before,
.hero-logotype .hero-mobile-text::after {
  animation-delay: .24s;
}

@keyframes core-logo-reflection {
  0%, 9% { background-position: 100% 0; }
  36%, 100% { background-position: 0% 0; }
}

@keyframes core-logo-light-slices {
  0%, 67%, 83%, 100% { opacity: 0; clip-path: inset(0 0 100%); transform: none; }
  68% { opacity: .66; clip-path: inset(16% 0 70%); transform: translate(-3px, 0); }
  70% { opacity: .24; clip-path: inset(64% 0 24%); transform: translate(3px, 0); }
  72% { opacity: 0; }
  76% { opacity: .48; clip-path: inset(43% 0 42%); transform: translate(2px, -1px); }
  78% { opacity: .18; clip-path: inset(80% 0 10%); transform: translate(-2px, 0); }
  80% { opacity: 0; }
}

@keyframes core-logo-light-echo {
  0%, 68%, 81%, 100% { opacity: 0; clip-path: inset(0 0 100%); transform: none; }
  69% { opacity: .32; clip-path: inset(35% 0 52%); transform: translate(3px, 0); }
  71% { opacity: 0; }
  76% { opacity: .28; clip-path: inset(70% 0 18%); transform: translate(-3px, 1px); }
  79% { opacity: 0; }
}

@media (max-width: 650px) {
  .hero-logotype [data-logo-text]::before,
  .hero-logotype [data-logo-text]::after {
    text-shadow: 0 0 5px currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logotype [data-logo-text] {
    animation: none !important;
    background-image: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
  .hero-logotype [data-logo-text]::before,
  .hero-logotype [data-logo-text]::after {
    display: none;
  }
}