@font-face { font-family: Jost; src: url(fonts/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: Jost; src: url(fonts/jost-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: block; }

* { box-sizing: border-box; margin: 0; }
img { display: block; }
ol { padding-left: 1.3em; }
aside { display: none; }

.slides { position: relative; width: 1920px; height: 1080px; transform-origin: 0 0; font-family: Jost, Arial, sans-serif; color: #fbf4fa; }
.slides section { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity .5s; }
.slides section.shown { opacity: 1; }
.slides section > :where(:not([style*="position:absolute"], [style*="position: absolute"])) { position: relative; }

/* 4 counts in, 6 out, so inhaling is the first 40% of the 10s loop */
.breath { display: flex; align-items: center; justify-content: center; }
.ring { position: absolute; width: 640px; height: 640px; border-radius: 50%; border: 2px solid #fbf4fa40; }
.ball { width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f7a6c8, #d9558f 45%, #7a3fc8); box-shadow: 0 0 120px #e25a9699; animation: breathe 10s ease-in-out infinite; }
.cue span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: 56px; font-weight: 300; letter-spacing: 8px; text-transform: uppercase; white-space: nowrap; }
.in { animation: cue-in 10s infinite; }
.out { opacity: 0; animation: cue-out 10s infinite; }
@keyframes breathe { 0%, 100% { scale: .4; } 40% { scale: 1; } }
@keyframes cue-in { 0%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes cue-out { 0%, 38%, 100% { opacity: 0; } 42%, 98% { opacity: 1; } }