/* Home page only. Entire background remains one atmospheric, uninterrupted canvas.
   No changes to About, Magic, Spell, Potions, Fortune, Login or Members. */
body[data-page="home"] {
  background: #0b061a;
}
body[data-page="home"] .page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0d061c;
  /* Mirrored gradient: identical glows on the left and right, top and bottom. */
  background-image:
    radial-gradient(ellipse 55% 65% at 50% 50%, rgba(102, 37, 145, .42) 0%, rgba(50, 18, 80, .22) 57%, transparent 100%),
    radial-gradient(ellipse 38% 65% at 0% 50%, rgba(149, 61, 195, .45) 0%, rgba(80, 28, 127, .23) 58%, transparent 100%),
    radial-gradient(ellipse 38% 65% at 100% 50%, rgba(149, 61, 195, .45) 0%, rgba(80, 28, 127, .23) 58%, transparent 100%),
    radial-gradient(ellipse 45% 27% at 50% 0%, rgba(134, 57, 184, .30), transparent 100%),
    radial-gradient(ellipse 45% 27% at 50% 100%, rgba(134, 57, 184, .30), transparent 100%),
    linear-gradient(180deg, #0d061c 0%, #1d0b33 24%, #2a1043 50%, #1d0b33 76%, #0d061c 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
body[data-page="home"] .page-bg::before {
  content: '';
  position: absolute;
  inset: -7%;
  background:
    radial-gradient(ellipse 24% 26% at 18% 29%, rgba(178, 92, 231, .18), transparent 100%),
    radial-gradient(ellipse 24% 26% at 82% 29%, rgba(178, 92, 231, .18), transparent 100%),
    radial-gradient(ellipse 24% 26% at 18% 71%, rgba(178, 92, 231, .18), transparent 100%),
    radial-gradient(ellipse 24% 26% at 82% 71%, rgba(178, 92, 231, .18), transparent 100%),
    radial-gradient(ellipse 35% 16% at 50% 50%, rgba(211, 132, 240, .08), transparent 100%);
  animation: celestialMist 28s ease-in-out infinite alternate;
  will-change: transform;
}
body[data-page="home"] .page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  font-size: 0;
  background-image:
    radial-gradient(2px 2px at 11% 19%,rgba(255,217,155,.75) 42%,transparent 100%),
    radial-gradient(2px 2px at 76% 41%,rgba(233,205,255,.73) 42%,transparent 100%),
    radial-gradient(1px 1px at 40% 80%,rgba(255,236,196,.76) 42%,transparent 100%),
    radial-gradient(2px 2px at 92% 65%,rgba(255,207,242,.65) 42%,transparent 100%);
  background-size: 380px 490px, 500px 410px, 270px 310px, 610px 520px;
  animation: celestialStars 24s linear infinite alternate;
  opacity: .68;
  pointer-events: none;
}
body[data-page="home"] .topbar,
body[data-page="home"] main,
body[data-page="home"] .footer { position: relative; z-index: 1; }
body[data-page="home"] .topbar {
  border: 0;
  background: linear-gradient(180deg,rgba(8,4,20,.91),rgba(10,5,25,.45));
  backdrop-filter: blur(18px);
}
body[data-page="home"] .topbar .desktop-nav a.active,
body[data-page="home"] .topbar .desktop-nav a:hover {border-bottom: 0; text-shadow: 0 0 12px rgba(255,205,143,.55)}
body[data-page="home"] .hero {padding-top: 31px; padding-bottom: 55px;}
body[data-page="home"] .hero h1 {text-shadow: 0 2px 1px #693d2a,0 0 24px rgba(238,174,89,.53),0 0 50px rgba(150,87,255,.36)}
body[data-page="home"] .moon-phase {filter: drop-shadow(0 0 16px rgba(242,189,99,.55));animation: phaseGlow 6s ease-in-out infinite}
body[data-page="home"] .oracle-art img {animation: oracleFloat 8s ease-in-out infinite; filter: drop-shadow(0 12px 31px rgba(120,53,177,.55));}
body[data-page="home"] .oracle-art:before {animation: oracleHalo 9s ease-in-out infinite}
body[data-page="home"] .hero .feature-mini {background: linear-gradient(135deg,rgba(33,12,50,.8),rgba(16,7,30,.77));backdrop-filter:blur(6px)}
body[data-page="home"] .hero .feature-mini:hover {transform:translateY(-4px);box-shadow:0 10px 29px rgba(160,88,217,.25),0 0 16px rgba(237,181,97,.25)}
body[data-page="home"] .panel {transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
body[data-page="home"] .service.panel:hover,
body[data-page="home"] .experience.panel:hover {transform:translateY(-5px);box-shadow:0 16px 44px rgba(6,2,21,.53),0 0 29px rgba(201,139,244,.16)}
body[data-page="home"] .welcome,
body[data-page="home"] .cta-section {background: transparent; border: 0;}
body[data-page="home"] .welcome {position:relative;padding-block:72px}
body[data-page="home"] .welcome::before {content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 47% 65% at 63% 54%,rgba(28,10,47,.57),transparent 100%)}
body[data-page="home"] .welcome-art {background:transparent;filter:drop-shadow(0 0 28px rgba(178,94,230,.37))}
body[data-page="home"] .welcome-copy {text-shadow: 0 2px 8px #080513a6}
body[data-page="home"] .section {padding-block:75px}
body[data-page="home"] .ornament:before,
body[data-page="home"] .ornament:after {display:none}
body[data-page="home"] .service {background:linear-gradient(150deg,rgba(36,14,54,.78),rgba(12,5,27,.88))}
body[data-page="home"] .experience {background:linear-gradient(115deg,rgba(50,18,70,.8),rgba(11,6,27,.9))}
body[data-page="home"] .cta-section {padding-block:85px;background:radial-gradient(ellipse 65% 85% at 50% 50%,rgba(83,25,119,.30),transparent 100%)}
body[data-page="home"] .footer {
  border:0;
  background: linear-gradient(180deg, transparent 0%, rgba(11,5,24,.55) 22%, rgba(8,4,18,.95) 100%);
}
body[data-page="home"] .footer-last {border-top:0}
body[data-page="home"] .btn {transition:transform .22s ease,filter .22s ease,box-shadow .25s ease}
body[data-page="home"] .btn:hover {box-shadow:0 0 30px rgba(248,188,91,.55),0 0 57px rgba(166,82,211,.22)}
body[data-page="home"] .welcome-art img {animation:oracleFloat 9s ease-in-out infinite alternate}
@keyframes celestialMist {from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.035)}}
@keyframes celestialStars {from{transform:translateY(0);opacity:.55}to{transform:translateY(-25px);opacity:.82}}
@keyframes oracleFloat {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes oracleHalo {0%,100%{opacity:.56;transform:scale(.97)}50%{opacity:.88;transform:scale(1.03)}}
@keyframes phaseGlow {0%,100%{opacity:.8}50%{opacity:1}}
/* Mobile first: dark, quiet centre with photo ornaments at the edges and text at >= 15px. */
@media(max-width:767px) {
  
  body[data-page="home"] .hero {padding-top:31px}
  body[data-page="home"] .hero-grid {gap:17px}
  body[data-page="home"] .hero .feature-mini {background:linear-gradient(110deg,rgba(29,10,47,.9),rgba(13,5,31,.8))}
  body[data-page="home"] .section {padding-block:56px}
  body[data-page="home"] .welcome {padding-block:55px}
  body[data-page="home"] .cta-section {padding-block:66px}
}
/* Tablet has its own atmospheric framing with a soft centre for reading. */
@media(min-width:768px) and (max-width:1199px) {
  
  body[data-page="home"] .feature-mini {min-height:238px}
  body[data-page="home"] .hero {padding-top:42px}
}
/* Desktop preserves the three-column composition and full-width panoramic atmosphere. */
@media(min-width:1200px) {
  
  body[data-page="home"] .hero {padding-top:49px;padding-bottom:65px}
  body[data-page="home"] .hero .feature-mini {min-height:215px}
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="home"] .page-bg::before,
  body[data-page="home"] .page-bg::after,
  body[data-page="home"] .oracle-art img,
  body[data-page="home"] .oracle-art:before,
  body[data-page="home"] .moon-phase,
  body[data-page="home"] .welcome-art img {animation:none!important}
}