:root {
  --water: #20b2e4;
  --water-light: #59d4f6;
  --water-deep: #0d8ed3;
  --ink: #1a3340;
  --cream: #fff0c5;
  --leaf: #8bc869;
  --shadow: rgba(13,83,123,.22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { margin: 0; position: relative; isolation: isolate; background: var(--water); color: var(--ink); font-family: Nunito, system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #fff7b1; outline-offset: 5px; }
img, svg { max-width: 100%; }
::selection { color: #1a3340; background: #fef19b; }
.water-surface { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; background:
  radial-gradient(ellipse at 8% 3%, rgba(188,248,255,.28) 0, transparent 38%),
  radial-gradient(ellipse at 79% 43%, rgba(12,135,209,.24) 0, transparent 44%),
  radial-gradient(ellipse at 21% 85%, rgba(34,188,225,.24) 0, transparent 46%),
  linear-gradient(112deg, #33bde9, #16a9df 50%, #2db9e8);
}
.water-shimmer { position: absolute; inset: -40px -90px; opacity: .38; background: repeating-linear-gradient(164deg, transparent 0 68px, rgba(215,251,255,.11) 69px, transparent 74px, transparent 137px);  }
.scroll-line { position: fixed; z-index: 100; top: 0; width: 100%; height: 4px; background: rgba(10,66,93,.1); }
.scroll-line span { display:block; height:100%; width:0; background:#f9d27e; box-shadow: 0 0 8px rgba(255,241,176,.5); }
.topbar { position: fixed; z-index: 90; top: 17px; left:50%; transform:translateX(-50%); width:min(940px,91vw); min-height:51px; padding: 8px 11px 8px 18px; display:flex; align-items:center; justify-content:space-between; background:rgba(239,251,248,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:2px solid rgba(255,255,255,.62); box-shadow:0 9px 0 rgba(5,92,135,.10), 0 10px 28px rgba(9,111,155,.1); border-radius:100px; }
.nav-brand { font:700 16px Fredoka,sans-serif; display:inline-flex; align-items:center; gap:8px; letter-spacing:.015em; white-space:nowrap; }
.brand-gem { color:#eebd4c; font-size:12px; }
.nav-links { display:flex; align-items:center; gap:5px; }
.nav-links a { font:800 12px Nunito,sans-serif; padding:8px 13px; border-radius:30px; transition: background .2s, transform .2s; }
.nav-links a:hover { background:#dbf7fb; transform:translateY(-2px); }
main { position:relative; isolation:isolate; }
.lake-section { position:relative; overflow:clip; }
.hero { min-height: 108svh; display:flex; justify-content:center; align-items:center; text-align:center; padding:110px 18px 95px; }
.hero-content { position:relative; z-index: 4; width:min(800px,100%); }
.hero-halo { position:absolute; z-index:1; left:50%; top:8%; transform:translateX(-50%); width:760px; height:690px; background:radial-gradient(ellipse,rgba(196,252,251,.55),rgba(172,240,249,.13) 45%,transparent 72%); pointer-events:none; }
.eyebrow { font-family:'Pixelify Sans',monospace; font-weight:700; text-transform:uppercase; letter-spacing:.15em; font-size:13px; }
.eyebrow.centered { color:#286b7c; display:flex; align-items:center; justify-content:center; gap:12px; font-size:12px; }
.sparkle { color:#fff1a5; font-size:14px; text-shadow:1px 2px #288fa9; }
.hero-logo-wrap { width:min(520px,100%); margin:20px auto 16px; }
.hero-logo { display:block; width:100%; height:auto; image-rendering:pixelated; }
.hero-lede { font:500 clamp(22px,3vw,30px) Fredoka,sans-serif; margin: 0; text-shadow:0 2px 0 rgba(255,255,255,.25); }
.hero-lede strong { font-weight:700; }
.hero-description { font-size:16px; max-width:470px; margin:16px auto 0; color:#1c5b74; line-height:1.6; font-weight:800; }
.explore { display:inline-flex; align-items:center; gap:13px; padding:10px 22px 10px 10px; margin-top:35px; background:#e4f9e8; color:#20596d; font:800 13px Nunito,sans-serif; border:2px solid rgba(255,255,255,.9); box-shadow:0 6px 0 rgba(6,105,146,.23); border-radius:50px; transition: transform .2s, box-shadow .2s; }
.explore:hover { transform:translateY(-3px); box-shadow:0 9px 0 rgba(6,105,146,.23); }
.explore-icon { display:grid; place-items:center; width:32px; height:32px; color:#fff; background:#168dbb; border-radius:50%; font-size:24px; animation: hintMove 1.6s ease-in-out infinite; }
@keyframes hintMove { 50% { transform:translateY(3px); } }
.hero-decor { position:absolute; z-index:3; width:clamp(155px,24vw,340px); }
.hero-decor-left { left:-2%; top:29%; transform:rotate(-6deg); }
.hero-decor-right { right:-3%; bottom:7%; width:clamp(185px,25vw,350px); }
.hero-decor svg { display:block; filter:drop-shadow(0 16px 0 rgba(13,104,157,.08)); }
.hero-reeds { position:absolute; width:120px; z-index:2; bottom:7%; }
.reeds-left { left:23%; }
.reeds-right { right:22%; bottom:11%; }
.hero-edge { position:absolute; bottom:45px; color:rgba(237,255,255,.8); text-transform:uppercase; font:700 11px 'Pixelify Sans',monospace; letter-spacing:.16em; }
.hero-edge.left { left:4%; }.hero-edge.right { right:4%; }
.floating svg, .floating-delayed svg, .art-bob svg, .art-bob-delayed svg { transform-origin:center; }
.floating svg, .art-bob svg { animation: bob 6s ease-in-out infinite; }
.floating-delayed svg, .art-bob-delayed svg { animation: bob 7s ease-in-out -3s infinite; }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-11px); } }
.river-note { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:26px; color:rgba(233,255,255,.88); text-transform:uppercase; font:700 14px 'Pixelify Sans',monospace; letter-spacing:.15em; margin:0 auto -24px; }
.river-note span { font-size:22px; }
.story { min-height: 840px; display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:6%; width:min(1200px,94vw); margin:0 auto; padding:120px 15px 100px; }
.story-island { width:100%; max-width:620px; justify-self:center; }
.story-island svg { width:100%; display:block; filter:drop-shadow(0 20px 14px rgba(6,94,132,.14)); }
.story-text { max-width:490px; position:relative; z-index:2; }
.ink-label { color:#d8fafe; text-shadow: 0 2px 0 rgba(0,89,132,.32); }
.story h2, .bridge h2, .future h2 { margin:19px 0 19px; font:700 clamp(43px,5.1vw,72px)/.99 Fredoka,sans-serif; letter-spacing:-.042em; color:#fff8d9; text-shadow:3px 4px 0 #147ba7,0 0 17px rgba(7,95,135,.16); }
.story h2 em, .bridge h2 em, .future h2 em { font-weight:500; color:#ffe07b; }
.story-quote { position:relative; margin-top:31px; background:#ffefbe; border:3px solid #234e52; border-radius:16px 20px 17px 19px; padding:32px 29px 22px; box-shadow:7px 8px 0 rgba(9,87,121,.25), inset 0 -6px 0 rgba(194,152,79,.12); transform:rotate(-1deg); }
.story-quote::before { content:""; display:block; position:absolute; top:11px; bottom:12px; left:12px; width:3px; background:rgba(177,129,74,.25); border-radius:10px; }
.quote-mark { font:700 60px Georgia,serif; position:absolute; top:-13px; left:20px; color:#b67e48; }
.story-quote p { font:600 clamp(19px,2vw,24px)/1.4 Fredoka,sans-serif; margin:0; color:#51432e; }
.quote-sign { display:block; text-align:right; font-size:12px; font-weight:800; margin-top:15px; color:#986f45; }
.story-aside { margin-top:28px; color:#e8fcfc; max-width:440px; font-size:14px; font-weight:800; line-height:1.7; text-shadow:0 1px 1px rgba(5,74,109,.13); }
.section-number { position:absolute; right:3%; bottom:12%; font:700 16px 'Pixelify Sans',monospace; color:rgba(255,255,255,.64); }
.bridge { padding:130px 20px 135px; min-height:670px; display:grid; place-items:center; text-align:center; }
.bridge-heading { position:relative; z-index:2; }
.bridge h2 { font-size:clamp(64px,8vw,115px); margin:19px 0 21px; }
.bridge-heading p { color:#e4fafb; margin:0 auto; max-width:440px; font-size:17px; font-weight:800; line-height:1.6; }
.little-arrow { display:inline-block; margin-top:29px; font-size:35px; font-weight:900; color:#ffe99e; animation: hintMove 1.7s ease-in-out infinite; }
.bridge-mini-island { position:absolute; width:min(245px,24vw); top:7%; right:6%; }
.bridge-mini-island svg { width:100%; }
.project { width:min(1280px,100%); min-height:920px; margin:0 auto; padding:100px clamp(22px,4vw,65px); display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:4%; align-items:center; }
.project.reverse { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.project.reverse .project-art-wrap { order:2; }
.project.reverse .project-content { order:1; }
.project-art-wrap { min-height:550px; position:relative; align-self:center; display:flex; align-items:center; justify-content:center; }
.island-art { position:relative; z-index:2; width:120%; max-width:700px; }
.island-art svg { display:block; width:100%; height:auto; filter:drop-shadow(0 25px 5px rgba(9,94,131,.16)); }
.project-content { position:relative; z-index:3; padding:0 10px; }
.project-kicker { font:700 15px 'Pixelify Sans',monospace; letter-spacing:.12em; color:#e0fcf6; text-shadow:0 2px 0 rgba(9,74,106,.32); }
.tiny-pixel { display:inline-block; color:#ffe590; font-size:10px; vertical-align:middle; margin-right:8px; }
.project-name, .dvd-title { font:700 clamp(67px,8vw,112px)/.92 Fredoka,sans-serif; margin:21px 0 20px; color:#183e4c; letter-spacing:-.055em; text-shadow:3px 4px 0 rgba(215,253,254,.32); }
.project-name .dot { color:#fff5a2; }
.project-tagline { max-width:510px; margin:0 0 21px; color:#fff8dd; font:600 clamp(23px,2.7vw,33px)/1.2 Fredoka,sans-serif; text-shadow:2px 2px 0 rgba(11,102,139,.24); }
.project-tagline em { color:#ffe59c; }
.project-description { max-width:510px; color:#e5fbfc; font-size:17px; font-weight:800; line-height:1.75; text-shadow:0 1px 0 rgba(4,95,124,.16); }
.project-links { display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; align-items:center; }
.lake-button { display:inline-flex; align-items:center; gap:7px; background:#ffdc86; color:#25464a; border:3px solid #265c63; border-radius:14px; padding:14px 18px; font:700 16px Fredoka,sans-serif; box-shadow:4px 5px 0 rgba(4,76,107,.3); }
.lake-button small { display:inline-block; padding:4px 7px; background:rgba(255,255,255,.52); border-radius:8px; font:700 11px Nunito,sans-serif; }
.lake-button-disabled { cursor:not-allowed; opacity:.83; }
.lake-button.violet { background:#cba6fa; color:#392751; }
.pill { border:2px solid rgba(220,253,255,.65); border-radius:50px; color:#ebfeff; font:800 12px Nunito,sans-serif; padding:10px 14px; }
.app-shot-frame { width:105px; height:190px; margin-top:27px; transform:rotate(7deg); border:5px solid #2d4647; border-radius:16px; overflow:hidden; background:#1c1915; box-shadow:7px 8px 0 rgba(3,78,119,.25); }
.app-shot-frame img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.dvd-title { color:#f3d5ff; text-shadow:4px 5px 0 #593388, -2px -2px 0 #593388; font-size:clamp(42px,5.6vw,83px); overflow-wrap:anywhere; letter-spacing:-.06em; }
.dvd-title span { color:#ffedf9; }
.project-footnote { color:#baf0f4; font-size:12px; line-height:1.5; margin-top:18px; max-width:440px; }
.future { position:relative; min-height:650px; display:grid; place-items:center; padding:90px 20px; text-align:center; }
.future-art { position:absolute; width:min(250px,34vw); left:5%; top:15%; opacity:.9; }
.future-art svg { width:100%; }
.future-content { position:relative; z-index:2; }
.future h2 { margin:20px 0; font-size:clamp(44px,5.5vw,85px); }
.future p { font-size:17px; font-weight:800; line-height:1.6; color:#e8fbff; max-width:470px; margin:0 auto; }
.future-dots { display:flex; justify-content:center; gap:14px; margin-top:30px; }
.future-dots span { width:12px; height:12px; background:#ffe298; border:2px solid #497777; border-radius:2px; transform:rotate(45deg); }
.future-dots span:nth-child(2) { opacity:.5; }.future-dots span:nth-child(3) { opacity:.25; }
.end-of-lake { min-height:810px; display:grid; place-items:center; padding:170px 25px 110px; color:#e8faff; background:linear-gradient(180deg,rgba(13,99,148,0) 0,rgba(9,68,106,.7) 28%,#102f48 62%,#10212e 100%); }
.shoreline { position:absolute; top:0; width:100%; height:130px; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 39 Q120 72 240 35 T480 42 T720 43 T960 38 T1200 47' fill='none' stroke='%23bffaff' stroke-opacity='.55' stroke-width='5'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.night-stars { position:absolute; inset:25% 0 0; opacity:.55; pointer-events:none; background-image:radial-gradient(#c5e7fd 1px,transparent 2px),radial-gradient(#c5e7fd 1px,transparent 2px); background-size:135px 180px, 210px 235px; background-position:16px 30px,110px 60px; mask-image:linear-gradient(180deg,transparent,#000 55%); }
.end-content { position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .75fr; gap:65px; align-items:center; width:min(1030px,100%); }
.end-kicker { grid-column:1 / -1; color:#abd4df; font:700 13px 'Pixelify Sans',monospace; letter-spacing:.13em; margin-bottom:-30px; }
.end-content h2 { margin:0; font:700 clamp(72px,9vw,128px)/.88 Fredoka,sans-serif; letter-spacing:-.055em; color:#fff1d4; text-shadow:4px 5px 0 #1d536c; }
.end-content h2 em { color:#a6def0; font-weight:500; }
.end-content p { font-size:17px; line-height:1.7; font-weight:700; color:#b9dce5; margin:0 0 30px; }
.return-button { display:inline-flex; padding:14px 22px; background:#fff1ce; border:3px solid #7cafa8; box-shadow:4px 5px 0 rgba(0,0,0,.17); color:#21495c; border-radius:14px; font:700 15px Fredoka,sans-serif; transition:transform .2s; }
.return-button:hover { transform:translateY(-4px); }
.end-watermark { position:absolute; bottom:30px; color:#87b5c0; text-transform:uppercase; letter-spacing:.14em; font:700 13px 'Pixelify Sans',monospace; }
.end-watermark span { color:#ffde98; margin:0 10px; }
.swimming-duck { position:absolute; display:grid; place-items:center; appearance:none; pointer-events:auto; border:0; padding:0; width:70px; height:63px; background:none; cursor:pointer; animation:swim var(--duration, 40s) linear infinite; left:0; }

@keyframes swim { from{transform:translateX(-95px);} to{transform:translateX(100vw);} }
@keyframes duckBob { 50% { transform:translateY(4px) rotate(2deg);} }
.quack-toast { width:max-content; max-width:calc(100% - 32px); text-align:center; position:fixed; z-index:110; left:50%; bottom:28px; transform:translate(-50%,25px); background:#fff5ca; border:3px solid #315b64; box-shadow:4px 5px 0 rgba(2,63,87,.2); color:#284454; border-radius:17px; padding:13px 19px; font:700 17px Fredoka,sans-serif; pointer-events:none; opacity:0; transition:opacity .3s, transform .3s; }
.quack-toast.show { transform:translate(-50%,0); opacity:1; }
.reveal.visible { animation:enter .65s ease; }
.appear { animation:enter 1s ease both; }
@keyframes enter { from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);} }
@media(max-width:1050px){
 .hero-decor-left{width:200px;top:33%;left:-6%;}.hero-decor-right{width:225px;right:-7%;bottom:10%;}
 .project{gap:10px;}.project-art-wrap{min-height:480px;}
 
}
@media(max-width:760px){
 .topbar{width:93vw;top:11px;min-height:47px;padding:7px 14px;}.nav-brand{font-size:15px;}.nav-links{gap:0;}.nav-links a{font-size:11px;padding:8px;}
 .hero{min-height:100svh;padding-top:110px;padding-bottom:80px;}.hero-logo-wrap{width:min(450px,100%)}
 .eyebrow.centered{font-size:10px;}.hero-lede{font-size:23px;margin:3px 0 0;}.hero-description{font-size:14px;max-width:350px}.hero-decor-left{top:auto;bottom:6%;left:-9%;width:130px}.hero-decor-right{bottom:10%;right:-9%;width:150px}.hero-reeds,.hero-edge{display:none}.explore{margin-top:24px}
 .story{grid-template-columns:1fr;gap:12px;padding:90px 22px 80px;min-height:auto}.story-island{max-width:450px;order:1}.story-text{order:2;margin:0 auto}.story h2{font-size:clamp(44px,9vw,65px)}.section-number{display:none}.story-quote{padding:27px 22px 20px}
 .bridge{min-height:550px;padding:90px 20px;}.bridge h2{font-size:clamp(39px,10vw,88px)}.bridge-mini-island{width:135px;right:-26px;top:15px;opacity:.76}
 .project,.project.reverse{display:flex;flex-direction:column;min-height:auto;padding:50px 22px 130px;gap:8px;}.project.reverse .project-art-wrap,.project.reverse .project-content{order:unset}.project-art-wrap{width:min(590px,100%);min-height:0; aspect-ratio:660 / 455;}.island-art{width:110%}.project-content{width:min(580px,100%);margin:0 auto;}.project-name{font-size:clamp(42px,13vw,95px)}.dvd-title{font-size:clamp(32px,9.2vw,70px)}.project-description{font-size:16px;}.app-shot-frame{width:84px;height:150px;}
 .future{min-height:570px;padding:90px 20px}.future-art{left:-30px;top:0;width:165px;opacity:.55}.future h2{font-size:clamp(46px,8.5vw,69px)}
 .end-of-lake{min-height:760px;padding:150px 25px 100px}.end-content{display:block;max-width:580px}.end-kicker{display:block;margin-bottom:27px}.end-content h2{font-size:clamp(46px,11vw,94px);margin-bottom:38px}.end-content p{max-width:430px}
 .swimming-duck{width:57px;height:52px}
}
@media(max-width:410px){.topbar{padding-inline:9px}.nav-brand{gap:4px;font-size:12px}.nav-links a{padding:7px 5px;font-size:10px}.hero-decor-left{width:100px}.hero-decor-right{width:118px}.story h2{font-size:clamp(35px,10vw,43px)}.story-quote p{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.water-shimmer,.floating svg,.floating-delayed svg,.art-bob svg,.art-bob-delayed svg,.swimming-duck,.explore-icon,.little-arrow{animation:none!important}.reveal.visible,.appear{animation:none}.swimming-duck{left:var(--rest-position);transform:none}.quack-toast{transition:none}}

/* A água continua por trás de todas as ilhas. */
.water-surface {
  background:
    radial-gradient(ellipse at 22% 12%, #68e1d944, transparent 48%),
    radial-gradient(ellipse at 85% 72%, #085f972b, transparent 49%),
    linear-gradient(135deg, #27b9d7, #11a3cf 52%, #199cc7);
}
.water-shimmer {
  inset: -125px;
  opacity: .55;
  background:
    radial-gradient(ellipse 36% 24% at 31% 45%, #a1fff16b, transparent),
    radial-gradient(ellipse 27% 18% at 76% 70%, #79f5ec44, transparent),
    radial-gradient(ellipse 39% 21% at 53% 10%, #098ab855, transparent);
  animation: lake-light 15s ease-in-out infinite alternate;
}
@keyframes lake-light {
  from { transform: translate3d(-4%, -3%, 0); }
  to { transform: translate3d(5%, 3%, 0); }
}
.water-glints {
  position: absolute;
  inset: -1px;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='174'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='1.5'%3E%3Cpath d='M13 27q10 -4 20 0t17 0m112 21q14 -4 31 0m72 78q9 -4 20 0t16 0M66 142q11 4 23 0m22 -59h12m-71 -22h9m170 37h18' stroke='%23d3fff3' stroke-opacity='.56'/%3E%3Cpath d='M42 83q14 -4 23 0m141 72q14 -4 29 0m33 -110h19' stroke='%230878af' stroke-opacity='.36'/%3E%3C/g%3E%3C/svg%3E");
  animation: lake-current 27s linear infinite;
}
@keyframes lake-current { to { background-position: 320px 174px; } }
.lake-sprite { display: block; width: 100%; height: auto; }
.hero-decor-left { top: auto; left: 2%; bottom: 21%; width: clamp(100px, 19vw, 270px); }
.hero-decor-right { right: 2%; bottom: 10%; width: clamp(110px, 20vw, 280px); }
.hero-reeds { width: clamp(45px, 7vw, 95px); bottom: 3%; }
.reeds-right { bottom: 8%; }
.bridge-mini-island { right: 5%; }
.story-island, .island-art { position: relative; }
.story-island svg { filter: none; }
.island-art { width: 100%; max-width: 640px; }
.project-art-wrap { min-height: 0; aspect-ratio: auto; }
.waterline { isolation: isolate; }
.swimming-duck { width: 76px; height: 67px; }
.swimming-duck img {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: duckBob 1.3s ease-in-out infinite;
}
.swimming-duck img.duck-flipped { scale: -1 1; }
.swimming-duck::before, .swimming-duck::after {
  content: "";
  position: absolute;
  right: 62%;
  bottom: 16%;
  width: 73%;
  height: 16%;
  border-block: 2px solid #d2fff3;
  border-radius: 55%;
  opacity: .45;
  animation: duck-wake 1.8s linear infinite;
}
.swimming-duck::after { animation-delay: -.9s; }
@keyframes duck-wake {
  from { transform: translateX(30%) scale(.55, .55); opacity: .7; }
  to { transform: translateX(-33%) scale(1.25, 1.3); opacity: 0; }
}
.lake-ripples { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tap-ripple {
  position: absolute;
  width: 100px;
  height: 35px;
  border: 2px solid #dbfff7;
  border-radius: 50%;
  animation: tap-wave 1.1s ease-out both;
}
@keyframes tap-wave {
  from { transform: translate(-50%, -50%) scale(.1); opacity: .9; }
  to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
@media (max-width: 760px) {
  .hero-decor-left { left: -5%; bottom: 4%; width: 92px; }
  .hero-decor-right { right: -3%; bottom: 5%; width: 105px; }
  .bridge-mini-island { right: -13px; width: 104px; }
  .project { gap: 30px; }
  .swimming-duck { width: 58px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .water-glints, .swimming-duck img { animation: none; }
  .swimming-duck::before, .swimming-duck::after, .tap-ripple { display: none; }
}

.story-text, .bridge-heading, .future-content, .end-content, .island-art, .story-island { z-index: 3; }

.duck-channel { position: relative; height: 108px; overflow: hidden; }
.duck-channel .swimming-duck { top: 16px; }
.shore-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: shoreline-flow 4.6s ease-in-out infinite alternate;
}
@keyframes shoreline-flow { from { opacity: .72; } to { opacity: 1; } }
.future { grid-template-columns: minmax(0, 420px) minmax(0, 500px); justify-content: center; gap: clamp(20px, 5vw, 70px); }
.future-art { position: relative; inset: auto; opacity: 1; width: 100%; }
.hero-reeds { display: none; }
@media (max-width: 760px) {
  .duck-channel { height: 88px; }
  .future { grid-template-columns: minmax(0, 430px); padding-block: 50px; }
  .future-art { width: min(68%, 300px); }
}
@media (prefers-reduced-motion: reduce) { .shore-overlay { animation: none; } }

.project-dvduck .island-art > .lake-sprite,
.project-dvduck .island-art > .shore-overlay {
  mask-image: linear-gradient(#000 0 93%, #000b 97%, #0004 100%);
}

/* Cada trecho de água tem uma faixa livre para os patos, entre as margens decoradas. */
.duck-channel {
  --bank-width: clamp(62px, 18vw, 235px);
  width: min(1500px, 100%);
  height: 112px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--bank-width) minmax(0, 1fr) var(--bank-width);
  align-items: center;
  padding-inline: clamp(9px, 2.4vw, 35px);
  overflow: visible;
}
.channel-with-island { height: clamp(145px, 18vw, 240px); }
.channel-decor { width: 100%; max-width: 210px; justify-self: center; }
.channel-left { grid-column: 1; grid-row: 1; }
.channel-right { grid-column: 3; grid-row: 1; }
.water-prop { width: clamp(34px, 6vw, 75px); animation: prop-drift 4s ease-in-out infinite alternate; }
.channel-right.water-prop { animation-delay: -2s; }
.prop-mini-cubo { width: 70%; }
.prop-mini-casa-arvore { width: 92%; }
.prop-mini-fogueira, .prop-mini-acampamento { position: relative; }
.prop-mini-fogueira::after, .prop-mini-acampamento::after {
  content: "";
  position: absolute;
  inset: 43% 31% 14%;
  pointer-events: none;
  background: radial-gradient(ellipse, #ffbd5573, transparent 62%);
  mix-blend-mode: screen;
  animation: camp-glow 1.3s ease-in-out infinite alternate;
}
@keyframes camp-glow { from { opacity: .38; } to { opacity: 1; } }
@keyframes prop-drift { to { transform: translate(5px, -4px) rotate(4deg); } }
.swim-lane {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  container-type: inline-size;
  height: 104px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
}
.duck-channel .swimming-duck {
  top: 9px;
  animation-name: channel-swim;
}
.duck-channel .swimming-companion { top: 37px; width: 58px; height: 51px; }
@keyframes channel-swim {
  from { transform: translateX(-110px); }
  to { transform: translateX(100cqw); }
}
.hero { min-height: 98svh; padding-bottom: 65px; }
.story { min-height: 0; padding-block: clamp(45px, 6vw, 85px); }
.bridge { min-height: 0; padding-block: clamp(75px, 9vw, 125px); }
.project { min-height: 0; padding-block: clamp(50px, 6vw, 90px); }
.future { min-height: 0; padding-block: clamp(45px, 6vw, 75px); }
.end-of-lake { min-height: 650px; }
.night-fireflies {
  position: absolute;
  inset: 30% 0 12%;
  pointer-events: none;
  background:
    radial-gradient(circle at 11% 44%, #d4ffb6 1px, #65f6c2 2px, transparent 8px),
    radial-gradient(circle at 15% 53%, #8ff8ff 1px, transparent 6px),
    radial-gradient(circle at 18% 68%, #d4ffb6 1px, transparent 8px),
    radial-gradient(circle at 85% 57%, #6ee6ff 1px, transparent 8px),
    radial-gradient(circle at 90% 70%, #c7ffad 1px, transparent 8px);
  animation: fireflies 3s ease-in-out infinite alternate;
}
@keyframes fireflies { from { opacity: .35; } to { opacity: 1; transform: translateY(-9px); } }
@media(max-width: 760px) {
  .duck-channel { height: 105px; }
  .channel-with-island { height: 126px; --bank-width: clamp(63px, 23vw, 134px); }
  .duck-channel .swimming-companion { width: 43px; height: 42px; }
  .project { padding-block: 46px 54px; }
}
@media(prefers-reduced-motion: reduce) {
  .water-prop, .prop-mini-fogueira::after, .prop-mini-acampamento::after, .night-fireflies { animation: none; }
}

/* Peças de cenário têm sua própria caixa para que a espuma acompanhe a arte. */
.scene-piece { position: relative; }
.scene-edges { position: absolute; inset: 0; pointer-events: none; }
.edge-piece { position: absolute; width: clamp(70px, 12vw, 175px); }
.edge-0 { top: 9%; left: 1%; }
.edge-1 { bottom: 8%; left: 4%; width: clamp(35px, 6vw, 85px); }
.edge-2 { top: 22%; right: 2%; width: clamp(40px, 8vw, 110px); }
.edge-3 { bottom: 4%; right: 1%; }
.hero .edge-0 { top: 13%; left: 23%; width: 70px; }
.hero .edge-1 { bottom: 3%; left: 16%; width: clamp(70px, 13vw, 180px); }
.hero .edge-2 { top: 16%; right: 16%; width: 48px; }
.hero .edge-3 { bottom: 1%; right: 24%; width: clamp(85px, 12vw, 165px); }
.hero-decor-left { bottom: 37%; }
.hero-decor-right { bottom: 24%; }
.bridge .edge-0 { left: 6%; top: 21%; }
.bridge .edge-3 { right: 4%; bottom: 13%; }
.end-of-lake .scene-edges { z-index: 1; opacity: .78; }
.end-of-lake .edge-3 { width: clamp(55px, 8vw, 110px); }
.inlet {
  --bank-width: clamp(64px, 26vw, 330px);
  height: clamp(142px, 18vw, 255px);
  padding-inline: clamp(5px, 2vw, 35px);
}
.inlet-2, .inlet-5 { grid-template-columns: .78fr 1.38fr 1fr; }
.inlet-3, .inlet-6 { grid-template-columns: 1fr 1.4fr .76fr; }
.channel-bank {
  position: relative;
  grid-row: 1;
  height: 100%;
  min-width: 0;
}
.channel-bank-left { grid-column: 1; }
.channel-bank-right { grid-column: 3; }
.bank-island { position: absolute; width: min(77%, 240px); }
.channel-bank-left .bank-island { left: 1%; top: 3%; }
.channel-bank-right .bank-island { right: 0; bottom: 1%; width: min(83%, 260px); }
.inlet-2 .channel-bank-left .bank-island, .inlet-5 .channel-bank-left .bank-island { top: auto; bottom: 3%; }
.inlet-2 .channel-bank-right .bank-island, .inlet-5 .channel-bank-right .bank-island { bottom: auto; top: 1%; }
.inlet-3 .channel-bank-right .bank-island { width: min(62%, 145px); }
.inlet-1 .channel-bank-right .bank-island { width: min(64%, 180px); }
.bank-detail { position: absolute; width: clamp(24px, 4vw, 60px); }
.channel-bank-left .bank-detail { right: 3%; bottom: 5%; }
.channel-bank-right .bank-detail { left: 1%; top: 7%; }
.inlet-2 .channel-bank-right .bank-detail, .inlet-5 .channel-bank-right .bank-detail { top: auto; bottom: 2%; }
.inlet .swim-lane { height: 133px; mask-image: none; }
.inlet .swimming-duck { top: 5px; animation-name: inlet-loop; animation-timing-function: linear; }
.inlet .swimming-companion { top: 75px; }
@keyframes inlet-loop {
  0% { transform: translate(4px, 0) scaleX(1); }
  24% { transform: translate(calc((100cqw - 100%)/2), 5px) scaleX(1); }
  48% { transform: translate(calc(100cqw - 100% - 4px), 0) scaleX(1); }
  49% { transform: translate(calc(100cqw - 100% - 4px), 0) scaleX(-1); }
  74% { transform: translate(calc((100cqw - 100%)/2), -4px) scaleX(-1); }
  98% { transform: translate(4px, 0) scaleX(-1); }
  99%, 100% { transform: translate(4px, 0) scaleX(1); }
}
@media (min-width: 1051px) {
  .story, .project, .future { width: min(1600px, 100%); padding-inline: clamp(145px, 15vw, 222px); }
  .future { grid-template-columns: minmax(0, 420px) minmax(0, 500px); }
}
@media (max-width: 1050px) {
  .story .scene-edges, .project .scene-edges, .future .scene-edges { display: none; }
  .bridge .edge-0, .bridge .edge-3 { width: clamp(65px, 10vw, 105px); top: 1%; bottom: auto; }
  .bridge .edge-1, .bridge .edge-2 { display: none; }
}
@media (max-width: 760px) {
  .hero .edge-0 { top: 12%; left: 9%; width: 38px; }
  .hero .edge-2 { top: 12%; right: 10%; width: 33px; }
  .hero .edge-1, .hero .edge-3 { display: none; }
  .hero-decor-left { bottom: 4%; }
  .hero-decor-right { bottom: 5%; }
  .bridge .edge-0, .bridge .edge-3 { width: 61px; }
  .end-of-lake .edge-piece { width: 43px; }
  .inlet { --bank-width: clamp(65px, 24vw, 155px); }
  .inlet-2, .inlet-3, .inlet-5, .inlet-6 { grid-template-columns: .95fr 1.35fr .86fr; }
  .bank-island, .channel-bank-right .bank-island { width: 96%; }
  .inlet .swimming-companion { top: 65px; }
}

/* A margem só aparece quando a arte que ela contorna estiver pronta. */
.shore-overlay { visibility: hidden; }
.shore-ready > .shore-overlay { visibility: visible; }
.swimming-duck img { position: absolute; inset: 0; }
@media (min-width: 1051px) {
  .story, .project, .future { padding-block: clamp(36px, 4.6vw, 68px); }
  .inlet { height: clamp(150px, 15vw, 225px); }
}

/* Distinguem os objetos soltos das margens com construções fixas. */
.prop-boia-vermelha, .prop-boia-bandeira, .prop-barco-papel { transform-origin: center 80%; }
.edge-piece:has(img[src$="ruinas.png"]) { width: clamp(105px, 13vw, 190px); }
.edge-piece:has(img[src$="vaso-flores.png"]),
.edge-piece:has(img[src$="lanterna.png"]),
.edge-piece:has(img[src$="boia-bandeira.png"]) { width: clamp(38px, 6vw, 79px); }
.bank-island:has(img[src$="barril-musgo.png"]),
.bank-island:has(img[src$="boia-bandeira.png"]) { width: clamp(50px, 10vw, 125px); }
@media (min-width: 1051px) {
  .story .edge-0 { top: 18%; left: 1%; }
  .bridge .edge-0 { width: clamp(100px, 14vw, 210px); }
  .project-patolero .edge-3 { width: clamp(100px, 12vw, 175px); }
}

/* A composição inteira usa a mesma largura, inclusive em janelas muito largas. */
html { scroll-padding-top: 0; }
main { width: min(100%, 1760px); margin-inline: auto; }
.hero { min-height: 0; padding: clamp(54px, 7vw, 96px) 18px clamp(50px, 6vw, 86px); }
.hero-logo-wrap { width: min(480px, 100%); }
.bridge { padding-block: clamp(54px, 7vw, 100px); }
.project-status { color: #fff0bc; font-weight: 800; font-size: 13px; }
.end-of-lake { min-height: 0; padding: clamp(92px, 10vw, 144px) 20px 92px; text-align: center; }
.end-content { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 25px; max-width: 750px; }
.end-kicker, .end-content h2, .end-content p { margin: 0; }
.end-content h2 { font-size: clamp(50px, 9vw, 108px); }
.end-content p { max-width: 440px; }
.return-button {
  justify-self: center;
  align-items: center;
  gap: 13px;
  max-width: 100%;
  padding: 8px 15px 8px 8px;
  border: 2px solid #91d4d1;
  border-radius: 40px;
  color: #fff3d3;
  background: linear-gradient(145deg, #246779, #173b56);
  box-shadow: 0 5px #0a2638, 0 10px 23px #071c2e85, inset 0 1px #dcffff55;
  text-align: left;
  transition: transform .2s, box-shadow .2s;
}
.return-button:hover { transform: translateY(-3px); box-shadow: 0 7px #0a2638, 0 13px 30px #66e0df3d; }
.return-button:active { transform: translateY(3px); box-shadow: 0 2px #0a2638; }
.return-compass { flex: none; }
.return-label { display: grid; gap: 4px; font-size: 16px; }
.return-label small { color: #b2e4e5; font-size: 11px; letter-spacing: .06em; }
.return-arrow { color: #ffdf95; margin-inline: 5px; font-size: 23px; }
.roaming-water { display: none; }

.inlet .swimming-duck { top: 16px; animation-name: inlet-loop, inlet-turn; animation-timing-function: linear, steps(1, end); }
.inlet .swimming-companion { top: 65px; }
.inlet .swim-lane { height: 152px; }
@keyframes inlet-loop {
  0% { transform: translate(4px, 10px); }
  24% { transform: translate(calc((100cqw - 100%)/2), -10px); }
  48% { transform: translate(calc(100cqw - 100% - 4px), 9px); }
  49% { transform: translate(calc(100cqw - 100% - 4px), 10px); }
  74% { transform: translate(calc((100cqw - 100%)/2), 19px); }
  98% { transform: translate(4px, 10px); }
  99%, 100% { transform: translate(4px, 10px); }
}
@keyframes inlet-turn { 0%, 99%, 100% { scale: 1 1; } 49% { scale: -1 1; } }
@media (prefers-reduced-motion: reduce) {
  .roaming-water { display: none; }
  .return-button { transition: none; }
}

/* O enquadramento cresce junto com a área disponível em zoom afastado. */
@media (min-width: 1920px) {
  main, .end-of-lake { zoom: calc(100vw / 1920px); }
}
.end-of-lake { width: 100%; }
.shoreline { inset-inline: 0; }
.end-of-lake .scene-edges { width: min(100%, 1576px); margin-inline: auto; }
.end-actions { display: grid; justify-items: center; gap: 24px; }
@media (min-width: 900px) {
  .end-content {
    max-width: 1120px;
    width: min(80%, 1120px);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr);
    column-gap: clamp(38px, 6vw, 90px);
    text-align: left;
    justify-items: start;
  }
  .end-actions { justify-items: start; }
  .return-button { justify-self: start; }
}

/* Os patos percorrem um único plano de água, sem cortes entre seções. */
#lake-ducks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 8;
  pointer-events: none;
}
.autonomous-duck {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--duck-size, 48px);
  height: var(--duck-size, 48px);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
}
.autonomous-duck img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: var(--duck-facing, 1) 1;
  animation: autonomous-bob 1.8s ease-in-out infinite alternate;
}
.autonomous-duck img.duck-source-left { scale: calc(-1 * var(--duck-facing, 1)) 1; }
.autonomous-duck::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0;
  height: 24%;
  border-bottom: 1px solid #c5fff3;
  border-radius: 50%;
  opacity: .55;
  animation: autonomous-wake 2s ease-out infinite;
  z-index: -1;
}
@keyframes autonomous-bob { to { transform: translateY(2px); } }
@keyframes autonomous-wake { from { scale: .65; opacity: .65; } to { scale: 1.25; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .autonomous-duck img, .autonomous-duck::before { animation: none; }
}