/* Hero Section */
.hero {
  padding-top: var(--header-height);
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero__content {
  max-width: var(--container-width);
  width: 100%;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: left;
  z-index: 1;
}

.hero__title {
  font-size: 4rem;
  font-weight: normal;
  line-height: 1.2;
  padding: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
  background-color: oklch(100% 0 270 / 0.726);
  text-shadow: 1px 1px 2px var(--color-white);
  border-radius: 12px;
  letter-spacing: 0.05em;
  opacity: 0; /* Initial state */
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

.hero__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* About Section */
.about {
  position: relative;
  padding: var(--spacing-xl) 0;
  background-color: var(--color-white);
}

.about__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.1;
}

.about__content {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.about__text {
  font-size: 1.1rem;
  line-height: 2;
  margin-bottom: var(--spacing-lg);
}

/* Service Section */
.service {
  position: relative;
  padding: var(--spacing-xl) 0;
  background-color: var(--color-white);
}

.service__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.1;
}

.service__content {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.service__text {
  font-size: 1.2rem;
  line-height: 2;
}

/* Works Section */
.works {
  padding: var(--spacing-xl) 0;
  background: linear-gradient(
    to bottom right,
    var(--color-primary-light),
    var(--color-white)
  );
}

.works__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  max-width: 1000px;
  margin-inline: auto;
}

.work-card {
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  opacity: 0; /* Initial state for animation */
}

.work-card.is-visible {
  opacity: 1;
}

.work-card:hover {
  transform: translateY(-10px);
}

.work-card__image {
  width: 100%;
}

.work-card__image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.work-card__body {
  padding: var(--spacing-md);
}

.work-card__title {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
}

.work-card__desc {
  font-size: 1rem;
  color: var(--color-text-light);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* PC Layout for Works */
@media (min-width: 768px) {
  .work-card {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .work-card__image {
    width: 50%;
    flex-shrink: 0;
  }

  .work-card__image img {
    height: 100%;
    min-height: 300px;
  }

  .work-card__body {
    width: 50%;
    padding: var(--spacing-lg);
  }

  /* Odd items: Image Left, Text Right (Default Flex) */
  .work-card:nth-child(odd) {
    flex-direction: row;
  }

  .work-card:nth-child(odd).is-visible {
    animation: slideInRight 0.8s ease-out forwards;
  }

  /* Even items: Image Right, Text Left */
  .work-card:nth-child(even) {
    flex-direction: row-reverse;
  }

  .work-card:nth-child(even).is-visible {
    animation: slideInLeft 0.8s ease-out forwards;
  }
}

/* Contact Section */
.contact {
  position: relative;
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.contact__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  z-index: -1;
}

.contact__text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
}

.contact__info {
  margin-bottom: var(--spacing-lg);
}

.contact__address,
.contact__tel,
.contact__name,
.contact__email {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
}

.contact__map {
  width: 100%;
  max-width: 800px;
  height: 400px;
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact__map iframe {
  width: 100%;
  height: 100%;
}

/* Media Queries (Mobile) */
@media (width < 768px) {
  /* Hero */
  .hero {
    padding-top: calc(var(--header-height) + var(--spacing-lg));
    padding-bottom: var(--spacing-lg);
    height: auto; /* Fallback or keep 100dvh? User said "First view (hero section) image should be full height". Usually on mobile too. But content might overflow. Let's stick to 100dvh if possible, or min-height. User said "height: 100dvh". */
    min-height: 100dvh; /* Ensure it covers at least viewport */
    height: auto; /* Allow expansion if content is tall */
  }

  .hero__content {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__text-wrapper {
    width: 100%;
  }

  .hero__image {
    margin-top: var(--spacing-md);
    width: 100%;
  }

  .about__text {
    font-size: 0.9rem;
  }

  .about__image {
    object-position: 20% center;
  }

  .service__text {
    font-size: 0.9rem;
  }

  .about,
  .service,
  .works,
  .contact {
    padding: var(--spacing-md) 0;
  }

  .contact__text {
    font-size: 1.2rem;
  }

  .contact__address,
  .contact__tel,
  .contact__name,
  .contact__email {
    font-size: 0.9rem;
  }
}