/* Global Styles*/
* { margin: 0; padding: 0; box-sizing: border-box; }

a{
    color: white;
    text-decoration: none;
}

img, iframe {
    max-width: 100%;
    height:auto;
}

/* 
  This is the "boring" phase.
  This section marks the beginning of the code that Claude helped me with for my glitch feature.
*/
body {
  height: 100vh;
  background: #ffffff;           /* white to start */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Times New Roman', Times, serif;
  overflow: hidden;              /* hides anything that shakes off-screen */
}

/* --- INTRO SCREEN --- */

/*
  The intro screen fills the whole page and centers the text.
*/
.intro-screen {
  position: fixed;        /* stays in place even if page scrolls */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;            /* sits on top of everything */
}

/* The typing text on the intro screen */
.hero__dynamic {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  color: #000000;       
  min-height: 1.2em;
  display: inline-block;
}

/* Blinking cursor — same as yours */
.cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: #000000;
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 0.7s step-end infinite;
}

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

/* --- GLITCH CLASSES --- */

/*
  When JS adds the class "glitching" to the intro screen,
  this animation kicks in. It makes the whole div shake and flicker.
*/
.intro-screen.glitching {
  animation: glitch-shake 0.08s infinite;  /* shake very fast */
}

/*
  @keyframes defines what the animation actually does over time.
  "translate" moves the element around slightly.
  We also mess with color channels using "text-shadow" (coming in a moment).
*/
@keyframes glitch-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 2px); }
  40%  { transform: translate(4px, -2px); }
  60%  { transform: translate(-2px, 4px); }
  80%  { transform: translate(2px, -4px); }
  100% { transform: translate(0, 0); }
}

/*
  This class gets added to the TEXT during glitching.
  It creates the "red/blue offset" glitch look using text-shadow.
  text-shadow can add colored ghost copies of your text slightly offset.
*/
.hero__dynamic.glitch-text {
  color: white;
  /* 
    Two ghost copies: one red shifted left, one cyan shifted right.
    This is the classic "chromatic aberration" glitch effect.
  */
  text-shadow:
    -4px 0 red,
    4px 0 cyan;
  animation: glitch-text-flicker 0.1s infinite;
}

@keyframes glitch-text-flicker {
  0%   { text-shadow: -4px 0 red, 4px 0 cyan; opacity: 1; }
  25%  { text-shadow: 4px 0 red, -4px 0 cyan; opacity: 0.8; }
  50%  { text-shadow: -6px 0 cyan, 6px 0 red; opacity: 1; }
  75%  { text-shadow: 0 0 red, 0 0 cyan;      opacity: 0.6; }
  100% { text-shadow: -4px 0 red, 4px 0 cyan; opacity: 1; }
}

/*
  When JS adds "glitching" to the body, the background starts flickering
  between black and white.
*/
body.glitching {
  animation: bg-flicker 0.1s infinite;
}

@keyframes bg-flicker {
  0%   { background: #ffffff; }
  30%  { background: #000000; }
  60%  { background: #ffffff; }
  80%  { background: #000000; }
  100% { background: #ffffff; }
}

/* --- REAL SITE --- */

/*
  "hidden" means invisible and takes up no space.
  JS removes this class to reveal the real site.
*/
.hidden {
  display: none;
}

/*
  Your actual website styles. 
  Dark background, white text, etc.
  You'll expand this a lot as you build your site!
*/
.real-site {
  width: 100%;
  min-height: 100vh;
  /* background-color: black;       */
  color: #ffffff;
  font-family: 'Times New Roman', Times, serif;
  align-self: flex-start;
}

/*
  When the real site fades in, we use a CSS "transition" + "fade-in" class.
  A transition makes a style change happen gradually instead of instantly.
*/
.real-site.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*  This section marks the end of the code that Claude helped me with for my glitch feature. */

/*NAVBAR STYLES*/
header{
    padding:10px;
    font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
    font-style: normal;
    background-color: hotpink;
}

.menu-item {
    font-size:1.5em;
    margin:20px;
}

nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
    height:50px;
    padding:10px;
    text-shadow: 2px 2px 3px black;
}

.logo{
    max-width: 50px;
}

/*HIDE THE DESKTOP NAV ON MOBILE*/
.desktop-nav{
    display:none;
}

/*THE HAMBURGER MENU*/

            .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: hotpink;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
            font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
            font-style: normal;
            }

            .sidenav a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: black;
            display: block;
            transition: 0.3s;
            }

            .sidenav a:hover {
            color: white;
            text-shadow: 2px 2px 3px black;
            }

            .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            }

/* Homepage styles */
#name-words{
    text-align: center;
    font-size: 40px;
    padding-top: 10px;
    font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
    font-style: normal;
}

#name{
    font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
    font-style: normal;
    text-align: center;
    font-size: 40px;
    padding-bottom: 10px;
    text-shadow: 2px 2px 3px hotpink;
    margin: 10px 10px 10px 10px;
}

#face-pic{
    height: auto;
}   

#cta-button{
    background:hotpink;
    font-size: 12px;
    padding:20px;
    justify-content: center;
    align-self: center;
    font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
    font-style: normal;
        border-radius: 4px;
}

.text-group {
  display: flex;
  flex-direction: column;   
  justify-content: center;   
  background-color: black;
  
}

/* ABOUT ME STYLES */

.body-tag{
    background-image: url('../img/background-mobile-pic.png'); 
    /* I'm not sure why my background image has white space underneath on my contact page */
    background-size: cover;
    background-repeat: no-repeat;
    overflow: visible;    
}

.heading-text{
    font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
    font-style: normal;
    font-size: 40px;
    color: black;
    text-align: center;
    margin-top: 80px;
}

.bio{
    font-size: 13px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 30px;
    color: black;
    align-items: center;
    font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
    font-style: normal;
}

.bio-text{
    background-color: #f3f1f2;
    border-radius: 10px;
    padding: 10px;
}

/* AI SKILLS STYLES */
#explore-space-id{
    width: 100%;
    height: 450px;
}

#ai-thoughts{
    border: 1px solid hotpink;          
    background-color: black;      
    color: white;                   
    border-radius: 4px; 
    margin: 15px;
    font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
    font-style: normal;
    padding: 10px;
    font-size: 12px;
}

/* HUMAN SKILLS STYLES */
/* I used my JS part 1 work as inspriation because I liked the design  */

#human-body-tag {
    height: auto;       
    overflow: visible;  
}
 
.container {                                             
      min-height: 100vh;                               
      align-content: center;          
      justify-content: center;           
      padding: 48px 24px;  
      height: auto;      
      overflow: visible; 
      background-image: url('../img/brick-wall.jpeg'); background-size: cover;
    }

    #calendar-mobile{
        display: flex;
        justify-content: center;
        height: 600px;
    }

    #human-skills{
      font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
      font-style: normal;
      text-align: center;                           
      color: white;        
      margin-bottom: 8px;  
      text-shadow: 2px 2px 3px black;
    }
 
    .btn-row {
      display: flex;                  
      flex-wrap: wrap;                        
      justify-content: center;    
      gap: 14px;                               /* Puts 14 pixels of space between each button */
      margin-bottom: 40px;               
    }
 
    .skill-btn {
      font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
      font-style: normal;
      letter-spacing: 2px;          
      padding: 12px 25px;               
      border: 1px solid hotpink;          
      background-color: black;      
      color: white;                   
      border-radius: 4px;             
      transition: background-color 0.2s, color 0.2s;  
    }
 
    .skill-btn:hover {
      background-color: hotpink;     
      color: #0d0d0d; 
    }                         
 
    .skill-btn.active {
      background-color: hotpink;         
      color: #0d0d0d;          
    }
 
    .explanation-box {
      border: 1px solid #2a2a2a;      
      border-left: 3px solid hotpink;      
      border-radius: 4px;                 
      padding: 28px 32px;                 
      background-color: #161616;     
      display: none;                         
    }
 
    .explanation-box.visible {
      display: block;         
    }
 
   
    .skill-label {
     font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
     font-style: normal;       
      color: hotpink;  
      margin-bottom: 12px;            
    }
 
    .skill-text {
        font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
        font-style: normal;  
        font-size: 15px;               
        line-height: 1.85;                    
        color: white;   
        margin-bottom: 15px;
    }

    #calendar-desktop{
        display:none;
    }

    #calendar-mobile{
        display: flex;
    }

    video, audio {
    max-width: 100%;
}

/* CONTACT STYLES */

#contact-info{
    background-image: url('../img/spray-paint.png');
    background-size: 130%;
    background-position: -40px center;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;  
    min-height: 100vh;
    flex-direction: column; 
    background-repeat: no-repeat;
    font-family: "Faculty Glyphic", sans-serif;font-weight: 400;
    font-style: normal; 
    /* margin-bottom: 50px; */
}

#contact-style{
    font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
    font-style: normal;
}


 @media screen and (min-width:1081px){
    /*Hide the mobile nav once the screen is 1081 pixels wide*/
    .mobile-nav{
        display:none;
    }
    /*Show the desktop nav*/
    .desktop-nav{
        display:flex;
    }

    .logo{
    max-width: 60px;
}

    .face-intro {
  display: flex;
  flex-direction: row;       /* text-group on left, image on right */
  width: 100%;               /* takes up the full width of the page */
  height: calc(100vh - 70px); /* fills the screen minus the nav bar height */
  overflow: hidden;
} 

.text-group {
  display: flex;
  flex-direction: column;    /* THIS is where column belongs */
  justify-content: center;   /* centers the text vertically in the left half */
  padding-left: 2rem;        /* some breathing room from the edge */
}

#face-pic{
display: block;
  width: auto;               /* keeps the image's natural proportions */
  object-fit: cover;        
  max-width: none; 
  flex-shrink: 0;
}

#name-words{
    display: flex;
    flex-direction: column;
    font-size: 60px;
    text-align: center;

}

#name{
    font-family: "cc-phat-boi-bold", sans-serif;font-weight: 700;
    font-style: normal;
    font-size: 70px;
    text-align: center;
    padding-bottom: 25px;
}
/* ABOUT ME STYLES */
.body-tag{
    background-image: url('../img/background-pic.png');
    background-size: cover;
}
.bio{
        display:flex;
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 40px;
    }

    .bio img{
        max-width: 425px;
        height: 350px;
        margin-right:10px;
        object-fit: cover;
        padding-top: 5px;
    }

    .bio p{
        display:block;
        font-size: 20px;
        margin-right: 100px;
    }

    /* AI SKILLS STYLES */

    #explore-space-id{
    width: 100%;
    height: 700px;
}

#ai-thoughts{
    margin-left: 300px;
    margin-right: 300px;
    font-size: 15px;
}


    /* HUMAN SKILLS STYLES */
    #calendar-mobile{
        display: none;
    }

    #calendar-desktop{
        display:flex;
    }

    /* CONTACT STYLES */
    #contact-info{
    background-size: 50%;
    background-position: 375px center;
}

}