/* Polish layer: floating photos, torn-paper edges, paper grain, sticker stats, doodles.
   Loaded last. Everything that moves is switched off for reduced-motion users. */

/* ---------- Floating photos ---------- */
/* A registered property lets the float animate independently of each photo's tilt and parallax. */
@property --fy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes bob { 0%, 100% { --fy: 0px; } 50% { --fy: -12px; } }
@keyframes bob-shadow {
  0%, 100% { box-shadow: 0 1px 2px rgba(42,32,36,.12), 0 14px 28px -14px rgba(42,32,36,.45); }
  50% { box-shadow: 0 1px 2px rgba(42,32,36,.08), 0 30px 40px -18px rgba(42,32,36,.32); }
}
.float {
  --px: 0px; --py: 0px;
  translate: var(--px) calc(var(--py) + var(--fy));
  transition: translate .6s cubic-bezier(.2,.8,.2,1);
  animation: bob var(--dur, 7s) ease-in-out var(--delay, 0s) infinite, bob-shadow var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
}
/* Hero snapshots drop in first, then start floating. */
.js.ready .scrapbook .snap.float { animation: dropIn .8s cubic-bezier(.2,.9,.25,1.2) both, bob var(--dur, 7s) ease-in-out calc(var(--delay, 0s) + 1.2s) infinite, bob-shadow var(--dur, 7s) ease-in-out calc(var(--delay, 0s) + 1.2s) infinite; }
.js.ready .scrapbook .s1 { --dur: 7.5s; --delay: .3s; }
.js.ready .scrapbook .s2 { --dur: 6.2s; --delay: .5s; }
.js.ready .scrapbook .s3 { --dur: 8.4s; --delay: .7s; }
.js.ready .scrapbook .sticky.float { animation: fadeUp .6s .55s both, bob 5.6s ease-in-out 1.2s infinite; }
.snap.float:hover { animation-play-state: paused; }

/* ---------- Paper grain over the whole page ---------- */
body {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Torn-paper edges on coloured sections ---------- */
:root {
  --torn-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 L0 9 L15 8 L30 5 L45 9 L60 13 L75 3 L90 4 L105 11 L120 4 L135 8 L150 12 L165 3 L180 11 L195 6 L210 3 L225 4 L240 9 L255 9 L270 4 L285 6 L300 4 L315 11 L330 9 L345 3 L360 12 L375 4 L390 6 L405 13 L420 13 L435 12 L450 3 L465 12 L480 12 L495 9 L510 3 L525 6 L540 3 L555 11 L570 5 L585 7 L600 9 L600 20Z'/%3E%3C/svg%3E");
  --torn-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 11 L15 12 L30 13 L45 17 L60 12 L75 12 L90 13 L105 14 L120 8 L135 7 L150 17 L165 13 L180 12 L195 15 L210 14 L225 17 L240 7 L255 6 L270 12 L285 9 L300 7 L315 6 L330 13 L345 17 L360 16 L375 15 L390 5 L405 14 L420 11 L435 12 L450 15 L465 16 L480 14 L495 15 L510 7 L525 14 L540 5 L555 13 L570 6 L585 5 L600 11 L600 0Z'/%3E%3C/svg%3E");
}
.section-sun, .section-leaf, .section-paper {
  -webkit-mask: var(--torn-top) top / 600px 20px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 38px) no-repeat, var(--torn-bottom) bottom / 600px 20px repeat-x;
          mask: var(--torn-top) top / 600px 20px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 38px) no-repeat, var(--torn-bottom) bottom / 600px 20px repeat-x;
  position: relative;
}
.section-paper { background: #FFFDF8; }

/* ---------- Stats as taped sticky notes ---------- */
.stats { border: 0; background: none; overflow: visible; gap: clamp(14px, 2vw, 24px); }
.stat {
  background: var(--paper-warm); border: 0 !important; border-radius: 4px; position: relative; text-align: center;
  padding: clamp(24px, 3vw, 34px) 16px clamp(20px, 2.6vw, 28px);
  box-shadow: 0 1px 2px rgba(42,32,36,.1), 0 16px 28px -16px rgba(42,32,36,.45);
}
.stat::before { content: ""; position: absolute; top: -11px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%) rotate(-3deg); background: rgba(244,205,24,.65); }
.stat:nth-child(1) { rotate: -2deg; } .stat:nth-child(2) { rotate: 1.5deg; background: #FFF4F6; }
.stat:nth-child(3) { rotate: -1deg; background: #F1F8FB; } .stat:nth-child(4) { rotate: 2deg; background: #F7F1F4; }
.stat:nth-child(2)::before { background: rgba(217,72,111,.45); } .stat:nth-child(3)::before { background: rgba(140,203,224,.75); } .stat:nth-child(4)::before { background: rgba(93,66,81,.35); }
.stat b { font-size: clamp(2.6rem, 5vw, 3.8rem); margin-bottom: 4px; }
.stat span { font: 700 1.3rem/1.15 var(--font-hand); color: var(--ink-2); }
.stats .stat { animation: bob 6.5s ease-in-out infinite; translate: 0 var(--fy); }
.stats .stat:nth-child(2) { animation-duration: 7.4s; animation-delay: -2s; }
.stats .stat:nth-child(3) { animation-duration: 5.8s; animation-delay: -4s; }
.stats .stat:nth-child(4) { animation-duration: 8s; animation-delay: -1s; }
@media (max-width: 760px) { .stats { row-gap: 26px; } }

/* ---------- Hero decoration: colour blob and doodles ---------- */
.hero { overflow: hidden; }
.scrapbook::before {
  content: ""; position: absolute; inset: 6% -4% 2% 2%; z-index: -1;
  background: radial-gradient(circle at 30% 30%, rgba(244,205,24,.55), transparent 60%), radial-gradient(circle at 75% 70%, rgba(217,72,111,.28), transparent 62%), radial-gradient(circle at 80% 20%, rgba(140,203,224,.45), transparent 55%);
  filter: blur(18px); border-radius: 50%;
  animation: blob 14s ease-in-out infinite alternate;
}
@keyframes blob { to { transform: scale(1.08) rotate(8deg); border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; } }
.doodle { position: absolute; pointer-events: none; z-index: 4; color: var(--rose); }
.doodle path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.doodle.heart { width: 46px; left: 46%; top: -4%; rotate: 14deg; }
.doodle.star { width: 38px; right: -2%; top: 46%; color: var(--sun-deep); rotate: -10deg; }
.doodle.loop { width: 120px; left: -6%; top: 36%; color: var(--leaf); rotate: -8deg; }
.doodle.sparkle { width: 30px; left: 55%; bottom: 4%; color: #2E86A6; }
.js.ready .doodle path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawline 1.2s .8s ease forwards; }
.js.ready .doodle.star path, .js.ready .doodle.sparkle path { animation-delay: 1.1s; }
@keyframes drawline { to { stroke-dashoffset: 0; } }
.doodle.heart, .doodle.star { animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: translateY(-6px) rotate(6deg); } }
@media (max-width: 880px) { .doodle.loop { display: none; } .doodle.heart { left: 40%; top: -2%; } }

/* Hand-drawn note pointing at the photos (desktop only) */
.hero-note { position: absolute; left: -16%; top: 6%; font: 700 1.45rem/1.05 var(--font-hand); color: var(--leaf-deep); rotate: -8deg; width: 130px; text-align: center; z-index: 4; opacity: 0; }
.js.ready .hero-note { animation: fadeUp .6s 1.1s both; }
@media (max-width: 1100px) { .hero-note { display: none; } }

/* ---------- Livelier cards and buttons ---------- */
.help-card { position: relative; }
.help-card::after { content: ""; position: absolute; inset: auto 18px 0; height: 3px; border-radius: 3px; background: currentColor; opacity: 0; transform: scaleX(.3); transition: opacity .25s, transform .3s; color: var(--leaf); }
.help-card:hover::after { opacity: .5; transform: scaleX(1); }
.help-card:hover .num { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { rotate: -8deg; } 75% { rotate: 6deg; } }
.btn-sun:hover .ic { animation: beat 1s ease-in-out infinite; }
.photo-card, .snap, .guide { will-change: transform; }
.photo-card img, .guide .cover img { transition: transform .5s ease, filter .5s ease; }
.photo-card:hover img { transform: scale(1.03); filter: saturate(1.12); }
.photo-card { overflow: hidden; }

/* Gentle float for feature photos further down the page */
.split-media img, .awards img, .page-hero-grid img { animation: bob 8s ease-in-out infinite; translate: 0 var(--fy); }
.awards img { animation-duration: 9s; animation-delay: -3s; }

/* Centered section heads get a small hand-drawn squiggle */
.section-head.center h2::after {
  content: ""; display: block; width: 120px; height: 12px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 7c10-6 18 6 28 0s18 6 28 0 18 6 28 0 18 6 28 0' fill='none' stroke='%23D9486F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .float, .stats .stat, .split-media img, .awards img, .page-hero-grid img, .scrapbook::before, .doodle { animation: none !important; }
  .js.ready .doodle path { stroke-dashoffset: 0; animation: none; }
  .hero-note { opacity: 1; }
}

/* The sticky note's tilt lives in `rotate` so its entrance animation can't reset it. */
.scrapbook .sticky { transform: none; rotate: 3deg; }

/* ---------- Language switch ---------- */
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-warm); border: 1.5px solid var(--line); gap: 2px; }
.lang button { border: 0; background: none; cursor: pointer; padding: 7px 11px; border-radius: 999px; font: 800 .85rem/1 var(--font-display); color: var(--ink-2); min-height: 34px; transition: background .2s, color .2s; }
.lang button[lang="am"] { font-family: var(--font-ethiopic); font-weight: 700; }
.lang button[aria-pressed="true"] { background: var(--leaf); color: #fff; }
@media (max-width: 1140px) { .lang { align-self: flex-start; } .lang button { padding: 10px 16px; font-size: 1rem; } }
.lang-note { position: fixed; left: 16px; bottom: 16px; z-index: 56; max-width: 330px; margin: 0; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font-size: .88rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
.lang-note.show { opacity: 1; transform: none; }
.lang-note span { display: block; font-family: var(--font-ethiopic); font-weight: 700; margin-bottom: 2px; }
/* Ge'ez script reads better slightly larger and looser */
:lang(am) body { line-height: 1.75; }
:lang(am) h1, :lang(am) h2, :lang(am) h3 { letter-spacing: 0; line-height: 1.25; }
:lang(am) .eyebrow, :lang(am) .stat span, :lang(am) .photo-card h3 { font-size: 1.15rem; }
:lang(am) .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }

/* ---------- Textured section backgrounds (no glows) ---------- */
:root {
  /* Fine paper fibres */
  --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Watercolour-paper mottling */
  --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .25 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* Linen weave */
  --tex-linen: repeating-linear-gradient(0deg, rgba(90,70,50,.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(90,70,50,.04) 0 1px, transparent 1px 5px);
}

/* Cream sections: linen weave over fibrous paper. */
main > .section:not(.section-paper):not(.section-sun):not(.section-leaf),
main > .section-tight,
.page-hero, .hero, .article-head {
  background-color: var(--cream);
  background-image: var(--tex-fibre), var(--tex-linen);
}

/* Paper sections: mottled watercolour paper. */
.section-paper {
  background-color: #FFFBF2;
  background-image: var(--tex-fibre), var(--tex-mottle);
}

/* Yellow bands: kraft-yellow paper with confetti. */
.section-sun {
  background-color: #F8E7A6;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg opacity='.6'%3E%3Ccircle cx='20' cy='30' r='4' fill='%23D9486F'/%3E%3Crect x='120' y='18' width='12' height='4' rx='2' transform='rotate(30 126 20)' fill='%233F7334'/%3E%3Ccircle cx='210' cy='60' r='3' fill='%23488FA8'/%3E%3Cpath d='M70 110l5 9 9-5' fill='none' stroke='%235D4251' stroke-width='2.5' stroke-linecap='round'/%3E%3Crect x='170' y='140' width='12' height='4' rx='2' transform='rotate(-25 176 142)' fill='%23D9486F'/%3E%3Ccircle cx='40' cy='200' r='3.5' fill='%233F7334'/%3E%3Ccircle cx='130' cy='220' r='2.5' fill='%235D4251'/%3E%3Crect x='225' y='210' width='10' height='4' rx='2' transform='rotate(60 230 212)' fill='%23488FA8'/%3E%3C/g%3E%3C/svg%3E"),
    var(--tex-fibre), var(--tex-mottle);
}

/* Green bands: a cotton weave like shemma cloth, with a woven tibeb band along the bottom. */
.section-leaf {
  background-color: #2E5826;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    var(--tex-fibre);
}

/* Footer: deep plum cloth. */
.site-footer {
  background-color: var(--plum-deep);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}

/* Behind the hero photos: a torn kraft-paper scrapbook page instead of a glow. */
.scrapbook::before {
  inset: 4% -2% 6% 6%; filter: none; border-radius: 3px; rotate: 2.5deg;
  background-color: #E4CFA6;
  background-image: var(--tex-fibre), var(--tex-mottle);
  box-shadow: 0 1px 2px rgba(42,32,36,.15), 0 22px 40px -24px rgba(42,32,36,.55);
  -webkit-mask: var(--torn-top) top / 600px 16px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 30px) no-repeat, var(--torn-bottom) bottom / 600px 16px repeat-x;
          mask: var(--torn-top) top / 600px 16px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 30px) no-repeat, var(--torn-bottom) bottom / 600px 16px repeat-x;
  animation: none;
}

/* Page heroes: flat paper scraps instead of soft blobs. */
.page-hero::after { background: #F8E7A6; background-image: var(--tex-fibre); border-radius: 3px; rotate: 12deg; width: 240px; right: -60px; top: -50px; }
.page-hero::before { background: #F6D9E0; background-image: var(--tex-fibre); border-radius: 3px; rotate: -10deg; width: 140px; }