/* Define color variables */
:root {
    --black: #000000;
    --usc-cardinal: #990000; /* USC Crimson */
    --white: #ffffff;
    --text-size: 16px; /* Standard text size below the header */
    --larger-text-size: 24px; /* Frozen time display */
}

/* General styling */
body {
    font-family: "Courier New", Courier, monospace;
    text-align: center;
    background-color: var(--black);
    color: var(--white);
    margin: 0;
    padding: 0;

    /* 🔹 Disable text selection globally */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 🔹 Allow links to be selectable */
a {
    user-select: text;
}

/* 🔹 Header Image */
.header-image {
    width: min(15vw, 600px);
    height: auto;
    display: block;
    margin: 0 auto 10px;
    transition: opacity 0.3s ease-in-out;
}

/* 🔹 Responsive Image Adjustments */
@media (max-width: 600px) {
    .header-image {
        width: min(50vw, 300px);
    }
}

/* 🔹 Ensure the header still looks correct */
header {
    background-color: var(--white);
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--black);
}

/* Email & personal text */
header .email {
    color: var(--usc-cardinal);
    font-size: var(--text-size);
    margin: 5px 0;
}

/* 🔹 Ensure only clickable elements inside .email have a USC Gold hover effect */
header .email label {
    font-weight: bold;
    color: var(--usc-cardinal);
    text-decoration: none;
    transition: text-shadow 0.3s ease-in-out;
}

/* 🔹 Custom hover effect: USC Gold text shadow */
header .email label:hover {
    text-shadow: 2px 2px 6px #FFCC00;
}

/* 🔹 Ensure "at" and "dot" are italicized, black, and non-bold */
header .email em {
    color: black;
    font-style: italic;
    font-weight: normal;
}

/* 🔹 Style for personal-text */
header .personal-text {
    color: black;
    font-size: var(--text-size);
    margin-top: 3px; /* Reduce space above */
    margin-bottom: 5px;
    text-align: center;
}

/* 🔹 Ensure only clickable elements in .personal-text remain bold, black, and formatted correctly */
.personal-text a {
    font-weight: bold;
    color: black; /* Ensures links stay black */
    text-decoration: none !important; /* Removes underline */
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* 🔹 Prevent visited links from changing color */
.personal-text a:visited {
    color: black !important; /* Keeps the links black even after clicking */
    font-weight: bold;
}

/* 🔹 Maintain the same hover effect as other clickable elements */
.personal-text a:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* 🔹 Ensure back navigation links remain bold and black */
.back-arrow, nav a {
    font-weight: bold;
    color: black !important;
    text-decoration: none !important; /* Removes underline */
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* 🔹 Apply hover effect to match other clickable elements */
.back-arrow:hover, nav a:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

/* Clickable elements */
.clickable {
    cursor: pointer;
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* Hover effect */
.clickable:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

/* The Eternal Watch - No space between it and frozen time */
#eternal-title {
    font-size: var(--text-size);
    margin-bottom: 0px;
}

/* Frozen time display - Larger (24px) */
#current-time {
    font-size: var(--text-size);
    margin-top: 0px;
}

/* Watch text formatting */
.watch-text {
    font-size: var(--text-size);
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

/* 🔹 Bold Latin texts and their translations */
.toggle-text {
    font-size: var(--text-size);
    font-weight: bold;
    cursor: pointer;
}

/* 🔹 Fade-in effect for Latin + story text groups */
.fade-group {
    opacity: 0;
    transition: opacity 3s ease-in;
}

/* 🔹 Ensure "This time traveller's watch..." only fades once, then toggles instantly */
#reveal-matching-alt {
    font-weight: bold;
    font-size: var(--text-size);
    opacity: 0;
    display: none;
    transition: opacity 3s ease-in; /* First-time fade-in */
}

/* 🔹 Blinking effect for ▼ indicators (stopped via JavaScript after first click) */
.blink-arrow {
    animation: blink 1s infinite alternate;
}

/* 🔹 Define blinking animation */
@keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* 🔹 Ensure ▲ remains unaffected */
#eternal-arrow, #watch-arrow {
    transition: opacity 0.3s ease-in-out;
}

/* 🔹 Stop blinking for "▲" by removing the animation */
#eternal-arrow:not(.blink-arrow),
#watch-arrow:not(.blink-arrow) {
    animation: none !important;
}

/* Watch description paragraphs */
.watch-description {
    font-size: var(--text-size);
    text-align: justify;
    margin: 10px auto;
    max-width: 600px;
    line-height: 1.6;
}

/* Matching years text */
#matching-years {
    font-size: var(--text-size);
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

/* Ensures the ▼ symbol has slight spacing */
#eternal-title::after, #reveal-matching-alt::after {
    margin-left: 5px;
}

/* 🔹 Travel Quote Styling (New Feature) */
/* Initially hide the travel quote */
#travel-quote {
    display: none;
    opacity: 0;
    transition: opacity 3s ease-in;
}

/* Hide radio buttons */
.popup-radio {
    display: none;
}

/* Style the pop-ups */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #990000; /* USC Cardinal */
    color: #FFCC00; /* USC Gold */
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    text-align: left;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    width: 50%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Show the correct pop-up when its radio is selected */
#popup-ariann:checked ~ #popup-ariann-box,
#popup-usc:checked ~ #popup-usc-box,
#popup-edu:checked ~ #popup-edu-box {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* Hide all pop-ups when reset is checked */
#popup-reset:checked ~ .popup {
    opacity: 0;
    visibility: hidden;
}

/* Close button inside each pop-up */
.popup .close-button {
    display: block;
    margin-top: 10px;
    background: #FFCC00; /* USC Gold */
    color: #990000; /* USC Cardinal */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

/* Close button hover effect */
.close-button:hover {
    background: #FFD700; /* Brighter gold */
}

@media (max-width: 768px) {
    .popup,
    .work-page .popup {
        width: 80% !important;  /* Override the default width */
        max-width: 90% !important;  /* Allow it to scale fully like index pop-ups */
        padding: 20px;
        text-align: left;
    }
}

/* 🔹 Style specifically for "Back to Top" link */
footer a.clickable {
    font-weight: bold;
    font-size: 16px;
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* 🔹 Maintain hover effect */
footer a.clickable:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

/* Smooth transition when switching images */
.header-image {
    transition: opacity 0.3s ease-in-out;
}

/* Blinking Down/Up Arrow (Stops After First Click) */
.blink-arrow {
    display: inline-block;
    animation: blink 1s infinite alternate;
    margin-left: 5px;
}

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

.video-wrapper {
    text-align: center;
}

.video-title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
    cursor: pointer; /* Make title clickable */
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

/* Hover effect for video titles (matching Eternal Watch style) */
.video-title:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

/* Video containers start hidden */
.video-container {
    display: none;
}

.video-thumbnail {
    position: relative;
    width: 50%;
    max-width: 800px;
    margin: 10px auto;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rectangle Play Button */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0, 0, 0);
    color: white;
    font-size: 32px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Blinking Down/Up Arrow (Matching Eternal Watch) */
.toggle-arrow {
    display: inline-block;
    animation: blink 1s infinite alternate;
    margin-left: 5px;
}

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

/* Hover Effect for Play Button */
.play-button:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Responsive Sizing */
@media (max-width: 768px) {
    .video-thumbnail {
        width: 80%;
    }
}

.popup-image {
    width: 100%; /* Makes image responsive within the pop-up */
    max-width: 300px; /* Prevents it from becoming too large */
    height: auto; /* Keeps correct aspect ratio */
    display: block; /* Ensures no extra space below */
    margin: 10px auto; /* Centers the image inside the pop-up */
    border-radius: 8px; /* Optional: Rounds corners for a clean look */
}

img, a {
    -webkit-touch-callout: none; /* Disables long-press actions on iOS */
    user-select: none; /* Prevents selection */
}

/* 🔹 Work Page-Specific Pop-Up Styling (JS-driven) */
.work-page .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white); /* White background */
    color: var(--black); /* Black text */
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    text-align: left;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    width: 50%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* ✅ JavaScript-controlled visibility (no radios) */
.work-page .popup[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.work-page .close-button {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: var(--black);       /* Maintains work page's black background */
    color: var(--white);            /* White text for contrast */
    padding: 5px 10px;              /* Same spacing as other popups */
    border-radius: 5px;             /* Same rounded corners */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    border: none;
    transition: background 0.2s ease;
}

.work-page .close-button:hover {
    background: #333333;
}

.work-page #coordinate-reflections,
.work-page .year-item {
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

.work-page #coordinate-reflections:hover,
.work-page .year-item:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

/* 🔹 Video scaling inside popup */
.popup video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
}


/* Ensure the Mathematical Framework link stays bold, same color, and no underline */
a.clickable.bold-text {
    font-size: var(--text-size);
    font-weight: bold;
    color: var(--white) !important; /* Ensures it never changes */
    text-decoration: none !important; /* Prevents underlining */
    transition: text-shadow 0.3s ease;
}

/* Prevent visited links from changing color */
a.clickable.bold-text:visited {
    color: var(--white) !important;
    font-weight: bold;
    text-decoration: none !important;
}

/* Maintain hover effect */
a.clickable.bold-text:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

/* 🔹 Hide Short Films Section Initially */
#short-films-content.hidden {
    display: none;
}

/* 🔹 Ensure blinking arrow behaves like others */
#short-films-arrow {
    transition: opacity 0.3s ease-in-out;
}

/* 🔹 Stop blinking after first click */
#short-films-arrow:not(.blink-arrow) {
    animation: none !important;
}

/* 🔹 Styling for Short Films Title */
#short-films-title {
    font-size: 16px; /* Matches other clickable titles */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: text-shadow 0.3s ease;
}

/* 🔹 Hover Effect for Short Films Title */
#short-films-title:hover {
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.3);
}

#ants-on-line {
    text-align: center;
    margin-top: 40px; /* Adds space above the simulation */
    margin-bottom: 40px; /* Adds space below the simulation */
    font-size: 16px;
    color: white;
}

#stick {
    position: relative;
    width: 90vw;
    max-width: 500px;
    height: 5px; /* Matches ant size for consistency */
    background: white;
    margin: 10px auto 5px;
}

.ant, .special-ant { /* ✅ All ants now share the same styling */
    position: absolute;
    font-size: 10px; /* ✅ Ensures normal & special ants are identical */
    transition: left 0.05s linear;
}

/* ✅ Normal ants above the stick */
.ant {
    top: -15px; /* Keeps ants above the line */
    color: white;
}

#special-ants {
    position: absolute; /* ✅ Ties it to the stick */
    top: 10px; /* ✅ Moves it below the stick */
    height: 20px;
}

/* ✅ Special ants keep distinct colors */
.special-ant {
    position: absolute;
    font-size: 10px; /* ✅ Same size as normal ants */
    transition: color 0.1s ease; /* ✅ Smooth transition for flash effect */
}

.special-ant.left {
    color: #00ffff; /* ✅ Cyan */
}

.special-ant.right {
    color: #ff0000; /* ✅ Red (complementary to cyan) */
}

/* ✅ Flash effect on collision */
.special-ant.flash {
    color: #ffff00 !important; /* ✅ Force flash to override default colors */
    transition: color 0s; /* ✅ Ensure instant flash */
}

/* ✅ Make only the numbers bold, not the labels */
#remaining-ants, #timer {
    font-weight: bold;
}

/* ✅ Add space between counters and the simulation */
#ant-info {
    display: inline-block; /* Ensures proper spacing */
    margin-bottom: 20px; /* Increased for better separation */
    line-height: 1.2; /* Adjusts spacing between text elements */
}

.work-page .video-title {
    color: black !important; /* Make it visible on white popup */
}

.work-page .video-title:hover {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); /* subtle black glow */
}

@keyframes refined-wiggle {
    0%   { transform: scale(1, 1) rotate(0deg); filter: blur(0px); }
  
    10%  { transform: scale(1.03, 0.97) rotate(-3deg); filter: blur(0.5px); }
    22%  { transform: scale(0.975, 1.025) rotate(3deg); filter: blur(0.15px); }
  
    36%  { transform: scale(1.02, 0.98) rotate(-2deg); filter: blur(0.2px); }
    52%  { transform: scale(0.99, 1.01) rotate(1.5deg); filter: blur(0.1px); }
  
    68%  { transform: scale(1.005, 0.995) rotate(-0.8deg); filter: blur(0.05px); }
    84%  { transform: scale(0.998, 1.002) rotate(0.3deg); filter: blur(0.02px); }
  
    100% { transform: scale(1, 1) rotate(0deg); filter: blur(0px); }
  }
  

.wiggle {
  animation: refined-wiggle 1.2s cubic-bezier(0.25, 1.25, 0.5, 1);
  animation-fill-mode: both;
  will-change: transform, filter;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    /* Disable wiggle animations */
    .wiggle {
      animation: none !important;
    }
  
    /* Text character highlight */
    .reduced-text span {
      display: inline-block;
      background-color: transparent;
      color: inherit;
      animation: highlight-blue 0.3s ease-out forwards;
      animation-fill-mode: forwards;
      opacity: 1; /* always visible, don't fade in */
    }
  
    @keyframes highlight-blue {
      0% {
        background-color: transparent;
        color: inherit;
      }
      20% {
        background-color: rgba(43, 85, 151, 0.4);
        color: white;
      }
      100% {
        background-color: rgba(43, 85, 151, 0.4);
        color: white;
      }
    }
  
    /* Image section highlight (6 dynamic sections via JS) */
    .highlight-overlay {
        position: absolute;
        top: 0;
        height: 100%;
        background: rgba(43, 85, 151, 0.4); /* semi-transparent highlight */
        pointer-events: none;
        opacity: 0;
        animation: image-sweep 0.3s ease-out forwards;
        animation-fill-mode: forwards;
      }
      
  
    @keyframes image-sweep {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
  }  
  
/* Allow transform animations to show */
#link-personal,
#link-work,
#label-ariann,
#label-usc,
#label-edu {
    display: inline-block;
}