/*
Theme Name: Moonlit Atlas
Theme URI: https://moonlitatlas.com
Author: Moonlit Atlas
Description: A celestial block theme for Moonlit Atlas - printable moon phases, star maps and celestial wall art. Nebula Bloom aesthetic: cosmic-black sky, drifting violet/magenta/cyan nebulae, glass and starlight.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moonlit-atlas
*/

:root{
  --ma-ink:#070314;
  --ma-magenta:#ff2d95;
  --ma-violet:#7b2ff7;
  --ma-cyan:#00d4ff;
  --ma-amber:#ffb347;
}

body{ position:relative; background-color:var(--ma-ink); }

/* keep real content above the cosmic backdrop */
.wp-site-blocks{ position:relative; z-index:1; }

/* ---------- COSMIC BACKDROP (injected at wp_footer) ---------- */
.ma-cosmos{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%, #1a0b3a 0%, #0c0622 50%, #070314 100%); }

.ma-cosmos .ma-blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; mix-blend-mode:screen; }
.ma-cosmos .b1{ width:48vw; height:48vw; left:-12vw; top:-14vw; background:radial-gradient(circle,var(--ma-violet),transparent 65%); animation:maf1 24s ease-in-out infinite; }
.ma-cosmos .b2{ width:44vw; height:44vw; right:-12vw; top:-6vw; background:radial-gradient(circle,var(--ma-magenta),transparent 65%); animation:maf2 30s ease-in-out infinite; }
.ma-cosmos .b3{ width:40vw; height:40vw; left:28%; top:34%; background:radial-gradient(circle,var(--ma-cyan),transparent 65%); animation:maf3 28s ease-in-out infinite; opacity:.4; }
.ma-cosmos .b4{ width:36vw; height:36vw; right:6%; bottom:-14vw; background:radial-gradient(circle,var(--ma-amber),transparent 65%); animation:maf1 26s ease-in-out infinite; opacity:.32; }
@keyframes maf1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.12)}}
@keyframes maf2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,50px) scale(1.1)}}
@keyframes maf3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-50px) scale(1.15)}}

.ma-cosmos .ma-stars{ position:absolute; inset:0; animation:matw 5s ease-in-out infinite;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 28%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 72% 62%,#fff,transparent),
    radial-gradient(1px 1px at 44% 82%,#cdb8ff,transparent),
    radial-gradient(1.6px 1.6px at 86% 22%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 58% 14%,#fff,transparent),
    radial-gradient(1px 1px at 30% 60%,#9ad6ff,transparent),
    radial-gradient(1.3px 1.3px at 9% 74%,#fff,transparent);
  background-size:380px 380px; }
@keyframes matw{0%,100%{opacity:.5}50%{opacity:1}}

.ma-cosmos .ma-grain{ position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- TYPE ACCENTS ---------- */
.ma-eyebrow{ font-family:"Hanken Grotesk",sans-serif; text-transform:uppercase; letter-spacing:.34em;
  font-size:.72rem; font-weight:600; color:var(--ma-amber); }

/* gradient starlight headline (hero / section accents) */
.ma-hero-title, .ma-grad{
  background:linear-gradient(120deg,#fff 8%,#e9c6ff 45%,#9ad6ff 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ma-hero-title em, .ma-grad em{
  font-style:italic;
  background:linear-gradient(120deg,#ffb347,#ff2d95);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* gold/violet hairline */
.ma-rule{ height:1px; border:0; background:linear-gradient(90deg,transparent,rgba(123,47,247,.6),rgba(255,45,149,.4),transparent); }

/* moon-phase glyph row */
.ma-moons{ display:flex; gap:clamp(10px,3vw,30px); justify-content:center; align-items:center;
  font-size:clamp(20px,3vw,30px); filter:drop-shadow(0 0 10px rgba(255,179,71,.5)); }

/* ---------- GLASS SURFACES ---------- */
.ma-glass{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:26px;
  box-shadow:0 30px 90px -30px rgba(123,47,247,.5);
}

.ma-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:20px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s;
}
.ma-card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,45,149,.45);
  box-shadow:0 30px 70px -30px rgba(123,47,247,.7), 0 0 0 1px rgba(255,45,149,.15);
}

/* ---------- BUTTONS: aurora pill ---------- */
.wp-block-button__link{
  background:linear-gradient(120deg,#ff2d95,#7b2ff7) !important;
  color:#fff !important;
  box-shadow:0 14px 50px -16px rgba(255,45,149,.7);
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.wp-block-button__link:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 18px 56px -16px rgba(255,45,149,.85); }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent !important; color:#f3eeff !important;
  border:1px solid rgba(255,255,255,.28); box-shadow:none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ border-color:var(--ma-magenta); }

/* animated underline links */
.entry-content a, .ma-link a, .ma-link{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s ease;
}
.entry-content a:hover, .ma-link a:hover, .ma-link:hover{ background-size:100% 1px; }

/* page-load reveal */
@media (prefers-reduced-motion: no-preference){
  .ma-reveal > *{ opacity:0; transform:translateY(18px); animation:ma-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .ma-reveal > *:nth-child(1){ animation-delay:.05s; }
  .ma-reveal > *:nth-child(2){ animation-delay:.18s; }
  .ma-reveal > *:nth-child(3){ animation-delay:.31s; }
  .ma-reveal > *:nth-child(4){ animation-delay:.44s; }
  .ma-reveal > *:nth-child(5){ animation-delay:.57s; }
  @keyframes ma-rise{ to{ opacity:1; transform:none; } }
}

@media (max-width:781px){
  .ma-glass{ border-radius:18px; }
}