/* ─── Aloha Hero (video bg) ─── */

.hero-aloha {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0D3B2E;
}

/* Defeat WordPress core's high-specificity dim overlay so the video shows. */
.hero-aloha .wp-block-cover__background,
.hero-aloha > .wp-block-cover__background.has-background-dim {
  opacity: 0 !important;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  will-change: transform;
}

/* Dark veil for legibility */
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,59,46,0.55) 0%, rgba(13,59,46,0.35) 35%, rgba(13,59,46,0.55) 70%, rgba(13,59,46,0.85) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

/* Cinematic vignette */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
}

#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-aloha .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-aloha__inner {
  text-align: center;
}

/* Eyebrow with side rules */
.hero-aloha__eyebrow {
  position: relative;
  display: inline-block;
}
.hero-aloha__eyebrow::before,
.hero-aloha__eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 14px;
  opacity: 0.55;
}

/* "Aloha" word — extruded depth via stacked drop-shadows.
   (background-clip:text means CSS text-shadow doesn't render; filter
   drop-shadow respects the clipped glyph shape.) */
.hero-aloha__word {
  font-feature-settings: "ss01", "ss02", "kern", "liga";
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F8E8 55%, #B7D4BD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.18))
    drop-shadow(0 14px 30px rgba(0,0,0,0.45))
    drop-shadow(0 30px 80px rgba(0,0,0,0.55))
    drop-shadow(0 0 22px rgba(232,168,56,0.20));
  transform-origin: 50% 60%;
  animation:
    aloha-fade-in 1.6s 0.25s cubic-bezier(.2,.7,.2,1) both,
    aloha-breath 9s 2.2s ease-in-out infinite;
}

.hero-aloha__lede {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.92;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  animation: aloha-fade-in 1.4s 0.65s cubic-bezier(.2,.7,.2,1) both;
}

.hero-aloha__cta {
  animation: aloha-fade-in 1.2s 0.95s cubic-bezier(.2,.7,.2,1) both;
}

/* Buttons */
.hero-aloha__cta .wp-block-button__link {
  border-radius: 999px !important;
  padding: 15px 32px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border: 1px solid transparent !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease !important;
}
.hero-aloha__btn--primary .wp-block-button__link {
  background: #FAFDF7 !important;
  color: #0D3B2E !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.hero-aloha__btn--primary .wp-block-button__link:hover {
  background: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.hero-aloha__btn--ghost .wp-block-button__link {
  background: transparent !important;
  color: #FAFDF7 !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.hero-aloha__btn--ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #FFFFFF !important;
}

/* Wave divider into the mission section (#F0F5EC) */
.hero-wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(60px, 8vh, 110px);
  z-index: 4;
  pointer-events: none;
  display: block;
}

@keyframes aloha-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aloha-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

@media (max-width: 720px) {
  .hero-aloha { min-height: 88dvh; }
  .hero-aloha__eyebrow::before,
  .hero-aloha__eyebrow::after { width: 14px; margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-aloha__word,
  .hero-aloha__lede,
  .hero-aloha__cta { animation: none !important; }
}