*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Neucha",var(--font-body)}

.prog{--prog-water:#94CECD;--prog-deep:#3E7F7B;position:relative;min-height:100vh;overflow:hidden;display:grid;align-content:center;justify-items:center;gap:clamp(2rem,5vh,3.5rem);background:var(--prog-water);padding:var(--space-12) clamp(var(--gutter),6vw,7rem);font-family:"Neucha",var(--font-body)}
.prog__label{position:absolute;left:var(--space-6);top:var(--space-4);z-index:3;font:600 16px/1 system-ui,sans-serif;color:#fff;opacity:.85}
.prog__sea{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.prog__wave{fill:#84CAC8;opacity:.9}
.prog__bubble-bg{fill:url(#prog-bubble);stroke:rgba(255,255,255,.85);stroke-width:2.2}
.prog__shine{fill:none;stroke:rgba(255,255,255,.9);stroke-linecap:round}
.prog__speck{fill:rgba(255,255,255,.55)}
.prog__letter{font-family:"Neucha",sans-serif;fill:rgba(255,255,255,.75);text-anchor:middle;dominant-baseline:central}

.prog__head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
.prog__kicker{margin:0;font-size:clamp(1.75rem,3vw,2.75rem);line-height:1;text-transform:uppercase;letter-spacing:.05em;color:var(--color-white)}
.prog__title{margin:0;line-height:0}
.prog__brush{display:block;height:clamp(5rem,8.5vw,7.5rem);width:auto;max-width:90vw;overflow:visible}
.prog__ink{fill:none;stroke:var(--color-white);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.prog__shadow{fill:none;stroke:#52B8B1;stroke-width:19;stroke-linecap:round;stroke-linejoin:round}

.prog__list{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4.5rem);width:100%;max-width:70rem;align-items:start}
.prog__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.prog__bubble{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(11rem,16vw,14rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.04) 0 62%,rgba(255,255,255,.22) 86%,rgba(255,255,255,.42) 100%);border:2.5px solid rgba(255,255,255,.9);color:var(--color-white)}
.prog__bubble::before{content:"";position:absolute;left:7%;top:7%;width:30%;height:30%;border-radius:50%;border-top:4px solid rgba(255,255,255,.9);border-left:4px solid rgba(255,255,255,.9);border-right:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(-8deg)}
.prog__age{font-size:clamp(3.5rem,5vw,4.75rem);line-height:.95;color:var(--color-white)}
.prog__years{font-size:clamp(1.5rem,2vw,1.875rem);line-height:1;color:var(--color-white)}
.prog__text{font-size:clamp(1.25rem,1.5vw,1.4375rem);line-height:1.3;color:var(--color-white);max-width:17rem}

.prog__bubble--big{width:clamp(15rem,21vw,19rem);gap:var(--space-1);padding:var(--space-8)}
.prog__bubble--big .prog__text{margin-top:var(--space-2);font-size:clamp(1.0625rem,1.25vw,1.1875rem);max-width:12rem}

.prog__glass{gap:var(--space-1);padding:var(--space-8) var(--space-6);border-radius:var(--space-6);background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.7);backdrop-filter:blur(2px)}
.prog__glass .prog__text{margin-top:var(--space-3)}

.prog__head,.prog__item{opacity:0}
.prog--play .prog__head{animation:prog-in .5s ease-out .1s forwards}
.prog--play .prog__item{animation:prog-rise .7s cubic-bezier(.3,1.2,.5,1) var(--d) forwards}
@keyframes prog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes prog-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes prog-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .prog__head,.prog__item{opacity:1}
  .prog--play .prog__head,.prog--play .prog__item{animation:none}
}

.prog .prog__bubble{background:none;border:0;border-radius:0}
.prog .prog__bubble::before{content:none}
.prog__bubble-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.prog .prog__shadow{display:none}

.prog__drift{animation:prog-water-drift var(--drift-time,8s) ease-in-out var(--drift-phase,0s) infinite}
@keyframes prog-water-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-12px)}}
@media(prefers-reduced-motion:reduce){.prog__drift{animation:none}}

.prog .prog__text{color:var(--color-white);text-shadow:0 2px 10px rgba(47,110,106,.55);font-size:clamp(1.625rem,2.1vw,1.875rem);line-height:1.35;max-width:24rem;text-wrap:pretty}
.prog__list{max-width:76rem;gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:760px){
.prog{padding:5rem var(--gutter) var(--space-6);gap:var(--space-6)}
.prog__list{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
.prog__item{flex-direction:row;align-items:center;gap:var(--space-4);text-align:left}
.prog .prog__bubble{flex:none;width:6.75rem}
.prog__age{font-size:2.5rem}
.prog__years{font-size:1.25rem}
.prog .prog__text{max-width:none;font-size:1.1875rem;line-height:1.3}
}