/* Angelos: the single sea / fire scene. No scroll capture or fixed canvas. */
.fire-sea {
  --fire-progress: .52;
  position: relative;
  isolation: isolate;
  min-height: clamp(650px, 60vw, 850px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: #fff9e9;
  background: #052d45;
}
.fire-sea__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background: #052d45;
}
.fire-sea__ocean {
  display: block;
  position: absolute;
  inset: -3% 0;
  width: 100%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: 38% 52%;
  transform: translateY(calc((var(--fire-progress) - .5) * -28px));
}
.fire-sea__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(0deg, #052d45 0%, rgba(5,45,69,.88) 9%, transparent 49%);
}
.fire-sea__warmth {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 93% 44%, rgba(246,86,14,.68), rgba(176,52,18,.10) 39%, transparent 60%),
    linear-gradient(90deg, transparent 14%, rgba(3,22,37,.15) 36%, rgba(3,22,37,.85) 79%, #041c2b 100%);
}
.fire-sea__warmth::after {
  content: "";
  position: absolute;
  inset: 15% 0 28% 28%;
  opacity: .75;
  background: radial-gradient(ellipse at 87% 62%, rgba(255,208,126,.56), rgba(224,79,12,.22) 31%, transparent 63%);
  transform: rotate(-14deg);
}
.fire-sea[data-fire-mode="webgl"] .fire-sea__warmth::after {
  opacity: .12;
}
.fire-sea__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.fire-sea__texture { display: none; }
.fire-sea:not([data-fire-mode="webgl"]) .fire-sea__texture {
  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12%;
  width: 94%;
  height: 56%;
  object-fit: fill;
  mix-blend-mode: screen;
  opacity: .85;
}
.fire-sea[data-fire-mode="webgl"] .fire-sea__canvas {
  opacity: 1;
}
.fire-sea__content {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: min(560px, 46%);
  margin: 0 7% 0 auto;
  padding: 44px 0 58px;
  text-shadow: 0 2px 25px rgba(0,16,32,.18);
}
.fire-sea__content h2 { color: inherit; }
.fire-sea__content p { max-width: 38ch; color: #fff8e8; }
.fire-sea__content a { color: inherit; }
.fire-sea__content a:focus-visible { outline: 2px solid #fff8e8; outline-offset: 6px; }
@media (max-width: 760px) {
  .fire-sea { min-height: 720px; }
  .fire-sea__ocean { object-position: 34% 50%; }
  .fire-sea__warmth {
    background:
      radial-gradient(ellipse at 100% 35%, rgba(237,76,13,.49), transparent 58%),
      linear-gradient(90deg, transparent 10%, rgba(3,22,37,.30) 46%, rgba(3,22,37,.86));
  }
  .fire-sea__scene::after { background: linear-gradient(0deg, #052d45 0%, rgba(5,45,69,.97) 18%, rgba(5,45,69,.66) 36%, transparent 63%); }
  .fire-sea__content { width: auto; margin: 0; padding: 40px max(24px, 6vw) 42px; }
  .fire-sea__content p { max-width: 42ch; }
}
@media (max-width: 390px) {
  .fire-sea { min-height: 690px; }
  .fire-sea__content { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fire-sea__ocean { transform: none; }
}