/* After the dive: simple sections. A small label, one headline, one or two sentences, one picture. Calm fades. */
#next { position: relative; z-index: 5; background: transparent; }
.after { position: relative; background: #000; color: var(--fg); font-family: var(--text); }
.wrap { width: min(1200px, calc(100vw - 48px)); margin: 0 auto; }
.blk { min-height: 100vh; display: flex; align-items: center; padding: 14vh 0; }
.two { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }

.lab { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg3); letter-spacing: .02em; }
.lab i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(232,40,63,.8); }
.txt h2 { margin: 22px 0 0; font-family: var(--display); font-weight: 300; font-size: clamp(36px, 3.9vw, 60px); line-height: 1.08; letter-spacing: -.022em; }
.txt p { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--fg2); max-width: 44ch; }

/* the picture: a softly lit card with the notifications you'd actually see */
.art { position: relative; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: #0a0506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.glow { position: absolute; inset: -20%; filter: blur(50px); }
.glow i { position: absolute; border-radius: 50%; }
.glow i:nth-child(1) { width: 60%; height: 60%; left: 40%; top: 10%; background: radial-gradient(closest-side, rgba(232,40,63,.55), transparent); animation: g1 20s ease-in-out infinite alternate; }
.glow i:nth-child(2) { width: 55%; height: 55%; left: 10%; top: 45%; background: radial-gradient(closest-side, rgba(120,12,28,.8), transparent); animation: g2 26s ease-in-out infinite alternate; }
.glow i:nth-child(3) { width: 40%; height: 40%; left: 55%; top: 55%; background: radial-gradient(closest-side, rgba(255,140,150,.18), transparent); animation: g3 30s ease-in-out infinite alternate; }
@keyframes g1 { to { transform: translate(-14%, 12%) scale(1.1); } }
@keyframes g2 { to { transform: translate(16%, -10%) scale(.9); } }
@keyframes g3 { to { transform: translate(-20%, -16%) scale(1.2); } }
.grain { position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.toasts { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 8%; }
.toast { width: min(400px, 100%); padding: 16px 18px 16px; border-radius: 12px; background: rgba(28,28,32,.78); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -20px rgba(0,0,0,.7); font-size: 14px;
  opacity: 0; transform: translateX(40px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.toast:not(.main) { width: min(360px, 92%); opacity: 0; }
.toasts.in .toast { opacity: 1; transform: none; }
.toasts.in .toast:nth-child(2) { opacity: .62; transition-delay: .45s; }
.toasts.in .toast:nth-child(3) { opacity: .38; transition-delay: .8s; }
.th { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(236,235,230,.55); }
.th img { width: 16px; height: 12px; } .th em { margin-left: auto; font-style: normal; }
.toast b { display: block; margin-top: 10px; font-weight: 500; font-size: 15px; color: #f2f1ec; }
.toast.main b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(232,40,63,.9); margin-right: 10px; vertical-align: 1px; }
.toast p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(236,235,230,.66); }
.ta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ta span { text-align: center; padding: 8px 0; border-radius: 6px; background: rgba(255,255,255,.07); font-size: 13px; color: #ecebe6; }

/* reveals */
html.js .up { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
html.js .up.in { opacity: 1; transform: none; }
.txt .up:nth-child(2) { transition-delay: .08s; } .txt .up:nth-child(3) { transition-delay: .16s; } .art.up { transition-delay: .1s; }

@media (max-width: 900px) { .two { grid-template-columns: 1fr; } .art { aspect-ratio: 4 / 5; } }