/* =============================================
   Shared Rainbow Strings — header overlay
   Used by: index.html, YouTube.html, my-Gallery.html
   ============================================= */

.page-strings-wrap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* The header must be position:relative so the SVG sits inside it */
.u-header { position: relative; overflow: visible; }

/* ---- draw-hold-vanish cycle (No hold gap) ---- */
@keyframes str-draw {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: 1; }
  30% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
  35% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
  65% { stroke-dasharray: 1; stroke-dashoffset: -1; opacity: 1; }
  70%, 100% { stroke-dasharray: 1; stroke-dashoffset: -1; opacity: 0; }
}

/* ---- gentle float ---- */
@keyframes sf-up   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes sf-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }

/* ---- Google AI signature button animation (Synced with strings) ---- */
@keyframes ai-border-orbit {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ai-btn-glow {
  0%   { box-shadow: 0 0 0 transparent; text-shadow: none; }
  15%  { box-shadow: 0 0 16px rgba(6, 182, 212, 0.4), 0 0 24px rgba(168, 85, 247, 0.3); text-shadow: 0 0 8px rgba(6, 182, 212, 0.8); }
  85%  { box-shadow: 0 0 16px rgba(6, 182, 212, 0.4), 0 0 24px rgba(168, 85, 247, 0.3); text-shadow: 0 0 8px rgba(6, 182, 212, 0.8); }
  100% { box-shadow: 0 0 0 transparent; text-shadow: none; }
}

@keyframes ai-border-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Apply the glow to the button exactly when the strings pass (2.6s delay, 3.5s duration) */
.has-page-strings .u-nav-1 li:last-child .u-nav-link {
  position: relative;
  border-radius: 0.6rem;
  animation: ai-btn-glow 3.5s ease-in-out 2.6s forwards;
}

/* The animated gradient border */
.has-page-strings .u-nav-1 li:last-child .u-nav-link::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0.6rem;
  padding: 2px;
  background: linear-gradient(
    90deg, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444, #F97316, #FACC15, #10B981, #06B6D4
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  animation: 
    ai-border-orbit 3s linear infinite,
    ai-border-fade 3.5s ease-in-out 2.6s forwards;
}

/* ---- string path base ---- */
.ps { fill: none; stroke-linecap: round; opacity: 0; }

/* ---- per-string stagger + float ---- */
.ps-1 { animation: str-draw 9s ease-in-out 0.6s forwards, sf-up   3.4s ease-in-out 2.0s infinite; }
.ps-2 { animation: str-draw 9s ease-in-out 0.7s forwards, sf-down 4.2s ease-in-out 2.2s infinite; }
.ps-3 { animation: str-draw 9s ease-in-out 0.8s forwards, sf-up   5.1s ease-in-out 2.4s infinite; }
.ps-4 { animation: str-draw 9s ease-in-out 0.9s forwards, sf-down 3.1s ease-in-out 2.1s infinite; }
.ps-5 { animation: str-draw 9s ease-in-out 1.0s forwards, sf-up   4.6s ease-in-out 2.5s infinite; }

.page-strings-mobile { display: none; }

/* mobile adjustments */
@media (max-width: 768px) {
  .page-strings-desktop { display: none !important; }
  .page-strings-mobile { display: block !important; }

  /* Apply the glow to the hamburger button exactly when the strings pass (2.2s delay for mobile path) */
  .has-page-strings .menu-collapse > a {
    position: relative;
    border-radius: 0.4rem;
    animation: ai-btn-glow 3.5s ease-in-out 2.2s forwards;
    /* Fix weird Nicepage padding: perfectly hug the icon */
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 10px !important;
    margin-right: 30px !important; /* Transfer the 30px margin from the SVG to the button itself */
  }
  
  /* Remove the margin from the internal SVG so the button's border is perfectly tight */
  .has-page-strings .menu-collapse > a svg {
    margin: 0 !important;
  }

  .has-page-strings .menu-collapse > a::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 0.4rem;
    padding: 2px;
    background: linear-gradient(
      90deg, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444, #F97316, #FACC15, #10B981, #06B6D4
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    animation: 
      ai-border-orbit 3s linear infinite,
      ai-border-fade 3.5s ease-in-out 2.2s forwards;
  }
  .has-page-strings .u-nav-1 li:last-child .u-nav-link { animation: none; }
}