/**
 * Easter egg: type "eclipse" anywhere in the admin UI (see js/eclipse.js).
 *
 * The overlay itself stays transparent so the real page is visible and
 * genuinely darkens behind the animation, rather than being replaced by a
 * separate painted "sky" scene. Darkness/stars/corona are all timed as a
 * narrow spike right around the 50% mark (full/near-full lunar coverage of
 * the sun), not a broad plateau — most of the transit stays subtle.
 */

.akabia-eclipse-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  animation: akabia-eclipse-fade-in .3s ease-out;
}

.akabia-eclipse-overlay.is-closing {
  animation: akabia-eclipse-fade-out .5s ease-in forwards;
}

@keyframes akabia-eclipse-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes akabia-eclipse-fade-out {
  to { opacity: 0; }
}

/* The real page darkens through this layer; it stays near-transparent
   except for a sharp peak right at totality. */
.akabia-eclipse-darkness {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: akabia-eclipse-darken 6s ease-in-out;
}

@keyframes akabia-eclipse-darken {
  0%, 40%   { opacity: 0; }
  46%       { opacity: .15; }
  48.5%     { opacity: .6; }
  50%       { opacity: .93; }
  51.5%     { opacity: .6; }
  54%       { opacity: .15; }
  60%, 100% { opacity: 0; }
}

.akabia-eclipse-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 80% 15%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1px 1px at 65% 60%, #fff, transparent),
    radial-gradient(2px 2px at 90% 80%, #fff, transparent),
    radial-gradient(1px 1px at 45% 30%, #fff, transparent),
    radial-gradient(1px 1px at 15% 85%, #fff, transparent),
    radial-gradient(2px 2px at 55% 12%, #fff, transparent),
    radial-gradient(1px 1px at 75% 45%, #fff, transparent),
    radial-gradient(1px 1px at 25% 40%, #fff, transparent);
  animation: akabia-eclipse-stars-fade 6s ease-in-out;
}

@keyframes akabia-eclipse-stars-fade {
  0%, 44%   { opacity: 0; }
  49%, 51%  { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* Sunburst rays, clipped to only show past the sun's disc since it sits
   earlier in DOM order (painted underneath the opaque sun/moon). */
.akabia-eclipse-corona-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 224, 60, .95) 0deg 6deg, transparent 6deg 30deg);
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  animation: akabia-eclipse-burst 6s ease-in-out;
}

@keyframes akabia-eclipse-burst {
  0%, 42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  48%           { opacity: .85; transform: translate(-50%, -50%) scale(1.6) rotate(12deg); }
  50%           { opacity: 1; transform: translate(-50%, -50%) scale(2.1) rotate(25deg); }
  52%           { opacity: .85; transform: translate(-50%, -50%) scale(1.6) rotate(38deg); }
  58%, 100%     { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(50deg); }
}

/* A handful of thin plasma jets, one per child, each rotated to a fixed
   angle and growing from the sun's edge only right at totality. */
.akabia-eclipse-jets {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.akabia-eclipse-jet {
  position: absolute;
  top: 0;
  left: -2px;
  width: 4px;
  height: 0;
  background: linear-gradient(to top, rgba(255, 244, 200, .98), rgba(255, 210, 60, .85) 35%, rgba(255, 180, 30, 0) 100%);
  border-radius: 2px;
  opacity: 0;
  animation: akabia-eclipse-jet-fire 6s ease-in-out;
}

.akabia-eclipse-jet:nth-child(1) { transform: rotate(10deg); }
.akabia-eclipse-jet:nth-child(2) { transform: rotate(80deg); animation-delay: .04s; }
.akabia-eclipse-jet:nth-child(3) { transform: rotate(155deg); animation-delay: .08s; }
.akabia-eclipse-jet:nth-child(4) { transform: rotate(210deg); animation-delay: .02s; }
.akabia-eclipse-jet:nth-child(5) { transform: rotate(280deg); animation-delay: .06s; }
.akabia-eclipse-jet:nth-child(6) { transform: rotate(325deg); animation-delay: .03s; }

@keyframes akabia-eclipse-jet-fire {
  0%, 43%, 100% { height: 0; opacity: 0; }
  48%           { height: 65px; opacity: .9; }
  50%           { height: 95px; opacity: 1; }
  52%           { height: 60px; opacity: .8; }
  58%, 100%     { height: 0; opacity: 0; }
}

.akabia-eclipse-sun {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7d6, #ffd76a 45%, #ff9d3d 75%, #ff7a1a 100%);
  box-shadow: 0 0 60px 20px rgba(255, 170, 60, .55);
  animation: akabia-eclipse-corona 6s ease-in-out;
}

@keyframes akabia-eclipse-corona {
  0%, 40%, 100% { box-shadow: 0 0 60px 20px rgba(255, 170, 60, .55); }
  50%           { box-shadow:
                    0 0 40px 12px rgba(255, 244, 150, 1),
                    0 0 100px 55px rgba(255, 221, 64, .95),
                    0 0 170px 100px rgba(255, 190, 40, .6),
                    0 0 260px 150px rgba(255, 170, 30, .3); }
  60%           { box-shadow: 0 0 60px 20px rgba(255, 170, 60, .55); }
}

.akabia-eclipse-moon {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 65%, #1a1a24, #050507 70%);
  animation: akabia-eclipse-transit 6s cubic-bezier(.45, 0, .55, 1);
}

@keyframes akabia-eclipse-transit {
  0%   { transform: translateX(-220px); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(220px); }
}

.akabia-eclipse-caption {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
  opacity: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  animation: akabia-eclipse-caption-fade 6s ease-in-out;
}

@keyframes akabia-eclipse-caption-fade {
  0%, 40%, 100% { opacity: 0; }
  50%, 55%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .akabia-eclipse-darkness,
  .akabia-eclipse-stars,
  .akabia-eclipse-corona-burst,
  .akabia-eclipse-jet,
  .akabia-eclipse-sun,
  .akabia-eclipse-moon,
  .akabia-eclipse-caption {
    animation-duration: .01ms !important;
  }
}