/* Sea theme, painted look (cinema/direcao-de-arte.md). Each stop of the dive is a painted scene behind its section,
   portrait on phones and landscape on wide screens; the painted characters swim on top (sea-art.js PAINT). The drawn
   backdrops of sea-scenes.css stay in the markup as the fallback and are hidden here. */
:root {
  --k00: url(../img/recife-v2.webp); --k01: url(../img/recife-v2.webp); --k02: url(../img/recife-v2.webp);
  --k03: url(../img/recife-v2.webp); --k04: url(../img/recife-v2.webp); --k05: url(../img/recife-v2.webp);
  --k06: url(../img/recife-v2.webp);
}
@media (min-aspect-ratio: 4/5) {
  :root {
    --k00: url(../img/recife-v2.webp); --k01: url(../img/recife-v2.webp); --k02: url(../img/recife-v2.webp);
    --k03: url(../img/recife-v2.webp); --k04: url(../img/recife-v2.webp); --k05: url(../img/recife-v2.webp);
    --k06: url(../img/recife-v2.webp);
  }
}

/* painted characters: the picture is the whole creature */
.sa--img svg { overflow: visible; }
.sa--img .sa-img-b { display: none; }
.sa--img.is-puffed .sa-img-a { display: none; }
.sa--img.is-puffed .sa-img-b { display: inline; }

/* Opening: the surface, then the dive */
.dive__world { background: #2bb0dc; }
.dive__world::before, .dive__world::after { content: ""; position: absolute; left: 0; right: 0; z-index: 0; background: center / cover no-repeat; }
.dive__world::before { top: 0; height: 55.6%; background-image: var(--k00); }
.dive__world::after { top: 55.6%; bottom: 0; background-image: var(--k01); background-position: center top; }
.dive__life { z-index: 1; }
.dive__sky, .dive__boat, .dive__wave, .dive__rays, .dive__floor { display: none; }
.dive__sea { background: transparent; z-index: 1; }

/* Cover: the reef */
.hero__bg { background: #3ab9df var(--k02) center bottom / cover no-repeat; }
.hero__bg .hero__art, .hero__bg .hero__reef, .hero__bg .turtle { display: none; }

/* Reef parade and giants */
.show--parade .show__bg { background: #4cc4e2 var(--k03) center bottom / cover no-repeat; }
.show--giants .show__bg { background: #1d8fd0 var(--k05) center bottom / cover no-repeat; }
.show__bg .show__rays { display: none; }

/* The deep: countdown */
.countdown { background: #0d2f7a var(--k04) center / cover no-repeat !important; }
.countdown .jelly--old { display: none; }

/* The sandy floor with the treasure: details */
.details { background: #bfeaf2 var(--k06) center bottom / cover no-repeat !important; }

/* titles stay readable over the bright painted water */
.show--giants .show__head .h2, .show--parade .show__head .h2 { text-shadow: 0 3px 0 rgba(10, 60, 110, .35), 0 0 18px rgba(10, 70, 130, .45); }

/* Phones: no filters at all. Dozens of blurred and shadowed layers moving at once is what makes iOS Safari
   run out of graphics memory and reload the page ("a problem repeatedly occurred"). */
@media (pointer: coarse), (max-width: 820px) {
  .sa, .fish, .dive__world { will-change: auto; }
  *, *::before, *::after { filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .timer__cell, .ticket, .rsvp__card, .music-btn { background-color: rgba(255, 255, 255, .9); }
  .countdown .timer__cell { background-color: rgba(10, 40, 100, .6); }
}

/* The dive film (sea-film.js): fixed behind the page; the film scenes let it show through */
.sea-film { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: #2bb0dc; }
html.film-on .sea-film { opacity: 1; }
html.film-on .chapters { position: relative; z-index: 1; }
html.film-on .chapters[data-chapter-theme="live"] { background: transparent; }
html.film-on .chapters[data-chapter-theme="live"] > :not(#inicio):not(#recife):not(#contagem):not(#gigantes):not(#detalhes) { background-color: var(--theme-bg); }
html.film-on .hero__bg, html.film-on .show__bg, html.film-on .countdown, html.film-on .details { background: transparent !important; }
html.film-on.has-opener .opener { background: transparent !important; }
/* the opening is see-through now: keep the cover (and its fish) out of sight until the opening leaves */
html.film-on.has-opener:not(:has(.opener.is-leaving)) .chapters { visibility: hidden; }
html.film-on .dive__world { background: transparent; }
html.film-on .dive__world::before, html.film-on .dive__world::after { display: none; }

/* test switch ?sembichos: no swimming creatures at all */
html.no-critters .sa, html.no-critters .fish, html.no-critters .fireflies { display: none !important; }