/*
 * modules/watermark.css — English watermark (.axihub-wm)
 * Shared by TOP (front-sections) and static LPs. Same component, same shine.
 */

.axihub-sec-head__wm {
  display: flex;
  justify-content: flex-end;
  line-height: 1;
  min-height: 0;
}

.axihub-sec-head__wm--start {
  justify-content: flex-start;
}

.axihub-wm,
.axihub-pickup__watermark {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: .05em;
  transform: skewX(-18deg);
  transform-origin: right center;
  white-space: nowrap;
  pointer-events: none;
  line-height: .85;
  text-align: right;
  background: linear-gradient(115deg, var(--color-accent) 0%, var(--color-wm-2) 32%, var(--color-wm-3) 68%, var(--color-wm-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: .78;
}

.axihub-wm--start {
  transform-origin: left center;
  text-align: left;
}

.axihub-wm--md {
  font-size: 40px;
}

.axihub-wm--sm {
  font-size: 28px;
  letter-spacing: .06em;
}

/* 青／暗帯上：明側グラデ（構造・shine は同一） */
.axihub-wm--on-dark {
  background: linear-gradient(
    115deg,
    var(--color-on-inverse) 0%,
    var(--color-wm-2) 38%,
    var(--color-on-inverse-a70) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  opacity: .9;
}

.axihub-wm::after,
.axihub-pickup__watermark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    transparent 38%,
    transparent 42%,
    var(--color-on-inverse-a85) 50%,
    transparent 58%,
    transparent 65%,
    transparent 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: axihubWmShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes axihubWmShine {
  0%,
  28% {
    background-position: 120% 0;
  }

  55% {
    background-position: -20% 0;
  }

  100% {
    background-position: -20% 0;
  }
}

@media (max-width: 560px) {
  .axihub-wm,
  .axihub-pickup__watermark {
    font-size: 40px;
  }

  .axihub-wm--md {
    font-size: 32px;
  }

  .axihub-wm--sm {
    font-size: 22px;
  }
}