/* Each overlay shares its photograph's exact coordinate system. */
.ddn-feature-motion{display:grid;place-items:center;object-fit:initial}
.ddn-scene-canvas{position:relative;width:min(100%,495px);aspect-ratio:var(--scene-ratio);max-width:100%;isolation:isolate}
.ddn-feature-motion--life .ddn-scene-canvas{width:min(100%,660px)}
.ddn-scene-image{display:block;width:100%;height:100%;object-fit:contain}
.ddn-scene-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ddn-chart-plane{transform:rotate(-1.5deg);transform-origin:500px 350px}
.ddn-chart-bar{transform-box:fill-box;transform-origin:center bottom;animation:ddn-bar-breathe 4.8s ease-in-out infinite;animation-delay:var(--bar-delay);animation-play-state:paused}
.ddn-chart-line{stroke-dasharray:1000;animation:ddn-chart-trace 5s ease-in-out infinite;animation-play-state:paused}
.ddn-clock-hour,.ddn-clock-minute,.ddn-clock-second{transform-origin:150px 204px;animation:ddn-clock-turn 720s linear infinite;animation-play-state:paused}
.ddn-clock-hour{animation-duration:720s;animation-delay:-200s}
.ddn-clock-minute{animation-duration:60s;animation-delay:-10s}
.ddn-clock-second{animation-duration:12s}
.ddn-wheel-rotor{transform-origin:0 0;animation:ddn-wheel-turn 7s linear infinite;animation-play-state:paused}
.ddn-feature-motion[data-ddn-in-view=true] :is(.ddn-chart-bar,.ddn-chart-line,.ddn-clock-hour,.ddn-clock-minute,.ddn-clock-second,.ddn-wheel-rotor){animation-play-state:running}
.ddn-feature-block--food.ddn-is-revealed .ddn-feature-art{animation:ddn-food-arrive 1.6s cubic-bezier(.2,.7,.3,1) both,ddn-food-drift 8s 1.6s ease-in-out infinite;transform-origin:center 70%}
@keyframes ddn-bar-breathe{0%,100%{transform:scaleY(.74)}50%{transform:scaleY(1)}}
@keyframes ddn-chart-trace{0%,100%{stroke-dashoffset:150;opacity:.65}50%{stroke-dashoffset:0;opacity:1}}
@keyframes ddn-clock-turn{to{transform:rotate(360deg)}}
@keyframes ddn-wheel-turn{to{transform:rotate(-360deg)}}
@keyframes ddn-food-arrive{from{opacity:0;transform:translateY(65px) rotate(-6deg) scale(.94)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes ddn-food-drift{50%{transform:translateY(-6px) rotate(1deg)}}
@media(max-width:760px){.ddn-feature-motion--life{height:190px}.ddn-feature-motion--business{height:230px}.ddn-feature-motion--food{height:230px}.ddn-feature-motion .ddn-scene-canvas{width:min(100%,345px)}.ddn-feature-motion--life .ddn-scene-canvas{width:min(100%,380px)}}
@media(prefers-reduced-motion:reduce){.ddn-feature-motion *,.ddn-feature-block--food.ddn-is-revealed .ddn-feature-art{animation:none!important}.ddn-clock-hour{transform:rotate(80deg)}.ddn-clock-minute{transform:rotate(300deg)}}
body[data-ddn-motion=off] .ddn-feature-motion *,body[data-ddn-motion=off] .ddn-feature-block--food.ddn-is-revealed .ddn-feature-art{animation:none!important}

/* Local movements stay within each decorative scene. */
.ddn-feature-block--home.ddn-is-revealed .ddn-feature-art,.ddn-feature-block--gaa.ddn-is-revealed .ddn-feature-art,.ddn-feature-block--education.ddn-is-revealed .ddn-feature-art{animation:ddn-art-rise 1.2s both}
.ddn-education-tassel{position:absolute;left:83%;top:27%;width:15%;height:54%;object-fit:contain;object-position:center top;transform-origin:50% 2%;animation:ddn-tassel-sway 5.5s ease-in-out infinite;animation-play-state:paused}
.ddn-education-pencil{position:absolute;left:25%;top:57%;width:43%;height:25%;object-fit:contain;transform-origin:5% 90%;animation:ddn-pencil-write 5.5s ease-in-out infinite;animation-play-state:paused;filter:drop-shadow(0 3px 2px #28322620)}
.ddn-pencil-ink{stroke-dasharray:160;stroke-dashoffset:160;animation:ddn-ink-write 5.5s ease-in-out infinite;animation-play-state:paused}
.ddn-gaa-ball{position:absolute;object-fit:contain;height:auto;animation:ddn-ball-turn 65s linear infinite;animation-play-state:paused;transform-origin:center}
.ddn-gaa-ball--football{left:57%;top:39%;width:32%}
.ddn-gaa-ball--sliotar{left:24%;top:18%;width:16%;animation-duration:80s;animation-direction:reverse}
.ddn-chimney-smoke path{opacity:0;animation:ddn-chimney-drift 8s ease-out infinite;animation-play-state:paused}
.ddn-chimney-smoke .ddn-smoke-right{animation-delay:-4s}
.ddn-shore-wave{opacity:0;animation:ddn-wave-break 6s ease-in-out infinite;animation-play-state:paused}
.ddn-shore-wave--two{animation-delay:-3s}
.ddn-feature-motion[data-ddn-in-view=true] :is(.ddn-education-tassel,.ddn-education-pencil,.ddn-pencil-ink,.ddn-gaa-ball,.ddn-chimney-smoke path,.ddn-shore-wave){animation-play-state:running}
@keyframes ddn-tassel-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes ddn-pencil-write{0%,8%{transform:translate(0,0) rotate(0)}20%{transform:translate(10%,-2%) rotate(-2deg)}35%{transform:translate(20%,1%) rotate(1deg)}50%{transform:translate(34%,-2%) rotate(-1deg)}65%,80%{transform:translate(45%,0) rotate(1deg)}90%,100%{transform:translate(0,-8%) rotate(-3deg)}}
@keyframes ddn-ink-write{0%,8%{stroke-dashoffset:160;opacity:0}15%{opacity:.65}70%,82%{stroke-dashoffset:0;opacity:.65}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ddn-ball-turn{to{transform:rotate(360deg)}}
@keyframes ddn-chimney-drift{0%{transform:translate(0,6px);opacity:0}25%{opacity:.16}70%{opacity:.09}100%{transform:translate(10px,-30px);opacity:0}}
@keyframes ddn-wave-break{0%{transform:translate(-18px,9px);opacity:0}30%{opacity:.55}65%{transform:translate(10px,-5px);opacity:.3}100%{transform:translate(22px,-8px);opacity:0}}
@media(prefers-reduced-motion:reduce){.ddn-feature-motion *,.ddn-feature-block--home.ddn-is-revealed .ddn-feature-art,.ddn-feature-block--gaa.ddn-is-revealed .ddn-feature-art,.ddn-feature-block--education.ddn-is-revealed .ddn-feature-art{animation:none!important}.ddn-pencil-ink{stroke-dashoffset:0;opacity:.5}}
