/* Our Ahhpp, options 2 and 3 of five (Olga, 2026-10-19: "2, 3 one after another"; the five options: option-app.html, not deployed).
   Her note on the old section: "crowded, unclear, not exciting. The title is not noticeable enough. Lots of text, kind of messy".
   2 · One thing at a time: three screens tall, the content holds (sticky) while the caption and the phone change three times.
   3 · The room: a real room full width, the teacher with her people, the phone small on the floor. */

/* ---------- 2 · one thing at a time ---------- */
.ahhpp { position: relative; height: 300vh; background: var(--rose-light); }
.ahhpp__stick { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: 1440px; margin: 0 auto; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 80px;
  padding: 112px clamp(24px, 7vw, 120px) 32px; }
.ahhpp__head { grid-column: 1 / -1; text-align: center; display: grid; gap: 12px; justify-items: center; }
.ahhpp__title { margin: 0; font: 400 clamp(30px, 3vw, 46px)/1.05 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.ahhpp__title em { color: var(--plum); }
.ahhpp__caps { position: relative; align-self: center; min-height: 340px; }
.ahhpp__cap { position: absolute; inset: 0 0 48px; display: grid; align-content: center; gap: 22px; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.ahhpp__cap.is-on { opacity: 1; transform: none; }
.ahhpp__cap b { font: 400 clamp(72px, 8.6vw, 136px)/.9 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.ahhpp__cap p { margin: 0; max-width: 460px; font-size: 20px; line-height: 1.5; color: var(--body); }
.ahhpp__dots { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
.ahhpp__dots i { width: 36px; height: 4px; border-radius: 2px; background: rgba(59,33,64,.18); transition: background .4s; }
.ahhpp__dots i.is-on { background: var(--plum); }
.ahhpp__phone { align-self: center; display: grid; justify-items: center; }
.ahhpp .phone { zoom: var(--pz, 1); }
@media (prefers-reduced-motion: reduce) { .ahhpp__cap { transition: none; } }

/* the phone shows the step: one part of its card lit, the rest quieter */
.phone--v3 .phone__card > * { transition: opacity .5s ease, font-size .5s ease, background-color .5s ease, padding .5s ease; }
.phone--v3[data-show="count"] .phone__count small, .phone--v3[data-show="count"] .phone__count b { font-size: 30px; }
.phone--v3[data-show="count"] .phone__line, .phone--v3[data-show="count"] .phone__hn { opacity: .4; }
.phone--v3[data-show="cue"] .phone__line { font-size: 23px; }
.phone--v3[data-show="cue"] .phone__count, .phone--v3[data-show="cue"] .phone__hn { opacity: .4; }
.phone--v3[data-show="next"] .phone__hn { font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--rose-light); padding: 9px 11px; border-radius: 11px; }
.phone--v3[data-show="next"] .phone__count, .phone--v3[data-show="next"] .phone__line { opacity: .4; }

@media (max-width: 860px) {
  .ahhpp__stick { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); padding: 92px 20px 20px; row-gap: 8px; }
  .ahhpp__title { font-size: 24px; }
  .ahhpp__caps { min-height: 180px; }
  .ahhpp__cap { inset: 0 0 30px; gap: 10px; }
  .ahhpp__cap b { font-size: 54px; }
  .ahhpp__cap p { font-size: 15px; }
  .ahhpp__phone { align-self: start; }
}

/* the phones' card at its own height, The parts under it (as in the class player), the part playing lit */
.ahhpp .phone__card, .room .phone__card { flex: none; }
.phone__ph { position: relative; z-index: 1; margin: 14px 0 6px 10px; font: 400 15px/1 var(--serif); color: var(--ink); text-align: left; }
.phone__parts { position: relative; z-index: 1; display: grid; gap: 2px; width: 100%; font: 500 11px/1 var(--sans); color: var(--ink); }
.phone__parts span { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; transition: background-color .4s, box-shadow .4s; }
.phone__parts em { font-style: normal; font-weight: 400; font-family: var(--mono); color: rgba(59,33,64,.55); }
.phone__parts span.is-on { background: #fff; box-shadow: 0 4px 10px -6px rgba(59,33,64,.4); }

/* ---------- the Ahhpp in plum (Olga, 2026-10-19: "Make Ahhpp mostly plum"): the phone's screen plum, words in cream, the In/Out word
   in pink, the class curve keeps each part's colour, the card a lighter plum; the full-screen player matches (player-v3.css) ---------- */
.phone--v3 { background: var(--plum-deep); }
.phone--v3 .phone__screen, .phone--v3 .phone__screen[data-level] { color: var(--page);
  background: radial-gradient(90% 46% at 18% 0%, rgba(255,247,238,.10) 0%, transparent 70%), linear-gradient(170deg, #5B2E5E 0%, #4A2550 46%, #3B2140 88%); }
.phone--v3 .phone__screen[data-level="2"], .phone--v3 .phone__screen[data-level="3"] { background: radial-gradient(80% 50% at 80% 30%, rgba(127,122,230,.26) 0%, transparent 70%), linear-gradient(170deg, #5B2E5E 0%, #4A2550 46%, #3B2140 88%); }
.phone--v3 .phone__screen[data-level="4"], .phone--v3 .phone__screen[data-level="5"] { background: radial-gradient(80% 50% at 80% 30%, rgba(243,166,198,.28) 0%, transparent 70%), linear-gradient(170deg, #5B2E5E 0%, #4A2550 46%, #3B2140 88%); }
.phone--v3 .phone__back { color: var(--page); text-decoration-color: rgba(255,247,238,.35); }
.phone--v3 .phone__title { color: var(--page); }
.phone--v3 .phone__top { color: var(--page); }
.phone--v3 .phone__play { background: var(--page); box-shadow: none; }
.phone--v3 .phone__play::after { color: var(--plum-deep); }
.phone--v3 .phone__sw { background: rgba(255,247,238,.12); box-shadow: none; color: var(--page); }
.phone--v3 .phone__sw i { background: rgba(255,247,238,.25); }
.phone--v3 .phone__sw.is-on i { background: var(--rose); } .phone--v3 .phone__sw.is-on i::after { background: var(--plum-deep); }
.phone--v3 .phone__land .lv-floor { stroke: rgba(255,247,238,.18); }
.phone--v3 .phone__land .lv-ph line { stroke: var(--page); } .phone--v3 .phone__land .lv-ph rect { fill: var(--page); } .phone--v3 .phone__land .lv-ph text { fill: var(--plum-deep); }
.phone--v3 .phone__times, .phone--v3 .phone__time { color: var(--page); }
.phone--v3 .phone__card { background: rgba(255,247,238,.07); box-shadow: inset 0 0 0 1px rgba(255,247,238,.12); color: var(--page); }
.phone--v3 .phone__hl, .phone--v3 .phone__hl span { color: rgba(255,247,238,.68); } .phone--v3 .phone__hl b { color: var(--page); }
.phone--v3 .phone__count small, .phone--v3 .phone__count b { color: var(--rose); }
.phone--v3 .phone__line { color: var(--page); }
.phone--v3 .phone__hn { color: rgba(255,247,238,.55); } .phone--v3 .phone__hn b { color: var(--page); }
.phone--v3[data-show="next"] .phone__hn { color: var(--page); background: rgba(243,166,198,.22); }
.phone__ph { color: var(--page); }
.phone__parts { color: var(--page); } .phone__parts em { color: rgba(255,247,238,.55); }
.phone__parts span.is-on { background: rgba(255,247,238,.12); box-shadow: none; }

/* ---------- composition (Olga, 2026-10-19: "improve composition of the section"): on wide screens one left column (the title large on
   two lines, a hairline, the caption that changes, its marks) and the phone beside it, the pair centred on the screen with a soft
   light behind the phone; the title is the first thing seen, the caption second ---------- */
@media (min-width: 861px) {
  .ahhpp__stick { grid-template-columns: minmax(0, 660px) auto; grid-template-rows: auto auto; grid-template-areas: "head phone" "caps phone";
    justify-content: center; align-content: center; column-gap: clamp(64px, 9vw, 150px); padding: 96px 40px 40px; }
  .ahhpp__head { grid-area: head; grid-column: auto; text-align: left; justify-items: start; align-self: end; gap: 18px; }
  .ahhpp__title { font-size: clamp(46px, 4.8vw, 78px); line-height: .94; letter-spacing: -.025em; }
  .ahhpp__title em { display: block; }
  .ahhpp__caps { grid-area: caps; align-self: start; margin-top: 36px; padding-top: 30px; min-height: 230px; border-top: 1px solid rgba(59,33,64,.2); }
  .ahhpp__cap { inset: 30px 0 40px; gap: 14px; align-content: start; }
  .ahhpp__cap b { font-size: clamp(40px, 3.4vw, 58px); line-height: 1; }
  .ahhpp__cap p { font-size: 18px; }
  .ahhpp__phone { grid-area: phone; position: relative; }
  .ahhpp__phone::before { content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.22) 42%, rgba(255,255,255,0) 68%); }
}

/* ---------- the bloom (Olga, 2026-10-19: screen 2 of five, option-phone.html, after "It needs a central accent and exciting design"):
   six petals in the Bloom colours, centred, open on the in-breath and close on the out-breath (--p, 0 empty to 1 full, from assist.js),
   the count inside, Breathe in / out under them; the part and the line being said below; the landscape, Next, Pause and the time at the
   bottom. Less text than before: no card, no parts list. The same petals in the full-screen player (player-v3.css). ---------- */
.petals { position: absolute; left: 50%; top: 46%; width: 240px; aspect-ratio: 1; margin: -120px 0 0 -120px; transform: rotate(calc(var(--p, 0) * 60deg)); pointer-events: none; }
.petals i { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px; border-radius: 50%; mix-blend-mode: screen; opacity: .82;
  transform: rotate(var(--a)) translateY(calc(-10px - var(--p, 0) * 52px)) scale(calc(.55 + var(--p, 0) * .45)); }
.petals i:nth-child(1) { --a: 0deg; background: #F3A6C6; } .petals i:nth-child(2) { --a: 60deg; background: #F9CB6B; } .petals i:nth-child(3) { --a: 120deg; background: #8FD1A8; }
.petals i:nth-child(4) { --a: 180deg; background: #B9B6F5; } .petals i:nth-child(5) { --a: 240deg; background: #F3A6C6; } .petals i:nth-child(6) { --a: 300deg; background: #8FD1A8; }
.phone--v3 .phone__screen { padding: 30px 18px 16px; align-items: stretch; text-align: left; gap: 0; }
.phone--v3 .phone__cloud { display: none; }
.phone--v3 .phone__head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.phone--v3 .phone__title { margin: 0; font: 400 24px/1 var(--serif); color: var(--page); }
.phone--v3 .phone__head .phone__time { font: 400 10px/1 var(--mono); opacity: .6; }
.phone--v3 .phone__mid { position: relative; flex: 1; min-height: 290px; }
.phone--v3 .phone__count { position: absolute; left: 0; right: 0; top: 46%; height: 0; display: grid; place-items: center; transform: none; width: auto; }
.phone--v3 .phone__count b { position: relative; font: 400 42px/1 var(--serif); color: var(--plum-deep); text-shadow: none; transition: font-size .5s ease; }
.phone--v3 .phone__count small { position: absolute; left: 0; right: 0; top: 128px; text-align: center; font: italic 400 17px/1 var(--serif); color: var(--page); transition: opacity .5s; }
.phone--v3 .phone__say { position: relative; z-index: 1; display: grid; gap: 6px; text-align: center; }
.phone--v3 .phone__hl { margin: 0; } .phone--v3 .phone__hl span { display: none; }
.phone--v3 .phone__hl b { display: block; margin: 0; font: 500 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.phone--v3 .phone__line { margin: 0; min-height: 2.5em; font: 400 18px/1.24 var(--serif); color: var(--page); }
.phone--v3 .phone__nav { margin-top: 12px; height: 30px; }
.phone--v3 .phone__ctl { position: relative; z-index: 1; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--page); }
.phone--v3 .phone__ctl .phone__hn { margin: 0; font: 400 10px/1.2 var(--sans); color: rgba(255,247,238,.6); }
.phone--v3 .phone__ctl .phone__time { font: 400 10px/1 var(--mono); opacity: .6; }
/* the three steps of the section: the count grows / the line grows / Next is lit */
.phone--v3[data-show="count"] .phone__count b { font-size: 60px; }
.phone--v3[data-show="count"] .phone__line { opacity: .45; } .phone--v3[data-show="count"] .phone__count small { opacity: 1; }
.phone--v3[data-show="cue"] .phone__line { font-size: 21px; opacity: 1; } .phone--v3[data-show="cue"] .phone__count small { opacity: .5; }
.phone--v3[data-show="next"] .phone__ctl .phone__hn { color: var(--page); background: rgba(243,166,198,.25); padding: 6px 9px; border-radius: 9px; font-weight: 500; }
.phone--v3[data-show="next"] .phone__line { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .petals { transform: none; } }
.phone--v3[data-show] .phone__count small { font-size: 17px; }   /* the earlier step rule enlarged it */

/* legibility (Olga, 2026-10-19: "cant read the number", "the graph is to thin and not defined, difficult to navigate with fingers"):
   the count sits in a solid plum circle at the bloom's heart; the landscape is taller, its line thicker, the dots and the time pill
   bigger (assist.js), and the whole strip is a finger-tall touch area; Next and the time read clearly */
.phone--v3 .phone__count b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--plum-deep); color: var(--page);
  font: 400 34px/1 var(--serif); box-shadow: 0 0 0 3px rgba(255,247,238,.55), 0 8px 18px -6px rgba(36,18,42,.6); transition: width .5s, height .5s, font-size .5s; }
.phone--v3[data-show="count"] .phone__count b { width: 78px; height: 78px; font-size: 44px; }
.phone--v3[data-show="cue"] .phone__count, .phone--v3[data-show="next"] .phone__count { opacity: 1; }
.phone--v3 .phone__count small { color: var(--page); opacity: .9; }
.phone--v3 .phone__nav { height: 64px; margin-top: 8px; cursor: grab; }
.phone--v3 .phone__land .lv-line { stroke-width: 3.5; }
.phone--v3 .phone__land .lv-area { opacity: .5; }
.phone--v3 .phone__land .lv-floor { stroke: rgba(255,247,238,.28); stroke-width: 1.5; }
.phone--v3 .phone__land .lv-ph line { stroke-width: 2; }
.phone--v3 .phone__land .lv-ph text { font: 600 9px var(--mono); }
.phone--v3 .phone__ctl .phone__hn { font-size: 11px; color: rgba(255,247,238,.82); }
.phone--v3 .phone__ctl .phone__time { font-size: 11px; opacity: .8; }
.phone--v3 .phone__count b:empty { display: none; }   /* talking parts have no count */

/* the steps as words instead of three marks (Olga, 2026-10-19: "Text instead of this"): the step on screen dark and underlined, the
   others quiet; each one takes you there */
.ahhpp__steps { position: absolute; left: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ahhpp__steps button { padding: 0 0 6px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: 400 22px/1.1 var(--serif); color: rgba(59,33,64,.42); transition: color .4s, border-color .4s; }
.ahhpp__steps button:hover { color: var(--ink); }
.ahhpp__steps button.is-on { color: var(--ink); border-bottom-color: var(--plum); }
@media (max-width: 860px) { .ahhpp__steps { gap: 4px 18px; } .ahhpp__steps button { font-size: 17px; padding-bottom: 4px; } }

/* the number plain in the middle again, on the petals (Olga, 2026-10-19: "No, keep the number in the middle. Just make sure there is no
   dark gap in between the circles"): the petals open less far, so they always overlap at the heart and the centre stays light;
   the number in deep plum with a soft light halo, so it reads on any colour */
.petals i { transform: rotate(var(--a)) translateY(calc(-8px - var(--p, 0) * 32px)) scale(calc(.6 + var(--p, 0) * .4)); }
.phone--v3 .phone__count b, .phone--v3[data-show="count"] .phone__count b { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  color: var(--plum-deep); text-shadow: 0 0 14px rgba(255,255,255,.9), 0 0 4px rgba(255,255,255,.9); font: 400 48px/1 var(--serif); }
.phone--v3[data-show="count"] .phone__count b { font-size: 60px; }
.player.opt-v3 .pv-bloom .breath__count { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  color: var(--plum-deep); text-shadow: 0 0 16px rgba(255,255,255,.9), 0 0 5px rgba(255,255,255,.9); font: 400 64px/1 var(--serif); }

/* one paragraph instead of the changing captions (Olga, 2026-10-19: "replace with one pararaph of text instead of changing text, no need
   fot text change"): nothing changes on scroll, so the section is one screen and scrolls like any other */
.ahhpp { height: auto; }
.ahhpp__stick { position: relative; top: auto; height: auto; min-height: 100vh; min-height: 100svh; }
.ahhpp__caps { min-height: 0; }
.ahhpp__text { margin: 0; max-width: 520px; font-size: 20px; line-height: 1.6; color: var(--body); }
@media (max-width: 860px) { .ahhpp__stick { min-height: 0; padding-bottom: 72px; } .ahhpp__text { font-size: 16px; margin-bottom: 20px; } }

/* no line between the title and the text (Olga, 2026-10-19: "no need for the line between the title and the text") */
.ahhpp__caps { border-top: 0 !important; padding-top: 0 !important; margin-top: 28px !important; }
@media (min-width: 861px) {
  .ahhpp__stick { grid-template-columns: minmax(0, 760px) auto; }
  .ahhpp__title { font-size: clamp(40px, 4.1vw, 64px); text-wrap: balance; }   /* "From the first breath to the last." on one line, no lone word */
}
/* the title at the page's shared heading size, like every other section title (Olga, 2026-10-19: "make title a bit bigger consistent") */
.ahhpp__title, .ahhpp .ahhpp__title { font-size: var(--h2) !important; line-height: .94; letter-spacing: -.022em; text-wrap: balance; }

/* Pause in the middle and like the full player's (Olga, 2026-10-19: "Pause button should be in the middle and look more like the main
   player"): a cream pill on the phone's centre line, Next on the left, the time on the right, whatever their widths */
.phone--v3 .phone__ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.phone--v3 .phone__ctl .phone__time { justify-self: end; }
.phone--v3 .phone__play { height: 34px; padding: 0 22px; border-radius: 999px; background: var(--page); box-shadow: 0 6px 16px -8px rgba(36,18,42,.6); }
.phone--v3 .phone__play::after { font: 600 13px/1 var(--sans); color: var(--plum-deep); }

/* the double bloom (Olga, 2026-10-19: "double bloom but plum in the middle a bit bigger and bloom around a bit bigger and more blurry"):
   the petals fade from full colour at their outer edge to clear at the heart, so the overlaps mix colours and the plum shows through a
   wider centre; the white number sits there; a second, bigger, softer flower turns the other way behind and follows the breath more
   slowly (--q trails --p: assist.js for the phone, main.js for the player). Versions: option-bloom.html */
.petals { width: 250px; height: 250px; margin: -125px 0 0 -125px; z-index: 2; transform: rotate(calc(var(--p, 0) * 50deg)); }
.petals i { width: 112px; height: 112px; margin: -56px; opacity: .88; mix-blend-mode: normal;
  transform: rotate(var(--a)) translateY(calc(-36px - var(--p, 0) * 54px)) scale(calc(.62 + var(--p, 0) * .38));
  background: radial-gradient(circle at 50% 100%, transparent 0%, transparent 26%, color-mix(in srgb, var(--c) 45%, transparent) 52%, var(--c) 84%) !important; }
.petals i:nth-child(1) { --c: #F3A6C6; } .petals i:nth-child(2) { --c: #F9CB6B; } .petals i:nth-child(3) { --c: #8FD1A8; }
.petals i:nth-child(4) { --c: #B9B6F5; } .petals i:nth-child(5) { --c: #F3A6C6; } .petals i:nth-child(6) { --c: #8FD1A8; }
.petals--back { width: 360px; height: 360px; margin: -180px 0 0 -180px; z-index: 1; filter: blur(26px); opacity: .75;
  transform: rotate(calc(-30deg - var(--q, 0) * 50deg)) scale(calc(.7 + var(--q, 0) * .6)); }
.petals--back i { width: 170px; height: 170px; margin: -85px; opacity: .8; transform: rotate(var(--a)) translateY(calc(-40px - var(--q, 0) * 60px)); background: var(--c) !important; }
.phone--v3 .phone__count b, .phone--v3[data-show] .phone__count b { color: #fff; text-shadow: 0 2px 16px rgba(36,18,42,.6); position: relative; z-index: 3; }
.player.opt-v3 .pv-bloom .breath__count { color: #fff; text-shadow: 0 2px 18px rgba(36,18,42,.6); z-index: 3; }
.phone--v3 .phone__mid { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .petals, .petals--back { transform: none; } }
/* on the phone the flower is smaller, so it never covers Breathe in / out under it */
.phone--v3 .petals i { width: 90px; height: 90px; margin: -45px; transform: rotate(var(--a)) translateY(calc(-30px - var(--p, 0) * 38px)) scale(calc(.62 + var(--p, 0) * .38)); }
.phone--v3 .petals--back { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
.phone--v3 .petals--back i { width: 130px; height: 130px; margin: -65px; transform: rotate(var(--a)) translateY(calc(-30px - var(--q, 0) * 46px)); }

/* the flower behind very mild, and the middle plum, never lighter (Olga, 2026-10-19: "remove bloom around or make it very mild, make
   circle in the middle plum, not lighter"): a plum disc sits at the heart of the petals, under the white number */
.petals--back { opacity: .22 !important; filter: blur(34px) !important; }
.petals::after { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #45234C 0%, #45234C 62%, rgba(69,35,76,0) 74%); transform: rotate(calc(var(--p, 0) * -50deg)) scale(calc(.85 + var(--p, 0) * .35)); }
.petals--back::after { display: none; }
.phone--v3 .petals::after { width: 64px; height: 64px; margin: -32px; }
.phone--v3 .phone__count, .pv-bloom .pv-cue { z-index: 4 !important; }   /* the number above the plum heart */
.pv-bloom .petals i { width: 92px; height: 92px; margin: -46px; transform: rotate(var(--a)) translateY(calc(-30px - var(--p, 0) * 40px)) scale(calc(.62 + var(--p, 0) * .38)); }
.pv-bloom .petals--back i { width: 130px; height: 130px; margin: -65px; transform: rotate(var(--a)) translateY(calc(-30px - var(--q, 0) * 46px)); }

/* only the petals now (Olga, 2026-10-19: "Remove the bloom around. Remove the circle with the border from the middle. Just make the
   gradient to the transparent inside the colorful layers a little bit bigger, so the circle in the middle is formed just by the
   transparency"): no flower behind, no plum disc; each petal fades to clear over a wider stretch toward the heart */
.petals--back { display: none !important; }
.petals::after { display: none !important; }
.petals i { background: radial-gradient(circle at 50% 100%, transparent 0%, transparent 38%, color-mix(in srgb, var(--c) 40%, transparent) 62%, var(--c) 88%) !important; }

/* Olga's gradient angle (2026-10-20, her edit of the pink petal in Figma, "try the one I did"): each petal's gradient centre sits just
   outside its edge and turned 29 degrees, with a longer radius, so the colour sweeps in from one side and the flower reads as a soft
   pinwheel; the heart stays clear plum. Figma: page "Sigh Club · bloom", frame "7 · Your angle". */
.petals i { background: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%, transparent 0%, transparent 38%, color-mix(in srgb, var(--c) 40%, transparent) 62%, var(--c) 88%) !important; }
.petals { --pd: 112px; } .phone--v3 .petals { --pd: 90px; } .pv-bloom .petals { --pd: 92px; }
/* a smoother fade (Olga, 2026-10-20: "please make the gradient a bit more smooth"): eased steps from clear to full colour */
.petals i { background: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%,
  transparent 0%, transparent 28%,
  color-mix(in srgb, var(--c) 8%, transparent) 40%, color-mix(in srgb, var(--c) 24%, transparent) 52%,
  color-mix(in srgb, var(--c) 48%, transparent) 64%, color-mix(in srgb, var(--c) 74%, transparent) 76%,
  color-mix(in srgb, var(--c) 92%, transparent) 88%, var(--c) 98%) !important; }

/* overlaps visible again, as before (Olga, 2026-10-20: "I want to see some overlapping for circles as before"): the petals are a little
   bigger and closer so neighbours cross more, the clear part is shorter, and where two petals cross the colours add up (screen), so each
   crossing reads as a lighter lens; her angle and the clear heart stay */
.petals i { mix-blend-mode: screen; opacity: .92;
  background: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%,
  transparent 0%, transparent 22%, color-mix(in srgb, var(--c) 12%, transparent) 34%, color-mix(in srgb, var(--c) 32%, transparent) 46%,
  color-mix(in srgb, var(--c) 58%, transparent) 58%, color-mix(in srgb, var(--c) 80%, transparent) 72%, color-mix(in srgb, var(--c) 94%, transparent) 86%, var(--c) 98%) !important; }
.phone--v3 .petals i { width: 100px; height: 100px; margin: -50px; transform: rotate(var(--a)) translateY(calc(-26px - var(--p, 0) * 34px)) scale(calc(.64 + var(--p, 0) * .36)); }
.phone--v3 .petals { --pd: 100px; }
.pv-bloom .petals i { width: 102px; height: 102px; margin: -51px; transform: rotate(var(--a)) translateY(calc(-26px - var(--p, 0) * 36px)) scale(calc(.64 + var(--p, 0) * .36)); }
.pv-bloom .petals { --pd: 102px; }
/* a bigger clear centre (Olga, 2026-10-20: "make gradient a bit bigger to make the center bigger"): the clear part of each petal reaches
   further before the colour starts, the crossings still show */
.petals i { background: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%,
  transparent 0%, transparent 34%, color-mix(in srgb, var(--c) 10%, transparent) 45%, color-mix(in srgb, var(--c) 28%, transparent) 55%,
  color-mix(in srgb, var(--c) 54%, transparent) 66%, color-mix(in srgb, var(--c) 78%, transparent) 77%, color-mix(in srgb, var(--c) 94%, transparent) 88%, var(--c) 98%) !important; }
/* less white in the colours (Olga, 2026-10-20: "can you make the colours with less white colour inside"): no screen blending, so a
   crossing mixes the two colours instead of going pale; each petal slightly see-through so the crossing still shows as a lens */
.petals i { mix-blend-mode: normal !important; opacity: .8 !important; }
/* clearer crossings (Olga, 2026-10-20: "I want to see intersections a bit better"): each petal a little more see-through, so where two
   cross the colour is visibly denser, and a hairline rim in the petal's own colour draws every edge through the overlaps */
.petals i { opacity: .7 !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); }
/* the rim fades where the petal turns clear, so no lines cross the clear heart or the number */
.petals i { box-shadow: none !important; }
.petals i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 85%, transparent);
  -webkit-mask: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%, transparent 42%, #000 74%);
  mask: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at 80.3% 104.6%, transparent 42%, #000 74%); }

/* no rims; the gradient turned a little further so neighbours' coloured sides meet and the crossings are bigger (Olga, 2026-10-20:
   "remove the rims from the flower make intersection bigger by slightly rotating the gradient") */
.petals i::before { display: none !important; }
.petals i { background: radial-gradient(circle calc(var(--pd, 112px) * 1.414) at var(--gx, 67.2%) var(--gy, 110%),   /* her angle turned 13° back (-16° instead of -29°): the crossings fill with colour */
 
  transparent 0%, transparent 34%, color-mix(in srgb, var(--c) 10%, transparent) 45%, color-mix(in srgb, var(--c) 28%, transparent) 55%,
  color-mix(in srgb, var(--c) 54%, transparent) 66%, color-mix(in srgb, var(--c) 78%, transparent) 77%, color-mix(in srgb, var(--c) 94%, transparent) 88%, var(--c) 98%) !important; }