* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  cursor: url("assets/cursor.png"), default;
}

/* ocean */
.ocean-screen {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

.parallax-bg {
  position: fixed;
  inset: 0;
  background-image: url('./assets/background_main.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.parallax-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0%, transparent 10%,
    rgba(255,255,255,0.12) 11%, transparent 12%,
    transparent 22%, rgba(255,255,255,0.08) 23%, transparent 24%
  );
  animation: rayShift 10s ease-in-out infinite alternate;
  pointer-events: none;
}

.parallax-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%,
    rgba(120,220,200,0.25) 0%, rgba(0,100,120,0.15) 40%, transparent 70%);
  animation: waterPulse 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.swimming-fish {
  position: fixed;
  top: 0%;
  left: -100%;
  width: 60vw;
  z-index: 1;
  pointer-events: none;
  animation: swimAcross 18s linear infinite;
  opacity: 0.85;
}

@keyframes swimAcross {
  0%   { left: 110%; }
  100% { left: -65%; }
}

@keyframes rayShift {
  0%   { transform: translateX(0px);   opacity: 0.6; }
  100% { transform: translateX(-80px); opacity: 0.8; }
}

@keyframes waterPulse {
  0%   { opacity: 0.4; }
  100% { opacity: 0.8; }
}

.parallax-container {
  position: relative;
  height: 100vh;
  width: 300vw;
  z-index: 1;
}

/* intro */
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.intro-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}

.intro-star {
  cursor: pointer;
  width: min(120vh, 120vw);
  max-width: 900px;
  pointer-events: all;
  display: block;
  flex-shrink: 0;
  transition: transform 0.6s ease, filter 1.8s ease;
  will-change: transform, filter;
}

.intro-star:hover {
  filter: drop-shadow(0 0 20px rgb(229, 255, 0));
  transform: scale(1.05);
}

.octo {
  position: fixed;
  bottom: -18vh;
  left: -28vw;
  width: min(150vh, 150vw);
  z-index: 2;
  pointer-events: none;
  transition: left 0.1s linear;
  animation: float 3s ease-in-out infinite;
  
}

#aboutBtn {
  position: fixed;
  top: -90px;
  right: -250px;
  z-index: 50;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
}

#aboutBtn img {
  width: min(500vw, 500px);
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#aboutBtn:hover img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(150,230,255,0.6));
}

#aboutOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#aboutOverlay.visible {
  opacity: 1;
  pointer-events: all;
}

#aboutCard {
  position: center;
  width: min(400vw, 1500px);
  transform: scale(0.92);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#aboutOverlay.visible #aboutCard {
  transform: scale(1);
}

#aboutBg {
  width: 100%;
  height: auto;
  display: block;
}

#aboutText {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30% 32%;
  margin-right: 9%;
  text-align: center;
  font-family: 'BrightCurls';
  color: #3a3a2a;
}

#aboutText p {
  font-size: clamp(27px, 3vw, 25px);
  line-height: 1.1;
  margin: 0;
}

#crabBtn {
  position: fixed;
  bottom: 15vh;
  left: 12vw;
  z-index: 5;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
}

#crabBtn img {
  width: min(600vw, 600px);
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#crabBtn:hover img {
  filter: drop-shadow(0 0 14px rgb(255, 77, 0));
}

#crabBtn span {
  position: absolute;
  top: 163px;
  left: 31%;
  transform: translateX(-50%);
  font-family: 'BrightCurls';
  font-size: clamp(18px, 1.4vw, 14px);
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  width: max-content;
}

#clam {
  position: fixed;
  bottom: 10vh;
  left: 10vw;
  width: min(900vw, 900px);
  z-index: 6;
  pointer-events: all;
  cursor: pointer;
  display: none;
  mix-blend-mode: screen;
  animation: wiggle 0.8s ease-in-out infinite;
}

#clam.swim-in {
  transition: bottom 2s ease-out;
  bottom: 0vh;
}

#clam.caught {
  transition: left 1.2s ease-in, bottom 1.2s ease-in, opacity 1.5s ease-in;
  bottom: -18vh;
  left: -28vw;
  opacity: 0;
  pointer-events: none;
}

#speechBubble {
  position: fixed;
  top: 30vh;
  left: 10vw;
  z-index: 10;
  display: none;
  width: min(35vw, 320px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#speechBubble.visible {
  opacity: 1;
}

#speechBg {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: screen;
}

#speechText {
  position: absolute;
  top: 55%;
  left: 20%;
  width: 68%;
  transform: translateY(-50%);
  font-family: 'BrightCurls';
  font-size: clamp(28px, 1.4vw, 14px);
  color: #3a3a2a;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

#clamText.visible {
  opacity: 1;
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0) rotate(-4deg); }
  50%       { transform: translateX(12px) rotate(4deg); }
}

#crabBtn:hover .crab-inner img {
  transform: scale(1.08) rotate(-5deg);
  filter: drop-shadow(0 0 14px rgba(227,131,91,0.6));
}

#fishGroup {
  position: fixed;
  top: 35vh;
  right: -60vw;
  width: min(800vw, 800px);
  z-index: 6;
  pointer-events: all;
  cursor: pointer;
  display: none;
  animation: wiggle 1.2s ease-in-out infinite;
  transition: right 2.5s ease-out;
}

#fishGroup.swim-in {
  right: 15vw;
}

#fishGroup.caught {
  transition: right 1.2s ease-in, top 1.2s ease-in, opacity 0.3s ease-in 1.1s;
  right: 85vw;
  top: 80vh;
  opacity: 0;
  pointer-events: none;
}

#seal {
  position: fixed;
  top: 0vh;
  left: 50vw;
  width: min(500vw, 500px);
  z-index: 6;
  display: none;
  pointer-events: none;
}

#seal.swim-in {
  top: 50vh;
  width: min(35vw, 320px);
}

#shark {
  position: fixed;
  top: -30vh;
  left: 25vw;
  width: min(25vw, 220px);
  z-index: 999;
  display: none;
  pointer-events: none;
  transition: top 2s ease-in, width 2s ease-in;
  transform: scaleX(-1);
}

#scaredOcto {
  position: fixed;
  bottom: 0vh;
  left: 5vw;
  width: min(150vh, 150vw);
  z-index: 2;
  pointer-events: none;
  display: none;
  visibility: visible !important;
  opacity: 1 !important;
}

#shark.swim-in {
  top: 110vh;
  width: min(45vw, 400px);
}

#jelly {
  position: fixed;
  bottom: 0vh;
  left: 30vw;
  width: 500px;
  height: auto;
  z-index: 15;
  display: none;
  pointer-events: all;
  cursor: pointer;
  animation: wiggle 1.5s ease-in-out infinite;
  transition: bottom 3s ease-out;
}

#jelly.swim-in {
  bottom: 25vh;
}

#jelly.swim-to-octo {
  transition: bottom 2s ease-in-out, left 2s ease-in-out;
  bottom: 10vh;
  left: 5vw;
}

#jelly.swim-away {
  transition: bottom 3s ease-out, opacity 1s ease-in 2s;
  bottom: -40vh;
  opacity: 0;
}

#shellBtn {
  position: fixed;
  bottom: 5vh;
  right: 15vw;
  width: 700px;
  height: auto;
  z-index: 5;
  display: none;
  cursor: pointer;
  pointer-events: all;
  animation: wiggle 2s ease-in-out infinite;
  transition: transform 0.3s ease;
}

#shellBtn:hover {
  transform: scale(1.1);
}

#pearl {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: auto;
  z-index: 999;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

#pearl.visible {
  opacity: 1;
}

#turtle {
  position: fixed;
  top: 50%;
  right: -30vw;
  width: 600px;
  height: auto;
  z-index: 999;
  display: none;
  cursor: pointer;
  pointer-events: all;
  animation: wiggle 2s ease-in-out infinite;
  transition: right 3s ease-out;
}

#turtle.swim-in {
  right: 35vw;
}

#turtle.ride {
  transition: right 4s ease-in-out;
  right: 110vw;
}

#crab {
  position: fixed;
  bottom: -20vh;
  left: 45vw;
  width: min(900vw, 900px);
  z-index: 6;
  pointer-events: all;
  cursor: pointer;
  display: none;
  animation: wiggle 0.8s ease-in-out infinite;
}

#crab.swim-in {
  transition: bottom 2s ease-out;
  bottom: 0vh;
}

#crab.caught {
  transition: left 1.2s ease-in, bottom 1.2s ease-in, opacity 1.5s ease-in;
  bottom: -18vh;
  left: -28vw;
  opacity: 0;
  pointer-events: none;
}

#cave {
  position: fixed;
  bottom: 0vh;
  right: 10vw;
  width: 1000px;
  height: auto;
  z-index: 5;
  display: none;
  cursor: pointer;
  pointer-events: all;
}

#cave:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

#sleepOcto {
  position: fixed;
  bottom: -20vh;
  left: 19vw;
  width: min(80vh, 80vw);
  z-index: 999;
  display: none;
  pointer-events: none;
}

#snail {
  position: fixed;
  bottom: -20vh;
  left: 50vw;
  width: 600px;
  height: auto;
  z-index: 999;
  display: none;
  cursor: pointer;
  pointer-events: all;
}

#snail.swim-in {
  transition: bottom 4s ease-out;
  bottom: 20vh;
}

#snail.run-away {
  transition: bottom 0.8s ease-in, left 0.8s ease-in;
  bottom: -30vh;
  left: 110vw;
}

.octo:hover {
  filter: drop-shadow(0 0 14px rgba(255, 182, 255, 0.8));
  cursor: pointer;
}

.swimming-fish:hover {
  filter: drop-shadow(0 0 10px rgba(100, 200, 255, 0.8));
  cursor: pointer;
}

#jelly:hover {
  filter: drop-shadow(0 0 14px rgba(150, 200, 255, 0.8));
}

#seal:hover {
  filter: drop-shadow(0 0 14px rgba(200, 200, 255, 0.8));
}

#shark:hover {
  filter: drop-shadow(0 0 14px rgba(255, 100, 100, 0.8));
}

#turtle:hover {
  filter: drop-shadow(0 0 14px rgba(100, 255, 150, 0.8));
}

#snail:hover {
  filter: drop-shadow(0 0 14px rgba(200, 150, 255, 0.8));
}

@keyframes bigBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-40px); }
}

@font-face {
  font-family: 'BrightCurls';
  src: url('./assets/BrightCurls.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes float {
    0%, 100% {
        /* Start and end at the original vertical position */
        transform: translateY(0);
    }
    50% {
        /* Move the object up by 20 pixels halfway through the animation */
        transform: translateY(-20px); 
    }
}