/* Halloween 2026 Lightning Animation Package */

@font-face{font-family:"Baskerville";src:url("fonts/Baskerville.ttc");font-display:swap}

/* Title image container */
.fgt_title_image{margin:0 0 1.6rem;border-radius:0;overflow:hidden;
  background:#1e1d22;position:relative}
.fgt_title_image img{width:100%;height:auto;object-fit:contain;display:block}

/* Lightning flash overlay */
.fgt_lightning_overlay{position:absolute;top:0;right:0;width:100%;height:100%;
  background:linear-gradient(135deg,rgba(255,255,255,0.95) 12%,rgba(255,255,255,0) 18%,rgba(255,255,255,0.95) 37%,rgba(255,255,255,0) 43%,rgba(255,255,255,0.95) 62%,rgba(255,255,255,0) 68%,rgba(255,255,255,0.95) 87%,rgba(255,255,255,0) 93%);
  pointer-events:none;opacity:0;animation:fgt_lightning_flash 1.2s ease-out forwards;
  animation-delay:0s;background-size:400% 100%;background-position:0% 0%}

/* Animated logo with glow */
.fgt_lightning_logo{position:absolute;left:49%;
  width:38%;max-width:420px;opacity:0.1;pointer-events:none;
  top:22%;transform:translate(-50%, -50%);
  animation:fgt_logo_reveal 1.2s ease-out forwards;animation-delay:0s}

/* Animated text below canvas */
.fgt_lightning_text{position:absolute;left:50%;transform:translateX(-51%);
  font-family:"Baskerville",serif;font-size:clamp(1.8rem,6vw,4rem);
  color:#F0F0F0;opacity:0.01;pointer-events:none;letter-spacing:2px;font-weight:bold;
  animation:fgt_text_reveal 1.2s ease-out forwards;
  white-space:nowrap;width:90%;max-width:100%;text-align:center;line-height:1.2;display:none}
.fgt_lightning_text::before{content:attr(data-text)}

/* All lines appear at the same position */
.fgt_lightning_text{top:38%}
.fgt_lightning_text[data-line="1"]{animation-delay:0s}
.fgt_lightning_text[data-line="2"]{animation-delay:0s}
.fgt_lightning_text[data-line="3"]{animation-delay:0s}

/* Lightning flash keyframe - bright flash from right */
@keyframes fgt_lightning_flash{
  0%{opacity:0;background:linear-gradient(135deg,rgba(255,255,255,0.95) 12%,rgba(255,255,255,0) 18%,rgba(255,255,255,0.95) 37%,rgba(255,255,255,0) 43%,rgba(255,255,255,0.95) 62%,rgba(255,255,255,0) 68%,rgba(255,255,255,0.95) 87%,rgba(255,255,255,0) 93%)}
  12%{opacity:0.95;background:linear-gradient(135deg,rgba(255,255,255,1) 12%,rgba(255,255,255,0.7) 18%,rgba(255,255,255,1) 37%,rgba(255,255,255,0.7) 43%,rgba(255,255,255,1) 62%,rgba(255,255,255,0.7) 68%,rgba(255,255,255,1) 87%,rgba(255,255,255,0.7) 93%)}
  18%{opacity:0.4;background:linear-gradient(135deg,rgba(255,255,255,0.6) 12%,rgba(255,255,255,0.1) 18%,rgba(255,255,255,0.6) 37%,rgba(255,255,255,0.1) 43%,rgba(255,255,255,0.6) 62%,rgba(255,255,255,0.1) 68%,rgba(255,255,255,0.6) 87%,rgba(255,255,255,0.1) 93%)}
  28%{opacity:0.85;background:linear-gradient(135deg,rgba(255,255,255,0.9) 12%,rgba(255,255,255,0.5) 18%,rgba(255,255,255,0.9) 37%,rgba(255,255,255,0.5) 43%,rgba(255,255,255,0.9) 62%,rgba(255,255,255,0.5) 68%,rgba(255,255,255,0.9) 87%,rgba(255,255,255,0.5) 93%)}
  38%{opacity:0.15;background:linear-gradient(135deg,rgba(255,255,255,0.9) 12%,rgba(255,255,255,0.5) 18%,rgba(255,255,255,0.9) 37%,rgba(255,255,255,0.5) 43%,rgba(255,255,255,0.9) 62%,rgba(255,255,255,0.5) 68%,rgba(255,255,255,0.9) 87%,rgba(255,255,255,0.5) 93%)}
  100%{opacity:0;background:linear-gradient(135deg,rgba(255,255,255,0.95) 12%,rgba(255,255,255,0) 18%,rgba(255,255,255,0.95) 37%,rgba(255,255,255,0) 43%,rgba(255,255,255,0.95) 62%,rgba(255,255,255,0) 68%,rgba(255,255,255,0.95) 87%,rgba(255,255,255,0) 93%)}
}

/* Logo reveal with glow keyframe - longer fade-out */
@keyframes fgt_logo_reveal{
  0%{opacity:0.01;filter:drop-shadow(0 0 0px rgba(255,255,255,0))}
  5%{opacity:0.8;filter:drop-shadow(0 0 15px rgba(255,255,255,0.9)) drop-shadow(0 0 25px rgba(255,200,100,0.6))}
  10%{opacity:0.4;filter:drop-shadow(0 0 8px rgba(255,255,255,0.4))}
  12%{opacity:0.7;filter:drop-shadow(0 0 12px rgba(255,255,255,0.7)) drop-shadow(0 0 20px rgba(255,200,100,0.4))}
  15%{opacity:0.4;filter:drop-shadow(0 0 5px rgba(255,255,255,0.1))}
  25%{opacity:0.25;filter:drop-shadow(0 0 2px rgba(255,255,255,0.05))}
  100%{opacity:0.01;filter:drop-shadow(0 0 0px rgba(255,255,255,0))}
}

/* Text reveal with glow keyframe - longer fade-out */
@keyframes fgt_text_reveal{
  0%{opacity:0.01;filter:drop-shadow(0 0 0px rgba(255,255,255,0))}
  5%{opacity:0.9;filter:drop-shadow(0 0 8px rgba(255,255,255,0.8)) drop-shadow(0 0 15px rgba(255,200,100,0.5))}
  10%{opacity:0.35;filter:drop-shadow(0 0 4px rgba(255,255,255,0.3))}
  12%{opacity:0.75;filter:drop-shadow(0 0 10px rgba(255,255,255,0.7)) drop-shadow(0 0 18px rgba(255,200,100,0.3))}
  15%{opacity:0.55;filter:drop-shadow(0 0 3px rgba(255,255,255,0.08))}
  75%{opacity:0.25;filter:drop-shadow(0 0 1px rgba(255,255,255,0.02))}
  100%{opacity:0.01;filter:drop-shadow(0 0 0px rgba(255,255,255,0))}
}