@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
	
html, body {
	height: 100%;
}

/* Magical background around the page */

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;

    /* Deep magical purple sky, now with smoother vertical blend */
    background:
        /* smooth vertical wash to remove the hard line */
        linear-gradient(
            to bottom,
            #120027 0%,
			#4c0d7a 40%,
            #2a0552 70%,
			#120027 100%
            /*ff7be6 100%*/
        ),
        /* sparkly orbs & stars underneath */
        radial-gradient(circle at 10% 0%, #7f4cff 0%, transparent 55%),
        radial-gradient(circle at 90% 0%, #ff7be6 0%, transparent 60%),
        radial-gradient(circle at 50% 100%, #2b0a47 0%, #070018 55%, #020009 100%);
        
    color: #2a1f14;
    font-family: 'Crimson Pro', serif;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

/* body {
	display: flex;
	flex-direction: column;      /* ⬅ stack page + footer vertically 
	align-items: center;		/* center horizontally 
	justify-content: flex-start;	/* vertically center the whole stack 
	min-height: 100vh;

    /* Deep magical purple gradient sky
    background:
        radial-gradient(circle at 10% 0%, #7f4cff 0%, transparent 55%),
        radial-gradient(circle at 90% 0%, #ff7be6 0%, transparent 60%),
        radial-gradient(circle at 50% 100%, #2b0a47 0%, #070018 55%, #020009 100%);
    color: #2a1f14;
    font-family: 'Crimson Pro', serif;
    overflow-x: hidden;    /* only hide horizontal 
	overflow-y: auto;      /* allow vertical scroll 
    position: relative;
}
*/
        /* Floating sparkles */
        body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.23;
    background-image:
        /* tiny stars */
        radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 2px),
        radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 2px),
        /* purple & teal glows */
        radial-gradient(circle, rgba(180,126,255,0.8) 0, transparent 55%),
        radial-gradient(circle, rgba(94,230,255,0.6) 0, transparent 60%);
    background-size:
        220px 220px,
        260px 260px,
        900px 900px,
        1100px 1100px;
    background-position:
        10% 20%,
        80% 70%,
        0% 0%,
        100% 100%;
    animation: starDrift 38s linear infinite alternate;
}

body::after {
    opacity: 0.28;
    filter: blur(1px);
    animation-duration: 52s;
    animation-direction: alternate-reverse;
	
	content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 200px;
    pointer-events: none;
    z-index: 0;

    background: linear-gradient(
        to bottom,
        rgba(18,0,39,1) 0%,
        rgba(18,0,39,0.6) 40%,
        rgba(18,0,39,0.0) 100%
    );
}
    @keyframes shimmer {
        from { transform: translate3d(-20px, 0, 0); }
        to   { transform: translate3d(20px, -10px, 0); }
    }
	
/* Soft parchment fadeout */
.parchment::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    height: 80px;

    background:
        /* fade to transparent toward body background */
        linear-gradient(
            to bottom,
            rgba(214,189,138,1) 0%,
            rgba(214,189,138,0.6) 40%,
            rgba(214,189,138,0.0) 100%
        );

    pointer-events: none;
    z-index: 2;
}


/* Container for the single page */
.page-shell {
    position: relative;
    width: min(1400px, 100vw - 3rem);
    min-height: 80vh;   /* ✅ start at 80vh, but allow it to grow */
    height: auto;       /* ✅ let content define height */
	margin: 2rem 0 3rem;    /* breathing room top/bottom */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    perspective: 1200px;
    z-index: 1;
}

/* Big soft orbs / moons behind the parchment 
.page-aura {
    position: absolute;
    width: 170%;
    height: 170%;
    border-radius: 42px;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.25) 0, transparent 55%),
        radial-gradient(circle at 80% 25%, rgba(253,215,255,0.35) 0, transparent 55%),
        radial-gradient(circle at 50% 80%, rgba(176,126,255,0.5) 0, transparent 65%);
    filter: blur(22px);
    z-index: -2;
    opacity: 0.9;
}
*/
.page-shadow {
    position: absolute;
    width: 78%;
    height: 45px;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.75) 0, rgba(0,0,0,0) 70%);
    bottom: 16px;
    filter: blur(6px);
    opacity: 0.8;
    z-index: -1;
}

/* ================================
   INFINITE MAGICAL PARCHMENT SCROLL
   ================================ */

/* The main container sits inside .page-shell */
.parchment-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;

    /* Allow parchment to grow infinitely */
    min-height: 80vh; /* start tall, then expands */
    height: auto;

    transform-style: preserve-3d;
    transform: rotateX(2deg);   /* slight tilt for magical depth */
    margin-bottom: 4rem;        /* room for torn edge shadow */
    z-index: 1;
}


/* ===========================
    HERE we use YOUR parchment
    image as the page background
=========================== */

/* Background parchment layer */
.parchment {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    border-radius: 20px;

    /* REAL scroll behavior: infinite length vertically */
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.18),
            rgba(0,0,0,0.15)
        ),
        url('../parchment-texture.png');
    background-size: 100% auto;   /* natural vertical scaling */
    background-repeat: repeat-y;  /* infinite scroll */
    background-position: top center;

    box-shadow:
        0 0 0 1px rgba(73,47,20,0.7),
        0 24px 60px rgba(0,0,0,0.85),
        inset 0 0 30px rgba(92,58,21,0.6);

    pointer-events: none;
    z-index: 1;
}

/* Darker vignette edges */
.parchment::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background:
        radial-gradient(circle at top left, rgba(0,0,0,0.35), transparent 55%),
        radial-gradient(circle at top right, rgba(0,0,0,0.3), transparent 55%),
        radial-gradient(circle at bottom, rgba(0,0,0,0.4), transparent 60%),
        linear-gradient(to right, rgba(0,0,0,0.2), transparent 15%, transparent 85%, rgba(0,0,0,0.2));

    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0.55;
}

/* Torn bottom edge */
.parchment::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 36px;

    background: #d6bd8a;
    box-shadow:
        0 6px 12px rgba(0,0,0,0.55);

    /* ragged torn bottom edge of the scroll */
    clip-path: polygon(
        0 0,
        5% 40%,
        10% 20%,
        15% 45%,
        20% 25%,
        25% 50%,
        30% 30%,
        35% 55%,
        40% 35%,
        45% 60%,
        50% 38%,
        55% 60%,
        60% 35%,
        65% 55%,
        70% 28%,
        75% 48%,
        80% 25%,
        85% 45%,
        90% 20%,
        95% 40%,
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
    z-index: 1;
}

/* ================================
   SCROLL CAPS (top & bottom rods)
   ================================ */
/* Scroll “caps” that make the parchment feel like a rolled scroll */

.scroll-cap {
    position: absolute;
    left: 50%;
    width: 260px;
    height: 22px;
    border-radius: 999px;
    
    background: linear-gradient(to bottom, #f7e0b3, #b78a4a);
    box-shadow:
        0 6px 12px rgba(0,0,0,0.7),
        inset 0 0 6px rgba(92,58,21,0.6);

    transform: translateX(-50%);
    z-index: 3;
}

.scroll-cap--top {
    top: -18px;
}

.scroll-cap--bottom {
    bottom: -18px;
    transform: translateX(-50%) rotate(180deg);
}

/* ================================
   WAX SEAL
   ================================ */
/* Wax seal pinned to the scroll near the bottom-right */

.wax-seal {
    position: absolute;
    top: 2.2rem;
    right: 2.6rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;

    background:
        radial-gradient(circle at 30% 20%, #ffe3c5 0, #f7a463 30%, #b23737 70%, #5e1515 100%);

    box-shadow:
        0 10px 18px rgba(0,0,0,0.85),
        inset 0 0 8px rgba(0,0,0,0.6);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.6rem;              /* the emoji size */
    transform: rotate(-8deg);
	/* color: rgba(40,0,0,0.9);*/
    z-index: 4;
}

/* subtle stamped ring */
.wax-seal::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(60,0,0,0.4);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

/* Content “pages” that fade in/out on the same parchment */
.magic-page {
    position: absolute;
    inset: 0;
    padding: 2.4rem 2.8rem;
    opacity: 0;
    transform: translateZ(1px);
    transition:
        opacity 380ms ease,
        transform 380ms ease;
    pointer-events: none;
}

.magic-page.active {
opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.magic-page.hidden-above {
    transform: translateY(-16px);
}

.magic-page.hidden-below {
    transform: translateY(16px);
}

.page-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(72,51,25,0.7) rgba(255,240,209,0.4);
}

.page-inner::-webkit-scrollbar {
    width: 6px;
}
.page-inner::-webkit-scrollbar-track {
    background: rgba(255,240,209,0.2);
}
.page-inner::-webkit-scrollbar-thumb {
    background: rgba(72,51,25,0.8);
    border-radius: 4px;
}

/* Header & body styles */
.page-header {
    position: relative;
    margin-bottom: 1.7rem;
    padding-bottom: 1.1rem;
}

.page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;
    height: 2px;
    background: linear-gradient(to right,
        rgba(73,47,20,0.8),
        rgba(214,171,89,0.95),
        rgba(73,47,20,0));
}

.page-title {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #4b2c16;
    text-shadow:
        0 0 6px rgba(255,248,205,0.9),
        0 0 18px rgba(223,188,115,0.85);
}

.page-subtitle {
    margin-top: 0.3rem;
    font-size: 0.93rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #855430;
    opacity: 0.9;
}

.page-body {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #3a230f;
    text-shadow: 0 0 1px rgba(255,255,255,0.28);
}

.page-body p + p {
    margin-top: 0.7rem;
}

.page-body ul {
    margin: 0.7rem 0 0.7rem 1.2rem;
    padding-left: 0.6rem;
}

.page-body li {
    margin-bottom: 0.35rem;
}

.accent {
    font-style: italic;
    letter-spacing: 0.03em;
    color: #7e451b;
}

.glyph-row {
    display: inline-flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(107,70,30,0.95);
}

.glyph {
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(170,120,60,0.7);
    box-shadow:
        0 0 8px rgba(255,225,175,0.75),
        inset 0 0 4px rgba(104,60,26,0.8);
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), rgba(207,161,86,0.7));
    text-shadow: 0 0 3px rgba(255,253,230,0.95);
}

/* Navigation */
.nav-bar {
    margin-top: 2.6em; /* approximately two lines */
    display: flex;
    align-items: center;
    gap: 1.6rem;
    justify-content: center;
}

.nav-button {
    position: relative;
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(233,195,120,0.95);
    background: linear-gradient(to bottom, #fbe4b3, #d8b36b);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3c2210;
    cursor: pointer;
    box-shadow:
        0 8px 18px rgba(0,0,0,0.9),
        0 0 12px rgba(224,188,115,0.9);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.nav-button span.arrow {
    font-size: 1.1rem;
}

.nav-button:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(0,0,0,1),
        0 0 18px rgba(255,228,145,1);
    background: linear-gradient(to bottom, #ffeaba, #deb873);
}

.nav-button:active:not(.disabled) {
    transform: translateY(1px);
     box-shadow:
        0 4px 14px rgba(0,0,0,0.95),
        0 0 10px rgba(255,228,145,0.75);
}

.nav-button.disabled {
    cursor: default;
    opacity: 0.4;
    box-shadow: 0 3px 7px rgba(0,0,0,0.8);
}

.page-indicator {
    min-width: 130px;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e2c79d;
}

.page-indicator strong {
    color: #f8e2b9;
}

.hint {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(232,207,158,0.8);
}

@media (max-width: 720px) {
  .page-shell {
    width: min(1400px, 100vw - 3rem);
    min-height: 100vh;
    height: auto;   /* don't clamp height on small screens either */
  }

  .magic-page {
    padding: 1.6rem 1.6rem 1.8rem;
  }

  .page-title {
    font-size: 1.4rem;
  }

  .page-body {
    font-size: 0.96rem;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(1400px, 100vw - 3rem);
    min-height: 100vh;
    height: auto;   /* don't clamp height on small screens either */
  }

  .magic-page {
    padding: 1.6rem 1.6rem 1.8rem;
  }

  .page-title {
    font-size: 1.4rem;
  }

  .page-body {
    font-size: 0.96rem;
  }
}

/* extra glow “bubbles” floating around the page 
.page-shell::before,
.page-shell::after {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.3) 0, transparent 50%),
        radial-gradient(circle, rgba(255,219,255,0.4) 0, transparent 55%),
        radial-gradient(circle, rgba(146,210,255,0.35) 0, transparent 55%);
    background-size: 180px 180px, 220px 220px, 260px 260px;
    background-position: 5% 80%, 90% 10%, 70% 90%;
    opacity: 0.35;
    mix-blend-mode: screen;
    animation: orbFloat 24s ease-in-out infinite alternate;
}

.page-shell::after {
    background-size: 140px 140px, 200px 200px, 240px 240px;
    background-position: 20% 15%, 85% 80%, 40% 90%;
    opacity: 0.5;
    animation-duration: 32s;
    animation-direction: alternate-reverse;
}
*/
/* Sparkle / orb animation */

@keyframes starDrift {
    from {
        transform: translate3d(-20px, 0, 0);
    }
    to {
        transform: translate3d(20px, -30px, 0);
    }
}

@keyframes orbFloat {
    from {
        transform: translate3d(0, 10px, 0) scale(1);
    }
    to {
        transform: translate3d(0, -15px, 0) scale(1.05);
    }
}

/* ================================
   CONTENT ON THE SCROLL
   ================================ */
/* Layer that sits on top of the parchment */

.page-content {
    position: relative;      /* crucial for infinite scroll */
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    padding: 3rem 2rem 4rem; /* bottom padding gives room above torn edge */
    z-index: 2;
}

/* Parchment look now lives on the content itself */
.page-content.shop-page {
    position: relative;
    border-radius: 20px;

    /* parchment background */
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.18),
            rgba(0,0,0,0.15)
        ),
        url('../parchment-texture.png');
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;

    box-shadow:
        0 0 0 1px rgba(73,47,20,0.7),
        0 24px 60px rgba(0,0,0,0.85),
        inset 0 0 30px rgba(92,58,21,0.6);

    z-index: 2;
}

/* Torn bottom edge on the content */
.page-content.shop-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 36px;

    background: #d6bd8a;
    box-shadow: 0 6px 12px rgba(0,0,0,0.55);

    clip-path: polygon(
        0 0,
        5% 40%,
        10% 20%,
        15% 45%,
        20% 25%,
        25% 50%,
        30% 30%,
        35% 55%,
        40% 35%,
        45% 60%,
        50% 38%,
        55% 60%,
        60% 35%,
        65% 55%,
        70% 28%,
        75% 48%,
        80% 25%,
        85% 45%,
        90% 20%,
        95% 40%,
        100% 0,
        100% 100%,
        0 100%
    );

    pointer-events: none;
    z-index: 1;
}


.shop-scroll {
    width: 100%;
    height: auto;
    overflow: visible;       /* let the main page scroll, not inside panel */
}

/* Welcome logo styling */
.logo {
    max-width: 60%;
    height: auto;
    margin-top: 1rem;          /* adjust: smaller = higher, larger = lower */
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.5));
}

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.7rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(233,195,120,0.95);
    background: linear-gradient(to bottom, #fbe4b3, #d8b36b);
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3c2210;
    text-decoration: none;
    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(0,0,0,0.9),
        0 0 12px rgba(224,188,115,0.9);

    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 140ms ease,
        opacity 140ms ease;
}

.portal-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(0,0,0,1),
        0 0 18px rgba(255,228,145,1);
    background: linear-gradient(to bottom, #ffeaba, #deb873);
}

.portal-button:active {
    transform: translateY(1px);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.95),
        0 0 10px rgba(255,228,145,0.75);
}

.moon-block {
    display: flex;
    flex-direction: column;
    align-items: center;          /* center horizontally */
    justify-content: flex-start;
    margin-top: 2.6em;            /* ≈ two text lines */
    width: 100%;
}

#moon {
    font-size: 3.5rem;            /* adjust if you want it bigger or smaller */
    line-height: 1;               /* keeps spacing tight around the moon */
    margin-bottom: 0.5rem;        /* space between moon + text */
}

#phaseMessage {
    font-size: 1.1rem;
    text-align: center;
    max-width: 80%;               /* keeps it from stretching too wide */
    line-height: 1.4;
}

/* Feather quill cursor for interactive elements */
a, button, .portal-button, .nav-button, .product button {
    cursor: url('images/quill-cursor.png') 4 2, pointer;
}

/* Floating cat familiar walking down the scroll */
.scroll-cat {
    position: fixed;
    right: 12%;
    top: 5%;
    font-size: 2.3rem;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
    animation: catWalk 18s linear infinite;
    z-index: 10;
}

@keyframes catWalk {
    0% {
        transform: translate3d(0, -30vh, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(-10vw, 30vh, 0);
        opacity: 1;
    }
    90% {
        transform: translate3d(-20vw, 100vh, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(-20vw, 120vh, 0);
        opacity: 0;
    }
}

/* Floating rune glyphs that fade in */
.rune-glyph {
    position: absolute;
    font-size: 1.6rem;
    color: rgba(255,248,205,0.85);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    pointer-events: none;
    text-shadow:
        0 0 6px rgba(255,248,205,0.9),
        0 0 16px rgba(223,188,115,0.75);
    z-index: 3;
}

.rune-glyph.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Shadow at the top when the user has scrolled down */
.scroll-shadow {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(1400px, 100vw - 3rem);
    height: 40px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.55),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 8;
}

body.scrolled .scroll-shadow {
    opacity: 1;
}

/*.parchment-wrapper {
    outline: 3px solid red;
} */

/* === HARD OVERRIDE FOR PARCHMENT HEIGHT === */

.page-shell,
.parchment-wrapper {
  height: auto !important;      /* ignore any old height:80vh */
  min-height: 0 !important;     /* remove min-height constraint for testing */
}

.parchment {
	display: none;
  top: 0;
  bottom: 0;
}

/* Debug: show the true bounds of the parchment wrapper */
/* .parchment-wrapper {
  outline: 3px solid red !important;
  background-color: rgba(0, 255, 0, 0.08) !important;
} */

.site-footer {
  width: 100%;
  text-align: center;
  margin: 2.5rem 0 2rem;  /* space away from torn edge */
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  color: rgba(243, 230, 255, 0.85);
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* If you want it centered relative to the parchment width: */
.site-footer p {
  margin: 0;
}

/* On very wide screens, keep it aligned with the scroll width */
.site-footer {
  display: flex;
  justify-content: center;
}

.site-footer p {
  max-width: min(1400px, 100vw - 3rem);
}

/* =====================================
   MAGICAL RUNE FOOTER
   ===================================== */

.site-footer {
  width: 100%;
  margin: 3rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none; /* footer is mostly decorative */
}

/* --- Glowing Runes Bar --- */
.footer-runes {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
  padding: 0.6rem 1.4rem;
  
  border-radius: 999px;

  background:
    radial-gradient(circle at 50% 50%, rgba(255,240,200,0.15), transparent 70%),
    linear-gradient(to right, rgba(220,180,255,0.12), rgba(255,240,200,0.18), rgba(220,180,255,0.12));

  box-shadow:
    0 0 18px rgba(255,240,200,0.45),
    0 0 12px rgba(186,126,255,0.35),
    inset 0 0 8px rgba(255,240,200,0.25);
}

.rune {
  font-size: 1.45rem;
  color: rgba(255,248,205,0.92);
  text-shadow:
    0 0 6px rgba(255,248,205,0.95),
    0 0 18px rgba(223,188,115,0.85),
    0 0 26px rgba(176,126,255,0.35);
  opacity: 0.95;
  animation: runeGlow 3.6s ease-in-out infinite alternate;
}

/* Optional shimmer animation */
@keyframes runeGlow {
  0% { opacity: 0.75; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(-2px); }
}

/* --- Footer Text --- */
.footer-text {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,230,255,0.85);
  text-shadow:
    0 0 6px rgba(255,240,200,0.7),
    0 0 18px rgba(150,100,255,0.35);
  pointer-events: auto; /* allow copying text */
}

/* Slight fade-in effect */
.site-footer {
  opacity: 0;
  animation: footerReveal 1.8s ease forwards;
}

@keyframes footerReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}