/* Mouse Whale, Fourth Voyage — stage depth and gentle motion.  */
.hero-v2-art.hero-animated-art{isolation:isolate}
.hero-visual-stage{isolation:isolate;overflow:visible}
.stage-airglow{z-index:0}
.motion-whale-canvas{
  position:absolute;left:2%;top:-2%;width:98%;height:auto;aspect-ratio:1;
  display:block;pointer-events:none;object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 72% 73% at 53% 52%,#000 59%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 73% at 53% 52%,#000 59%,transparent 100%);
}
.whale-sea{z-index:1}
.whale-foreground{z-index:5;filter:drop-shadow(0px 9px 6px rgba(84,156,178,.04))}
/* The windows are deliberately secondary characters; the whale stays in front. */
.float-window{
  z-index:3!important;opacity:0;background:rgba(255,255,251,.78);
  border-color:rgba(255,255,255,.8);
  box-shadow:0 12px 25px rgba(74,120,133,.10);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  filter:saturate(.7);
}
.browser-window{width:174px;height:147px;right:4%;top:6%;animation:whaleFlyBrowser 3.9s ease-in-out infinite}
.finder-window{width:135px;height:111px;left:8%;top:24%;animation:whaleFlyFinder 3.9s ease-in-out infinite}
.app-window{width:140px;height:131px;right:4%;top:53%;animation:whaleFlyApp 3.9s ease-in-out infinite}
.fw-title{height:24px;padding:0 9px;font-size:9px}
.fw-lights i{width:5px;height:5px}
.fw-browser-photo{height:69px}
.fw-lines{gap:4px;padding:9px 10px}.fw-lines i{height:3px}
.fw-folders{padding:11px 6px 5px}.fw-folders span{font-size:25px;line-height:27px}
.fw-app-grid{gap:5px;padding:8px 12px}.fw-app-grid i{width:32px;height:30px;font-size:13px;border-radius:8px}
.stage-trail{z-index:2;opacity:.27}
.stage-trail path{animation-duration:3.9s;stroke-width:3}
.scene-spark{z-index:4;opacity:.38;animation-duration:3.9s;font-size:18px}
@keyframes whaleFlyBrowser{
  0%,10%{opacity:0;transform:translate(-32px,48px) scale(.55) rotate(-5deg)}
  25%{opacity:.5;transform:translate(0,0) scale(.95) rotate(3deg)}
  38%,57%{opacity:.5;transform:translate(0,-5px) scale(1) rotate(2deg)}
  78%,100%{opacity:0;transform:translate(34px,-62px) scale(.78) rotate(8deg)}
}
@keyframes whaleFlyFinder{
  0%,15%{opacity:0;transform:translate(34px,40px) scale(.55) rotate(8deg)}
  30%{opacity:.46;transform:translate(0,0) scale(.92) rotate(-5deg)}
  46%,63%{opacity:.46;transform:translate(-6px,-6px) scale(1) rotate(-5deg)}
  84%,100%{opacity:0;transform:translate(-38px,-48px) scale(.73) rotate(-9deg)}
}
@keyframes whaleFlyApp{
  0%,25%{opacity:0;transform:translate(-35px,32px) scale(.5) rotate(-7deg)}
  39%{opacity:.43;transform:translate(0,0) scale(.92) rotate(4deg)}
  53%,69%{opacity:.43;transform:translate(0,-4px) scale(1) rotate(3deg)}
  85%,100%{opacity:0;transform:translate(34px,-37px) scale(.75) rotate(7deg)}
}
/* Keep the headline and copy untouched by the scene transforms. */
.hero-copy{transform:none!important;animation:none!important;z-index:9}
@media(max-width:1050px){
  .motion-whale-canvas{left:0;top:0;width:100%}
  .browser-window{right:0}.app-window{right:0}
}
@media(max-width:800px){
  .motion-whale-canvas{left:1%;width:98%;top:0}
  .browser-window{right:5%}.finder-window{left:7%}.app-window{right:5%}
}
@media(max-width:600px){
  .motion-whale-canvas{width:100%;left:0;top:0}
  .browser-window{width:108px;height:106px;right:2%;top:4%}
  .finder-window{width:92px;height:88px;left:4%;top:18%}
  .app-window{width:99px;height:98px;right:3%;top:48%}
  .fw-title{height:19px;font-size:7px}
  .fw-browser-photo{height:46px}
  .fw-folders span{font-size:17px;line-height:18px}
  .fw-folders{padding:8px 4px 3px}
  .fw-app-grid{padding:6px 8px;gap:4px}
  .fw-app-grid i{width:24px;height:23px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .float-window{animation:none!important;opacity:.34!important}
  .browser-window{transform:rotate(3deg)!important}
  .finder-window{transform:rotate(-5deg)!important}
  .app-window{transform:rotate(4deg)!important}
}
/* Fifth Voyage tempo patch: the foreground whale leaps quickly, rests, repeats. */
.browser-window,.finder-window,.app-window,.stage-trail path,.scene-spark{
  animation-duration:2.28s;
}
/* Avoid artificial GPU flickering of the PNG canvas during the quick poses. */
.motion-whale-canvas{transform:translateZ(0);backface-visibility:hidden}