*{box-sizing:border-box}body{margin:0;background:#163d28}.hero-scroll{height:700svh;position:relative}.adventure-hero{position:sticky;top:0;height:100svh;width:100%;overflow:hidden;isolation:isolate;background:#79bedb}.adventure-hero img{display:block;width:100%}.landscape{position:absolute;inset:0;height:100%;object-fit:cover}.branding{position:absolute;z-index:3;width:min(69%,1100px);left:50%;top:0;transform:translate(-50%,0);filter:drop-shadow(0 8px 5px #20380b30);will-change:transform,top}.elephant-travel{position:absolute;z-index:2;width:min(40%,48svh,620px);left:27%;bottom:3%;will-change:transform}.elephant{position:relative;width:100%;aspect-ratio:1;overflow:hidden}.adventure-hero .walk-sheet{width:200%;max-width:none;transform:translate(0,0)}.ground-shadow{position:absolute;width:65%;height:4%;left:18%;bottom:12%;border-radius:50%;background:#46322260;filter:blur(5px)}.replay,.scroll-cue{position:absolute;z-index:5;bottom:20px;padding:10px 16px;border:1px solid #ffffff80;border-radius:99px;background:#163d28de;color:white;font:500 13px system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}.replay{right:20px}.scroll-cue{left:50%;transform:translateX(-50%)}button:hover{background:#163d28}button:focus-visible{outline:3px solid #e8ff8d;outline-offset:3px}@media(max-width:600px){.branding{width:96%}.elephant-travel{width:min(78%,48svh);left:8%;bottom:10%}.replay{right:10px;bottom:14px}.scroll-cue{left:10px;bottom:14px;transform:none}}@media(prefers-reduced-motion:reduce){.hero-scroll{height:100svh}.adventure-hero .branding{top:50%!important;transform:translate(-50%,-50%)!important}.elephant-travel,.replay,.scroll-cue{display:none}}

/* Solid, complementary sprite regions: no opacity or gradient masks. */
.elephant-travel { bottom:auto; top:45%; }
.walk-window, .ride-window { position:absolute; inset:0; overflow:hidden; }
.walk-window { clip-path:inset(52% 0 0 0); }
.ride-window { clip-path:inset(0 0 48% 0); }
.adventure-hero .ride-sheet { position:absolute; left:0; top:0; width:200%; max-width:none; }
.ground-shadow { bottom:11%; height:3%; width:59%; left:23%; background:#46322250; }
.branding { top:12px; width:min(65%,60svh); }
@media(prefers-reduced-motion:reduce){.hero-scroll{height:100svh}}

.elephant { transform-origin:center; will-change:transform; }
.landscape { object-position:center bottom; }