/* =============================================
   GLITCH TECH — Glitch Effects CSS
   Chromatic aberration, scanlines, glitch animations
   ============================================= */

/* ─── BASE GLITCH ELEMENT ─────────────────── */
.gt-glitch {
  position: relative;
  display:  inline-block;
}

.gt-glitch::before,
.gt-glitch::after {
  content:  attr(data-text);
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
}

.gt-glitch::before {
  color:     var(--gt-red);
  animation: glitch-before 4s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.gt-glitch::after {
  color:     var(--gt-cyan);
  animation: glitch-after 4s infinite linear;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-before {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  92% { transform: translate(-3px,  1px); opacity: 0.8; }
  94% { transform: translate( 3px, -1px); opacity: 0.6; }
  96% { transform: translate(-2px,  2px); opacity: 0.8; }
  98% { transform: translate( 2px, -2px); opacity: 0.6; }
}

@keyframes glitch-after {
  0%, 88%, 100% { transform: translate(0); opacity: 0; }
  90% { transform: translate( 3px,  2px); opacity: 0.8; }
  92% { transform: translate(-3px, -1px); opacity: 0.6; }
  94% { transform: translate( 3px,  1px); opacity: 0.8; }
  96% { transform: translate(-2px, -2px); opacity: 0.6; }
}

/* ─── HERO HEADLINE GLITCH (plays once on load) ─ */
.gt-glitch-hero {
  position:  relative;
  display:   inline-block;
  animation: hero-glitch-in 1.5s forwards;
}

@keyframes hero-glitch-in {
  0%   { opacity: 0; transform: skewX(-10deg); filter: blur(4px); }
  20%  { opacity: 1; transform: skewX(5deg); }
  40%  { transform: skewX(-3deg); }
  60%  { transform: skewX(2deg); }
  80%  { transform: skewX(-1deg); }
  100% { transform: skewX(0deg); filter: blur(0); }
}

/* ─── SCAN LINES TEXTURE ───────────────────── */
.gt-scanlines {
  position: relative;
}

.gt-scanlines::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 2px,
                    rgba(0, 0, 0, 0.08) 2px,
                    rgba(0, 0, 0, 0.08) 4px
                  );
  pointer-events: none;
  z-index:        1;
}

/* ─── GLITCH BORDER ANIMATION ──────────────── */
.gt-glitch-border {
  position: relative;
}

.gt-glitch-border::before {
  content:       '';
  position:      absolute;
  inset:         -1px;
  background:    linear-gradient(90deg, var(--gt-red), var(--gt-cyan), var(--gt-red));
  background-size: 200% 100%;
  border-radius: inherit;
  opacity:       0;
  transition:    opacity 0.3s;
  z-index:       -1;
  animation:     glitch-border-move 3s linear infinite;
}

.gt-glitch-border:hover::before {
  opacity: 1;
}

@keyframes glitch-border-move {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ─── SMALL GLITCH ON HOVER ─────────────────── */
.gt-glitch-sm {
  position: relative;
  display:  inline-block;
}

.gt-glitch-sm:hover::before {
  content:   attr(data-text);
  position:  absolute;
  top:       1px;
  left:      -1px;
  color:     var(--gt-red);
  clip-path: inset(0 0 50% 0);
  opacity:   0.8;
}

.gt-glitch-sm:hover::after {
  content:   attr(data-text);
  position:  absolute;
  top:       -1px;
  left:      1px;
  color:     var(--gt-cyan);
  clip-path: inset(50% 0 0 0);
  opacity:   0.8;
}

/* ─── LOADING / SHIMMER STATE ───────────────── */
.gt-loading {
  position: relative;
  overflow: hidden;
}

.gt-loading::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 204, 0.1), transparent);
  animation:  shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── GLITCH REVEAL (JS-triggered) ─────────── */
.gt-glitch-reveal {
  opacity: 0;
}

/* ─── GLITCH ARTIFACTS (Floating squares) ───── */
.gt-glitch-artifacts {
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        1;
  overflow:       hidden;
}

.gt-artifact {
  position:  absolute;
  animation: artifact-blink 4s infinite;
}

.gt-artifact-1 {
  top:            15%;
  right:          8%;
  width:          60px;
  height:         4px;
  background:     var(--gt-red);
  opacity:        0.6;
  animation-delay:-0.5s;
}

.gt-artifact-2 {
  top:              35%;
  right:            15%;
  width:            20px;
  height:           20px;
  border:           1px solid var(--gt-cyan);
  animation-delay: -1.2s;
}

.gt-artifact-3 {
  bottom:           25%;
  right:            5%;
  width:            3px;
  height:           40px;
  background:       var(--gt-cyan);
  opacity:          0.4;
  animation-delay: -2s;
}

.gt-artifact-4 {
  top:              60%;
  right:            20%;
  width:            80px;
  height:           2px;
  background:       linear-gradient(90deg, var(--gt-red), transparent);
  animation-delay: -0.8s;
}

.gt-artifact-5 {
  top:              45%;
  left:             5%;
  width:            12px;
  height:           12px;
  border:           1px solid var(--gt-red);
  opacity:          0.3;
  animation-delay: -1.7s;
}

@keyframes artifact-blink {
  0%, 85%, 100% { opacity: 0; transform: translate(0); }
  86%           { opacity: 0.8; transform: translate(-2px, 1px); }
  88%           { opacity: 0.3; transform: translate(3px, -1px); }
  90%           { opacity: 0.9; transform: translate(-1px, 2px); }
  92%           { opacity: 0.2; transform: translate(2px, 0); }
  94%           { opacity: 0.7; transform: translate(-3px, 1px); }
}

/* ─── NAV GLITCH LOGO ───────────────────────── */
.gt-nav-logo:hover .gt-nav-logo-text {
  animation: logo-glitch 0.4s steps(1) forwards;
}

@keyframes logo-glitch {
  0%   { text-shadow: -2px 0 var(--gt-red), 2px 0 var(--gt-cyan); }
  25%  { text-shadow:  2px 0 var(--gt-red), -2px 0 var(--gt-cyan); }
  50%  { text-shadow: -1px 0 var(--gt-red),  1px 0 var(--gt-cyan); }
  75%  { text-shadow:  1px 0 var(--gt-red), -1px 0 var(--gt-cyan); }
  100% { text-shadow: none; }
}

/* ─── 404 GLITCH EFFECT ─────────────────────── */
.gt-404-num {
  animation: num-glitch 6s infinite;
}

@keyframes num-glitch {
  0%, 85%, 100% {
    text-shadow: none;
    clip-path: none;
  }
  87% {
    text-shadow: -4px 0 var(--gt-red), 4px 0 var(--gt-cyan);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    transform: translate(-3px);
  }
  89% {
    text-shadow: 4px 0 var(--gt-red), -4px 0 var(--gt-cyan);
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translate(3px);
  }
  91% {
    text-shadow: -2px 0 var(--gt-red), 2px 0 var(--gt-cyan);
    clip-path: none;
    transform: translate(0);
  }
}

/* ─── SECTION DIVIDERS ──────────────────────── */
.gt-glitch-divider {
  width:      100%;
  height:     1px;
  position:   relative;
  background: var(--gt-border);
  overflow:   hidden;
}

.gt-glitch-divider::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      40%;
  height:     100%;
  background: linear-gradient(90deg, transparent, var(--gt-cyan), transparent);
  animation:  line-scan 4s linear infinite;
}

@keyframes line-scan {
  0%   { left: -40%; }
  100% { left: 140%; }
}

/* ─── BUTTON HOVER RIPPLE ───────────────────── */
.gt-btn::after {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity:       0;
  transition:    opacity 0.3s;
  border-radius: inherit;
  pointer-events:none;
}

.gt-btn:hover::after {
  opacity: 1;
}

/* ─── TYPING CURSOR FOR HERO TAG ─────────────── */
.gt-typing-cursor::after {
  content:   '|';
  animation: blink-cursor 1s step-end infinite;
  color:     var(--gt-cyan);
  margin-left: 2px;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ─── NOISE OVERLAY ─────────────────────────── */
.gt-noise {
  position:   relative;
}

.gt-noise::before {
  content:          '';
  position:         absolute;
  inset:            0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:   none;
  z-index:          0;
  opacity:          0.4;
}

/* ─── SERVICE CARD HOVER GLITCH LINE ─────────── */
.gt-service-item::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      0;
  height:     2px;
  background: linear-gradient(90deg, var(--gt-red), var(--gt-cyan));
  transition: width 0.5s ease;
}

.gt-service-item:hover::after {
  width: 100%;
}

/* ─── PORTFOLIO CARD HOVER GLITCH OVERLAY ─────── */
.gt-portfolio-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(255,59,59,0.1) 0%, rgba(0,229,204,0.1) 100%);
  opacity:    0;
  z-index:    1;
  transition: opacity 0.4s;
}

.gt-portfolio-card:hover::before {
  opacity: 1;
}

/* ─── CTA SECTION GLITCH FRAME ───────────────── */
.gt-cta-frame {
  position:      relative;
  padding:       60px;
  border:        1px solid var(--gt-border);
  border-radius: var(--radius-md);
}

.gt-cta-frame::before,
.gt-cta-frame::after {
  content:       '';
  position:      absolute;
  width:         20px;
  height:        20px;
}

.gt-cta-frame::before {
  top:         -1px;
  left:        -1px;
  border-top:  2px solid var(--gt-red);
  border-left: 2px solid var(--gt-red);
}

.gt-cta-frame::after {
  bottom:        -1px;
  right:         -1px;
  border-bottom: 2px solid var(--gt-cyan);
  border-right:  2px solid var(--gt-cyan);
}