/* Fansite kit decoration, 5 Oct 2026 (owner: "a little bit more fun"; her picks are in ro2bot docs/DECISIONS, the
   mockup in staging/fun1005). A figure stands on a coloured circle next to a title; a small group stands on the edge
   of a card or on a line. The art is Gravity's Ragnarok Online 2 fansite kit, cut loose from its background:
   assets/kit/*.webp. Loaded after css/aegis.css, only on the pages that carry a figure. */
:root {
  --fun-cream: #ffeecb;
  --fun-sky: #d6eef8;
  --fun-leaf: #e2f1c4;
  --fun-peach: #ffd9c4;
  --fun-shadow: rgba(17, 24, 39, 0.18);
}
.deco { position: absolute; z-index: 2; max-width: none; user-select: none; -webkit-user-drag: none; }

/* A hero with figures instead of a screenshot (home, World Editor): on wide screens they stand left and right of the
   words, on narrower ones in a row under them (.hero-ground). */
.has-cast .hero-container { position: relative; margin-bottom: 44px; }
.hero-section.has-cast { padding-bottom: 64px; }
.hero-char { position: absolute; bottom: 0; display: none; }
.hero-char, .hero-char-sm { isolation: isolate; }
.hero-char img, .hero-char-sm img { position: relative; width: 100%; }
.hero-char.left { right: calc(100% - 4px); width: clamp(140px, calc((100vw - 840px) * 0.36), 225px); }
.hero-char.right { left: calc(100% - 4px); width: clamp(170px, calc((100vw - 840px) * 0.45), 275px); }
.hero-char::after { content: ''; position: absolute; z-index: -1; bottom: -9px; height: 20px; background: radial-gradient(closest-side, var(--fun-shadow), rgba(17, 24, 39, 0)); }
.hero-char.left::after { left: 14%; right: 26%; }
.hero-char.right::after { left: 38%; right: 2%; }
.hero-char::before, .hero-char-sm::before { content: ''; position: absolute; z-index: -2; left: 50%; bottom: 7%; width: 112%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--fun-cream); }
.hero-char.right::before, .hero-char-sm.right::before { background: var(--fun-sky); bottom: -2%; }
.hero-ground { display: flex; align-items: flex-end; justify-content: center; gap: clamp(24px, 10vw, 96px); max-width: 720px; margin: 0 auto; padding: 0 24px; }
.hero-char-sm { position: relative; flex: none; }
.hero-char-sm.left { width: clamp(90px, 25vw, 150px); }
.hero-char-sm.right { width: clamp(112px, 31vw, 185px); }
@media (min-width: 1180px) {
  .hero-char { display: block; }
  .hero-ground { display: none; }
  .has-cast .hero-container { margin-bottom: 0; }
  .hero-section.has-cast { padding-bottom: 88px; }
}
/* the World Editor page: the Pukui hut and the Recruit */
.hero-section.editor-hero { padding-top: 168px; }
.hero-char.hut { width: clamp(150px, calc((100vw - 840px) * 0.38), 235px); }
.hero-char.recruit { width: clamp(110px, calc((100vw - 840px) * 0.24), 150px); }
.hero-char.hut::before, .hero-char-sm.hut::before { background: var(--fun-leaf); bottom: -8%; width: 104%; }
.hero-char.recruit::before, .hero-char-sm.recruit::before { background: var(--fun-peach); bottom: 2%; width: 118%; }
.hero-char.hut::after { left: 8%; right: 8%; }
.hero-char.recruit::after { left: 22%; right: 22%; }
.shot { margin: 0; min-width: 0; }
.shot img { width: 100%; }
.shot figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--text-muted); text-align: center; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gen-grid { display: grid; grid-template-columns: 1.196fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 992px) { .shot-pair, .gen-grid { grid-template-columns: 1fr; } }

/* The break under a hero: the white ends in a soft curve on the grey band of the next section. */
.curve-top { position: relative; background: var(--bg-gray); padding-top: calc(96px + clamp(20px, 3vw, 40px)); }
.curve-top::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: clamp(36px, 5vw, 68px); background: var(--bg-main); border-radius: 0 0 50% 50% / 0 0 100% 100%; }

/* home: the Pirate Cat reads the paper on top of the first news post */
.news-wrap { position: relative; }
.news-cat { right: 28px; bottom: calc(100% - 7px); width: clamp(84px, 9vw, 112px); }
/* home: two text-only cards get a mascot standing on the card's bottom edge */
.bento-card.has-mascot { flex-direction: row; align-items: flex-end; }
.bento-card.has-mascot .bento-content { padding-right: 16px; align-self: center; }
.bento-card img.mascot { flex: none; width: auto; height: 170px; margin: 24px 32px 0 0; border: 0; }
/* home: the boss Pukui sit on the line above the numbers; the section before leaves room for them */
#lore { position: relative; }
.stats-boss { left: 50%; translate: -50% 0; bottom: calc(100% - 15px); width: clamp(170px, 18vw, 220px); }
.home-editor { padding-bottom: 150px; }
/* footer: the cats come to play above the Discord link */
.footer-mascot { width: 230px; margin: -8px auto 22px; }

/* Inner pages: one figure on a coloured circle next to the page title. */
.page-head { display: flex; align-items: flex-end; gap: clamp(12px, 3vw, 28px); }
.page-head-text { flex: 1; min-width: 0; }
.page-fig { position: relative; isolation: isolate; flex: none; width: clamp(84px, 22vw, 140px); margin: 0 clamp(6px, 2vw, 18px) 0 0; }
.page-fig.tall { width: clamp(62px, 16vw, 108px); }
.page-fig.tower { width: clamp(40px, 10vw, 58px); margin-right: clamp(22px, 5vw, 44px); }
.page-fig img { position: relative; width: 100%; }
.page-fig::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: 3%; width: 122%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--fun-cream); }
.page-fig.sky::before { background: var(--fun-sky); }
.page-fig.leaf::before { background: var(--fun-leaf); }
.page-fig.peach::before { background: var(--fun-peach); }
.page-fig.tower::before { width: 230%; }
.page-fig.plain::before { content: none; }
.prose .page-fig { margin-bottom: 2rem; }
.page-fig.on-list { margin-bottom: -31px; z-index: 2; }
.page-fig.center { margin: 0 auto 22px; width: clamp(110px, 26vw, 150px); }
.page-fig.center::before { width: 106%; bottom: -8%; }
.signin .page-fig { width: clamp(84px, 24vw, 112px); margin-bottom: 6px; }
/* long page titles: the line spacing of .prose is very wide once a title wraps */
.prose h1 { line-height: 1.2; }
/* a small group sits on the line of a section heading (The Story, Upcoming) */
.prose h2.has-mascot { position: relative; padding-right: clamp(104px, 26vw, 168px); }
.h2-mascot { position: absolute; right: 4px; bottom: -7px; width: auto; height: auto; max-width: clamp(96px, 24vw, 150px); max-height: clamp(64px, 16vw, 86px); }

@media (max-width: 768px) {
  .bento-card img.mascot { height: 140px; margin-right: 20px; }
  .bento-card.has-mascot .bento-content { padding: 28px 12px 28px 24px; }
  .news-cat { right: 14px; }
}

/* a small hop when you point at one of them */
@media (prefers-reduced-motion: no-preference) {
  .deco, .mascot, .hero-char img, .hero-char-sm img, .footer-mascot, .page-fig img, .h2-mascot { transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .deco:hover, .mascot:hover, .hero-char img:hover, .hero-char-sm img:hover, .footer-mascot:hover, .page-fig img:hover, .h2-mascot:hover { transform: translateY(-6px) rotate(-2deg); }
}