/* Ferry Boat — theme styles */
.scene.themed { background:linear-gradient(180deg,#8FCBEA 0%, #A9D9F0 48%, #5FA8CE 49%, #7FBCDD 100%); }
#scene-arrival.themed { background:linear-gradient(180deg,#8FCBEA 0%, #A9D9F0 46%, #5FA8CE 47%, #7FBCDD 72%, #F5DFA9 73%, #E8C983 100%); }
/* water = ground band the ferry floats on */
.ground { position:absolute; left:0; right:0; bottom:0; height:24%; z-index:2; background:linear-gradient(180deg, rgba(95,168,206,0) 0%, rgba(74,138,176,.5) 100%); }
#scene-stop .ground:before { content:''; position:absolute; left:-2%; width:44%; bottom:36%; height:14px; border-radius:8px; background:#A5714C; box-shadow:0 18px 0 -6px #8A5A3C; }
#scene-arrival .ground { height:20%; }
.sun-el { position:absolute; top:4%; right:5%; width:clamp(70px,12vw,120px); aspect-ratio:1; z-index:1; animation:sun-spin 40s linear infinite; }
@keyframes sun-spin { to { transform:rotate(360deg); } }
.sun-el svg, .cloud-el svg { width:100%; height:100%; }
.cloud-el { position:absolute; width:clamp(90px,16vw,170px); aspect-ratio:200/90; z-index:1; opacity:.95; }
.cloud-el.c1 { top:6%; left:8%; } .cloud-el.c2 { top:16%; left:55%; width:clamp(70px,12vw,130px); }
.cloud-el.drift { animation:cloud-drift 10s linear infinite; }
@keyframes cloud-drift { from{transform:translateX(30vw)} to{transform:translateX(-60vw)} }
.prop.lighthouse { width:clamp(70px,11vw,120px); aspect-ratio:120/260; bottom:22%; right:4%; }
.prop.gull { width:clamp(36px,6vw,66px); aspect-ratio:80/40; }
.prop.gull.g1 { top:14%; left:30%; } .prop.gull.g2 { top:9%; right:26%; }
.prop.wave { width:clamp(90px,15vw,180px); aspect-ratio:200/40; opacity:.8; animation:wave-drift 5s ease-in-out infinite; }
.prop.wave.w1 { bottom:14%; left:8%; } .prop.wave.w2 { bottom:8%; left:46%; animation-delay:1.2s } .prop.wave.w3 { bottom:16%; right:8%; animation-delay:2.1s }
@keyframes wave-drift { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-14px)} }
.prop.palm { width:clamp(80px,13vw,150px); aspect-ratio:180/220; bottom:16%; }
.prop.palm.pl1 { right:3%; } .prop.palm.pl2 { right:16%; transform:scaleX(-1) scale(.8); display:none; }
@media (min-width:760px){ .prop.palm.pl2 { display:block; } }
/* wide ferry, gentle float */
.veh-holder { --slot-w:10%; --slot-h:15%; width:min(80vw,580px); aspect-ratio:640/346; left:2%; bottom:6%; animation:boat-rock 4.5s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes boat-rock { 0%,100%{rotate:-1.2deg} 50%{rotate:1.2deg} }
.veh-holder.transit { bottom:8%; animation:boat-sail 3.5s ease-in-out infinite; }
@keyframes boat-sail { 0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)} 50%{transform:translateX(-50%) translateY(-8px) rotate(1deg)} }
.veh-holder.arrival { width:min(72vw,520px); animation:none; }
.transit-scene .scroll-strip { display:none; }
@media (max-width:540px){ .veh-holder { width:92vw; left:1%; bottom:12%; } .veh-holder.arrival { width:88vw; } .kids-curb { bottom:30%; } }