/* Sea theme, part 2: creature animation and the sea scenes (dive-in opener, reef parade, giants).
   Loaded after theme-fundo-do-mar.css only when config.tema is "fundo-do-mar". Artwork: assets/js/sea-art.js. */

/* ---------- Creatures ---------- */
.sa { position: absolute; left: 0; top: 0; width: 80px; pointer-events: none; will-change: transform; }
.sa__pose { transform-origin: 50% 50%; }
.sa svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-lid { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; }
.sa-tail { transform-box: fill-box; transform-origin: 100% 50%; }
.sa-fin { transform-box: fill-box; transform-origin: 90% 10%; }
.sa-fluke { transform-box: fill-box; transform-origin: 100% 100%; }
.sa-flip { transform-box: fill-box; transform-origin: 90% 0%; }
.sa-wing-l { transform-box: fill-box; transform-origin: 100% 50%; }
.sa-wing-r { transform-box: fill-box; transform-origin: 0% 50%; }
.sa-tent { transform-box: fill-box; transform-origin: 50% 0%; }
.sa--anemone .sa-tent, .sa-in.sa--anemone .sa-tent { transform-origin: 50% 100%; }
.sa-wave { transform-origin: 0% 100%; }
.sa-paddle { transform-box: fill-box; transform-origin: 20% 0%; }
.sa-paddle-b { transform-box: fill-box; transform-origin: 100% 30%; }
.sa-bell { transform-box: fill-box; transform-origin: 50% 100%; }
.sa-tents { transform-box: fill-box; transform-origin: 50% 0%; }
.sa-claw-l, .sa-claw-r { transform-box: fill-box; transform-origin: 70% 100%; }
.sa-claw-r { transform-origin: 30% 100%; }
.sa-pbody { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.sa-spikes { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.55); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
.sa-m2, .sa-happy { opacity: 0; }
.is-wink .sa-eye > :not(.sa-happy) { opacity: 0; }
.is-wink .sa-happy { opacity: 1; }
.is-puffed .sa-pbody { transform: scale(1.12, 1.32); }
.is-puffed .sa-spikes { transform: scale(1.1, 1.28); opacity: 1; }
.is-puffed .sa-m1 { opacity: 0; }
.is-puffed .sa-m2 { opacity: 1; }
.sa-spout { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .sa-lid { animation: sa-blink 5.5s linear var(--blink, 0s) infinite; }
  .sa-tail { animation: sa-tail var(--wag, .5s) ease-in-out infinite alternate; }
  .sa-fin { animation: sa-fin calc(var(--wag, .5s) * .8) ease-in-out infinite alternate; }
  .sa-fluke { animation: sa-fluke 2.6s ease-in-out infinite alternate; }
  .sa-flip { animation: sa-flip 2.6s ease-in-out infinite alternate; }
  .sa-wing-l { animation: sa-wing 2.4s ease-in-out infinite alternate; }
  .sa-wing-r { animation: sa-wing 2.4s ease-in-out infinite alternate; }
  .sa-tent { animation: sa-tent 2.8s ease-in-out calc(var(--i, 0) * -.45s) infinite alternate; }
  .sa-wave { animation: sa-hello 1.1s ease-in-out infinite alternate; }
  .sa-paddle { animation: sa-paddle 2.2s ease-in-out infinite alternate; }
  .sa-paddle-b { animation: sa-paddle-b 2.2s ease-in-out infinite alternate; }
  .sa-bell { animation: sa-bell 2.4s ease-in-out infinite; }
  .sa-tents { animation: sa-tents 2.4s ease-in-out infinite; }
  .sa-claw-l { animation: sa-snap 1.6s ease-in-out infinite; }
  .sa-claw-r { animation: sa-snap-r 1.6s ease-in-out .3s infinite; }
  .is-puffed .sa-fin { animation-duration: .12s; }
  .sa--anemone .sa-tent, .sa-in.sa--anemone .sa-tent { animation: sa-anem 3.2s ease-in-out calc(var(--i, 0) * -.6s) infinite alternate; }
  .sa-spouting .sa-spout { animation: sa-spout 1.6s ease-out forwards; }
}
@keyframes sa-blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
@keyframes sa-tail { from { transform: rotate(-16deg) scaleX(.92); } to { transform: rotate(16deg) scaleX(1); } }
@keyframes sa-fin { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
@keyframes sa-fluke { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
@keyframes sa-flip { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes sa-wing { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(.8) skewY(-4deg); } }
@keyframes sa-tent { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes sa-anem { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes sa-hello { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes sa-paddle { from { transform: rotate(-26deg); } to { transform: rotate(18deg); } }
@keyframes sa-paddle-b { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
@keyframes sa-bell { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.08, .88); } }
@keyframes sa-tents { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.9); } }
@keyframes sa-snap { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(4deg); } }
@keyframes sa-snap-r { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(12deg); } 80% { transform: rotate(-4deg); } }
@keyframes sa-spout { 0% { opacity: 0; transform: scale(.3, .2); } 25% { opacity: 1; transform: scale(1.05, 1.1); } 70% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1.1, .9) translateY(-8px); } }
.is-off .sa *, .is-paused .sa * { animation-play-state: paused !important; }

/* Swimming rig (SeaArt.driver): the script moves tail, fins and body bend frame by frame, so their loops are off.
   The body bends around the head; the eyes glance around on their own. */
.sa-rig { transform-box: fill-box; transform-origin: 80% 50%; }
.sa--driven .sa-tail, .sa--driven .sa-fin, .sa--driven .sa-fluke, .sa--driven .sa-flip { animation: none !important; }
.sa-look { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) { .sa-look { animation: sa-look 8s ease-in-out var(--look, 0s) infinite; } }
@keyframes sa-look {
  0%, 16%, 100% { transform: translate(0, 0); }
  20%, 34% { transform: translate(-24%, 6%); }
  38%, 52% { transform: translate(6%, -10%); }
  56%, 70% { transform: translate(-10%, 10%); }
  74%, 88% { transform: translate(4%, 0); }
}
/* Fish far away in the cover: paler and smaller, behind the reef */
.sea-far { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sea-far .sa { opacity: .5; }

/* Creatures placed in the page (data-sea) fill their box; the ones in strips and decorations can be tapped */
.sa--fill { position: relative; width: 100%; }
[data-sea] .sa, .sea-strip .sa { pointer-events: auto; cursor: pointer; }

/* ---------- Cartoon lettering (name) and the age badge ---------- */
.hero__name, .hero__name.gold, .dive-card__name {
  display: inline-flex; padding: 0; margin: 0; background: none; filter: none;
  color: #ffd21f; -webkit-text-fill-color: currentColor;
  font: 400 clamp(6.2rem, 35vw, 12rem)/1 var(--font-script); letter-spacing: .03em;
}
.is-lettered, .is-lettered.gold { display: inline-flex; padding: 0; margin: 0; background: none; filter: none; animation: none; color: #ffd21f; -webkit-text-fill-color: currentColor; font-family: var(--font-script); letter-spacing: .03em; line-height: 1; }
.signature .is-lettered { font-size: clamp(3.4rem, 15vw, 4.6rem); }
.site-footer__sign .is-lettered { font-size: clamp(3.6rem, 17vw, 5rem); }
.signature, .site-footer__sign { margin-top: 1.4rem; }
.ltr { position: relative; display: inline-block; transform-origin: 50% 90%; }
.ltr--space { width: .28em; }
.ltr__o {
  position: absolute; left: 0; top: 0; color: var(--navy); -webkit-text-fill-color: var(--navy);
  -webkit-text-stroke: .17em var(--navy);
  text-shadow: 0 .1em 0 var(--navy), 0 .2em .28em rgba(4, 30, 60, .35);
}
.ltr__f {
  position: relative;
  background:
    radial-gradient(55% 22% at 38% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #fff6c4 0%, #ffe95c 26%, #ffcc1f 52%, #ff9f1a 80%, #ff7a1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.ltr:nth-child(3n + 2) { --r: -3deg; }
.ltr:nth-child(3n) { --r: 2.5deg; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .hero__name { opacity: 1; animation: none; }
  html.js.is-entered .hero .hero__name { animation: none; }
  html.js .hero__name .ltr { opacity: 0; }
  html.js.is-entered .hero__name .ltr { animation: ltr-drop .95s cubic-bezier(.3, 1.35, .5, 1) calc(.25s + var(--i) * .16s) both, ltr-bob 3.4s ease-in-out calc(1.6s + var(--i) * .3s) infinite; }
  .dive-card__name .ltr { animation: ltr-drop .95s cubic-bezier(.3, 1.35, .5, 1) calc(.5s + var(--i) * .16s) both, ltr-bob 3.4s ease-in-out calc(1.8s + var(--i) * .3s) infinite; }
}
@keyframes ltr-drop {
  0% { opacity: 0; transform: translateY(-1.1em) scale(.6, 1.4) rotate(-12deg); }
  55% { opacity: 1; transform: translateY(.05em) scale(1.2, .8); }
  75% { transform: translateY(-.08em) scale(.94, 1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes ltr-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-.06em) rotate(var(--r, 2deg)); } }

.hero__age, .dive-card__age {
  display: inline-flex; align-items: center; gap: .4em; margin: .35rem 0 0; padding: .2em .85em .2em .3em;
  border-radius: 999px; border: 3px solid var(--navy);
  background: linear-gradient(180deg, #ff9466 0%, #f2553d 100%);
  box-shadow: 0 5px 0 var(--navy), 0 16px 26px -12px rgba(4, 30, 60, .6);
  color: #fff; font: 400 clamp(1.35rem, 6.4vw, 1.8rem)/1 var(--font-script); letter-spacing: .03em; text-transform: none;
  text-shadow: 0 2px 0 rgba(13, 58, 110, .45);
  transform: rotate(-3deg);
}
.age-num {
  display: grid; place-items: center; width: 1.75em; height: 1.75em; margin: -.4em 0 -.4em -.55em;
  border-radius: 50%; border: 3px solid var(--navy);
  background: radial-gradient(circle at 34% 28%, #fff 0 16%, #fff27a 22%, #ffc61f 100%);
  color: var(--navy); font-size: 1.3em; text-shadow: none; box-shadow: 0 3px 0 var(--navy);
}
.age-word { padding-top: .08em; }
@media (prefers-reduced-motion: no-preference) {
  html.js.is-entered .hero .hero__age { animation: badge-pop .9s cubic-bezier(.3, 1.6, .5, 1) .95s both; }
  .dive-card__age { animation: badge-pop .9s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
  .age-num { animation: num-wobble 2.6s ease-in-out 2.4s infinite; }
}
@keyframes badge-pop { 0% { opacity: 0; transform: scale(.2) rotate(-25deg); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes num-wobble { 0%, 70%, 100% { transform: rotate(0) scale(1); } 78% { transform: rotate(-12deg) scale(1.12); } 88% { transform: rotate(8deg) scale(1.05); } }

/* ---------- Cover ---------- */
.hero .ornament, .hero__fg--base { display: none; }
.hero__title { gap: .2rem; }
.hero__eyebrow { color: #c4452f; font-size: .78rem; background: rgba(255, 255, 255, .62); padding: .35em .9em; border-radius: 999px; margin-bottom: .6rem; }
.hero__date {
  margin-top: 1.2rem; padding: .5em 1.1em .4em; border-radius: 999px;
  font: 800 clamp(1.1rem, 4.8vw, 1.4rem)/1 var(--font-sans); letter-spacing: .1em; color: var(--navy);
  background: rgba(255, 255, 255, .8); box-shadow: 0 10px 22px -14px rgba(4, 30, 60, .6);
}
.hero__veil { background: radial-gradient(70% 34% at 50% 44%, rgba(240, 252, 255, .65) 0%, rgba(230, 249, 252, .3) 50%, transparent 80%), linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, transparent 30%); }
.hero__reef { position: absolute; left: 0; right: 0; bottom: 3.8%; height: 36%; z-index: 0; pointer-events: none; }
.hero__reef > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.turtle { opacity: .95; top: 24%; width: clamp(130px, 34vw, 230px); }
.scroll-cue { color: var(--navy); font-weight: 800; background: rgba(255, 255, 255, .72); border-radius: 999px; min-height: 40px; }
.reef-weed { transform-box: fill-box; transform-origin: 50% 100%; }
.reef-peek { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .reef-weed { animation: sway 4.6s ease-in-out var(--d, 0s) infinite alternate; }
  .reef-peek { animation: reef-peek 8s ease-in-out infinite; }
  .reef-crab { animation: crab-walk 10s ease-in-out infinite; }
  .reef-clam__top { transform-box: fill-box; transform-origin: 50% 100%; animation: clam 7s ease-in-out infinite; }
  .reef-star { transform-box: fill-box; transform-origin: 50% 50%; animation: star-wiggle 5s ease-in-out infinite; }
}
@keyframes reef-peek { 0%, 100% { transform: translate(0, 34px); } 18%, 45% { transform: translate(0, -6px) rotate(-6deg); } 60% { transform: translate(6px, 0) rotate(4deg); } 75% { transform: translate(0, 34px); } }
@keyframes crab-walk { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-46px); } 50% { transform: translateX(-46px) translateY(-3px); } 90% { transform: translateX(10px); } }
@keyframes star-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

/* ---------- Opening: the surface and the dive ---------- */
html.has-opener .opener { padding: 0; background: #8fdcff !important; }
.opener::before, .opener::after { display: none; }
.dive { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.dive__world { position: absolute; left: 0; right: 0; top: 0; height: 180%; will-change: transform; }
.dive__sky { position: absolute; left: 0; right: 0; top: 0; height: 22.3%; background: linear-gradient(180deg, #7fd4ff 0%, #b9ecff 55%, #e6faff 100%); overflow: hidden; }
.dive__sun { position: absolute; right: 9%; top: 9%; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0 36%, #ffe066 64%, #ffbe2e 100%); box-shadow: 0 0 0 10px rgba(255, 224, 102, .3), 0 0 60px 26px rgba(255, 234, 140, .55); }
.dive__sun::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 236, 140, .55) 0 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%, transparent 72%); mask: radial-gradient(circle, transparent 40%, #000 42%, transparent 72%); }
.dive__cloud { position: absolute; height: 26px; width: 92px; border-radius: 999px; background: #fff; box-shadow: 0 6px 0 rgba(160, 215, 240, .55); }
.dive__cloud::before, .dive__cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.dive__cloud::before { width: 44px; height: 44px; left: 14px; top: -24px; }
.dive__cloud::after { width: 32px; height: 32px; left: 46px; top: -15px; }
.dive__cloud--a { left: 6%; top: 46%; }
.dive__cloud--b { left: 58%; top: 70%; transform: scale(.7); opacity: .9; }
.dive__gulls { position: absolute; left: 12%; top: 18%; width: 96px; }
.dive__boat { position: absolute; left: 50%; top: calc(22.3% - 96px); width: 118px; margin-left: -59px; z-index: 2; transform-origin: 50% 90%; }
.dive__boat svg { display: block; width: 100%; overflow: visible; }
.dive__sea { position: absolute; left: 0; right: 0; top: 22.3%; bottom: 0; background: linear-gradient(180deg, #49c7e6 0%, #1f97cc 22%, #146ca8 52%, #0d4d86 78%, #0b3f74 100%); }
.dive__wave { position: absolute; left: 0; width: 200%; height: 26px; top: -18px; background-repeat: repeat-x; background-size: 180px 26px; }
.dive__wave--back { top: -24px; opacity: .9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 26'%3E%3Cpath d='M0 14 C 30 0, 60 0, 90 14 S 150 28, 180 14 V 26 H 0 Z' fill='%2397e6f5'/%3E%3C/svg%3E"); }
.dive__wave--front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 26'%3E%3Cpath d='M0 12 C 30 26, 60 26, 90 12 S 150 -2, 180 12 V 26 H 0 Z' fill='%2349c7e6'/%3E%3Cpath d='M0 12 C 30 26, 60 26, 90 12 S 150 -2, 180 12' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dive__rays { position: absolute; inset: 0 0 55% 0; background: repeating-linear-gradient(102deg, transparent 0 6%, rgba(255, 255, 255, .16) 8% 10%, transparent 12% 20%); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.dive__life { position: absolute; left: 0; right: 0; top: 3%; height: 40%; }
.dive__floor { position: absolute; left: 0; bottom: 0; width: 100%; height: 22%; }
@media (prefers-reduced-motion: no-preference) {
  .dive__sun::before { animation: spin 26s linear infinite; }
  .dive__cloud--a { animation: cloud-drift 18s ease-in-out infinite alternate; }
  .dive__cloud--b { animation: cloud-drift 24s ease-in-out -6s infinite alternate-reverse; }
  .dive__boat { animation: boat-bob 3.2s ease-in-out infinite; }
  .dive__wave--front { animation: wave-x 7s linear infinite; }
  .dive__wave--back { animation: wave-x 11s linear infinite reverse; }
  .dive__gulls { animation: gulls 9s ease-in-out infinite alternate; }
  .dive__rays { animation: rays 9s ease-in-out infinite alternate; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cloud-drift { from { translate: -14px 0; } to { translate: 34px 0; } }
@keyframes boat-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(5px) rotate(4deg); } }
@keyframes wave-x { from { transform: translateX(0); } to { transform: translateX(-180px); } }
@keyframes gulls { from { transform: translate(0, 0); } to { transform: translate(40px, -8px); } }
.opener__inner {
  position: absolute; inset: 0; width: auto; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: calc(env(safe-area-inset-top) + 4.5vh) 20px calc(env(safe-area-inset-bottom) + 7vh);
}
.opener__kicker { color: var(--navy); font: 800 .74rem/1.45 var(--font-sans); letter-spacing: .16em; background: rgba(255, 255, 255, .72); padding: .45em 1.1em .35em; border-radius: 999px; max-width: 30ch; }
.dive-card { display: grid; justify-items: center; margin-top: .6vh; cursor: pointer; transition: transform 1.5s cubic-bezier(.6, 0, .25, 1) .2s, opacity .6s ease .9s; }
.dive-card__name { font-size: clamp(4.4rem, 25vw, 7.4rem); }
.dive-card__age { font-size: clamp(1.15rem, 5.4vw, 1.5rem); }
.dive-card__to { margin-top: .9rem; padding: .25em .9em; border-radius: 999px; background: rgba(255, 255, 255, .78); color: var(--navy); font: 800 1rem/1.3 var(--font-sans); }
.dive-btn.seal {
  position: relative; left: auto; top: auto; margin-top: auto; width: auto; height: auto;
  display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1.5rem .62rem 1rem;
  border-radius: 999px; border: 3px solid var(--navy);
  background: linear-gradient(180deg, #fff27a 0%, #ffc61f 100%);
  box-shadow: 0 6px 0 var(--navy), 0 22px 30px -12px rgba(0, 20, 50, .55);
  color: var(--navy); font: 400 1.65rem/1 var(--font-script); letter-spacing: .02em;
}
.dive-btn.seal::before { display: none; }
.dive-btn__mask { width: 46px; height: auto; flex: none; }
.dive-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--navy); }
@media (prefers-reduced-motion: no-preference) { .dive-btn.seal { animation: dive-pulse 1.8s ease-in-out 1.6s infinite; } }
@keyframes dive-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07) rotate(-2deg); } 60% { transform: scale(.98) rotate(1deg); } }
.opener .opener__hint { margin-top: 1rem; color: #fff; font: 700 1rem/1.3 var(--font-sans); text-shadow: 0 1px 8px rgba(0, 30, 60, .45); }
.is-opening .dive__world { transform: translateY(-43%); transition: transform 1.55s cubic-bezier(.65, 0, .3, 1) .2s; }
.is-opening .dive-card { transform: translateY(-82vh); }
.is-opening .dive-btn.seal { animation: seal-pop .55s var(--ease-in-out) forwards; }
.sea-splash, .sea-rush { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sea-splash { z-index: 105; }
.sea-rush { z-index: 130; }
.sea-splash i { position: absolute; top: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 14%, rgba(255, 255, 255, .35) 16% 56%, rgba(160, 230, 245, .5) 100%); border: 1.5px solid rgba(255, 255, 255, .85); }

/* ---------- Invitation: an octopus hugging the porthole, a seahorse nearby ---------- */
.arch__octo { position: absolute; right: -15%; bottom: -14%; width: 42%; z-index: 3; }
.arch__horse { position: absolute; left: -13%; top: 14%; width: 17%; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .arch__horse { animation: bob 4.2s ease-in-out infinite; }
  html.fx-ready .arch .arch__octo { opacity: 0; transform: translateY(30%) scale(.5) rotate(-20deg); transition: opacity .6s ease 1.2s, transform 1s cubic-bezier(.3, 1.5, .5, 1) 1.2s; }
  html.fx-ready .arch.is-in .arch__octo { opacity: 1; transform: none; }
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(4deg); } }

/* ---------- Countdown: glowing jellyfish ---------- */
.jelly--old, .countdown .garden-silhouette { display: none; }
.deep-jelly { position: absolute; z-index: -1; width: 72px; filter: drop-shadow(0 0 18px rgba(255, 150, 210, .7)); }
.deep-jelly--a { right: 3%; top: -18%; width: 78px; }
.deep-jelly--b { left: 1%; top: 26%; width: 56px; filter: drop-shadow(0 0 18px rgba(120, 220, 245, .75)); }
.deep-jelly--c { right: 16%; top: 70%; width: 38px; opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .deep-jelly { animation: jelly-bob 6s ease-in-out infinite; }
  .deep-jelly--b { animation-duration: 7s; animation-delay: -2s; }
  .deep-jelly--c { animation-duration: 5s; animation-delay: -3.5s; }
}

/* ---------- Scroll scenes (sea.js): a sticky stage while the section scrolls by ---------- */
.show { position: relative; height: 340vh; }
.show--giants { height: 380vh; }
.show__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.show__shake { position: absolute; inset: 0; }
.show__bg { position: absolute; inset: 0; z-index: 0; }
.show--parade .show__bg { background: linear-gradient(180deg, #bfe8f0 0%, #7fd4e8 20%, #36a8d6 55%, #1a6eab 85%, #0d4a84 100%); }
.show--giants .show__bg { background: linear-gradient(180deg, #072445 0%, #0b3a6b 28%, #14609e 66%, #1f7fbb 100%); }
.show__rays { position: absolute; inset: 0 0 35% 0; background: repeating-linear-gradient(100deg, transparent 0 6%, rgba(255, 255, 255, .15) 8% 10%, transparent 12% 19%); -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.show--giants .show__rays { opacity: .55; }
.show__head { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 8.5vh); z-index: 1; padding: 0 var(--gutter); text-align: center; }
.show__head .eyebrow { margin-bottom: .6rem; padding: .35em .95em; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #c4452f; }
.show__head .h2 { max-width: 13ch; margin: 0 auto; color: var(--navy); text-shadow: 0 2px 0 rgba(255, 255, 255, .6); }
.show__head .h2 em { color: #e2502f; }
.show--giants .show__head .eyebrow { background: rgba(255, 255, 255, .14); color: #ffd2b8; }
.show--giants .show__head .h2 { color: #eafcff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.show--giants .show__head .h2 em { color: #ffbf6b; }
.show__cast { position: absolute; inset: 0; z-index: 2; }
.show__cast > .sa { opacity: 0; }
.show__lens { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.show__lens .vf { border-color: rgba(255, 255, 255, .9); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3)); }
.show__rec { position: absolute; left: 52px; top: calc(21px + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: .45rem; color: #fff; font: 800 .68rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.show__rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px rgba(255, 59, 48, .8); }
.show__cap {
  position: absolute; left: 50%; z-index: 5; margin: 0; translate: -50% 0; width: max-content; max-width: min(86vw, 360px);
  padding: .65rem 1.1rem .55rem; border-radius: 22px; border: 3px solid var(--navy);
  background: #fff; color: var(--navy); box-shadow: 0 6px 0 var(--navy);
  font: 800 1.08rem/1.25 var(--font-sans); text-align: center; text-wrap: balance;
  opacity: 0; visibility: hidden; transform-origin: 50% 100%;
}
.show__cap::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 18px; height: 18px; margin-left: -9px; background: #fff; border: 3px solid var(--navy); border-top: 0; border-left: 0; transform: rotate(45deg); }
.show__cap--a { top: 33vh; top: 33svh; }
.show__cap--b { bottom: 15vh; bottom: 15svh; }
.show__cap--b::after, .show__cap--low::after { bottom: auto; top: -13px; transform: rotate(-135deg); }
.show__cap--c { top: 36vh; top: 36svh; }
.show__cap--low { bottom: 14vh; bottom: 14svh; }
.show__toc {
  position: absolute; left: 50%; top: 27%; z-index: 6; margin: 0; translate: -50% -50%;
  font: 400 clamp(4.4rem, 24vw, 7.5rem)/1 var(--font-script); color: #ffe14d;
  -webkit-text-stroke: .09em var(--navy); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--navy);
  opacity: 0; pointer-events: none;
}
.show__smudge { position: absolute; left: 50%; top: 55%; z-index: 3; width: 78vw; max-width: 420px; aspect-ratio: 1.25; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 62%, transparent); opacity: 0; pointer-events: none; }
.show__dizzy { position: absolute; left: 0; top: 0; z-index: 3; width: 120px; opacity: 0; pointer-events: none; }
.show__dizzy svg { display: block; width: 100%; }
.show__shore { position: absolute; left: 0; bottom: -1px; z-index: 3; width: 100%; height: 64px; }
.rider { position: absolute; transform: translate(-50%, -50%) rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
  .show__rays { animation: rays 12s ease-in-out infinite alternate; }
  .show__rec i { animation: rec-blink 1.2s steps(2, jump-none) infinite; }
  .is-bonk .show__shake { animation: shake .55s cubic-bezier(.36, .07, .19, .97) both; }
  .is-bonk .show__toc { animation: toc 1.5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
  .is-bonk .show__smudge { animation: smudge 4.5s ease-out forwards; }
  .show__dizzy svg { animation: dizzy 1.1s ease-in-out infinite alternate; }
  .rider { animation: rider-bob 1.3s ease-in-out calc(var(--i, 0) * -.45s) infinite alternate; }
}
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); } 30%, 50%, 70% { transform: translate(-10px, 5px) rotate(-.7deg); } 40%, 60% { transform: translate(10px, -5px) rotate(.7deg); } }
@keyframes toc { 0% { opacity: 0; transform: scale(.2) rotate(-16deg); } 16% { opacity: 1; transform: scale(1.2) rotate(-8deg); } 28% { transform: scale(1) rotate(-10deg); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) rotate(-10deg) translateY(-24px); } }
@keyframes smudge { 0% { opacity: 0; transform: scale(.5); } 7% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes dizzy { from { transform: translateX(-8px) rotate(-8deg); } to { transform: translateX(8px) rotate(8deg); } }
@keyframes rider-bob { from { transform: translate(-50%, -50%) rotate(-90deg) translateX(-3px); } to { transform: translate(-50%, -50%) rotate(-84deg) translateX(4px); } }
.show.is-static { height: auto; }
.show.is-static .show__stage { position: relative; }

/* ---------- Strip of fish between the details and the RSVP ---------- */
.sea-strip { position: relative; height: 230px; overflow: hidden; background: linear-gradient(180deg, transparent, rgba(79, 193, 209, .2) 25%, rgba(79, 193, 209, .2) 75%, transparent); }
.sea-strip > .sa { top: 0; }
.sea-strip__crab { position: absolute; left: 6%; bottom: 6px; width: 74px; }
@media (prefers-reduced-motion: no-preference) { .sea-strip__crab { animation: strip-crab 16s ease-in-out infinite; } }
@keyframes strip-crab { 0%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(calc(88vw - 74px)); } }

/* ---------- Details, RSVP and footer decorations ---------- */
.details__star { position: absolute; right: 7%; top: 3.5rem; width: 58px; rotate: 14deg; }
@media (prefers-reduced-motion: no-preference) { .details__star .sa { animation: star-wiggle 5s ease-in-out infinite; } }
.rsvp__peek { position: absolute; bottom: 100%; right: 10%; width: 92px; height: 58px; overflow: hidden; pointer-events: none; }
.rsvp__peek .sa { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(64px); }
.rsvp__peek--b { right: auto; left: 9%; width: 100px; }
@media (prefers-reduced-motion: no-preference) {
  .rsvp__peek .sa { animation: card-peek 7s ease-in-out infinite; }
  .rsvp__peek--b .sa { animation-delay: -3.5s; }
}
@media (prefers-reduced-motion: reduce) { .rsvp__peek .sa { transform: translateY(16px) rotate(-8deg); } }
@keyframes card-peek { 0%, 100% { transform: translateY(64px); } 15%, 40% { transform: translateY(12px) rotate(-8deg); } 50%, 85% { transform: translateY(64px); } }
.site-footer__turtle { width: 130px; margin: 1.25rem auto -.5rem; }
@media (prefers-reduced-motion: no-preference) { .site-footer__turtle { animation: bob 5s ease-in-out infinite; } }