/* =====================================================================
   ILLUMINATE AURA — share microsite skin
   Paste into the event's custom CSS. Pure CSS: no images or scripts needed.
   Matches the booth: pastel aura glows, twinkling sparkles, iridescent ring,
   glass buttons, Marcellus + Montserrat.
   ===================================================================== */

/* Marcellus for headings (Montserrat is already loaded by the page).
   If your CSS box doesn't allow @import, delete this line: headings fall back to Georgia. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

:root {
  --aura-ink: #171a2c;
  --aura-ink-soft: rgba(23, 26, 44, .62);
  --aura-glass: rgba(255, 255, 255, .5);
  --aura-glass-hi: rgba(255, 255, 255, .78);
  --aura-edge: rgba(255, 255, 255, .92);
  --aura-grad: linear-gradient(90deg, #fff2a8 0%, #ffb6e6 38%, #c9a6ff 68%, #8fe4ff 100%);
  --aura-glow: 0 14px 40px rgba(160, 120, 230, .25);
  --aura-serif: 'Marcellus', 'Cinzel', Georgia, serif;
  --aura-sans: 'Montserrat', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --aura-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23171a2c' d='M12 0C12.8 7.5 16.5 11.2 24 12c-7.5.8-11.2 4.5-12 12-.8-7.5-4.5-11.2-12-12C7.5 11.2 11.2 7.5 12 0z'/%3E%3C/svg%3E");
  --aura-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 0C12.8 7.5 16.5 11.2 24 12c-7.5.8-11.2 4.5-12 12-.8-7.5-4.5-11.2-12-12C7.5 11.2 11.2 7.5 12 0z'/%3E%3C/svg%3E");
}

/* animatable angle for the iridescent ring (falls back to a static ring where unsupported) */
@property --aura-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---------- page + living aura background ---------- */
html body {
  background: #f3eaff !important;
  color: var(--aura-ink) !important;
  font-family: var(--aura-sans) !important;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* layer 1: slow drifting colour glows */
html body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(255, 140, 222, .9), transparent),
    radial-gradient(closest-side, rgba(120, 205, 255, .9), transparent),
    radial-gradient(closest-side, rgba(255, 232, 120, .85), transparent),
    radial-gradient(closest-side, rgba(176, 146, 255, .9), transparent),
    radial-gradient(closest-side, rgba(160, 238, 214, .65), transparent),
    radial-gradient(closest-side, rgba(255, 255, 255, .6), transparent);
  background-repeat: no-repeat;
  background-size: 80vmax 80vmax, 74vmax 74vmax, 84vmax 84vmax, 76vmax 76vmax, 60vmax 60vmax, 70vmax 60vmax;
  background-position:
    calc(-30vmax + 10vw) calc(-34vmax + 12vh),
    calc(-37vmax + 88vw) calc(-37vmax + 22vh),
    calc(-42vmax + 80vw) calc(-42vmax + 86vh),
    calc(-38vmax + 12vw) calc(-38vmax + 74vh),
    calc(-30vmax + 50vw) calc(-30vmax + 50vh),
    calc(-35vmax + 50vw) calc(-30vmax + 38vh);
  animation: auraDrift 28s ease-in-out infinite alternate, auraBreathe 9s ease-in-out infinite alternate;
}

/* layer 2: twinkling sparkles drifting upward */
html body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--aura-spark), var(--aura-spark), var(--aura-spark),
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 220, 245, .9) 0 1.5px, transparent 2.5px);
  background-size: 14px 14px, 9px 9px, 18px 18px, 170px 210px, 110px 140px, 230px 190px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  background-position: 12% 28%, 86% 18%, 78% 72%, 0 0, 40px 60px, 90px 20px;
  filter: drop-shadow(0 0 2px rgba(176, 140, 255, .9)) drop-shadow(0 0 6px rgba(255, 255, 255, .95));
  animation: auraRise 38s linear infinite, auraTwinkle 3.8s ease-in-out infinite;
}

@keyframes auraDrift {
  to {
    background-position:
      calc(-30vmax + 34vw) calc(-34vmax + 30vh),
      calc(-37vmax + 66vw) calc(-37vmax + 8vh),
      calc(-42vmax + 58vw) calc(-42vmax + 70vh),
      calc(-38vmax + 30vw) calc(-38vmax + 92vh),
      calc(-30vmax + 44vw) calc(-30vmax + 60vh),
      calc(-35vmax + 54vw) calc(-30vmax + 44vh);
  }
}
@keyframes auraBreathe { from { opacity: .85; } to { opacity: 1; } }
@keyframes auraRise {
  from { background-position: 12% 28%, 86% 18%, 78% 72%, 0 0, 40px 60px, 90px 20px; }
  to   { background-position: 12% 24%, 86% 15%, 78% 68%, 0 -420px, 40px -220px, 90px -360px; }
}
@keyframes auraTwinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* content sits above the background layers */
html body .session-page {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 28px 20px 24px;
  box-sizing: border-box;
}
@media (max-width: 650px) {
  html body .session-page { margin: 0 auto; padding: 22px 16px 20px; }
}

/* ---------- header ---------- */
html body .gallery-header { margin: 8px 0 22px; align-items: center; }
html body .event-logo { max-height: 64px !important; filter: drop-shadow(0 4px 14px rgba(160, 120, 230, .25)); }

html body .event-title { text-align: center; }
html body .event-title::before {
  content: 'Your aura reading';
  display: block;
  font: 600 11px/1 var(--aura-sans);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--aura-ink-soft);
  margin-bottom: 14px;
  animation: auraFadeUp .9s ease-out both;
}
html body .event-title h1,
html body .event-title h1 a {
  font-family: var(--aura-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(30px, 8.4vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  color: var(--aura-ink) !important;
  text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 40px rgba(255, 255, 255, .7);
  margin: 0;
  animation: auraFadeUp 1.1s .15s cubic-bezier(.2, .8, .25, 1) both;
}
html body .event-title h2,
html body .event-title h2 a {
  font-family: var(--aura-sans) !important;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--aura-ink-soft) !important;
}
/* twinkling star under the title */
html body .event-title::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 16px auto 0;
  background: var(--aura-star) center/contain no-repeat;
  animation: auraStar 6s ease-in-out infinite;
}
@keyframes auraStar { 0%, 100% { transform: scale(.85) rotate(0); } 50% { transform: scale(1.12) rotate(45deg); } }
@keyframes auraFadeUp { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- photo card ---------- */
html body .card {
  position: relative;
  margin-top: 6px;
  padding: 16px;
  border-radius: 30px;
  background: var(--aura-glass);
  border: 1px solid var(--aura-edge);
  box-shadow: var(--aura-glow), inset 0 0 0 1px rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: auraMaterialise 1.2s .25s cubic-bezier(.2, .8, .25, 1) both;
}
/* iridescent ring that slowly travels round the card */
html body .card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 33px;
  padding: 3px;
  background: conic-gradient(from var(--aura-a), #ffb6e6, #c9a6ff, #8fe4ff, #b3f2e0, #fff2a8, #ffc7a8, #ffb6e6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(.5px) drop-shadow(0 0 10px rgba(201, 166, 255, .7));
  pointer-events: none;
  animation: auraRing 8s linear infinite;
}
/* soft halo bleeding out behind the card */
html body .card::after {
  content: '';
  position: absolute;
  inset: 8% -6% -4%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from var(--aura-a), #ffb6e6, #c9a6ff, #8fe4ff, #b3f2e0, #fff2a8, #ffb6e6);
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
  animation: auraRing 14s linear infinite reverse, auraHalo 5s ease-in-out infinite;
}
@keyframes auraRing { to { --aura-a: 360deg; } }
@keyframes auraHalo { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
@keyframes auraMaterialise { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }

html body .card-body { padding: 0; }
html body .card figure {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 18px 40px rgba(110, 70, 190, .28);
}
html body .card figure img,
html body .card .preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  animation: auraReveal 1.6s .5s ease-out both;
}
html body .card video,
html body .card .plyr { border-radius: 20px; overflow: hidden; }
/* a band of light sweeping across the photo */
html body .card figure::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 182, 230, .55) 42%, rgba(255, 255, 255, .85) 50%, rgba(143, 228, 255, .55) 58%, transparent 70%);
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: auraSheen 6.5s 2s ease-in-out infinite;
}
/* sparkles resting on the photo corners */
html body .card figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--aura-spark), var(--aura-spark), var(--aura-spark);
  background-size: 26px 26px, 16px 16px, 20px 20px;
  background-position: 6% 7%, 93% 12%, 88% 92%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255, 182, 230, .9));
  animation: auraTwinkle 2.6s ease-in-out infinite;
}
@keyframes auraReveal { from { opacity: 0; filter: blur(14px) saturate(1.6); transform: scale(1.04); } to { opacity: 1; filter: none; transform: none; } }
@keyframes auraSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }

/* ---------- share + download ---------- */
html body .card-footer {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
html body .social-buttons {
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
html body .social-buttons > .button {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  margin: 0 !important;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: var(--aura-ink) !important;
  background: var(--aura-glass-hi);
  border: 1px solid var(--aura-edge);
  box-shadow: 0 8px 22px rgba(160, 120, 230, .2);
  transition: transform .15s ease, background .25s ease, box-shadow .25s ease;
  animation: auraPop .5s cubic-bezier(.2, .8, .25, 1) both;
}
html body .social-buttons > .button:nth-child(1) { animation-delay: .9s; }
html body .social-buttons > .button:nth-child(2) { animation-delay: .98s; }
html body .social-buttons > .button:nth-child(3) { animation-delay: 1.06s; }
html body .social-buttons > .button:nth-child(4) { animation-delay: 1.14s; }
html body .social-buttons > .button:nth-child(5) { animation-delay: 1.22s; }
html body .social-buttons > .button:hover,
html body .social-buttons > .button:active {
  background: var(--aura-grad);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 10px 30px rgba(255, 182, 230, .6);
}
/* the pinterest icon sits inside a wrapper: keep the inner one plain */
html body .social-buttons > .button .button {
  width: auto; height: auto; margin: 0; border: 0; background: none; box-shadow: none; animation: none;
}
html body .social-buttons .fa-pinterest,
html body .social-buttons .fa-linkedin,
html body .social-buttons .fa-facebook-f,
html body .social-buttons .fa-x-twitter,
html body .social-buttons .fa-copy,
html body .action-buttons .fa-download,
html body .action-buttons .fa-arrow-up-from-bracket {
  color: var(--aura-ink) !important;
}
@keyframes auraPop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }

html body .action-buttons { margin: 0; width: 100%; }
html body .action-buttons form { margin: 0; }
html body .action-buttons button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 24px;
  border-radius: 999px;
  border: 1px solid var(--aura-edge) !important;
  background: var(--aura-grad) !important;
  color: var(--aura-ink) !important;
  font: 600 14px/1 var(--aura-sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(160, 120, 230, .35), inset 0 0 0 2px rgba(255, 255, 255, .6);
  animation: auraPop .6s 1.3s cubic-bezier(.2, .8, .25, 1) both, auraPulse 3s 2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
html body .action-buttons button::after { content: 'Save my aura'; }
html body .action-buttons button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: auraSheen 3.2s 2.4s ease-in-out infinite;
  pointer-events: none;
}
html body .action-buttons button .button { margin: 0; font-size: 17px; }
html body .action-buttons button:active { transform: scale(.98); }
@keyframes auraPulse {
  0%, 100% { box-shadow: 0 12px 34px rgba(160, 120, 230, .35), inset 0 0 0 2px rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 0 44px rgba(255, 182, 230, .85), 0 0 18px #fff, inset 0 0 0 2px #fff; }
}

/* "Copied!" toast */
html body #toast-container > .toast,
html body #toast-container > .toast-success {
  background-image: none !important;
  background: rgba(255, 255, 255, .85) !important;
  color: var(--aura-ink) !important;
  border: 1px solid var(--aura-edge);
  border-radius: 999px !important;
  padding: 14px 22px !important;
  width: auto !important;
  box-shadow: 0 12px 34px rgba(160, 120, 230, .35) !important;
  font: 600 13px/1.2 var(--aura-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- still processing ---------- */
html body .processing-text {
  color: var(--aura-ink) !important;
  font: 500 13px/1.6 var(--aura-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  animation: auraTwinkle 1.6s ease-in-out infinite;
}

/* ---------- footer ---------- */
html body .footer {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  background: transparent !important;
}
html body .footer-content,
html body .footer-content a {
  font-family: var(--aura-sans) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--aura-ink-soft) !important;
  text-decoration: none;
}
html body .footer-content::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 auto 14px;
  border-radius: 3px;
  background: var(--aura-grad);
}

/* ---------- desktop: give the card room to breathe ---------- */
@media (min-width: 900px) {
  html body .session-page { max-width: 440px; padding-top: 40px; }
  html body .card { padding: 20px; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html body::before, html body::after,
  html body .card, html body .card::before, html body .card::after,
  html body .card figure::before, html body .card figure::after,
  html body .card .preview, html body .card figure img,
  html body .event-title::before, html body .event-title::after, html body .event-title h1,
  html body .social-buttons > .button, html body .action-buttons button, html body .action-buttons button::before {
    animation: none !important;
  }
}