/* deco.css — line-art layer: outline message balloons, dotted message trails, hand-drawn underline.
   Owner 6 Nov 2026: "too plain — add background line work, outlines, pretty patterns or drawn message balloons".
   Rules: decoration only (aria-hidden pseudo elements) · never under body text at full strength · respects reduced motion & dark mode. */

/* stacking: decoration sits behind the content of each panel */
.hero,.panel-cream,.panel-green,.appcta,section.alt,.foot{position:relative;isolation:isolate;overflow:hidden}
.hero>*,.panel-cream>*,.panel-green>*,.appcta>*,section.alt>*,.foot>*{position:relative;z-index:1}

/* 1 · hero (cream): navy outline balloons + dotted trails, strongest at the edges */
.hero::before,.panel-cream::before{
  content:"";position:absolute;inset:-10px -40px auto -40px;height:min(640px,100%);z-index:0;pointer-events:none;
  background:url(/assets/img/deco/bubbles-navy.svg) center top/1200px auto no-repeat;opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 55%,#000 80%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 55%,#000 80%)}
/* green accent balloon drifting near the top right of every hero */
.hero::after{
  content:"";position:absolute;right:4%;top:18px;width:150px;height:96px;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 96' fill='none' stroke='%2307744C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 6h96q18 0 18 18v30q0 18-18 18H64L44 90l4-18H22Q4 72 4 54V24Q4 6 22 6z'/%3E%3Cpath d='M48 39l11 11 22-22' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.5;animation:br-float 7s ease-in-out infinite}

/* 2 · green panels: white outline balloons, like the App Store art */
.panel-green::before,.appcta::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/assets/img/deco/bubbles-white.svg) center/cover no-repeat;opacity:.2}
.panel-green::after,.appcta::after{
  content:"";position:absolute;width:420px;height:420px;right:-120px;bottom:-160px;z-index:0;pointer-events:none;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.18);box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.02)}

/* 3 · alternate sections: faint repeating balloon pattern fading in from one side */
section.alt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/assets/img/deco/tile.svg) 0 0/140px 140px repeat;opacity:.05;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 55%);mask-image:linear-gradient(120deg,#000,transparent 55%)}

/* 4 · hand-drawn underline under the italic pivot word in headings */
h1 .pivot,h2 .pivot{
  background:url(/assets/img/deco/swoosh.svg) left 92%/100% .32em no-repeat;padding-bottom:.08em}
.on-green h1 .pivot,.on-green h2 .pivot{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none' fill='none' stroke='%23F1E6C8' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M4 16 C 60 6, 120 20, 180 11 S 270 8, 296 14'/%3E%3C/svg%3E")}

/* 5 · section headings get a small balloon mark */
.sec-head,.prose h2{position:relative}
.prose h2::before{
  content:"";display:inline-block;width:.9em;height:.62em;margin-right:.32em;vertical-align:.06em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 21' fill='none' stroke='%2307744C' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M6 2h18q4 0 4 4v6q0 4-4 4H12l-5 4 1-4H6q-4 0-4-4V6q0-4 4-4z'/%3E%3C/svg%3E") center/contain no-repeat}

/* 6 · footer watermark balloon */
.foot::before{
  content:"";position:absolute;right:-60px;bottom:-70px;width:340px;height:220px;z-index:0;pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 96' fill='none' stroke='%230A1628' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M22 6h96q18 0 18 18v30q0 18-18 18H64L44 90l4-18H22Q4 72 4 54V24Q4 6 22 6z'/%3E%3Ccircle cx='50' cy='39' r='4' fill='%230A1628' stroke='none'/%3E%3Ccircle cx='70' cy='39' r='4' fill='%230A1628' stroke='none'/%3E%3Ccircle cx='90' cy='39' r='4' fill='%230A1628' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}

/* 7 · image figures: a soft outline balloon peeking from behind the photo corner */
.h-fig,.ill{position:relative}
.h-fig::before{
  content:"";position:absolute;left:-18px;top:-16px;width:86px;height:56px;z-index:0;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 96' fill='none' stroke='%2307744C' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M22 6h96q18 0 18 18v30q0 18-18 18H64L44 90l4-18H22Q4 72 4 54V24Q4 6 22 6z'/%3E%3C/svg%3E") center/contain no-repeat}
.h-fig>*{position:relative;z-index:1}

@keyframes br-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
@media (max-width:600px){.hero::after{width:96px;height:62px;right:2%;top:8px;opacity:.35}.foot::before{width:220px;height:140px}}

/* dark mode: same drawings, light strokes */
@media (prefers-color-scheme:dark){
  .hero::before,.panel-cream::before{filter:invert(1);opacity:.08}
  section.alt::before{filter:invert(1);opacity:.06}
  .foot::before{filter:invert(1)}
}
/* pages with a hero photo: the photo's own peeking balloon is enough */
.hero:has(.h-fig img)::after{display:none}
/* phones: show the balloon cluster at the top-right corner instead of the (empty) middle of the drawing */
@media (max-width:700px){
  .hero::before,.panel-cream::before{background-size:760px auto;background-position:right -260px top -20px;opacity:.18;
    -webkit-mask-image:linear-gradient(200deg,#000 0,#000 25%,transparent 55%);mask-image:linear-gradient(200deg,#000 0,#000 25%,transparent 55%)}
  .panel-green::before,.appcta::before{background-size:900px auto;background-position:center;opacity:.22}
}

/* owner 6 Nov 2026 20:57: header logo bigger on desktop */
@media (min-width:900px){.top .brand{font-size:22px;gap:12px}.top .mark{width:42px;height:42px;border-radius:10px}}

/* owner 6 Nov 21:13: keep the balloon drawing (it was liked) — just sit it lower and never crop it.
   Fit the drawing to the panel height so every balloon is whole, anchored to the bottom. */
.panel-green::before,.appcta::before{background-size:auto 100%;background-position:right bottom}

/* owner 7 Nov 07:42: lines thinner, colours were clashing with the headline on phones */
.hero::before,.panel-cream::before{opacity:.11}
@media (max-width:700px){.hero::before,.panel-cream::before{opacity:.09}}