/* Contextual navigation, using the site's locally hosted Lucide icons. */
.desktop-nav { gap: 24px; }
.desktop-nav a { gap: 8px; }
.desktop-nav a > svg { width: 15px; height: 15px; color: #547e75; stroke-width: 1.6; }
.shop-menu { background: #fffffffa; box-shadow: 0 24px 45px #183e3417; }
.shop-menu-collections a { justify-content: flex-start; gap: 10px; }
.shop-menu-collections a > svg { width: 17px; height: 17px; color: #689689; }
.shop-menu-collections a span { color: #4e6058; }
.shop-menu-collections a:hover span { color: #007f75; }
.shop-menu-universes a > svg { width: 22px; height: 22px; stroke-width: 1.4; }
.mobile-nav a { display: flex; align-items: center; gap: 13px; }
.mobile-nav a > svg { width: 20px; height: 20px; color: #5a8f7e; }
.footer-top > div > a:not(.brand), .footer-bottom a { display: inline-flex; align-items: center; gap: 9px; }
.footer-top > div > a:not(.brand) { display: flex; }
.footer-top > div > a > svg, .footer-bottom a > svg { width: 14px; height: 14px; color: #71968b; }
.sidebar-note a { display: inline-flex; align-items: center; gap: 7px; }
.sidebar-note a > svg { width: 15px; height: 15px; }
.circle-arrow svg { width: 19px; height: 19px; }
@media (max-width: 1200px) {
  .desktop-nav { gap: 16px; }
  .desktop-nav a { gap: 6px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .header-inner { padding-inline: 20px; gap: 12px; }
  .desktop-nav { gap: 12px; }
  .desktop-nav a { font-size: 10px; gap: 5px; }
  .desktop-nav a > svg { width: 13px; height: 13px; }
  .header-actions .icon-button { width: 29px; }
}

/* Light through water on hover; a small expanding wave on activation. */
:is(.button, button.icon-button, .filter-tab, .video-teaser, .shop-menu-universes a) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.button::before, .video-teaser::before, .filter-tab::before {
  content: '';
  position: absolute;
  inset: -60% -35%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #ccfff62b 43%, #ffffff52 48%, #ccfff622 53%, transparent 66%);
  transform: translateX(-75%) rotate(-8deg);
  opacity: 0;
}
.button:active, .filter-tab:active, .video-teaser:active { transform: translateY(1px) scale(.98); }
.button:focus-visible { box-shadow: 0 0 0 5px #078d7f19; }
.water-ripple {
  position: absolute;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: var(--ripple-size, 160px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, #b2eee638 55%, #efffff55 70%, transparent 72%);
  transform: translate(-50%, -50%) scale(0);
  opacity: .6;
  pointer-events: none;
  animation: water-ripple .65s cubic-bezier(.16,.65,.3,1) forwards;
}
@keyframes water-ripple {
  to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
@keyframes water-reflection {
  0% { opacity: 0; transform: translateX(-75%) rotate(-8deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(75%) rotate(-8deg); }
}
@keyframes icon-swim {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(3px) rotate(-9deg); }
  70% { transform: translateX(-1px) rotate(5deg); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover::before, .video-teaser:hover::before, .filter-tab:hover::before { animation: water-reflection .85s ease-out; }
  .button:hover { box-shadow: 0 7px 23px #00857724; }
  a:hover > .lucide-fish, a:hover > .lucide-waves,
  .universe-card:hover .circle-arrow svg { animation: icon-swim .7s ease-in-out; }
}

/* One continuous rise, without intermediate easing stops or background repaint. */
@view-transition { navigation: auto; }
::view-transition {
  background: url('../images/logo-original.png') center / min(460px, 70vw, 65svh) auto no-repeat,
    radial-gradient(ellipse at 70% 10%, #f9fffb, transparent 65%), #dcefe9;
  background-blend-mode: normal, normal;
  pointer-events: none;
}
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
}
::view-transition-old(root) { animation: reef-depart 1.15s linear both; }
::view-transition-new(root) { animation: reef-arrive 1.15s .45s linear both; }
@keyframes reef-depart {
  from { clip-path: ellipse(150% 100% at 50% 10%); }
  to { clip-path: ellipse(150% 100% at 50% -110%); }
}
@keyframes reef-arrive {
  from { clip-path: ellipse(150% 100% at 50% 205%); }
  to { clip-path: ellipse(150% 100% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
  .water-ripple { display: none; }
  .button::before, .video-teaser::before, .filter-tab::before { display: none; }
  .button:active, .filter-tab:active, .video-teaser:active { transform: none; }
}