/* =========================================================
   FRIDAY AI - BRIGHTER RANDOM THINKING ORB + CUSTOM LOGO
   ========================================================= */

:root {
  --friday-c1: #22d3ee;
  --friday-c2: #ff7a18;
  --friday-c3: #8b5cf6;
  --friday-brightness: 1.35;
  --friday-glow-scale: 1.04;
  --friday-core-scale: 1.00;
  --friday-outer-speed: 26s;
  --friday-mid-speed: 15s;
  --friday-inner-speed: 10s;
  --friday-orbit-a-speed: 13s;
  --friday-orbit-b-speed: 19s;
  --friday-orbit-c-speed: 24s;
  --friday-orb-opacity: 0.84;
}

/* background */
html, body {
  background:
    radial-gradient(circle at 50% 50%, rgba(4,20,40,.65), transparent 38%),
    linear-gradient(180deg, #020814 0%, #03101d 45%, #020813 100%) !important;
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

/* main page above orb */
#page_wrapper {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* =========================================================
   TOP LEFT FRIDAY LOGO
   ========================================================= */
#friday-brand-badge {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 20;
  pointer-events: none;
}

#friday-brand-badge img {
  width: 112px;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(34,211,238,.45))
    drop-shadow(0 0 18px rgba(139,92,246,.22));
  opacity: .98;
}

/* =========================================================
   ORB WRAPPER
   ========================================================= */
#friday-orb-background {
  position: fixed;
  left: 50%;
  top: 52%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  opacity: var(--friday-orb-opacity);
  filter: brightness(var(--friday-brightness));
}

/* soft animated vertical beams behind orb */
.friday-bg-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  border-radius: 999px;
  filter: blur(30px);
  opacity: .20;
  animation: beamFloat 8s ease-in-out infinite alternate;
}

.beam-1 {
  left: 25%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--friday-c1) 50%, transparent), transparent);
}

.beam-2 {
  left: 48%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--friday-c2) 50%, transparent), transparent);
  animation-duration: 10s;
}

.beam-3 {
  left: 68%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--friday-c3) 50%, transparent), transparent);
  animation-duration: 12s;
}

/* =========================================================
   ORB HALOS
   ========================================================= */
.friday-orb-halo {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(22px);
}

.halo-1 {
  background: radial-gradient(circle, color-mix(in srgb, var(--friday-c1) 44%, transparent) 0%, transparent 64%);
  animation: haloPulse1 4.2s ease-in-out infinite alternate;
}

.halo-2 {
  background: radial-gradient(circle, color-mix(in srgb, var(--friday-c2) 30%, transparent) 0%, transparent 60%);
  animation: haloPulse2 5.7s ease-in-out infinite alternate;
}

.halo-3 {
  background: radial-gradient(circle, color-mix(in srgb, var(--friday-c3) 32%, transparent) 0%, transparent 62%);
  animation: haloPulse3 6.4s ease-in-out infinite alternate;
}

/* =========================================================
   RINGS
   ========================================================= */
.friday-ring,
.friday-segments,
.friday-core,
.friday-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.ring-outer {
  width: 82%;
  height: 82%;
  border: 2px solid color-mix(in srgb, var(--friday-c1) 45%, transparent);
  border-top-color: var(--friday-c1);
  border-right-color: color-mix(in srgb, var(--friday-c3) 40%, transparent);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--friday-c1) 30%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--friday-c1) 12%, transparent);
  animation: spinCW var(--friday-outer-speed) linear infinite;
}

.ring-mid {
  width: 64%;
  height: 64%;
  border: 2px dashed color-mix(in srgb, var(--friday-c2) 45%, transparent);
  border-left-color: var(--friday-c2);
  border-bottom-color: color-mix(in srgb, var(--friday-c1) 35%, transparent);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--friday-c2) 22%, transparent);
  animation: spinCCW var(--friday-mid-speed) linear infinite;
}

.ring-inner {
  width: 45%;
  height: 45%;
  border: 2px solid color-mix(in srgb, var(--friday-c3) 45%, transparent);
  border-top-color: var(--friday-c3);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--friday-c3) 28%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--friday-c1) 14%, transparent);
  animation: spinCW var(--friday-inner-speed) linear infinite;
}

.friday-segments {
  width: 54%;
  height: 54%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--friday-c1) 0deg 2deg,
      transparent 2deg 10deg,
      var(--friday-c2) 10deg 11.5deg,
      transparent 11.5deg 18deg,
      var(--friday-c3) 18deg 20deg,
      transparent 20deg 28deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 68%, black 69% 76%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 68%, black 69% 76%, transparent 77%);
  animation: spinCCW 28s linear infinite;
  opacity: .95;
}

/* =========================================================
   CORE
   ========================================================= */
.friday-core {
  width: 21%;
  height: 21%;
  background:
    radial-gradient(circle at 45% 40%,
      rgba(255,255,255,.96) 0%,
      color-mix(in srgb, var(--friday-c1) 70%, white) 10%,
      var(--friday-c1) 22%,
      color-mix(in srgb, var(--friday-c3) 42%, transparent) 48%,
      transparent 70%);
  box-shadow:
    0 0 20px color-mix(in srgb, var(--friday-c1) 60%, transparent),
    0 0 50px color-mix(in srgb, var(--friday-c2) 32%, transparent),
    0 0 80px color-mix(in srgb, var(--friday-c3) 30%, transparent);
  animation: corePulse 2.8s ease-in-out infinite alternate;
}

.friday-core-center {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 16px rgba(255,255,255,.95),
    0 0 30px color-mix(in srgb, var(--friday-c1) 55%, transparent);
}

/* =========================================================
   MULTI ORBITS
   ========================================================= */
.friday-orbit {
  border: 1.5px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 10px rgba(255,255,255,.02);
}

.orbit-a {
  width: 72%;
  height: 42%;
  transform: translate(-50%, -50%) rotate(-15deg);
  border-color: color-mix(in srgb, var(--friday-c1) 28%, transparent);
  animation: orbitA var(--friday-orbit-a-speed) linear infinite;
}

.orbit-b {
  width: 58%;
  height: 74%;
  transform: translate(-50%, -50%) rotate(24deg);
  border-color: color-mix(in srgb, var(--friday-c2) 24%, transparent);
  animation: orbitB var(--friday-orbit-b-speed) linear infinite;
}

.orbit-c {
  width: 78%;
  height: 60%;
  transform: translate(-50%, -50%) rotate(64deg);
  border-color: color-mix(in srgb, var(--friday-c3) 24%, transparent);
  animation: orbitC var(--friday-orbit-c-speed) linear infinite;
}

.friday-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  right: -9px;
  top: calc(50% - 9px);
  border-radius: 50%;
}

.dot-a {
  background: radial-gradient(circle, #fff, var(--friday-c1) 45%, transparent 72%);
  box-shadow: 0 0 14px var(--friday-c1), 0 0 26px color-mix(in srgb, var(--friday-c1) 70%, transparent);
}

.dot-b {
  background: radial-gradient(circle, #fff, var(--friday-c2) 45%, transparent 72%);
  box-shadow: 0 0 14px var(--friday-c2), 0 0 26px color-mix(in srgb, var(--friday-c2) 70%, transparent);
}

.dot-c {
  background: radial-gradient(circle, #fff, var(--friday-c3) 45%, transparent 72%);
  box-shadow: 0 0 14px var(--friday-c3), 0 0 26px color-mix(in srgb, var(--friday-c3) 70%, transparent);
}

/* =========================================================
   THINKING PARTICLES
   ========================================================= */
.friday-particles {
  position: absolute;
  inset: 0;
}

.friday-particle {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  animation: particleBlink 3s ease-in-out infinite alternate;
}

/* =========================================================
   PANELS
   ========================================================= */
.service-card {
  background:
    linear-gradient(145deg, rgba(4, 17, 34, 0.80), rgba(1, 9, 18, 0.78)) !important;
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.10),
    0 0 18px rgba(34,211,238,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.20),
    0 0 24px rgba(34,211,238,.15),
    0 0 34px rgba(139,92,246,.10);
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes spinCW {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinCCW {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to   { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes orbitA {
  from { transform: translate(-50%, -50%) rotate(-15deg); }
  to   { transform: translate(-50%, -50%) rotate(345deg); }
}

@keyframes orbitB {
  from { transform: translate(-50%, -50%) rotate(24deg); }
  to   { transform: translate(-50%, -50%) rotate(384deg); }
}

@keyframes orbitC {
  from { transform: translate(-50%, -50%) rotate(64deg); }
  to   { transform: translate(-50%, -50%) rotate(424deg); }
}

@keyframes corePulse {
  from {
    transform: translate(-50%, -50%) scale(.92);
    opacity: .85;
  }
  to {
    transform: translate(-50%, -50%) scale(var(--friday-core-scale));
    opacity: 1;
  }
}

@keyframes haloPulse1 {
  from { transform: scale(.92); opacity: .40; }
  to   { transform: scale(calc(1.04 * var(--friday-glow-scale))); opacity: .85; }
}

@keyframes haloPulse2 {
  from { transform: scale(.96); opacity: .25; }
  to   { transform: scale(calc(1.10 * var(--friday-glow-scale))); opacity: .60; }
}

@keyframes haloPulse3 {
  from { transform: scale(1.00); opacity: .22; }
  to   { transform: scale(calc(1.15 * var(--friday-glow-scale))); opacity: .58; }
}

@keyframes beamFloat {
  from { transform: translateY(-10px) scaleY(.95); opacity: .10; }
  to   { transform: translateY(10px) scaleY(1.06); opacity: .24; }
}

@keyframes particleBlink {
  0%   { transform: scale(.65); opacity: .18; }
  35%  { transform: scale(1.35); opacity: .85; }
  70%  { transform: scale(.85); opacity: .35; }
  100% { transform: scale(1.15); opacity: .90; }
}

/* =========================================================
   ORB SIZE / TIGHTER LAYOUT / SMOOTHER COLOR BLENDING
   ========================================================= */

#friday-orb-background {
  width: 680px !important;
  height: 680px !important;
  top: 50% !important;
  opacity: 0.88 !important;
  transition:
    filter 1.8s ease,
    opacity 1.8s ease !important;
}

.ring-outer {
  width: 72% !important;
  height: 72% !important;
}

.ring-mid {
  width: 56% !important;
  height: 56% !important;
}

.ring-inner {
  width: 39% !important;
  height: 39% !important;
}

.friday-segments {
  width: 46% !important;
  height: 46% !important;
}

.friday-core {
  width: 18% !important;
  height: 18% !important;
}

.orbit-a {
  width: 64% !important;
  height: 36% !important;
}

.orbit-b {
  width: 50% !important;
  height: 64% !important;
}

.orbit-c {
  width: 68% !important;
  height: 52% !important;
}

/* smoother color changes */
.friday-ring,
.friday-segments,
.friday-core,
.friday-orbit,
.friday-dot,
.friday-orb-halo,
.friday-bg-beam {
  transition:
    border-color 2.2s ease,
    background 2.2s ease,
    box-shadow 2.2s ease,
    filter 2.2s ease,
    opacity 2.2s ease !important;
}

/* ===== FRIDAY LOGO - FLOATING / NO BACKGROUND ===== */

#friday-brand-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

#friday-brand-badge img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  width: 115px !important;
  height: auto !important;

  filter:
    drop-shadow(0 0 7px rgba(0, 220, 255, .30))
    drop-shadow(0 0 14px rgba(0, 170, 255, .16)) !important;
}


/* =========================================================
   FRIDAY AI HEADER TUNE
   - stamp logo into top-left
   - blend logo into background
   - shrink search bar
   - move top data over
   ========================================================= */

#friday-brand-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 30 !important;
  width: 76px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

#friday-brand-badge img {
  width: 76px !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
  mix-blend-mode: screen;
  filter:
    brightness(1.16)
    contrast(1.08)
    saturate(1.08)
    drop-shadow(0 0 8px rgba(0, 220, 255, 0.25))
    drop-shadow(0 0 18px rgba(130, 100, 255, 0.12)) !important;
}

/* top header row that holds stats/search/time */
.friday-top-row {
  position: relative !important;
  padding-left: 95px !important;
}

/* search wrapper */
.friday-search-box {
  max-width: 760px !important;
  min-width: 430px !important;
  width: 100% !important;
}

.friday-search-box input,
.friday-search-box input[type="text"] {
  font-size: 0.98rem !important;
}

/* slightly tighten top widgets spacing if needed */
.friday-top-row * {
  box-sizing: border-box !important;
}

@media (max-width: 1300px) {
  .friday-top-row {
    padding-left: 84px !important;
  }

  #friday-brand-badge,
  #friday-brand-badge img {
    width: 64px !important;
  }

  .friday-search-box {
    max-width: 52vw !important;
    min-width: 320px !important;
  }
}

/* =========================================================
   FRIDAY LOGO FINAL POSITION FIX
   ========================================================= */

#friday-brand-badge {
  position: fixed !important;

  top: 126px !important;
  left: 18px !important;

  z-index: 50 !important;

  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 78px !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  pointer-events: none !important;

  transform: none !important;
}

#friday-brand-badge img {
  display: block !important;

  width: 78px !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  opacity: .95 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  filter:
    brightness(1.08)
    contrast(1.06)
    drop-shadow(0 0 7px rgba(0, 220, 255, .30))
    !important;
}

/* Give top bar a little room so logo does not collide */
#information-widgets {
  margin-left: 88px !important;
  width: calc(100% - 88px) !important;
}

/* Keep search slightly shorter */
#information-widgets form,
#information-widgets [class*="search"] {
  max-width: 72vw !important;
}

/* Give first section some breathing room */
main {
  padding-top: 4px !important;
}


/* =========================================================
   FRIDAY AI LOGO - page stamped, scrolls with page
   ========================================================= */

/* make the page the anchor, not the viewport */
body,
main {
  position: relative !important;
}

/* logo should be part of the page, not a fixed overlay */
#friday-brand-badge {
  position: absolute !important;
  top: 118px !important;
  left: 18px !important;

  z-index: 20 !important;

  width: 78px !important;
  height: auto !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;

  pointer-events: none !important;
}

/* make the dark box blend into the page better */
#friday-brand-badge img {
  display: block !important;
  width: 78px !important;
  height: auto !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  opacity: .96 !important;

  /* black areas fade into dark background */
  mix-blend-mode: screen !important;

  filter:
    brightness(1.06)
    contrast(1.12)
    drop-shadow(0 0 8px rgba(0, 220, 255, .25))
    !important;
}

/* push header widgets/search/date right so logo has room */
#information-widgets {
  margin-left: 92px !important;
  width: calc(100% - 92px) !important;
}

/* slightly tighter search so time/date has breathing room */
#information-widgets form,
#information-widgets [class*="search"] {
  max-width: 70vw !important;
}

/* keep first content row from colliding with logo */
main {
  padding-top: 6px !important;
}