/* =========================================================
   SEA LICENSING — CINEMATIC HERO EFFECTS
   ========================================================= */

.home-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}


/* =========================================================
   1. SLOW CINEMATIC BACKGROUND DRIFT
   ========================================================= */

.home-hero-photo {
  background-position: 50% 50%;

  animation:
    heroOceanDrift 18s ease-in-out infinite alternate;

  will-change: background-position;

  filter:
    saturate(1.04)
    contrast(1.025)
    brightness(1.015);
}


@keyframes heroOceanDrift {

  0% {
    background-position:
      50% 50%;
  }

  50% {
    background-position:
      51.5% 48.8%;
  }

  100% {
    background-position:
      53% 50%;
  }

}



/* =========================================================
   2. MOVING SUNLIGHT / ATMOSPHERIC GLOW
   ========================================================= */

.home-hero::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse at 55% 72%,
      rgba(255,255,255,.18) 0%,
      rgba(175,227,250,.10) 15%,
      transparent 38%
    ),

    radial-gradient(
      ellipse at 72% 22%,
      rgba(127,211,248,.10) 0%,
      transparent 31%
    ),

    linear-gradient(
      108deg,
      transparent 36%,
      rgba(255,255,255,.035) 46%,
      rgba(181,232,251,.065) 50%,
      transparent 58%
    );

  mix-blend-mode:
    screen;

  opacity:
    .62;

  animation:
    heroLightMove 11s ease-in-out infinite alternate;
}


@keyframes heroLightMove {

  from {
    transform:
      translate3d(-1.2%,0,0);

    opacity:
      .52;
  }

  to {
    transform:
      translate3d(1.8%,-.6%,0);

    opacity:
      .72;
  }

}



/* =========================================================
   3. SUBTLE MOVING SEA / LIGHT BEAM
   ========================================================= */

.home-hero::after {
  content: "";

  position: absolute;

  left: -22%;
  bottom: 4%;

  width: 74%;
  height: 34%;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      102deg,
      transparent 0%,
      rgba(89,206,243,.00) 24%,
      rgba(115,218,247,.10) 47%,
      rgba(255,255,255,.11) 51%,
      rgba(77,188,230,.04) 61%,
      transparent 78%
    );

  filter:
    blur(12px);

  transform:
    skewX(-13deg);

  opacity:
    .55;

  animation:
    heroSeaBeam 12s ease-in-out infinite;
}


@keyframes heroSeaBeam {

  0% {
    left:
      -35%;

    opacity:
      .20;
  }

  45% {
    opacity:
      .60;
  }

  100% {
    left:
      80%;

    opacity:
      .12;
  }

}



/* =========================================================
   4. BETTER DEPTH / CINEMATIC VIGNETTE
   ========================================================= */

.home-hero-overlay {
  z-index: 3 !important;

  background:

    linear-gradient(
      90deg,
      rgba(236,247,252,.96) 0%,
      rgba(236,247,252,.86) 24%,
      rgba(236,247,252,.43) 43%,
      rgba(236,247,252,.08) 61%,
      rgba(2,29,47,.05) 100%
    ),

    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      transparent 55%,
      rgba(3,35,54,.12) 100%
    ) !important;
}



/* =========================================================
   5. KEEP CONTENT ABOVE EFFECTS
   ========================================================= */

.home-hero-grid,
.hero-edge-note {
  position: relative !important;
  z-index: 5 !important;
}



/* =========================================================
   6. SMALL GLOW ON THE EDGE NOTE
   ========================================================= */

.hero-edge-note {
  box-shadow:
    0 8px 24px rgba(3,59,87,.16),
    0 0 0 1px rgba(87,212,244,.07),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}



/* =========================================================
   ACCESSIBILITY / PERFORMANCE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .home-hero-photo,
  .home-hero::before,
  .home-hero::after {
    animation:
      none !important;
  }

}


/* Slightly calmer on mobile */
@media (max-width: 760px) {

  .home-hero::after {
    display:
      none !important;
  }

  .home-hero::before {
    opacity:
      .42;
  }

}


/* =========================================================
   HERO EDGE NOTE — RESTORE ORIGINAL POSITIONING
   ========================================================= */

.hero-edge-note {
  position: absolute !important;
  z-index: 5 !important;

  /* Do not let cinematic effects move the badge */
  transform: none !important;
}


/* Keep it safely inside hero on smaller screens */
@media (max-width: 900px) {
  .hero-edge-note {
    right: 20px !important;
    left: auto !important;
  }
}


/* =========================================================
   HERO — CINEMATIC KEN BURNS EFFECT
   Slow zoom + pan on ship photograph
   ========================================================= */

.home-hero-photo {
  /* override previous simple background drift */
  animation:
    heroKenBurns 22s cubic-bezier(.45,.05,.55,.95)
    infinite alternate !important;

  transform-origin:
    68% 52% !important;

  will-change:
    transform !important;

  backface-visibility:
    hidden !important;

  -webkit-backface-visibility:
    hidden !important;
}


/* Keep image slightly oversized so no edges appear while panning */
@keyframes heroKenBurns {

  0% {
    transform:
      scale(1.015)
      translate3d(0, 0, 0);

    background-position:
      50% 50%;
  }

  35% {
    transform:
      scale(1.035)
      translate3d(-.3%, -.2%, 0);

    background-position:
      51% 49%;
  }

  70% {
    transform:
      scale(1.055)
      translate3d(-.7%, -.35%, 0);

    background-position:
      52% 49%;
  }

  100% {
    transform:
      scale(1.075)
      translate3d(-1%, -.5%, 0);

    background-position:
      53% 50%;
  }

}


/* =========================================================
   Keep cinematic glow animations running independently
   ========================================================= */

.home-hero::before {
  animation:
    heroLightMove 11s ease-in-out infinite alternate !important;
}


.home-hero::after {
  animation:
    heroSeaBeam 12s ease-in-out infinite !important;
}


/* =========================================================
   Reduced motion accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .home-hero-photo {
    animation:
      none !important;

    transform:
      none !important;
  }

}


/* Mobile — much gentler zoom */
@media (max-width: 760px) {

  .home-hero-photo {
    animation:
      heroKenBurnsMobile 24s ease-in-out infinite alternate !important;
  }

}


@keyframes heroKenBurnsMobile {

  from {
    transform:
      scale(1.01);

    background-position:
      60% 50%;
  }

  to {
    transform:
      scale(1.035);

    background-position:
      62% 49%;
  }

}


/* =========================================================
   HERO — CONTINUOUS CINEMATIC KEN BURNS
   Continuous loop, no back-and-forth alternate motion
   ========================================================= */

.home-hero-photo{
  animation: heroKenBurnsContinuous 26s linear infinite !important;
  transform-origin: 62% 50% !important;
  will-change: transform, background-position !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* Smooth loop path */
@keyframes heroKenBurnsContinuous{

  0%{
    transform: scale(1.02) translate3d(0%, 0%, 0);
    background-position: 50% 50%;
  }

  20%{
    transform: scale(1.035) translate3d(-0.35%, -0.20%, 0);
    background-position: 51% 49%;
  }

  40%{
    transform: scale(1.05) translate3d(-0.70%, -0.35%, 0);
    background-position: 52% 49%;
  }

  60%{
    transform: scale(1.065) translate3d(-0.45%, 0.10%, 0);
    background-position: 51.4% 50.2%;
  }

  80%{
    transform: scale(1.04) translate3d(-0.15%, 0.20%, 0);
    background-position: 50.6% 50.4%;
  }

  100%{
    transform: scale(1.02) translate3d(0%, 0%, 0);
    background-position: 50% 50%;
  }
}

/* Keep other hero light effects alive */
.home-hero::before{
  animation: heroLightMove 11s ease-in-out infinite alternate !important;
}

.home-hero::after{
  animation: heroSeaBeam 12s ease-in-out infinite !important;
}

/* Mobile version — softer but still continuous */
@media (max-width: 760px){
  .home-hero-photo{
    animation: heroKenBurnsContinuousMobile 24s linear infinite !important;
  }

  @keyframes heroKenBurnsContinuousMobile{
    0%{
      transform: scale(1.01) translate3d(0%, 0%, 0);
      background-position: 60% 50%;
    }
    25%{
      transform: scale(1.02) translate3d(-0.25%, -0.10%, 0);
      background-position: 61% 49.5%;
    }
    50%{
      transform: scale(1.03) translate3d(-0.45%, -0.20%, 0);
      background-position: 62% 49%;
    }
    75%{
      transform: scale(1.02) translate3d(-0.20%, 0.10%, 0);
      background-position: 61% 50%;
    }
    100%{
      transform: scale(1.01) translate3d(0%, 0%, 0);
      background-position: 60% 50%;
    }
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .home-hero-photo{
    animation: none !important;
    transform: none !important;
  }
}