.elementor-kit-7{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#54595F;--e-global-color-text:#C2C2C2;--e-global-color-accent:#9F48F5;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"JetBrains Mono";--e-global-typography-accent-font-weight:500;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-animation-duration:1500ms;--e-preloader-animation-duration:1500ms;--e-preloader-delay:300ms;}.elementor-kit-7 e-page-transition{background-color:#080509;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== Cosmic glass pill ===== */
.sh-glass-pill{
  position: relative;
  border-radius: 24px;

  /* darker glass so background shows through */
  background: rgba(10, 12, 18, 0.34);

  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);

  border: 1px solid rgba(255,255,255,0.10);

  /* depth + subtle “lift” */
  box-shadow:
    0 14px 46px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.08);

  overflow: visible;
}

/* ===== Purple/white + warm tan cosmic edge (animated) ===== */
.sh-glass-pill:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* edge thickness */

  /* Mostly purple + white, with warm tan highlights */
  background: linear-gradient(90deg,
    rgba(200, 160, 255, 0.95),
    rgba(240, 240, 255, 0.95),
    rgba(255, 220, 170, 0.85),
    rgba(210, 160, 255, 0.95),
    rgba(170, 120, 255, 0.95),
    rgba(240, 240, 255, 0.95),
    rgba(255, 215, 160, 0.85),
    rgba(200, 160, 255, 0.95)
  );
  background-size: 320% 320%;

  /* cut out the middle so it becomes a border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;

  /* soft edge + glow */
  filter: blur(0.35px);
  opacity: 0.95;

  /* cosmic halo */
  box-shadow:
    0 0 22px rgba(185, 140, 255, 0.35),
    0 0 44px rgba(255, 225, 170, 0.14);

  /* slow drift animation */
  animation: shCosmicBorder 26s ease-in-out infinite;
}

/* ===== Inner glass sheen / nebula highlight ===== */
.sh-glass-pill:after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;

  background:
    radial-gradient(120% 160% at 18% 22%,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.03) 42%,
      transparent 70%),
    radial-gradient(90% 130% at 85% 25%,
      rgba(200,160,255,0.10),
      transparent 60%),
    linear-gradient(180deg,
      rgba(255,255,255,0.06),
      transparent 35%,
      rgba(0,0,0,0.12));

  pointer-events:none;
  opacity: 1;
}

/* Hover: slightly more glow (subtle, not obnoxious) */
.sh-glass-pill:hover:before{
  opacity: 1;
  box-shadow:
    0 0 28px rgba(185, 140, 255, 0.45),
    0 0 56px rgba(255, 225, 170, 0.18);
  filter: blur(0.32px);
}

/* Animation keyframes (slow color drift) */
@keyframes shCosmicBorder{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Turn off sticky header */
.sh-header{
  position: relative !important; /* or static */
  top: auto !important;
}
/* Turn off theme sticky header */
.site-header{
  position: relative !important; /* or static */
  top: auto !important;
}


/* ==========================================================
   SHIROHANA: COSMIC BACKGROUND (Animated Nebula + Stars)
   Paste into: Appearance → Customize → Additional CSS
   ========================================================== */


/* ----------------------------------------------------------
   1) Base page background: deep space + soft nebula layers
   Notes:
   - Uses multiple gradients to simulate depth.
   - background-size > 100% enables drift movement.
   - animation is intentionally slow + subtle.
   ---------------------------------------------------------- */

body{
  background:
/* Nebula glow 1 (subtle, pushed back) */
radial-gradient(1400px 1000px at 35% 20%,
  rgba(155, 120, 210, 0.12),
  rgba(10, 12, 20, 0.97) 68%),


    /* Nebula glow 2 (cool blue) */
    radial-gradient(980px 680px at 82% 24%,
      rgba(95, 150, 220, 0.16),
      transparent 68%),

    /* Nebula glow 3 (lavender haze) */
    radial-gradient(920px 640px at 44% 86%,
      rgba(220, 200, 255, 0.12),
      transparent 72%),

    /* Deep space base gradient */
    linear-gradient(180deg,
      #05070d,
      #03040a 48%,
      #020309);

  /* Bigger canvas so drift has room to move */
  background-size: 240% 240%;

  /* Keep it stable while scrolling */
  background-attachment: fixed;

  background-repeat: no-repeat;

  /* Softer, less “loop-y” motion */
  animation: shCosmicDrift 180s ease-in-out infinite;
}


/* ----------------------------------------------------------
   2) Nebula drift animation
   Notes:
   - Each gradient layer gets its own background-position.
   - Positions are intentionally uneven to feel organic.
   - Middle keyframes are not perfectly mirrored to avoid
     “pendulum” motion that looks robotic.
   ---------------------------------------------------------- */

@keyframes shCosmicDrift{
  0%{
    background-position:
      8% 12%,    /* purple nebula */
      92% 18%,   /* blue nebula */
      38% 88%,   /* lavender haze */
      0% 0%;     /* base gradient */
  }
  27%{
    background-position:
      18% 20%,
      78% 28%,
      52% 80%,
      0% 0%;
  }
  58%{
    background-position:
      30% 34%,
      66% 44%,
      70% 66%,
      0% 0%;
  }
  83%{
    background-position:
      22% 26%,
      72% 36%,
      58% 74%,
      0% 0%;
  }
  100%{
    background-position:
      10% 14%,
      90% 20%,
      40% 86%,
      0% 0%;
  }
}


/* ----------------------------------------------------------
   3) Star layers (fixed overlays)
   Notes:
   - These are subtle. The goal is “space,” not “glitter.”
   - Using pseudo-elements keeps the markup clean.
   - z-index: -1 places stars behind content.
   ---------------------------------------------------------- */

body::before,
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}


/* Small, distant stars */
body::before{
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.70), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.50), transparent),
    radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.60), transparent);

  background-size: 420px 420px;
  opacity: 0.55;
}


/* Larger, softer stars */
body::after{
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.65), transparent),
    radial-gradient(2px 2px at 65% 35%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 85% 55%, rgba(255,255,255,0.55), transparent);

  background-size: 760px 760px;
  opacity: 0.40;
}


/* ----------------------------------------------------------
   4) Optional: very slow star drift (OFF by default)
   Notes:
   - Enable if you want depth motion.
   - If you do this, keep it super slow.
   ---------------------------------------------------------- */


@keyframes shStarDrift{
  from{ transform: translateY(0); }
  to{ transform: translateY(-180px); }
}

body::before{ animation: shStarDrift 420s linear infinite; }
body::after { animation: shStarDrift 640s linear infinite; }



/* ----------------------------------------------------------
   5) Mobile optimization (reduces motion)
   Notes:
   - Keeps performance smooth on phones.
   ---------------------------------------------------------- */

@media (max-width: 768px){
  body{
    animation-duration: 240s; /* slower on mobile */
  }
  body::before{ opacity: 0.45; }
  body::after { opacity: 0.32; }
}


/* ==========================================================
   SHIROHANA EASTER EGG: Subtle cosmic flyby
   ========================================================== */

html::before{
  content:"";
  position: fixed;

  /* Start offscreen */
  left: -20vw;
  top: 30vh;

  /* Make it small */
  width: 36px;
  height: 36px;

  pointer-events: none;
  z-index: 0;
  opacity: 0;

  background-image: url("https://shirohanastudios.com/wp-content/uploads/2026/01/Sarah_Spin.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Soft glow, not spotlight */
  filter: drop-shadow(0 0 8px rgba(200,160,255,0.25));

  animation:
    shFlybySlow 180s linear infinite,
    shFloatBob 9s ease-in-out infinite;
}

/* Slow diagonal drift across the sky */
@keyframes shFlybySlow{
  0%{
    transform: translateX(-30vw) translateY(0) rotate(-4deg) scale(0.9);
    opacity: 0;
  }
  5%{
    opacity: 0.6;
  }
  40%{
    transform: translateX(140vw) translateY(14vh) rotate(3deg) scale(1);
    opacity: 0.6;
  }
  45%{
    opacity: 0;
  }
  100%{
    transform: translateX(140vw) translateY(14vh) rotate(3deg) scale(1);
    opacity: 0;
  }
}

/* Gentle floating motion (adds “space drift” feel) */
@keyframes shFloatBob{
  0%   { translate: 0 0; }
  50%  { translate: 0 -6px; }
  100% { translate: 0 0; }
}


/* ==========================================================
   SHIROHANA EASTER EGG #2: Glowing moon (fade in/out)
   - Pops in briefly about every 20s (change to 45s if desired)
   - Uses multiple appearance windows + position jumps
   - Starts at a different phase (negative delay) to feel less scripted
   ========================================================== */

html::after{
  content:"";
  position: fixed;
  width: 32px;
  height: 32px;

  pointer-events: none;
  z-index: 0;
  opacity: 0;

  background-image: url("https://shirohanastudios.com/wp-content/uploads/2026/01/sMoon_Collectable_1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  filter:
    drop-shadow(0 0 12px rgba(235,235,255,0.30))
    drop-shadow(0 0 26px rgba(190,140,255,0.20));

  /* Duration: change to 45s if you want your original cadence */
  animation: shMoonPop 45s ease-in-out infinite;

  /* This makes it NOT always start at the same point after refresh */
  animation-delay: -7.3s;
}

/* Multiple “pop” windows per loop + position changes while hidden */
@keyframes shMoonPop{
  /* ---- Hidden default ---- */
  0%   { opacity: 0; left: 72vw; top: 18vh; transform: translate(0,0) scale(0.98); }

  /* ===== Pop #1 =====
     Move first, then fade in */
  8%   { opacity: 0; left: 14vw; top: 26vh; transform: translate(0,0) scale(0.98); }
  10%  { opacity: 0.85; }
  14%  { opacity: 0.85; transform: translate(0,-4px) scale(1.00); }
  16%  { opacity: 0; }

  /* ===== Pop #2 ===== */
  36%  { opacity: 0; left: 80vw; top: 44vh; transform: translate(0,0) scale(0.98); }
  38%  { opacity: 0.85; }
  42%  { opacity: 0.85; transform: translate(0,-4px) scale(1.00); }
  44%  { opacity: 0; }

  /* ===== Pop #3 ===== */
  62%  { opacity: 0; left: 56vw; top: 64vh; transform: translate(0,0) scale(0.98); }
  64%  { opacity: 0.85; }
  68%  { opacity: 0.85; transform: translate(0,-4px) scale(1.00); }
  70%  { opacity: 0; }

  /* ===== Pop #4 (shorter) ===== */
  86%  { opacity: 0; left: 26vw; top: 16vh; transform: translate(0,0) scale(0.98); }
  88%  { opacity: 0.75; }
  91%  { opacity: 0.75; transform: translate(0,-3px) scale(1.00); }
  93%  { opacity: 0; }

  /* End hidden */
  100% { opacity: 0; left: 72vw; top: 18vh; transform: translate(0,0) scale(0.98); }
}/* End custom CSS */