@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');


:root {
  --font-main: 'Poppins', sans-serif;
  --title-size: 40px;
  --bias-title-size: 32px;
  --bias-meta-size: 10px;
  --gap-small: 2px;
  --gap-medium: 8px;
  --radius: 16px;
  --transition-fast: 0.3s ease-out;
  --transition-medium: 0.2s ease-in-out;
}

/* Global Styles */
body {
  font-family: var(--font-main);
  margin: 0;
  padding: 16px;
  transition: background 0.5s ease;
}

/* Backgrounds for Toggle States */
body.toggle-off {
  background: #FFD5FB; /* Use a solid color or image as desired */
}
body.toggle-on {
  background: #B8E6DE;
}

/* Header */
.site-title {
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.logo-link { color: inherit; text-decoration: none; }
.logo-link a,
.logo-link a:link,
.logo-link a:visited,
.logo-link a:hover,
.logo-link a:active {
  color: #000000; /* Or your desired color */
  text-decoration: none; /* No underline by default */
}

.logo-link a:hover,
.logo-link a:active {
  text-decoration: underline;
}

.home-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.about-link-emoji a{
 font-size: 24px;
}

.site-slogan {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 44px;
  text-transform: uppercase;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
}

/* Custom Toggle Styles */
.toggle-container {
  /* padding: 20px;
  text-align: center; */
  margin-bottom: 20px;
}

.custom-toggle {
  display: inline-block;
  cursor: pointer;
}

.toggle-track {
  width: 390px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #fff;
  /* background-color: #681919; */
  position: relative;
  overflow: hidden;
  transition: background 0.9s ease;
}




.toggle-handle {
  width: 48px;
  height: 48px;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 0px;            /* Set initial vertical position */
  left: 0px;           /* Set initial horizontal position */
  transition: left 0.3s ease;  /* Smooth transition for left property */
  z-index: 2;
  display: flex;
  align-items:center ;
  justify-content:center;
}
.toggle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 900;
  color: #000;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
}

.handler-arrow-mask {
  width: 20px;
  height: 20px;
  overflow: hidden;
  position: relative;
  border-radius: 100%;
}

.handler-arrow {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: -24px; /* anchor on the left now */
  color: rgb(255, 213, 251);
  font-size: 18px;
  font-weight: 100;
  animation: handler-arrow-move 2s ease-in-out infinite;
}

/* @keyframes handler-arrow-move {
  0%    { transform: translateX(24px); opacity: 0; }
  5%    { transform: translateX(0);    opacity: 1; }
  50%   {    opacity: 1; }
  55%   { transform: translateX(-40px); opacity: 0; }

  55%   { transform: translateX(24px); opacity: 0; }

  56%   { transform: translateX(0);    opacity: 0; }
  57%   { transform: translateX(0);    opacity: 1; }
  95%   {    opacity: 1; }
  99%   { transform: translateX(-40px); opacity: 0; }

  100%  { transform: translateX(24px); opacity: 0; }
} */

@keyframes handler-arrow-move {
  0%   { transform: translateX(-24px); opacity: 0; }   /* start hidden left */
  5%   { transform: translateX(0);      opacity: 1; }   /* enter center */
  50%  { opacity: 1; }
  55%  { transform: translateX(40px);   opacity: 0; }   /* exit right */

  55%  { transform: translateX(-24px);  opacity: 0; }   /* reset hidden left */
  56%  { transform: translateX(0);      opacity: 0; }
  57%  { transform: translateX(0);      opacity: 1; }
  95%  { opacity: 1; }
  99%  { transform: translateX(40px);   opacity: 0; }   /* final exit right */

  100% { transform: translateX(-24px);  opacity: 0; }   /* loop resets */
}


/* When active, change background image and move handle to the right */
.custom-toggle.active .toggle-track {
  background: url("images/bgr.png") no-repeat center / cover;
}
.custom-toggle.active .toggle-handle {
  left: calc(100% - 42px - 6px);
}

/* New styling for the text shown when toggle is active */
.toggle-info {
  text-align: left;
  font-size: var(--bias-title-size);
  color: #333;
  margin-top: 10px;
  margin-bottom: 20px;
}


/*──────────────────────────────────────────────────────────────────────────────
   Mobile: make the toggle track stretch to 100 % width whenever it is in its
   “emerging” state (.active) and animate that change. On “now” it stays at the
   original 190 px. Nothing changes above the mobile breakpoint.
──────────────────────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {           /* tweak breakpoint if you like */
  /* Let the component itself fill the line so the track has room */
  .custom-toggle {
    display: block;                  /* previously inline-block */
    width: 100%;
  }

  /* Baseline width (NOW) + animated property */
  .custom-toggle .toggle-track {
    width: 190px;                    /* same as your desktop default */
    transition: width var(--transition-fast);
  }

  /* EMERGING ➜ stretch to full width */
  .custom-toggle.active .toggle-track {
    width: 100%;                     /* animates to full container width */
  }
}







/* How It Works Instruction */
.how-it-works {
  font-size: 14px;
  color: #333;
  margin-top: 12px;
}

/* Card List Container (same as previous bias-list container) */
.card-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  animation: fadeIn 0.3s ease-in forwards;
}

/* Card Styles */
.card {
  display: flex;
  justify-content: space-between;
  border-radius: var(--radius);
  padding: 12px 16px;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  position: relative;
  z-index: 1;
}
.bias-title {
  font-size: var(--bias-title-size);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.2;
  padding-bottom: 4px;
}
/* When the sheet is open (#card-list has .hidden-cards)
   and only the cloned card inside #active-bias-wrapper is visible,
   make the title smaller */
  body.sheet-open #active-bias-wrapper .bias-title,
  body:has(#card-list.hidden-cards) #active-bias-wrapper .bias-title {
  /* or just set the custom prop instead:  --bias-title-size: 24px; */
  font-size: 22px;
  line-height: 1.1;
}

.bias-meta-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.bias-id {
  font-size: var(--bias-meta-size);
  text-transform: uppercase;
}
.bias-categories {
  display: flex;
  gap: 8px;
}
.bias-category {
  font-size: var(--bias-meta-size);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
}
/* Card Icon */
/* Update the bias-icon rules */
.bias-icon {
  margin-left: var(--gap-medium);
  transition: transform var(--transition-fast), background-color 0.5s ease;
  width: 40px;
  height: 40px;
  min-width: 40px;       /* Prevent shrinking when title wraps */
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;        /* Ensure this element keeps its width */
}

/* Hover effect: when mouse is over the card, the bias-icon changes opacity */
.card:hover .bias-icon {
  background-color: rgba(255, 255, 255, 0.5);
}
.bias-icon img {
  max-width: 100%;
  max-height: 100%;
}

/* Bottom Sheet Styles */
.bottom-sheet {
  position: fixed;
  top: calc(env(safe-area-inset-top, 20px) + 40px);
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 10px;
  background: #eaeaea;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  transition: transform var(--transition-medium);
  z-index: 10;
}
.bottom-sheet.hidden {
  transform: translateY(100%);
}
.bottom-sheet.active {
  transform: translateY(0%);
}



.hidden {
  display: none;
}
.sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 9;
}
.sheet-dragger {
  width: 50px;
  height: 4px;
  background: #242424;
  border-radius: 2px;
  position: sticky;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 11;
}
.close-button {
  background: none;
  border: none;
  font-size: 24px;
  position: absolute;
  right: 16px;
  top: 16px;
  cursor: pointer;
  visibility: hidden;
}
#sheet-text {
  padding-top: 40px;
}
.typing-text h2 {
  font-size: 40px;
  line-height: 40px;
  font-weight: 400;
  margin-bottom: 10px;
}
.typing-text p {
  font-size: 22px;
  line-height: 24px;
  font-weight: 400;
  /* margin-bottom: 10px; */
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}








/* Remove animation from container if it was applied */
.card-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  /* No container animation—animations are now per card */
}

/* Ensure cards start hidden */
.card {
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Apply alternating animations */
.card:nth-child(odd) {
  animation: slideInLeft 0.5s ease forwards;
}
.card:nth-child(even) {
  animation: slideInRight 0.5s ease forwards;
}



/* START: scroll-reveal ---------------------------------------------------- */
.fade-slide {          /* initial state */
  opacity: 0;
  transform: translateY(96px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-slide.reveal {   /* when it becomes visible */
  opacity: 1;
  transform: translateY(0);
}
/* END: scroll-reveal ------------------------------------------------------ */







/* Keyframes for cards sliding in from left and right with a bottom offset */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(20px) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}


.hidden-cards {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.container {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 1000px) {
  .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 1000px) {
  #bottom-sheet {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 920px !important;
    max-width: 100vw;
    border-radius: 24px 24px 0 0;
  }
   .card {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 920px !important;
    max-width: 100vw;
  }
}