/* ========== Home: Hero ========== */
.hero {
  position: relative;
  min-height: 80svh;
  color: var(--color-white);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
  background-size: cover;
  background-position: center;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide--pos-left {
  background-position: left center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(13, 59, 92, 0.78) 0%,
      rgba(13, 59, 92, 0.3) 45%,
      rgba(74, 163, 212, 0.2) 100%
    );
  z-index: 1;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 80svh;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: calc(var(--header-height) + var(--space-6));
  padding-bottom: clamp(6rem, 14vw, 9rem);
  text-align: right;
  transform: translateY(120px);
}

.hero__logo {
  display: block;
  width: clamp(14rem, 38vw, 30rem);
  height: auto;
  transform: translateX(33px);
}

.hero__tagline {
  font-family: "Meiryo", "メイリオ", sans-serif;
  font-size: clamp(var(--fs-lg), 3vw, var(--fs-2xl));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 16px rgba(13, 59, 92, 0.35);
  margin-bottom: calc(var(--space-4) - 20px);
}

.hero__dots {
  position: absolute;
  right: var(--container-pad);
  bottom: clamp(3.5rem, 10vw, 6.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background var(--transition), transform var(--transition);
}

.hero__dot.is-active {
  background: var(--color-white);
  transform: scale(1.25);
}

/* ========== Home: Categories ========== */
.category-grid {
  display: grid;
  gap: var(--space-3);
}

.category-link {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 11rem;
  padding: var(--space-5) var(--space-7);
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}

.category-link__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow);
}

.category-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(26, 31, 38, 0.75), rgba(26, 31, 38, 0.15));
}

.category-link:hover .category-link__bg {
  transform: scale(1.05);
}

.category-link__bg--pos-left {
  background-position: left center;
}

.category-link__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}

.category-link__count {
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin-top: var(--space-1);
}

.category-link--align-end {
  justify-items: end;
  text-align: right;
}

/* ========== Contact: Business ========== */
.split__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: var(--space-3);
}

.split__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}

.split__text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.split__text p + p {
  margin-top: var(--space-4);
}

.business-list {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.25rem;
  list-style: disc;
}

/* ========== Products page ========== */
.product-detail {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.product-detail__media {
  width: 12rem;
  height: 12rem;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: var(--color-sky-mist);
}

.product-detail--with-media {
  grid-template-columns: minmax(0, 1fr) 12rem;
  grid-template-areas:
    "meta meta"
    "body body"
    "actions media";
  align-items: start;
  gap: 0 calc(var(--space-3) * 1.5);
}

.product-detail--with-media .product-detail__meta {
  grid-area: meta;
}

.product-detail__body {
  grid-area: body;
}

.product-detail--with-media .product-detail__body {
  margin-bottom: var(--space-3);
}

.product-detail--with-media .product-detail__media {
  grid-area: media;
  justify-self: end;
}

.product-detail--with-media .product-detail__actions {
  grid-area: actions;
  align-self: start;
  padding-top: 0.15rem;
}

.product-detail__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}

.product-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.product-detail__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.product-detail__desc {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.product-detail--with-media .product-detail__desc {
  margin-bottom: 0;
}

.product-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s var(--transition-slow),
    transform 0.7s var(--transition-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--fade {
  transform: none;
}

.reveal--fade.is-visible {
  transform: none;
}