/* Zero Aqua — ambient aquarium background (shared by index.html and product.php) */
/* ========== TERRARIUM BACKGROUND ========== */
.terrarium-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--water-top) 0%, transparent 60%),
    linear-gradient(180deg, #f4faf6 0%, #e6f1ea 35%, #d4e8dc 70%, #b8d6c4 100%);
  overflow: hidden;
}

.terrarium-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.35) 0%, transparent 25%),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.25) 0%, transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(74,124,89,0.15) 0%, transparent 40%);
  pointer-events: none;
}

/* Slow surface caustics add water depth without obscuring the catalogue. */
.terrarium-bg::after {
  content: "";
  position: absolute;
  inset: -16% -10% 30%;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(104deg, transparent 0 48px, rgba(255,255,255,0.34) 52px 54px, transparent 60px 112px),
    repeating-linear-gradient(76deg, transparent 0 64px, rgba(255,255,255,0.22) 68px 70px, transparent 76px 138px);
  background-size: 190px 104px, 244px 132px;
  opacity: 0.22;
  filter: blur(7px);
  transform: translate3d(-2%, -2%, 0) rotate(-1deg);
  animation: surfaceShimmer 15s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes surfaceShimmer {
  0% {
    transform: translate3d(-2%, -2%, 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(2%, 1%, 0) rotate(1deg);
  }
}

/* Light shafts */
.light-shafts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
  z-index: 0;
}
.shaft {
  position: absolute;
  top: -10%;
  width: 120px;
  height: 140%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.15) 40%, transparent 100%);
  transform-origin: top;
  filter: blur(8px);
  animation: shaftSway 12s ease-in-out infinite;
}
.shaft:nth-child(1) { left: 8%;  transform: rotate(8deg);  animation-delay: 0s; }
.shaft:nth-child(2) { left: 32%; transform: rotate(-4deg); animation-delay: -3s; width: 80px; }
.shaft:nth-child(3) { left: 58%; transform: rotate(6deg);  animation-delay: -6s; width: 140px; }
.shaft:nth-child(4) { left: 82%; transform: rotate(-2deg); animation-delay: -9s; width: 90px; }
@keyframes shaftSway {
  0%, 100% { opacity: 0.4; transform: rotate(var(--r, 4deg)) translateX(0); }
  50%      { opacity: 0.7; transform: rotate(calc(var(--r, 4deg) * -1)) translateX(20px); }
}

/* Bubbles */
.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.3) 60%, transparent);
  border: 1px solid rgba(255,255,255,0.4);
  animation: bubbleRise linear infinite;
  pointer-events: none;
}
@keyframes bubbleRise {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10%  { opacity: 0.8; }
  50%  { transform: translate(20px, -50vh) scale(1); }
  100% { transform: translate(-10px, -110vh) scale(1.1); opacity: 0; }
}

/* Fish lanes — fish always swim head-first */
.fish-lane {
  position: absolute;
  width: 100%;
  height: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translate3d(var(--lane-x, 0px), var(--lane-y, 0px), 0);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
#fish-container {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 1;
  perspective: 1050px;
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
  z-index: 1;
}

/* Short-lived interaction rings stay behind all interface controls. */
.water-ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: 28px;
  height: 14px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,255,255,0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  animation: waterRipple 900ms cubic-bezier(0.16, 0.75, 0.3, 1) forwards;
}
.water-ripple::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(74,124,89,0.24);
  border-radius: inherit;
}
@keyframes waterRipple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  18% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}
.fish {
  --fish-opacity: 0.5;
  --fish-scale: 1;
  --fish-z: 0px;
  --fish-filter: drop-shadow(0 7px 14px rgba(24, 62, 44, 0.22)) saturate(1.08) contrast(1.03);
  position: absolute;
  left: 0;
  animation: swimRight linear infinite;
  opacity: var(--fish-opacity);
  filter: var(--fish-filter);
  transform-origin: center;
  transform-style: preserve-3d;
  transition: opacity 320ms ease, filter 320ms ease;
  will-change: transform, opacity;
}
.fish-lane.depth-far { --lane-depth: 0.2; }
.fish-lane.depth-mid { --lane-depth: 0.48; }
.fish-lane.depth-near { --lane-depth: 0.8; }
.fish-lane.depth-far .fish {
  --fish-opacity: 0.3;
  --fish-scale: 0.78;
  --fish-z: -150px;
  --fish-filter: drop-shadow(0 5px 11px rgba(24, 62, 44, 0.16)) blur(0.25px) saturate(0.92);
}
.fish-lane.depth-mid .fish {
  --fish-opacity: 0.5;
  --fish-scale: 0.92;
  --fish-z: -40px;
}
.fish-lane.depth-near .fish {
  --fish-opacity: 0.66;
  --fish-scale: 1.08;
  --fish-z: 90px;
  --fish-filter: drop-shadow(0 9px 18px rgba(24, 62, 44, 0.25)) saturate(1.14) contrast(1.05);
}
.fish-inner {
  display: inline-block;
  animation: bob 3.2s ease-in-out infinite, wiggle 1s ease-in-out infinite;
  transform-origin: center;
  transform-style: preserve-3d;
}
/* Fish artwork faces LEFT by default — flip the ones swimming right so
   every fish moves head-first. */
.fish .fish-inner { transform: scaleX(-1); }
.fish.left .fish-inner { transform: none; }
.fish.left { animation-name: swimLeft; }

/* Body bobs up/down to look like it's gliding */
@keyframes bob {
  0%, 100% { translate: 0 -6px; }
  50%      { translate: 0  6px; }
}
/* Tiny side-to-side wiggle for tail/body life */
@keyframes wiggle {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 2deg; }
}

/* transform-based movement — GPU-composited, no per-frame layout work */
@keyframes swimRight {
  0%   { transform: translate3d(-18vw, 0, var(--fish-z)) scale(var(--fish-scale)) rotateY(-8deg); }
  50%  { transform: translate3d(50vw, -5px, var(--fish-z)) scale(var(--fish-scale)) rotateY(3deg); }
  100% { transform: translate3d(118vw, 0, var(--fish-z)) scale(var(--fish-scale)) rotateY(-5deg); }
}
@keyframes swimLeft {
  0%   { transform: translate3d(118vw, 0, var(--fish-z)) scale(var(--fish-scale)) rotateY(8deg); }
  50%  { transform: translate3d(50vw, 5px, var(--fish-z)) scale(var(--fish-scale)) rotateY(-3deg); }
  100% { transform: translate3d(-18vw, 0, var(--fish-z)) scale(var(--fish-scale)) rotateY(5deg); }
}

/* Crabs scuttling on the sand */
.crab-lane {
  position: fixed;
  left: 0; right: 0;
  bottom: 24px;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.crab {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: scuttle linear infinite;
  filter: drop-shadow(0 3px 6px rgba(45, 74, 50, 0.25));
}
.crab-inner {
  display: inline-block;
  animation: crabHop 0.5s ease-in-out infinite;
}
.crab.left .crab-inner { transform: scaleX(-1); }
.crab.left { animation-name: scuttleLeft; }
@keyframes scuttle {
  0%   { transform: translateX(-10vw); }
  100% { transform: translateX(110vw); }
}
@keyframes scuttleLeft {
  0%   { transform: translateX(110vw); }
  100% { transform: translateX(-10vw); }
}
@keyframes crabHop {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* Jellyfish drifting up */
.jelly {
  position: absolute;
  bottom: 0;
  will-change: transform, opacity;
  animation: jellyDrift linear infinite;
  filter: drop-shadow(0 4px 12px rgba(201, 123, 91, 0.25));
  pointer-events: none;
}
.jelly-inner {
  display: inline-block;
  animation: jellyPulse 3s ease-in-out infinite;
  transform-origin: center top;
}
@keyframes jellyDrift {
  0%   { transform: translateY(14vh); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-114vh); opacity: 0; }
}
@keyframes jellyPulse {
  0%, 100% { transform: scaleY(1)    scaleX(1); }
  50%      { transform: scaleY(0.85) scaleX(1.1); }
}

/* Starfish — sits on the sand and breathes */
.starfish {
  position: fixed;
  bottom: 30px;
  z-index: -1;
  pointer-events: none;
  animation: starBreath 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
@keyframes starBreath {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.06) rotate(3deg); }
}

/* Snail crawling slowly */
.snail {
  position: fixed;
  left: 0;
  bottom: 30px;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  animation: snailCrawl 60s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.snail-inner { animation: snailBob 2s ease-in-out infinite; display: inline-block; }
@keyframes snailCrawl {
  0%   { transform: translateX(-8vw); }
  100% { transform: translateX(108vw); }
}
@keyframes snailBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -2px; }
}

/* Seahorse hovers */
.seahorse {
  position: absolute;
  left: 0;
  will-change: transform, translate;
  animation: seahorseHover 8s ease-in-out infinite, swimRight linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(45,74,50,0.2));
}
.seahorse.left { animation-name: seahorseHover, swimLeft; }
.seahorse.left .seahorse-inner { transform: scaleX(-1); }
.seahorse-inner { display: inline-block; }
@keyframes seahorseHover {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0 -14px; }
  50%      { translate: 0 6px; }
  75%      { translate: 0 -8px; }
}

/* Plants at bottom — taller so they show through the translucent footer */
.plants {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 320px;
  z-index: -1;
  pointer-events: none;
}
.plant {
  position: absolute;
  bottom: -10px;
  transform-origin: bottom center;
  animation: sway 6s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}

/* Amano-style shrimp explore the planted floor at a deliberately slow pace. */
.aquatic-shrimp {
  --shrimp-facing: 1;
  position: absolute;
  left: var(--shrimp-left);
  bottom: var(--shrimp-bottom);
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(45,74,50,0.2));
  animation: shrimpExplore var(--shrimp-duration, 12s) ease-in-out infinite;
  animation-delay: var(--shrimp-delay, 0s);
  transform-origin: center bottom;
  will-change: transform;
}
@keyframes shrimpExplore {
  0%, 100% { transform: translate3d(-5px, 1px, 0) scaleX(var(--shrimp-facing)) rotate(-1deg); }
  45% { transform: translate3d(10px, -3px, 0) scaleX(var(--shrimp-facing)) rotate(2deg); }
  70% { transform: translate3d(16px, -1px, 0) scaleX(var(--shrimp-facing)) rotate(0deg); }
}

/* Sand floor — raised to peek behind footer */
.sand {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 140px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.4), transparent 50%),
    linear-gradient(180deg, #d4c9a8 0%, #b8a87f 100%);
  z-index: -1;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transform: scaleX(1.3);
}


/* Accessibility: users who prefer reduced motion get a still scene */
.motion-toggle { border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; min-height: 40px; flex-shrink: 0; }
.motion-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.za-scene-paused :is(.fish, .fish-inner, .seahorse, .seahorse-inner, .crab, .crab-inner, .jelly, .jelly-inner, .snail, .snail-inner, .bubble, .shaft, .plant, .starfish, .aquatic-shrimp, .jar-fish, .jar-plant, .jar-particle, .footer-fish, .hero-floating-card),
.za-scene-paused .terrarium-bg::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .fish, .seahorse, .crab, .jelly, .snail, .bubble, .shaft,
  .fish-inner, .seahorse-inner, .crab-inner, .jelly-inner, .snail-inner,
  .plant, .starfish, .aquatic-shrimp, .terrarium-bg::after {
    animation: none !important;
  }
  #bubbles, .jelly, .crab-lane, .water-ripple { display: none !important; }
  .terrarium-bg::after { opacity: 0.14; }
  .fish-lane { transform: none !important; transition: none !important; }
  .fish-lane:nth-child(4n+1) .fish { left: 12%; }
  .fish-lane:nth-child(4n+2) .fish { left: 72%; }
  .fish-lane:nth-child(4n+3) .fish { left: 38%; }
  .fish-lane:nth-child(4n) .fish { left: 86%; }
  .seahorse { left: 64%; }
}

/* Small screens use a reduced scene generated by ambient.js. */
@media (max-width: 640px) {
  #fish-container { display: block; opacity: 1; perspective: 820px; }
  .jelly, .seahorse, .snail { display: none; }
  .crab-lane { display: block; bottom: 18px; opacity: 0.78; }
  .starfish { display: block; bottom: 22px; opacity: 0.72; }
  .fish-lane.depth-far .fish { --fish-opacity: 0.42; }
  .fish-lane.depth-mid .fish { --fish-opacity: 0.56; }
  .fish-lane.depth-near .fish { --fish-opacity: 0.68; }
  #bubbles { opacity: 0.45; }
  .terrarium-bg::after { opacity: 0.14; filter: none; animation: none; will-change: auto; }
  .light-shafts { display: none; }
  .fish { filter: none; transition: opacity .2s ease; }
  .fish-inner { animation: bob 3.2s ease-in-out infinite; }
}