/* GoodPlann · fondo narrativo del océano */

/* capas de mar que se funden con el scroll (profundidad → azul) */
.gp .sea{ position:fixed; inset:0; pointer-events:none; }
.gp .sea-deep{ z-index:-4;
  background:
    radial-gradient(72% 62% at 14% 6%, rgba(255,86,92,.50), transparent 55%),
    radial-gradient(58% 55% at 92% 88%, rgba(40,150,140,.16), transparent 60%),
    linear-gradient(150deg, #45121e 0%, #2a1526 30%, #12202e 66%, #0a1622 100%); }
.gp .sea-mid{ z-index:-3; opacity:0; will-change:opacity;
  background:
    radial-gradient(58% 50% at 18% 8%, rgba(255,86,92,.12), transparent 58%),
    linear-gradient(168deg, #0b2a26 0%, #10362f 52%, #123f36 100%); }
.gp .sea-blue{ z-index:-3; opacity:0; will-change:opacity;
  background:linear-gradient(180deg, #0b2236 0%, #0e2b48 42%, #124a63 74%, #17627a 100%); }
.gp .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, transparent 58%, rgba(0,0,0,.5) 100%); mix-blend-mode:multiply; }
/* criaturas marinas de fondo (motivo, NO protagonistas) */
.gp .creatures{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.gp .cx{ position:absolute; will-change:transform; filter:blur(1.2px); opacity:.34; }
.gp .cx.soft{ opacity:.22; filter:blur(2.4px); }
.gp .j1{ top:11%;  left:8%;  width:118px; animation:drift1 15s ease-in-out infinite; }
.gp .j2{ top:50%;  left:81%; width:150px; animation:drift2 19s ease-in-out infinite; }
.gp .octo{ top:63%; left:12%; width:240px; animation:drift3 24s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) rotate(0) } 50%{ transform:translate(10px,-26px) rotate(3deg) } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) rotate(0) } 50%{ transform:translate(-14px,-32px) rotate(-3deg) } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(16px,-18px) } }
/* medusa · pulso de campana + vaivén de tentáculos (como nadando) */
.gp .jbell{ transform-box:fill-box; transform-origin:center top; animation:bellPulse 4.5s ease-in-out infinite; }
@keyframes bellPulse{ 0%,100%{ transform:scale(1,1) } 50%{ transform:scale(1.07,.9) } }
.gp .jtent{ transform-box:fill-box; transform-origin:center top; animation:tentSway 4.5s ease-in-out infinite; }
@keyframes tentSway{ 0%,100%{ transform:translateY(0) scaleY(1) } 50%{ transform:translateY(8px) scaleY(1.05) } }
.gp .j2 .jbell, .gp .j2 .jtent{ animation-duration:5.6s; }
/* glow global animado del fondo */
.gp .glow{ position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(46% 40% at 16% 26%, rgba(51,153,137,.16), transparent 62%),
    radial-gradient(42% 38% at 84% 60%, rgba(255,99,89,.13), transparent 62%);
  animation:glowShift 12s ease-in-out infinite; }
/* burbujas flotando (profundidad marina) */
.gp .bub{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), rgba(125,226,209,.14) 60%, transparent 72%);
  border:1px solid rgba(255,255,255,.14); opacity:0; animation:rise linear infinite; }
@keyframes rise{ 0%{ transform:translateY(30px) scale(.7); opacity:0 } 12%{ opacity:.6 } 88%{ opacity:.4 } 100%{ transform:translateY(-170px) scale(1.15); opacity:0 } }
.gp .b1{ left:11%; top:34%; width:9px;  height:9px;  animation-duration:9s;    animation-delay:0s; }
.gp .b2{ left:14%; top:40%; width:6px;  height:6px;  animation-duration:11s;   animation-delay:1.5s; }
.gp .b3{ left:9%;  top:47%; width:12px; height:12px; animation-duration:13s;   animation-delay:3s; }
.gp .b4{ left:80%; top:52%; width:8px;  height:8px;  animation-duration:10s;   animation-delay:.8s; }
.gp .b5{ left:84%; top:58%; width:11px; height:11px; animation-duration:12s;   animation-delay:2.2s; }
.gp .b6{ left:78%; top:46%; width:6px;  height:6px;  animation-duration:9.5s;  animation-delay:4s; }
.gp .b7{ left:16%; top:66%; width:7px;  height:7px;  animation-duration:12.5s; animation-delay:2.6s; }
.gp .b8{ left:55%; top:74%; width:9px;  height:9px;  animation-duration:11.5s; animation-delay:1.2s; }
/* medusa luminosa (bioluminiscente, estilo profundidad) */
.gp .gjelly{ opacity:.44; filter:blur(.4px); width:250px; top:46%; }
/* beluga (nuestro estilo) nadando por toda la pantalla */
.gp .beluga{ top:58%; left:0; width:196px; opacity:.72; filter:none; animation:swimAcross 50s linear infinite; }
@keyframes swimAcross{
  0%{ transform:translate(-24vw, 0) }
  25%{ transform:translate(24vw, -4vh) }
  50%{ transform:translate(60vw, 3vh) }
  75%{ transform:translate(96vw, -4vh) }
  100%{ transform:translate(128vw, 0) }
}
/* nado: cola y aleta con movimiento coordinado, suave y en bucle */
.gp .beluga .bel-tail{ transform-box:fill-box; transform-origin:right center; animation:belTail 3.4s ease-in-out infinite; }
@keyframes belTail{ 0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
.gp .beluga .bel-fin{ transform-box:fill-box; transform-origin:top center; animation:belFin 3.4s ease-in-out infinite; }
@keyframes belFin{ 0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(6deg) } }
@media (max-width:640px){
 .gp .beluga{ width:132px; opacity:.66; }
}
/* destello de luz / rayos de profundidad en la parte superior */
.gp .rays{ position:fixed; top:0; left:0; right:0; height:80vh; z-index:-2; pointer-events:none; overflow:hidden;
  animation:rayShift 14s ease-in-out infinite; }
.gp .rays svg{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:130%; height:100%; }
@keyframes rayShift{ 0%,100%{ opacity:.5 } 50%{ opacity:.85 } }
@media (max-width:560px){
 .gp .cx.octo{ width:170px; }
 .gp .cx.j2{ width:110px; }
}

/* ══════════════════════════════════════════════════════════════════
   Variante cálida · la de la página de confirmación.
   Mismo mundo visual, pero quieto: aquí no hay viaje que recorrer,
   así que el fondo no cambia con el scroll y la paleta se queda en coral.
   ══════════════════════════════════════════════════════════════════ */
.gp.is-warm .sea{ z-index:-4; opacity:1;
  background:
    radial-gradient(64% 54% at 18% 6%, rgba(255,86,92,.34), transparent 56%),
    radial-gradient(58% 60% at 88% 92%, rgba(40,150,140,.16), transparent 62%),
    linear-gradient(152deg, #34121d 0%, #1c1424 32%, #101d2b 66%, #0a1420 100%); }

.gp.is-warm .glow{
  background:
    radial-gradient(42% 40% at 50% 30%, rgba(255,99,89,.14), transparent 64%),
    radial-gradient(40% 38% at 80% 60%, rgba(51,153,137,.12), transparent 64%); }

.gp.is-warm .grain{
  background:radial-gradient(120% 90% at 50% -8%, transparent 56%, rgba(0,0,0,.55) 100%); }

.gp.is-warm .rays{ height:70vh; }
@keyframes rayShiftWarm{ 0%,100%{ opacity:.4 } 50%{ opacity:.75 } }
.gp.is-warm .rays{ animation-name:rayShiftWarm; }

.gp.is-warm .cx{ opacity:.3; }
.gp.is-warm .cx.soft{ opacity:.18; }
.gp.is-warm .j1{ top:12%; left:7%;  width:120px; animation:drift1 16s ease-in-out infinite; }
.gp.is-warm .j2{ top:56%; left:83%; width:150px; animation:drift2 20s ease-in-out infinite; }
.gp.is-warm .j3{ top:74%; left:14%; width:96px;  animation:drift1 22s ease-in-out infinite; }
.gp.is-warm .j4{ top:20%; left:80%; width:84px;  animation:drift2 18s ease-in-out infinite; }
.gp.is-warm .j2 .jbell, .gp.is-warm .j2 .jtent{ animation-duration:5.8s; }

.gp.is-warm .bub{
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.5), rgba(255,160,150,.14) 60%, transparent 72%);
  border-color:rgba(255,255,255,.12); }
.gp.is-warm .b1{ left:12%; top:44%; width:9px;  height:9px;  animation-duration:10s;   animation-delay:0s; }
.gp.is-warm .b2{ left:16%; top:52%; width:6px;  height:6px;  animation-duration:12s;   animation-delay:1.6s; }
.gp.is-warm .b3{ left:82%; top:40%; width:11px; height:11px; animation-duration:11s;   animation-delay:.8s; }
.gp.is-warm .b4{ left:86%; top:56%; width:7px;  height:7px;  animation-duration:13s;   animation-delay:2.4s; }
.gp.is-warm .b5{ left:50%; top:78%; width:8px;  height:8px;  animation-duration:12.5s; animation-delay:1.2s; }

@media (max-width:560px){
  .gp.is-warm .j2, .gp.is-warm .j4{ display:none; }
}