/* ============================================================
   Solar Flare designer credit component.
   Implemented verbatim per solar-flare-credit-guidelines.md.
   The ONLY customization is --sf-accent, which is set in site.css.
   Do not restyle, retime, or reword anything in this file.
   ============================================================ */

.sf-credit{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem;
  background:none; border:1px solid transparent; border-radius:999px;
  color:rgba(247,237,224,0.52);
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  cursor:pointer; font-family:inherit;
  transition:color .28s ease, border-color .28s ease, background-color .28s ease, transform .22s ease;
}
.sf-credit .sf-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:var(--sf-accent);
  box-shadow:0 0 8px color-mix(in srgb, var(--sf-accent) 80%, transparent);
  transition:box-shadow .28s ease;
}
.sf-credit:hover, .sf-credit:focus-visible{
  color:var(--sf-cream);
  border-color:color-mix(in srgb, var(--sf-accent) 40%, transparent);
  background:color-mix(in srgb, var(--sf-accent) 9%, transparent);
  transform:translateY(-2px);
  outline:none;
}
.sf-credit:hover .sf-dot, .sf-credit:focus-visible .sf-dot{
  box-shadow:0 0 12px color-mix(in srgb, var(--sf-accent) 90%, transparent);
}

.sf-modal-overlay{
  position:fixed; inset:0; z-index:400;
  background:rgba(8,6,4,0.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:1.2rem;
}
.sf-modal-overlay.open{ display:flex; }
.sf-modal-box{
  position:relative;
  width:min(560px,100%);
  max-height:88vh; overflow-y:auto;
  padding:0; overflow:hidden;
  background:rgba(18,15,12,0.94);
  border:1px solid var(--sf-line);
  border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,0.5);
}
.sf-modal-close{
  position:absolute; top:12px; right:14px; z-index:6;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.42); backdrop-filter:blur(6px);
  border:none; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:.85; cursor:pointer; font-size:1rem;
}
.sf-modal-close:hover{ opacity:1; background:rgba(0,0,0,0.6); }

.sf-stage{
  position:relative;
  padding:2.6rem 1.75rem 2.2rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  --sf-mx:50%; --sf-my:50%;
  background:
    radial-gradient(circle at var(--sf-mx) var(--sf-my), color-mix(in srgb, var(--sf-accent) 70%, white) 0%, transparent 46%),
    linear-gradient(118deg,
      color-mix(in srgb, var(--sf-accent) 85%, white) 0%,
      var(--sf-accent) 24%,
      color-mix(in srgb, var(--sf-accent) 55%, #2fb3d9) 58%,
      color-mix(in srgb, var(--sf-accent) 40%, #1a6fd4) 82%,
      color-mix(in srgb, var(--sf-accent) 20%, #123a8f) 100%);
  background-size:180% 180%, 220% 220%;
  animation:sfShift 15s ease-in-out infinite;
}
@keyframes sfShift{
  0%,100%{ background-position:50% 50%, 0% 50%; }
  50%    { background-position:50% 50%, 100% 50%; }
}
.sf-glow{
  position:absolute; inset:-25%;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,0.55), transparent 58%);
  filter:blur(28px);
  pointer-events:none;
  will-change:transform;
}
.sf-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:radial-gradient(rgba(255,255,255,.75) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;
}
.sf-logo{
  position:relative; z-index:2;
  width:min(320px, 78%); height:auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,0.32));
  will-change:transform;
  transform-style:preserve-3d;
}

.sf-body{ padding:1.6rem 1.6rem 1.7rem; }
.sf-body p{
  color:rgba(247,237,224,0.8); line-height:1.6; font-size:.94rem; margin-bottom:1.3rem; text-align:center;
}
.sf-choices{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:520px){ .sf-choices{ grid-template-columns:1fr; } }
.sf-choice{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.15rem 1.1rem; border-radius:16px; text-align:left;
  border:1px solid var(--sf-line); background:rgba(247,237,224,0.04);
  color:var(--sf-cream); font-family:inherit; cursor:pointer;
  transition:transform .25s ease, border-color .25s ease,
    background-color .25s ease, box-shadow .25s ease;
}
.sf-choice b{ font-size:1.02rem; font-weight:700; }
.sf-choice span{ font-size:.78rem; color:rgba(247,237,224,0.6); line-height:1.45; }
.sf-choice:hover, .sf-choice:focus-visible{ transform:translateY(-4px); outline:none; }
.sf-choice.sf-go:hover, .sf-choice.sf-go:focus-visible{
  border-color:color-mix(in srgb, var(--sf-accent) 65%, transparent);
  background:color-mix(in srgb, var(--sf-accent) 12%, transparent);
  box-shadow:0 14px 30px -8px color-mix(in srgb, var(--sf-accent) 45%, transparent);
}
.sf-choice.sf-stay:hover, .sf-choice.sf-stay:focus-visible{
  border-color:rgba(194,59,59,0.65);
  background:rgba(194,59,59,0.12);
  box-shadow:0 14px 30px -8px rgba(194,59,59,0.42);
}
.sf-arrow{ font-size:.8rem; opacity:.55; margin-top:.15rem; }

.sf-farewell{
  position:fixed; inset:0; z-index:999999;
  display:none; align-items:center; justify-content:center;
  overflow:hidden;
}
.sf-farewell.open{ display:flex; }
.sf-farewell-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sf-accent) 70%, white) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--sf-accent) 60%, black) 0%, transparent 55%),
    linear-gradient(120deg, var(--sf-accent), color-mix(in srgb, var(--sf-accent) 50%, #7b3fa0) 50%, color-mix(in srgb, var(--sf-accent) 50%, #2fb3d9) 100%);
  background-size:200% 200%, 200% 200%, 300% 300%;
  animation:sfFarewellShift 4s ease-in-out infinite, sfFarewellHue 4s linear infinite;
}
@keyframes sfFarewellShift{
  0%   { background-position:20% 20%, 80% 80%, 0% 50%; }
  50%  { background-position:80% 30%, 20% 70%, 100% 50%; }
  100% { background-position:20% 20%, 80% 80%, 0% 50%; }
}
@keyframes sfFarewellHue{
  0%   { filter:hue-rotate(0deg)   saturate(1.15); }
  30%  { filter:hue-rotate(28deg)  saturate(1.15); }
  65%  { filter:hue-rotate(-22deg) saturate(1.15); }
  100% { filter:hue-rotate(0deg)   saturate(1.15); }
}
.sf-farewell-content{
  position:relative; z-index:2; text-align:center; color:#fff;
  max-width:560px; padding:2rem;
}
.sf-farewell-content h2{
  font-size:clamp(2.4rem,7vw,4rem); margin:0 0 .7rem; line-height:1;
  text-shadow:0 4px 24px rgba(0,0,0,0.35);
}
.sf-farewell-content p{
  font-size:1.05rem; margin:0 0 2rem; opacity:.95;
  text-shadow:0 2px 12px rgba(0,0,0,0.3);
}
.sf-progress-track{
  width:100%; max-width:360px; height:6px; border-radius:999px;
  background:rgba(0,0,0,0.25); margin:0 auto 1.8rem; overflow:hidden;
}
.sf-progress-fill{
  width:0%; height:100%; border-radius:999px;
  background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,0.8);
}
.sf-fallback-link{
  display:block; margin:0 0 1.2rem; color:#fff; text-decoration:underline;
  font-size:.82rem; opacity:.65;
}
.sf-fallback-link:hover{ opacity:1; }
.sf-cancel{
  padding:.8rem 2rem; border-radius:999px;
  background:rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.6);
  color:#fff; font-size:.9rem; font-weight:700; letter-spacing:.03em;
  cursor:pointer; font-family:inherit;
  transition:background-color .2s ease, transform .2s ease;
}
.sf-cancel:hover, .sf-cancel:focus-visible{
  background:rgba(0,0,0,0.5); transform:translateY(-2px); outline:none;
}

@media (prefers-reduced-motion: reduce){
  .sf-stage, .sf-farewell-gradient{ animation:none !important; }
}