/**
 * Fluid Wave Hero – Stylesheet
 * Aesthetic: cinematic deep-ocean, full-bleed, immersive.
 */

/* ── Reset / Base ────────────────────────────────────────────────────────── */
.fwh-widget, .fwh-widget * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Widget Container ────────────────────────────────────────────────────── */
.fwh-widget {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  background: #03070f;
  isolation: isolate;
}

/* Full-bleed when directly inside .elementor-section */
.elementor-section > .elementor-container .fwh-widget,
.e-con > .fwh-widget {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ── WebGL Canvas ────────────────────────────────────────────────────────── */
.fwh-scene-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fwh-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: all;
}

/* ── Content Wrap ────────────────────────────────────────────────────────── */
.fwh-content-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  padding: clamp(20px, 5vw, 80px);
}

.fwh-content-wrap--top    { align-items: flex-start; padding-top: clamp(40px, 8vh, 120px); }
.fwh-content-wrap--center { align-items: center; }
.fwh-content-wrap--bottom { align-items: flex-end; padding-bottom: clamp(80px, 10vh, 140px); }

.fwh-content {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: min(860px, 90vw);
  pointer-events: all;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.fwh-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(2rem, 4.5vw, 5.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-shadow:
    0 0 60px rgba(56, 180, 232, 0.45),
    0 2px 40px rgba(0,0,0,0.6);
  animation: fwh-fadein 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Subtitle ────────────────────────────────────────────────────────────── */
.fwh-subtitle {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: rgba(180, 220, 255, 0.80);
  max-width: 56ch;
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
  animation: fwh-fadein 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* ── CTA Button ──────────────────────────────────────────────────────────── */
.fwh-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: 1px solid rgba(56, 180, 232, 0.55);
  border-radius: 40px;
  background: rgba(56, 180, 232, 0.10);
  color: #a8e6ff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(0.82rem, 1.1vw, 0.96rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
  animation: fwh-fadein 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.fwh-cta:hover {
  background: rgba(56, 180, 232, 0.22);
  border-color: rgba(56, 180, 232, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(56, 180, 232, 0.25), 0 0 0 1px rgba(56,180,232,0.15);
}

.fwh-cta:active { transform: translateY(0); }

.fwh-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.fwh-cta:hover svg { transform: translateX(4px); }

/* ── Scroll Hint (animated chevron) ─────────────────────────────────────── */
.fwh-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  animation: fwh-fadein 2.5s ease 1s both;
}

.fwh-scroll-hint span {
  display: block;
  width: 24px;
  height: 24px;
  border-right: 1.5px solid rgba(255,255,255,0.30);
  border-bottom: 1.5px solid rgba(255,255,255,0.30);
  transform: rotate(45deg);
  animation: fwh-bounce 2s ease-in-out infinite;
}

@keyframes fwh-bounce {
  0%, 100% { transform: rotate(45deg) translateY(0);    opacity: 0.4; }
  50%       { transform: rotate(45deg) translateY(5px);  opacity: 0.9; }
}

/* ── Gradient vignette overlay ───────────────────────────────────────────── */
.fwh-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(3,7,15,0) 0%, rgba(3,7,15,0.55) 100%),
    linear-gradient(to top, rgba(3,7,15,0.65) 0%, transparent 35%),
    linear-gradient(to bottom, rgba(3,7,15,0.40) 0%, transparent 25%);
  pointer-events: none;
  z-index: 5;
}

/* ── Fade-in animation ───────────────────────────────────────────────────── */
@keyframes fwh-fadein {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Fallback (no WebGL) ─────────────────────────────────────────────────── */
.fwh-widget--fallback {
  background: linear-gradient(160deg, #03070f 0%, #0a2040 50%, #051525 100%);
}

.fwh-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 80px);
}

.fwh-fallback__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: min(720px, 90vw);
}

/* ── Elementor Editor Placeholder ───────────────────────────────────────── */
.fwh-editor-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #03070f;
  border: 1px dashed rgba(56, 180, 232, 0.25);
}

.fwh-editor-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.65;
}

.fwh-editor-inner p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  color: #38b4e8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fwh-editor-inner span {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.78rem;
  color: rgba(56, 180, 232, 0.45);
  letter-spacing: 0.03em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fwh-widget {
    height: 480px;
  }

  .fwh-title {
    font-size: clamp(1.6rem, 7vw, 3rem);
  }

  .fwh-subtitle {
    font-size: 0.88rem;
  }

  .fwh-cta {
    padding: 12px 24px;
    font-size: 0.78rem;
  }

  .fwh-scroll-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .fwh-content {
    align-items: center !important;
    text-align: center !important;
  }
}