/*--------------------------------------------------------------
# Tapa Pattern System — Layout & Animation Styles
--------------------------------------------------------------*/

.tapa-band {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.tapa-band svg {
  display: block;
  width: 100%;
  height: 100%;
}

.star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star-dot {
  will-change: opacity;
}

.star-lines {
  will-change: opacity;
}

/* Shooting comets */
.comet {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  /* The comet is a thin rotated line with a glowing head */
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(245, 240, 232, 0.5) 80%, #F5F0E8);
  transform-origin: right center;
}

.comet::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: #F5F0E8;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(245, 240, 232, 0.6);
}

.comet.comet-large {
  width: 100px;
}

@keyframes comet-streak {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 1; }
  70% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(300px, 130px); }
}

@keyframes comet-streak-long {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 1; }
  60% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(500px, 215px); }
}

.hero-motif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 60%;
  max-width: 500px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.hero-motif svg {
  width: 100%;
  height: auto;
}

.pacific-card::before,
.pacific-card::after {
  will-change: width, height, opacity;
}

.tatau-divider {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 12px;
  overflow: hidden;
}

.tatau-divider span {
  display: block;
  width: 12px;
  height: 3px;
  background: var(--logo-brown);
  opacity: 0;
  will-change: opacity, transform;
}

.crest-section .tatau-divider span {
  background: var(--light-tapa);
}

.footer-wave {
  position: relative;
}

.footer-wave::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 Q150,0 300,10 T600,10 T900,10 T1200,10' fill='none' stroke='%237A5230' stroke-width='1' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 1200px 20px;
  background-repeat: repeat-x;
}

/* Text reveal animation masks */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-mask .word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .star-dot {
    opacity: 0.7 !important;
    will-change: auto;
  }

  .star-line {
    opacity: 0.08 !important;
  }

  .hero-motif {
    transform: translate(-50%, -50%) scale(1);
    will-change: auto;
  }

  .tatau-divider span {
    opacity: 1 !important;
    will-change: auto;
  }

  .pacific-card::before,
  .pacific-card::after {
    will-change: auto;
  }

  .word-mask .word {
    transform: none !important;
    opacity: 1 !important;
  }

  .tapa-band line,
  .tapa-band polyline,
  .tapa-band polygon,
  .tapa-band path,
  .tapa-band circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .comet {
    display: none !important;
  }
}