/* Bobbin's Harbor v004: the living harbor. Layers cut from the approved home .ai (proto/living-home/build_layers.py)
   are placed by js/live.js; this file only moves and styles them. Calm mode and reduced motion hold everything still. */
.stage { container-type: inline-size; }
.lv { position: absolute; display: block; pointer-events: none; z-index: 0; }
.lv img { display: block; width: 100%; height: 100%; }
.lv-under { z-index: 0; }
.stage > .sp, .stage > .hit, .stage nav.dock > *, .stage .hud > * { z-index: 3; }
.stage .s-boat { z-index: 1; }

/* sky: the sun breathes, clouds drift, the far lighthouse blinks, small gulls flap across */
.lv-sun { border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 170, .55) 0%, rgba(255, 230, 150, .25) 40%, rgba(255, 230, 150, 0) 70%); animation: sun 9s ease-in-out infinite; }
@keyframes sun { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
.lv-cloud { animation: drift var(--dur, 160s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes drift { from { transform: translateX(var(--from, -30cqw)); } to { transform: translateX(var(--to, 110cqw)); } }
.lv-farlamp { border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 120, 1) 0%, rgba(255, 226, 120, .5) 35%, rgba(255, 226, 120, 0) 70%); animation: blink 3.2s ease-in-out infinite; }
@keyframes blink { 0%, 40%, 100% { opacity: .15; transform: scale(.7); } 55%, 70% { opacity: 1; transform: scale(1.25); } }
.lv-gull img { transform-origin: 50% 60%; animation: flap .55s ease-in-out infinite alternate; }
.lv-gull { animation: glide var(--dur, 60s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes glide { 0% { transform: translate(var(--from, -20cqw), 0); } 50% { transform: translate(calc((var(--from, -20cqw) + var(--to, 120cqw)) / 2), -1.2cqw); } 100% { transform: translate(var(--to, 120cqw), 0); } }

/* lighthouse: a warm lamp and a slow sweeping beam */
.lv-lamp { border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 160, .95) 0%, rgba(255, 220, 120, .45) 30%, rgba(255, 220, 120, 0) 68%); animation: lamp 4s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes lamp { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.lv-beam { transform-origin: 0 50%; background: linear-gradient(to right, rgba(255, 206, 96, .9), rgba(255, 226, 150, .45) 40%, rgba(255, 236, 180, 0)); clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%); filter: blur(1.5px); animation: sweep 8s ease-in-out infinite; }
@keyframes sweep { 0% { transform: scaleX(1); opacity: .9; } 25% { transform: scaleX(.05); opacity: .2; } 50% { transform: scaleX(-1); opacity: .9; } 75% { transform: scaleX(-.05); opacity: .2; } 100% { transform: scaleX(1); opacity: .9; } }
.lv-pierlamp { border-radius: 50%; background: radial-gradient(circle, rgba(255, 232, 150, .9) 0%, rgba(255, 232, 150, .35) 35%, rgba(255, 232, 150, 0) 70%); animation: flicker 5.5s steps(1) infinite, lamp 3s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes flicker { 0%, 61%, 64%, 100% { filter: brightness(1); } 62% { filter: brightness(.55); } 63% { filter: brightness(1.15); } }

/* water: lines lap and fade, the sun glints, buoys bob in their rings, the float rocks */
.lv-wave { animation: lap var(--dur, 7s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
@keyframes lap { 0% { transform: translateX(-1.4cqw) scaleX(.85); opacity: .25; } 50% { opacity: 1; } 100% { transform: translateX(1.4cqw) scaleX(1.1); opacity: .45; } }
.lv-glint { width: 1.1cqw; aspect-ratio: 1; background: #FFF9E8; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: glint var(--dur, 3.4s) ease-in-out infinite; animation-delay: var(--delay, 0s); opacity: 0; }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 80% { opacity: .95; transform: scale(1) rotate(20deg); } 90% { opacity: 0; transform: scale(.4) rotate(40deg); } }
.lv-buoy { transform-origin: 50% 92%; animation: bob var(--dur, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(calc(var(--tilt, 3deg) * -1)); } 50% { transform: translateY(-1.6%) rotate(var(--tilt, 3deg)); } }
.lv-ring { border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 250, 235, .55) 0%, rgba(255, 250, 235, .22) 45%, rgba(255, 250, 235, 0) 72%); animation: ring var(--dur, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes ring { 0%, 100% { transform: scale(1, 1); opacity: .9; } 50% { transform: scale(1.12, .9); opacity: .6; } }
.lv-line { animation: ring var(--dur, 3.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.lv-float { animation: rockf 5.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes rockf { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-.5%) rotate(.5deg); } }
.lv-shadow { border-radius: 50%; background: radial-gradient(ellipse at center, rgba(20, 80, 80, .35) 0%, rgba(20, 80, 80, .12) 50%, rgba(20, 80, 80, 0) 72%); }
.s-boat::after { content: ''; position: absolute; left: 8%; right: 30%; bottom: 3%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at 100% 50%, rgba(255, 250, 235, .7), rgba(255, 250, 235, 0) 70%); pointer-events: none; }

/* tap the water: rings spread from your finger */
.lv-water { position: absolute; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv-ripple { position: absolute; z-index: 2; width: 9cqw; aspect-ratio: 2.6; margin: -1.7cqw 0 0 -4.5cqw; border-radius: 50%; border: .35cqw solid rgba(255, 250, 235, .9); pointer-events: none; animation: ripple 1.3s ease-out forwards; }
.lv-ripple.r2 { animation-delay: .18s; opacity: 0; }
@keyframes ripple { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.lv-drop { position: absolute; z-index: 2; width: .9cqw; aspect-ratio: .75; background: #FFF9E8; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; pointer-events: none; animation: drop .7s ease-out forwards; }
@keyframes drop { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

/* parallax: layers lean a little with the pointer (set by live.js) */
.lv-far { translate: calc(var(--px, 0) * -.4cqw) calc(var(--py, 0) * -.2cqw); transition: translate .6s ease-out; }
.lv-mid { translate: calc(var(--px, 0) * -.9cqw) calc(var(--py, 0) * -.3cqw); transition: translate .5s ease-out; }
.stage .s-bobbin, .stage .s-gully { translate: calc(var(--px, 0) * -1.4cqw) calc(var(--py, 0) * -.4cqw); transition: translate .45s ease-out; }

/* "coming soon" flags on the dock places that are not built yet */
.nav[data-soon]::after { content: 'soon'; position: absolute; left: 50%; top: -2%; transform: translate(-50%, -60%) rotate(-6deg); padding: .1em .55em .15em; border-radius: 1em; background: var(--gold); color: var(--navy); font: 700 clamp(10px, 1cqw, 15px)/1 'Fredoka', sans-serif; letter-spacing: .02em; box-shadow: 0 2px 0 rgba(30, 58, 95, .35); pointer-events: none; }

/* Bobbin pops up out of the water when you arrive */
.stage.arrive .s-bobbin img { animation: popup 1.1s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes popup { 0% { transform: translateY(70%) scale(.9, 1.1); opacity: 0; } 35% { opacity: 1; } 70% { transform: translateY(-6%) scale(1.04, .96); } 100% { transform: translateY(0) scale(1); } }

/* the welcome gate: one big tap starts the theme song (browsers only allow sound after a tap) */
#gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, rgba(22, 48, 73, .15), rgba(22, 48, 73, .55)); transition: opacity .7s ease, visibility .7s; }
#gate.gone { opacity: 0; visibility: hidden; }
#gate .card { width: min(640px, calc(100vw - 32px)); display: grid; justify-items: center; gap: clamp(10px, 2vh, 22px); padding: clamp(18px, 3.5vh, 36px) clamp(22px, 5vw, 56px); border-radius: 34px; background: var(--paper); box-shadow: 0 0 0 6px #C7A355, 0 18px 50px rgba(22, 48, 73, .45); animation: card-in .9s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes card-in { from { transform: translateY(30px) scale(.9); opacity: 0; } }
#gate .logo { width: min(440px, 70vw); height: auto; display: block; }
#gate button { max-width: 100%; display: inline-flex; align-items: center; gap: .55em; padding: .5em 1.3em .55em .7em; border: 0; border-radius: 999px; background: var(--teal); color: var(--foam); font: 700 clamp(22px, 3.4vw, 38px)/1 'Fredoka', sans-serif; cursor: pointer; box-shadow: 0 6px 0 #1F7569, 0 10px 24px rgba(22, 48, 73, .3); animation: nudge 2.4s ease-in-out infinite; }
#gate button:active { transform: translateY(4px); box-shadow: 0 2px 0 #1F7569; }
#gate button:focus-visible { outline: 5px solid var(--foam); outline-offset: 4px; }
#gate button .ringi { width: 1.6em; height: 1.6em; border-radius: 50%; background: repeating-conic-gradient(#E4572E 0 45deg, var(--foam) 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#gate .soonline { margin: 0; max-width: 30ch; color: var(--navy); font: 600 clamp(18px, 2.2vw, 26px)/1.25 'Fredoka', sans-serif; text-align: center; }
.credit-line { margin: .3em 0 0; text-align: center; color: var(--subtle); font: 500 14px/1.4 'Fredoka', sans-serif; }
#gate .small { margin: 0; color: var(--subtle); font: 500 clamp(14px, 1.6vw, 18px)/1.3 'Fredoka', sans-serif; text-align: center; }
#gate .quiet { padding: .3em .8em; border: 0; background: none; box-shadow: none; color: var(--navy); font-size: clamp(15px, 1.7vw, 19px); text-decoration: underline; animation: none; }

/* games and pages open over the harbor so the music keeps going */
#playlayer { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(22, 48, 73, .5); }
#playlayer.on { display: block; animation: lift .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes lift { from { transform: translateY(8%); opacity: 0; } }
#playlayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #EAD9B8; }
#playlayer .back { position: absolute; z-index: 2; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: .4em; padding: .35em .9em .4em .45em; border: 0; border-radius: 999px; background: var(--paper); color: var(--navy); font: 700 clamp(16px, 1.8vw, 22px)/1 'Fredoka', sans-serif; box-shadow: 0 0 0 4px #C7A355, 0 6px 16px rgba(22, 48, 73, .35); cursor: pointer; }
#playlayer .back .ringi { width: 1.5em; height: 1.5em; border-radius: 50%; background: repeating-conic-gradient(#E4572E 0 45deg, var(--foam) 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }

body.calm .lv, body.calm .lv img, body.calm .lv-ripple, body.calm #gate button, body.calm #gate button .ringi, body.calm .stage.arrive .s-bobbin img { animation: none !important; }
body.calm .lv-glint, body.calm .lv-beam { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lv, .lv img, #gate button, #gate button .ringi, .stage.arrive .s-bobbin img { animation: none !important; }
  .lv-glint, .lv-beam { display: none; }
}