/* moon.css · Waymark Perfumers · XVIII, The Moon · "Moonlit fog on the quay"
   Extends arcana.css: overrides its --arc-* tokens on [data-brand="the-moon"], adds the --brand-*
   extras arcana-brand.css reads, then the signature: fog banks drifting across a night-plum quay, a
   title that condenses out of the mist and lies reflected in still harbour water, and lamplight that
   warms whatever you point at. No moons, no stars. Fonts are SIL OFL, self-hosted. */
/* fonts:begin Italiana, Manrope */
@font-face { font-family:"Italiana"; font-style:normal; font-weight:400; font-display:swap; src:url("../../fonts/brands/italiana-normal-400.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Manrope"; font-style:normal; font-weight:300 700; font-display:swap; src:url("../../fonts/brands/manrope-normal-300-700.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* fonts:end */

[data-brand="the-moon"] {
  --arc-paper: #16111f;
  --arc-surface: #1d1628;
  --arc-wash: #221a2e;
  --arc-ink: #f1ece4;
  --arc-muted: #b8afcc;
  --arc-line: #3a2f4a;
  --arc-accent: #edc688;
  --arc-on-accent: #16111f;
  --arc-focus: #a993db;
  --arc-display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --arc-body: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --arc-radius: 2px;
  --brand-mono: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --brand-accent-2: #a993db;
  --brand-display-weight: 400;
  --brand-track: .01em;
  --brand-title-size: clamp(3.2rem, 1.4rem + 7.4vw, 8.5rem);
  --brand-title-lh: .98;
  --brand-button-radius: 999px;
  --brand-enter: moon-condense;
  --brand-ease: cubic-bezier(.22, .61, .36, 1);
  --brand-texture:
    radial-gradient(120% 40% at 20% 0%, rgba(184, 175, 204, .07), transparent 70%),
    radial-gradient(90% 30% at 85% 35%, rgba(142, 116, 200, .06), transparent 70%);
  --brand-bezel: #0f0b16;
  --brand-bezel-edge: #3a2f4a;
  --brand-bezel-ink: #b8afcc;
  --brand-glow: rgba(237, 198, 136, .4);
  --brand-wallpaper:
    radial-gradient(3px 60px at 22% 71%, rgba(237, 198, 136, .55), transparent),
    radial-gradient(3px 90px at 58% 73%, rgba(237, 198, 136, .45), transparent),
    radial-gradient(3px 50px at 81% 70%, rgba(237, 198, 136, .5), transparent),
    radial-gradient(circle at 22% 62%, #ffe3ae 0 3px, rgba(237, 198, 136, .35) 4px, transparent 26px),
    radial-gradient(circle at 58% 60%, #ffe3ae 0 4px, rgba(237, 198, 136, .35) 5px, transparent 34px),
    radial-gradient(circle at 81% 63%, #ffe3ae 0 3px, rgba(237, 198, 136, .35) 4px, transparent 22px),
    radial-gradient(80% 14% at 30% 48%, rgba(184, 175, 204, .22), transparent 70%),
    radial-gradient(70% 12% at 75% 38%, rgba(184, 175, 204, .16), transparent 70%),
    linear-gradient(#16111f 0 66%, #271e33 66% 66.4%, #110d18 66.4%);
}

/* Signature: drifting fog, a still-water reflection, lamplight on hover. */
[data-brand="the-moon"] .abr-head { overflow: hidden; }
[data-brand="the-moon"] .abr-head::before {
  content: ""; position: absolute; inset: 0 -50%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 18% at 20% 30%, rgba(184, 175, 204, .13), transparent 70%),
    radial-gradient(35% 14% at 60% 62%, rgba(184, 175, 204, .1), transparent 70%),
    radial-gradient(30% 12% at 85% 20%, rgba(142, 116, 200, .12), transparent 70%);
  animation: moon-drift 38s ease-in-out infinite alternate;
}
[data-brand="the-moon"] .abr-head > .abr-shell { position: relative; z-index: 1; }
[data-brand="the-moon"] .abr-title { -webkit-box-reflect: below -.12em linear-gradient(rgba(0, 0, 0, .22), transparent 16%); }
[data-brand="the-moon"] .abr-tagline { margin-block-start: 2rem; font-family: var(--arc-body); font-weight: 300; font-size: clamp(1.15rem, .9rem + 1vw, 1.6rem); letter-spacing: .04em; }
[data-brand="the-moon"] .abr-card__num { border-color: var(--arc-accent); box-shadow: 0 0 18px -4px var(--brand-glow); }
[data-brand="the-moon"] .abr-card__dot { box-shadow: 0 0 10px 2px var(--brand-glow); animation: moon-lamp 5s ease-in-out infinite; }
[data-brand="the-moon"] .abr-button { font-weight: 600; letter-spacing: .06em; }
[data-brand="the-moon"] .abr-button[data-kind="ghost"] { border-color: rgba(241, 236, 228, .35); }
@media (hover: hover) {
  [data-brand="the-moon"] .abr-button:hover { box-shadow: 0 0 0 6px rgba(237, 198, 136, .12), 0 12px 40px -8px var(--brand-glow); }
}
[data-brand="the-moon"] .abr-tier { border-color: var(--arc-line); box-shadow: inset 0 0 0 5px var(--arc-paper), inset 0 0 0 6px rgba(237, 198, 136, .28); }
[data-brand="the-moon"].abr-tile::after {
  content: ""; position: absolute; inset: -30% -30% auto auto; inline-size: 70%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(237, 198, 136, .28), transparent 62%);
  opacity: .35; transition: opacity .6s var(--brand-ease);
}
@media (hover: hover) {
  [data-brand="the-moon"].abr-tile:hover::after { opacity: 1; animation: moon-lamp 2.4s ease-in-out infinite; }
  [data-brand="the-moon"].abr-tile:hover { box-shadow: 0 0 0 1px rgba(237, 198, 136, .5), 0 24px 60px -24px var(--brand-glow); }
}

@keyframes moon-condense { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } 60% { filter: blur(2px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes moon-drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes moon-lamp { 0%, 100% { opacity: 1; } 47% { opacity: .78; } 52% { opacity: .95; } }