/* 🏡 Index.css - Stylesheet for the homepage.
  Defines styles specific to the home of Tori Schuyler.
*/

/*
  📄 Container for "whoami" content
  Controls width, spacing, and typography with a mobile-first approach
*/
.who-am-i-container {
  /* --- Size It --- */
  max-width: 100vw;
  line-height: 1.6;

  /* 1.25rem = 20px (16px root × 1.25) */
  font-size: 1.25rem;

  /* --- Space It --- */

  /* Centers container horizontally */
  margin: 0 auto;

  /* Scalable inner spacing (32px ÷ 16px = 2rem) */
  padding: 2rem;
}

/* Page Heading */
.who-am-i-container h1 {
  /* --- Size It --- */
  font-size: 4rem;

  /* --- Space It --- */

  /* Hides header text until the typewriter keyframes animation reveals it on the page */
  overflow: hidden;

  /* --- Style It --- */

  /* 
    Gold glow: 0 0 (no offset), 6px (blur radius), #D4AF37 (muted gold)
  
    0 - Horizontal offset (How far the shadow moves left or right from the text).
    0 - Vertical offset (How far the shadow moves up or down from the text).
    6px - Blur radius (How blurry or spread out the shadow gets.
    Bigger number = softer, wider glow; smaller = sharper, tighter edge).

    Glow Control: For shadows/glows, px is common bc you often want 
    a fixed, predictable effect, not something that shifts.
  */
  text-shadow: 0 0 6px #D4AF37;

  /* Keeps text on one line so it types out like a typewriter */
  white-space: nowrap;

  /* --- Chaos It --- */

  /*
    Typewriter effect: Text appears character-by-character.
    - 2s duration for a relaxed pace.
    - steps() mimics the typewriter "jump" per character—assuming ~10 chars in "whoami"
    - Forwards keeps the text visible after animation ends.
  */
  animation: typewriter 2s steps(10) forwards;
}

/* Hide the cursor on mobile */
.who-am-i-container h1::after {
  /* --- Style It --- */

  /* Removes the "|" */
  content: "";
}

/* Paragraph text */
.who-am-i-container p {
  /* --- Space It --- */
  margin-bottom: 0.5rem;
}

/* Unordered list */
.who-am-i-container ul {
  /* --- Space It --- */
  padding-left: 1rem;

  /* --- Style It --- */

  /* --- Remove default bullets --- */
  list-style-type: none;
}

/* List items */
.who-am-i-container li {
  /* --- Space It --- */
  margin-bottom: 0.5rem;
  padding-left: 2.2rem;

  /*
    Sets <li> as the starting point for the ::before emojis.
    Without this, the emojis would move to the page's left edge.
  */
  position: relative;
}

/* Custom emoji bullets */
.who-am-i-container li:nth-child(1)::before {
  /* --- Space It --- */

  /* Places the emoji at the left edge of the <li>, which is indented by the <ul> */
  position: absolute;

  /* Moves the emoji to the left edge of the <li> */
  left: 0;

  /* --- Style It --- */
  content: '🎮';
}

.who-am-i-container li:nth-child(2)::before {
  /* --- Space It --- */
  position: absolute;
  left: 0;

  /* --- Style It --- */
  content: '🔬';
}

.who-am-i-container li:nth-child(3)::before {
  /* --- Space It --- */
  position: absolute;
  left: 0;

  /* --- Style It --- */
  content: '😌';
}

/* Fallback for unsupported ::before */
@supports not (selector(::before)) {
  .who-am-i-container ul {
    list-style-type: disc;
  }
}

/* Sleeker hyperlink styling for bullet points */
.who-am-i-container ul a {
  /* --- Style It --- */
  color: inherit; /* Matches surrounding text color for a seamless look */
  text-decoration: underline; /* Adds a subtle underline by default to indicate clickability */
  text-decoration-color: rgba(212 175 55 / 70%); /* Slightly bolder gold for more distinction */
  text-underline-offset: 0.2em; /* Slight offset for a modern, spaced look */
  text-decoration-thickness: 4px; /* Makes the underline a bit thicker for better visibility */

  /* --- Chaos It --- */
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/* Hover/focus state for hyperlinks */
.who-am-i-container ul a:hover,
.who-am-i-container ul a:focus {
  /* --- Style It --- */
  color: #D4AF37; /* Muted gold to tie into the site's glow theme */
  text-decoration-color: #D4AF37; /* Full opacity gold underline on interaction for feedback */
  text-decoration-thickness: 2px; /* Keeps consistent thickness on hover for a polished feel */
}

/* Page Subheading */
.who-am-i-container h2 {
  /* --- Size It --- */

  /* 1.25rem = 20px (16px root × 1.25) */
  font-size: 1.25rem;

  /* --- Space It --- */
  margin-top: 2rem;

  /* --- Style It --- */
  text-decoration: underline;
}

/* Life branch ASCII art */
.life-branch {
  /* --- Size It --- */

  /* Keeps the ASCII branch display within the parent container's width */
  max-width: 100%;

  /* Includes padding in the element's width to prevent overflow */
  box-sizing: border-box;

  /* 0.875rem = 14px (16px root × 0.875) */
  font-size: 0.875rem;

  /* --- Space It --- */
  padding-left: 1rem;

  /* --- Style It --- */
  font-family: monospace;

  /* Allows text to wrap while preserving whitespace for ASCII structure */
  white-space: pre-wrap;
}

/* Toggle desktop/mobile branches */
.life-branch-desktop {
  display: none;
}

.life-branch-mobile {
  display: block;
}

/* Gallery container */
.gallery {
  /* --- Space It --- */
  margin-top: 30px;
  text-align: center;
}

/* Hides the radio buttons so only the toggles are visible */
.gallery input {
  display: none;
}

/* Hides all image labels by default to show only the selected image */
.gallery-images label {
  display: none;
}

/* Gallery images */
.gallery-images label img {
  /* --- Size It --- */
  max-width: 100%;

  /* Maintains aspect ratio when scaled */
  height: auto;

  /* --- Space It --- */

  /* Makes the image a block element to allow margin centering */
  display: block;

  /* Adds 1rem top/bottom spacing; centers horizontally with auto margins */
  margin: 1rem auto;

  /* --- Style It --- */

  /* Adds a subtle border and shadow for visual polish */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

/* Shows the image label when its corresponding radio button is selected */
#tori-headshot:checked ~ .gallery-images label[for="tori-headshot"],
#tori-marathon:checked ~ .gallery-images label[for="tori-marathon"] {
  display: block;
}

/* Kepler triangle toggles */
.gallery-controls .kepler {
  /* --- Size It --- */
  width: 30px;
  height: 30px;

  /* --- Space It --- */

  /* Makes the toggle sit side by side while allowing width and height styling. */
  display: inline-block;

  /* Adds 5 pixels of space on the left and right of each toggle for separation. */
  margin: 0 5px;

  /* --- Style It --- */
  background: var(--header-color);

  /* 
    Creates a Kepler right triangle by clipping to a polygon with three vertices:
    - (0% 100%): Bottom-left corner - the right angle vertex
    - (78.6% 100%): Bottom-right vertex - forming the base
    - (0% 0%): Top-left vertex - top of the height

    This creates a right triangle where:
    - Base = 78.6% of element width
    - Height = 100% of element height
    - Right angle at bottom-left

    The 78.6% value comes from 1/√φ ≈ 0.786, creating a Kepler triangle where
    the sides are in the golden ratio relationship:
    - Base : Height : Hypotenuse = 1 : √φ : φ
    - Or approximately 1 : 1.272 : 1.618

    This means if the element is square, the triangle will have the proper Kepler
    proportions. For non-square elements, the ratio will be scaled accordingly.
    
    The Kepler triangle is tied to the golden ratio (φ ≈ 1.6180339887), where
    φ = (1 + √5)/2 and √φ ≈ 1.27201964951.
   */
  clip-path: polygon(0% 100%, 78.6% 100%, 0% 0%);

  /* --- Chaos It --- */

  /* Shows a pointing hand on hover to indicate the triangle is clickable. */
  cursor: pointer;

  /* Smoothly changes the triangle’s background color over 0.3 second. */
  transition: background 0.3s ease;
}

/* Selected toggle state */
#tori-headshot:checked ~ .gallery-controls label[for="tori-headshot"],
#tori-marathon:checked ~ .gallery-controls label[for="tori-marathon"] {
  background: #FC3;
}

/* Hover/focus state for toggles */
.gallery-controls .kepler:hover,
.gallery-controls .kepler:focus {
  background: goldenrod;
}

/* Torii Gate/Gemini Toggle ⛩️♊️ */
#torii-gemini-toggle {
  /* --- Size It --- */

  /* 3em = 3 × 48px = 144px */
  font-size: 3em;

  /* --- Space It --- */
  padding: 0.5rem 1.5rem;

  /* --- Style It --- */

  /* Wipes out any background, so the toggle emoji blends in with the nav bar */
  background: none;

  /* Removes the border; uncomment to see the toggle’s padding and margin during design */
  border: none;

  /* --- Chaos It --- */
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Grows the emoji to 1.2x size scaled evenly from the center */
#torii-gemini-toggle:hover {
  /* --- Chaos It --- */
  transform: scale(1.2);
}

/* Keyframes for typewriter effect */
@keyframes typewriter {
  /* Starts with no width, text "hidden" */
  from {
    width: 0;
  }

  /* Expands to full width, revealing text */
  to {
    width: 100%;
  }
}

/* Blinking cursor effect */
@keyframes blink {
  /* Starts fully visible */
  0% { opacity: 1; }

  /* Fades to almost off, but softer */
  50% { opacity: 1; }

  /* Ends fully hidden */
  100% { opacity: 0; }
}

/*
  💻 Tablet/Desktop Styles
  Applies above 768px (tablet portrait width, e.g., iPad).
*/
@media (width >= 769px) {
  .who-am-i-container h1 {
    /* --- Style It --- */
    text-shadow: 0 0 18px #D4AF37;
  }

  .who-am-i-container h2 {
    /* --- Style It --- */

    /* 1.5rem = 24px (16px root × 1.5) */
    font-size: 1.5rem;
  }

  .life-branch {
    /* --- Size It --- */
    font-size: 1rem;
  }

  /* Toggle desktop/mobile branches */
  .life-branch-desktop {
    display: block;
  }

  .life-branch-mobile {
    display: none;
  }

  /* Blinking cursor */
  .who-am-i-container h1::after {
    /* --- Style It --- */
    content: "|";

    /* --- Chaos It --- */

    /* Blinks every 1s for 7 cycles, then stops */
    animation: blink 1s 7 forwards;
  }

    #torii-gemini-toggle {
    /* --- Size It --- */

    /* 2em = 2 × 32px = 64px */
    font-size: 2em;
  }
}