/* =========================================================
   🦋 AURELLE — THE MOONBOUND WANDERER
   =========================================================

   Name: Aurelle
   Title: The Moonbound Wanderer
   Home: A Light out of Reach — The Celestial Garden

   Born beneath a silver sky, Aurelle discovered a light
   unlike any other. It did not burn. It did not demand.
   It simply shone.

   Through quiet gardens and endless nights, she followed
   the moon's gentle radiance, her stained-glass wings
   catching silver light along the way.

   The moon remains distant, but Aurelle's journey is her own.
   Some journeys are measured not by the distance travelled,
   but by the light that guides them.

   ========================================================= */

:root { color-scheme: dark; }
.theme-aurelle {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 34px 16px 72px;
  color: #e9e6f3;
  font-family: Georgia, 'Times New Roman', serif;
  background: radial-gradient(ellipse at 50% 6%, rgba(102,116,183,.22), transparent 48%), linear-gradient(160deg,#070b19,#10152c 55%,#080b18);
  background-attachment: fixed;
}
.theme-aurelle *, .theme-aurelle *::before, .theme-aurelle *::after { box-sizing: border-box; }
.theme-aurelle .poem-page { max-width: 780px; margin: 0 auto; }
.theme-aurelle .back-link { display: inline-block; margin-bottom: 24px; color: #c3c6e8; text-decoration: none; }
.theme-aurelle .back-link:hover { text-decoration: underline; color: #fff; }
.theme-aurelle .back-link:focus-visible, .aurelle:focus-visible { outline: 2px solid #d7caff; outline-offset: 5px; }
.theme-aurelle .full-poem {
  padding: clamp(30px, 6vw, 58px) clamp(20px, 6vw, 58px);
  border-radius: 13px;
  border: 1px solid rgba(166,177,230,.33);
  background: linear-gradient(155deg,rgba(17,22,45,.95),rgba(8,13,30,.98));
  box-shadow: 0 20px 65px rgba(0,0,0,.24),inset 0 0 45px rgba(107,113,181,.06);
  overflow: hidden;
}
.theme-aurelle .poem-category { margin: 0; text-align: center; font-size: .72rem; letter-spacing: .23em; line-height: 1.6; color: #b6bde9; }
.theme-aurelle h1 { margin: 12px 0; text-align: center; font-size: clamp(1.9rem,5.7vw,2.9rem); font-weight: normal; color: #f1eeff; text-shadow: 0 0 25px rgba(200,205,255,.15); }
.aurelle-intro { text-align: center; font-size: .91rem; line-height: 1.7; font-style: italic; color: #b5b5d1; margin: 0 0 16px; }
.celestial-garden {
  position: relative;
  width: 100%;
  height: clamp(310px, 65vw, 390px);
  max-width: 580px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 48% 48% 8px 8px / 20% 20% 8px 8px;
  background: radial-gradient(ellipse at 50% 20%,rgba(160,172,228,.11),transparent 46%),linear-gradient(180deg,#090f25 0%,#111631 64%,#121428 100%);
  border: 1px solid rgba(174,181,229,.16);
}
.garden-stars { position: absolute; inset: 0; opacity: .8; pointer-events: none;
  background-image: radial-gradient(circle at 15% 19%,#d6d5f8 1px,transparent 2px),radial-gradient(circle at 83% 14%,#d6d5f8 1px,transparent 2px),radial-gradient(circle at 28% 44%,#c8c4ec 1px,transparent 2px),radial-gradient(circle at 75% 49%,#d6d5f8 1px,transparent 2px),radial-gradient(circle at 10% 69%,#c8c4ec 1px,transparent 2px),radial-gradient(circle at 90% 72%,#c8c4ec 1px,transparent 2px);
}
.distant-moon {
  position: absolute; z-index: 2;
  top: 11%; left: 50%; transform: translateX(-50%);
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,#fffefd 0%,#f0efff 42%,#c8d3ed 80%,#aab6d6 100%);
  box-shadow: 0 0 20px rgba(228,224,255,.5),0 0 62px rgba(189,190,251,.22),0 0 110px rgba(159,171,243,.11);
}
.moonlight-path { position: absolute; z-index: 1; top: 25%; left: 50%; transform: translateX(-50%); width: 64%; height: 69%; pointer-events: none; background: linear-gradient(180deg,rgba(207,210,255,.1),transparent 85%); clip-path: polygon(43% 0,57% 0,100% 100%,0 100%); }
.aurelle {
  position: absolute; z-index: 4; left: 50%; top: 62%; transform: translate(-50%,-50%);
  width: 100px; height: 85px; padding: 0; border: 0; background: transparent; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(195,173,255,.34));
  -webkit-tap-highlight-color: transparent;
}
.aurelle svg { width: 100%; height: 100%; overflow: visible; }
.aurelle .wing-left, .aurelle .wing-right { transform-box: fill-box; transition: filter .6s ease; }
.aurelle.in-flight { animation: aurelle-flight 2.4s ease-in-out both; filter: drop-shadow(0 0 17px rgba(228,208,255,.72)); }
.aurelle.in-flight .wings { filter: brightness(1.3); }
@keyframes aurelle-flight {
  0%,100% { transform: translate(-50%,-50%) rotate(-2deg); }
  48% { transform: translate(-50%,-112%) rotate(3deg); }
}
.garden-silhouette { position: absolute; z-index: 3; inset: auto 0 0; height: 23%; pointer-events: none;
  background: radial-gradient(ellipse at 22% 100%,#161b2d 0 33%,transparent 34%),radial-gradient(ellipse at 72% 110%,#171b30 0 43%,transparent 44%),linear-gradient(0deg,#0b1020,transparent);
}
.flower { position: absolute; color: #7886b1; font-size: 23px; opacity: .65; }
.flower-one { left: 15%; top: 12%; } .flower-two { left: 70%; top: 28%; font-size: 18px; } .flower-three { left: 85%; top: 6%; font-size: 16px; }
.aurelle-caption { margin: 14px 0 24px; color: #adb4db; font-size: .77rem; letter-spacing: .1em; text-align: center; }
.aurelle-divider { width: 86px; height: 1px; margin: 0 auto 30px; background: linear-gradient(90deg,transparent,#aab3e0,transparent); }
.theme-aurelle .poem-text { white-space: pre-line; max-width: 530px; margin: 0 auto; color: #e3e3f1; font-size: 17px; line-height: 2; text-align: left; }
@media (max-width: 600px) {
  .theme-aurelle { padding: 25px 14px 55px; }
  .theme-aurelle .full-poem { padding: 32px 18px; }
  .theme-aurelle .poem-text { font-size: 16px; line-height: 1.9; }
  .distant-moon { width: 67px; height: 67px; }
  .aurelle { width: 88px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurelle.in-flight { animation: none; transform: translate(-50%,-50%); }
}