.shore{position:relative;isolation:isolate;overflow:hidden;background:var(--color-sand-100);font-family:"Neucha",var(--font-body)}
.shore__sand{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

.bridge{display:grid;place-items:center;padding:8rem var(--gutter) 5rem;text-align:center;color:var(--color-teal-800)}
.bridge__title{margin:0;display:flex;flex-direction:column;align-items:center;font-weight:400;font-size:clamp(2.375rem,4vw,3.5rem);line-height:1.1;letter-spacing:.035em;text-transform:uppercase;color:var(--color-peach-500)}
.bridge__plate{display:block;margin-top:var(--space-4);padding:.03em .25em .07em;font-size:clamp(3.625rem,7.6vw,6.375rem);line-height:1.02;letter-spacing:.025em;color:var(--color-white);background:var(--color-teal-400);transform:rotate(-2deg)}
.bridge__text{margin:var(--space-8) auto var(--space-6);max-width:47.5rem;font-size:clamp(1.375rem,1.8vw,1.5625rem);line-height:1.35;text-wrap:pretty}
.bridge__button{display:inline-block;border-radius:999px;padding:.55em 1.1em .5em;background:var(--color-white);color:var(--color-peach-700);font-size:clamp(1.375rem,1.8vw,1.5625rem);line-height:1;text-decoration:none;box-shadow:-4px 5px 0 var(--color-sand-300);transition:transform .2s,box-shadow .2s}
.bridge__button:active{transform:translateY(1px);transition-duration:.08s}
.bridge__button:focus-visible{outline:3px solid var(--color-teal-800);outline-offset:5px}

.bridge__title,.bridge__text,.bridge__button{opacity:0}
.bridge--play .bridge__title{animation:bridge-in .5s ease-out forwards}
.bridge--play .bridge__plate{animation:bridge-plate .45s cubic-bezier(.2,.7,.3,1) .15s both}
.bridge--play .bridge__text{animation:bridge-in .5s ease-out .35s forwards}
.bridge--play .bridge__button{animation:bridge-in .5s ease-out .5s forwards}
@keyframes bridge-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bridge-plate{from{opacity:0;transform:translateY(9px) rotate(-2deg) scale(.97)}to{opacity:1;transform:rotate(-2deg)}}

.shore .price{--price-bg:transparent;min-height:0;padding-top:8rem;padding-bottom:var(--space-24,6rem);color:var(--color-teal-800)}
.shore .price__script{color:var(--color-peach-400);text-shadow:4px 5px 0 var(--color-sand-300)}

@media (prefers-reduced-motion:reduce){.bridge__title,.bridge__text,.bridge__button{opacity:1;animation:none!important}}
@media (hover:hover){.bridge__button:hover{transform:translateY(-2px);box-shadow:-4px 7px 0 var(--color-sand-300)}}