@font-face {
    font-family: 'ABCDiatype';
    src: url('./assets/ABCDiatype-Regular-Trial.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ABCDiatype';
    src: url('./assets/ABCDiatype-Medium-Trial.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'ABCDiatype';
    src: url('./assets/ABCDiatype-Bold-Trial.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

:root {
    /* --target-size-height: 100px; */
    --target-size-height: 173px;

    --brand-black: #111110;
    --brand-tan: #F0F0EB;
    --brand-tan-dark: #E1E1DC;
    --brand-purple: #B607E3;
    --white: #ffffff;
    --black: #000000;
    --mobile-caption-color: #90908D;

    --text-box-fill: #FAFAF9;
    --text-box-fill-clicked: #F5F5F4;
    --text-box-border: #D6D6D2;
    
    /* Button hover transition for all CTA buttons */
    --button-hover-transition: background-color 0.1s ease-out, border-color 0.1s ease-out, color 0.1s ease-out, background 0.1s ease-out;
    
    /* Logo letter animation transition duration - change this to adjust all animation timings */

    /* --logo-letter-transition-duration: 0.76s; */
    /* --logo-letter-transition-duration: 0.74s; */
    --logo-letter-transition-duration: 0.72s;

    /* --logo-letter-transition-duration: 1s; */



    
    /* --logo-letter-pop-up-timing-up: cubic-bezier(0.33, 1, 0.68, 1);
    --logo-letter-pop-up-timing-down: cubic-bezier(0.32, 0, 0.67, 0); */


    /* --logo-letter-pop-up-timing-up: cubic-bezier(1,0,1,1);
    --logo-letter-pop-up-timing-down: cubic-bezier(1,0,1,0); */


    /* --logo-letter-pop-up-timing-up: cubic-bezier(0.05, 0.95, 0.18, 1.00);
    --logo-letter-pop-up-timing-down: cubic-bezier(0.50, 0.00, 0.90, 0.15); */


    /* new */
    /* --logo-letter-pop-up-timing-up:   cubic-bezier(0.05, 0.95, 0.18, 1.00);
    --logo-letter-pop-up-timing-down: cubic-bezier(0.82, 0.00, 0.95, 0.05); */

    /* --logo-letter-pop-up-timing-up:   cubic-bezier(0.08, 0.97, 0.20, 1.00);
    --logo-letter-pop-up-timing-down: cubic-bezier(0.80, 0.00, 0.92, 0.03); */

    --logo-letter-pop-up-timing-up:   cubic-bezier(0.08, 0.97, 0.20, 1.00);
    --logo-letter-pop-up-timing-down: cubic-bezier(0.85, 0.00, 0.98, 0.18);


}

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

body {
    background: var(--brand-tan);
    /* background: black; */
    color: var(--brand-black);
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'ABCDiatype', Helvetica, sans-serif;
}

/* Enable scrolling when outro mode or main phases are active */
body.outro-scrollable,
body.main-phase-scrollable {
    overflow-y: auto;
}

#main-cta {
  padding: 8px 20px 8px 8px;
  background: var(--white);
  border-radius: 8px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;

  display: flex;
  gap: 20px;
  align-items: center;
  
  /* Hide during intro phase - start off-screen to the right */
  opacity: 0;
  pointer-events: none;
  transform: translateX(150%); /* Start off-screen to the right */
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* Intro Frontify logo - positioned at top-center */
#intro-frontify-logo {
  position: fixed;
  top: 4.375rem; /* 70px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
}

#intro-frontify-logo svg {
  display: block;
}

/* Show and animate in when slide-in class is added */
#main-cta.cta-slide-in {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
/* Base button styles - shared across all buttons */
.button-base,
.intro-button,
#main-cta-link,
.outro-button {
  padding: 13px 17px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'ABCDiatype', Helvetica, sans-serif;
  font-size: 14px;
  cursor: pointer !important;
  transition: var(--button-hover-transition);
}

/* Primary button state - black background, white text */
.button-primary,
.intro-button,
#main-cta-link,
.outro-button-start {
  background: var(--brand-black);
  color: var(--white);
}

/* Primary button hover - invert to transparent with black border */
.button-hover-invert:hover,
.intro-button:hover,
#main-cta-link:hover,
.outro-button-start:hover {
  background: transparent;
  border: 1px solid var(--brand-black);
  color: var(--brand-black);
}

/* Unique properties for #main-cta-link */
#main-cta-link {
  display: inline-block;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
}

.main-cta-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme color backdrop - hidden element for browser theme-color detection */
#theme-color-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--brand-tan);
  z-index: -9999;
  pointer-events: none;
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
}

/* Global phase progress bar (appears on main phases only) */
#progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 8px;
  background-color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease-out; /* Fade out transition (matches PHASE_EXIT_DURATION) */
  z-index: -1; /* behind the canvas, above the page background */
}

#progress-bar-container.is-visible {
  opacity: 1;
}

/* When instant appearance is needed (e.g., on restart), disable transition temporarily */
#progress-bar-container.no-opacity-transition {
  transition: opacity 0s;
}

/* On outro page, progress bar should appear above text container */
body:has(.text-container.outro-mode) #progress-bar-container.is-visible {
  z-index: 1001; /* Above outro text container (z-index: 1000) */
}

#progress-bar-fill {
  width: 0%;
  height: 100%;
  background-color: var(--brand-black);
  transition: width 0.7s ease-out;
}

canvas {
    display: block;
    border-radius: 0;
}

button {
  transition: background 0.1s ease-out;
}


/* Text Container Styling */
.text-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 9.2645vw; /* Match text-span font-size so em units work correctly */
  /* row-gap: 10px; column-gap: 22px; */ /* Original pixel values at 1512px viewport */
  row-gap: 0.0714em; /* 10px at 1512px viewport (140px font-size) */
  column-gap: 0em; /* Set to 0 since spaces are handled naturally between words */
  position: relative;
  z-index: -10;
  margin-top: 0.2em; /* 28px at 1512px viewport (140px font-size) */
  margin-left: 0.3179em; /* 40px at 1512px viewport (adjusted for precise match) */
  margin-right: 0.3179em; /* 40px at 1512px viewport (adjusted for precise match) */
  margin-bottom: 2.5714em;
  pointer-events: none;
  transition: margin-top 0.7s ease-out, margin-bottom 0.7s ease-out;
}

/* When phase-2 is centered, use flexbox auto margins for responsive vertical centering */
body.phase-2-centered {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.text-container.is-centered {
  margin-top: auto;
  margin-bottom: auto;
}

/* Intro mode: center intro content in the viewport */
.text-container.intro-mode {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  position: relative;
  pointer-events: auto;
  z-index: 1000;
  transition: none; /* Disable margin-top transition for intro */
}

.text-container.phase-exit {
  opacity: 0;
  transform: translateY(var(--exit-distance, -40vh)); /* Dynamic distance based on container height */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out, margin-top 0s;
  transition-property: opacity, transform, margin-top;
}

/* When exiting from intro, fade only (no position movement) */
.text-container.intro-mode.phase-exit {
  transform: none;
  transition: opacity 0.5s ease-out;
}

/* When exiting from outro, fade only (no position movement) */
.text-container.outro-mode.phase-exit {
  transform: none;
  transition: opacity 0.5s ease-out, margin-top 0s;
}

.text-container.phase-enter {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.text-container.phase-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  pointer-events: none;
}

/* Outro mode: stack all sentences vertically */
.text-container.outro-mode {
  display: flex;
  flex-direction: column;
  font-size: 70px;
  gap: 1.0286em; /* 72px at 70px font-size */
  margin-top: 0.5714em; /* 40px at 70px font-size */
  margin-left: 0.5714em; /* 40px at 70px font-size */
  max-width: calc(100% - 2.1428em); /* Leave space on right */
  pointer-events: auto;
  z-index: 1000;
}
.text-container.outro-mode .text-span {
  font-size: 1em;
}



/* Intro Styling */
.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.intro-line.text-span {
  display: inline-block;
  /* width: 222px; */
  width: 372px;
  font-size: 0.88625rem; /* 14.18px */
  font-family: 'ABCDiatype', Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: 0;
  white-space: pre-line;
}
.intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'ABCDiatype', Helvetica, sans-serif;
  font-size: 3.49rem;
  font-weight: normal;
  color: var(--brand-black);
  letter-spacing: 0;
  white-space: pre;
  /* Logo is position: absolute, so it acts as containing block for absolutely positioned letter images */
}
.intro-logo-letter {
  display: inline-block;
  vertical-align: top; /* Align to top so containers align properly */
  position: relative; /* For absolutely positioned containers */

  /* outline: 1px solid red; */
}
/* .intro-logo-letter.has-image-container - Width is set inline in JS to container width immediately to prevent shifting */
/* Outer container for scale + translateY animation */
.intro-logo-letter-image-outer {
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.340625rem; /* 53.45px - matches inner container width */
  height: 3.8975rem; /* 62.36px - matches inner container height */
}

/* Inner container for rotation animation */
.intro-logo-letter-image-inner {
  transform-origin: center center;
  /* Base rotation is set inline in JS */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner container - just holds the image, no animations */
.intro-logo-letter-image-container {
  width: 3.340625rem; /* 53.45px - fixed width */
  height: 3.8975rem; /* 62.36px - fixed height */
  background: var(--white);
  border-radius: 0.278125rem; /* 4.45px */
  display: inline-flex; /* Inline-flex so span fits its width and centers content */
  vertical-align: top;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  margin-left: .12rem;
  margin-right: .12rem;
  transform-origin: center center;
  /* No initial transform - scale is handled by outer container */
}

/* Pop-up animation: scale + translateY with per-segment timing functions */
/* @keyframes logo-pop-up {
  0% { 
    transform: scale(0.5) translateY(0);
    animation-timing-function: var(--logo-letter-pop-up-timing-up);
  }
  60% { 
    transform: scale(1.1) translateY(var(--letter-height, -45px));
    animation-timing-function: var(--logo-letter-pop-up-timing-down);
  }
  100% { 
    transform: scale(0.5) translateY(0);
  }
} */

@keyframes logo-pop-up {
  0% {
    transform: translateY(0) scale(0.5);
    /* animation-timing-function: var(--logo-letter-pop-up-timing-up); */
    /* animation-timing-function: ease-out; */
    /* animation-timing-function: cubic-bezier(0,0,.3,1); */

    /* animation-timing-function: cubic-bezier(0.0, 0.0, 0.58, 1.0); */
    /* animation-timing-function: cubic-bezier(0.0, 0.0, 0.5, 1.0); */
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.4, 1.0);
  }

  50% {
    transform: translateY(var(--letter-height, -45px)) scale(1.15);
    /* animation-timing-function: var(--logo-letter-pop-up-timing-down); */
    /* animation-timing-function: ease-in; */
    /* animation-timing-function: cubic-bezier(.3,0,1,1); */

    /* animation-timing-function: cubic-bezier(0.42, 0.0, 1.0, 1.0); */
    /* animation-timing-function: cubic-bezier(0.5, 0.0, 1.0, 1.0); */
    animation-timing-function: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  }

  100% {
    transform: translateY(0) scale(0.5);
  }
}

/* Rotation animation: separate timing, adds to base rotation (on inner container) */
@keyframes logo-rotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

.intro-logo-letter-image-outer.is-visible {
  animation-name: logo-pop-up;
  animation-duration: var(--logo-letter-transition-duration);
  animation-fill-mode: both;
}

.intro-logo-letter-image-inner.is-visible {
  animation-name: logo-rotate;
  animation-duration: var(--logo-letter-transition-duration);
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.intro-logo-letter-image-container.is-exiting {
  /* Animation completes and element is removed */
  animation: none;
}
.intro-logo-letter-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.intro-logo-comparison {
  color: red;
  z-index: 1001;
  pointer-events: none;
  white-space: normal;
  display: inline-block;
}
/* Intro bottom text positioning */
/* Flex container for intro line and button */
.intro-bottom-container {
  position: absolute;
  bottom: 3.625rem; /* 58px in rem */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem; /* 20px in rem */
}

.text-container.intro-mode .intro-line {
  text-align: center;
}

/* Unique properties for .intro-button */
.intro-button {
  font-weight: normal;
  line-height: 1;
}

/* Intro Images Container */
.intro-images-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  pointer-events: none;
  z-index: 1001; /* Above intro content (1000) and intro-bottom-container */
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Fade out images when intro phase exits */
.intro-images-container.fade-out {
  opacity: 0;
}

/* Intro Image Styling */
.intro-image {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: transform 600ms ease-out;
}

/* Separate transitions for animate-in and animate-out if needed */
.intro-image.animate-in {
  transition: transform 600ms ease-out;
}

.intro-image.animate-out {
  transition: transform 1000ms ease-out; /* Slower exit animation */
}



/* Desktop intro image positioning and transforms */
.intro-tomato {
  left: 79.55%;
  top: -3.83%;
  width: 22.27vw;
  height: auto;
  transform: translate(-50%, -50%) translateY(-150%) rotate(-130.04deg);
}
.intro-tomato.animate-in {
  transform: translate(-50%, -50%) translateY(0) rotate(-130.04deg);
}
.intro-tomato.animate-out {
  transform: translate(-50%, -50%) translateY(-150%) rotate(-130.04deg);
}

.intro-horsehead {
  left: 15.31%;
  bottom: -0.5%;
  width: 30.97vw;
  height: auto;
  transform: translate(-50%, 50%) translateY(150%) rotate(9.74deg);
}
.intro-horsehead.animate-in {
  transform: translate(-50%, 50%) translateY(0) rotate(9.74deg);
}
.intro-horsehead.animate-out {
  transform: translate(-50%, 50%) translateY(150%) rotate(9.74deg);
}

/* New intro images - positioning for fine-tuning */
.intro-denimjacket {
  left: 21.15%;
  top: -17.52%;
  width: 33.64vw;
  height: auto;
  transform: translate(-50%, -50%) translateY(-150%) rotate(148.68deg);
}
.intro-denimjacket.animate-in {
  transform: translate(-50%, -50%) translateY(0) rotate(148.68deg);
}
.intro-denimjacket.animate-out {
  transform: translate(-50%, -50%) translateY(-150%) rotate(148.68deg);
}

.intro-cupcake {
  right: 17.8%;
  bottom: -6.72%;
  width: 22.13vw;
  height: auto;
  transform: translate(50%, 50%) translateY(150%) rotate(-58.74deg);
}
.intro-cupcake.animate-in {
  transform: translate(50%, 50%) translateY(0) rotate(-58.74deg);
}
.intro-cupcake.animate-out {
  transform: translate(50%, 50%) translateY(150%) rotate(-58.74deg);
}

.intro-cheese {
  left: -5.83%;
  top: 56%;
  width: 39.93vw; /* 603.76px at 1512px viewport */
  height: auto;
  transform: translate(-50%, -50%) translateX(-150%) scaleY(-1) rotate(47.55deg); /* Flipped vertically with scaleY(-1) */
}
.intro-cheese.animate-in {
  transform: translate(-50%, -50%) translateX(0) scaleY(-1) rotate(47.55deg);
}
.intro-cheese.animate-out {
  transform: translate(-50%, -50%) translateX(-150%) scaleY(-1) rotate(47.55deg);
}

.intro-yarn {
  left: 103.83%; /* Coming from right (100% + offset) */
  top: 50%; /* Centered vertically */
  width: 26.00vw; /* 393.03px at 1512px viewport */
  height: auto;
  transform: translate(-50%, -50%) translateX(150%) scaleY(-1) rotate(319.06deg); /* Flipped vertically with scaleY(-1) */
}
.intro-yarn.animate-in {
  transform: translate(-50%, -50%) translateX(0) scaleY(-1) rotate(319.06deg);
}
.intro-yarn.animate-out {
  transform: translate(-50%, -50%) translateX(150%) scaleY(-1) rotate(319.06deg);
}


/* Hide denimjacket and cupcake below 1160px */
@media (max-width: 1160px) {
  .intro-denimjacket {
    display: none !important;
  }
  .intro-cupcake {
    display: none !important;
  }
}

/* Responsive breakpoint for intro images at 500px */
@media (max-width: 500px) {
  /* Mobile intro image positioning, sizing, and transforms */
  .intro-tomato {
    width: 49.27vw;
    left: 88.55%;
    top: 1.17%;
    transform: translate(-50%, -50%) translateY(-150%) rotate(-130.04deg);
  }
  .intro-tomato.animate-in {
    transform: translate(-50%, -50%) translateY(0) rotate(-130.04deg);
  }
  .intro-tomato.animate-out {
    transform: translate(-50%, -50%) translateY(-150%) rotate(-130.04deg);
  }

  .intro-horsehead {
    width: 69.97vw;
    left: -3.69%;
    bottom: 1.58%;
    transform: translate(-50%, 50%) translateX(-150%) rotate(9.74deg);
  }
  .intro-horsehead.animate-in {
    transform: translate(-50%, 50%) translateX(0) rotate(9.74deg);
  }
  .intro-horsehead.animate-out {
    transform: translate(-50%, 50%) translateX(-150%) rotate(9.74deg);
  }

  .intro-cheese {
    width: 72vw;
    left: -5.83%;
    top: 36%;
    transform: translate(-50%, -50%) translateX(-150%) scaleY(-1) rotate(47.55deg);
  }
  .intro-cheese.animate-in {
    transform: translate(-50%, -50%) translateX(0) scaleY(-1) rotate(47.55deg);
  }
  .intro-cheese.animate-out {
    transform: translate(-50%, -50%) translateX(-150%) scaleY(-1) rotate(47.55deg);
  }

  .intro-yarn {
    width: 62vw;
    left: 107.83%;
    top: 77%;
    transform: translate(-50%, -50%) translateX(150%) scaleY(-1) rotate(319.06deg);
  }
  .intro-yarn.animate-in {
    transform: translate(-50%, -50%) translateX(0) scaleY(-1) rotate(319.06deg);
  }
  .intro-yarn.animate-out {
    transform: translate(-50%, -50%) translateX(150%) scaleY(-1) rotate(319.06deg);
  }

}

/* Main Phase Styling */
.text-span {
  display: inline-block;
  font-family: 'ABCDiatype', Helvetica, sans-serif;
  font-size: 9.2645vw;
  line-height: 123.5714%;
  letter-spacing: -0.04em;
  white-space: pre-wrap; /* Allow normal word wrapping */
  /* border: 1px solid red; */
}

/* Word spans - each word is in its own span with a space inside */
.text-span-word {
  white-space: pre-wrap; /* Allow the space inside the span to be visible */
}

/* Add right margin to text spans that come before a textbox */
.text-span-word.before-textbox {
  margin-right: 0.1571em; /* Match textbox right margin for main phases */
}

/* Outro: different margin for text spans before textboxes */
.outro-mode .text-span-word.before-textbox {
  margin-right: 0.2286em; /* 16px at 70px font-size - matches outro textbox right margin */
}

.text-box {
  display: inline-block;
  position: relative;
  width: 4.464em; /* Default width - used for phase-2 and phase-5 */
  height: 1.235714em;

  margin: 0;
  margin-right: 0.1571em; /* Only right margin, no left margin */

  background: transparent;
  border: 2px solid var(--text-box-border);
  border-radius: 0.1429em; /* 20px at 1512px viewport (140px font-size) */
  z-index: 20;
  pointer-events: auto;
  overflow: visible;
}

/* Phase-specific text-box widths */
/* phase-4 = third main phase (button "3"), phase-5 = fourth main phase (button "4") */
.text-box.phase-4, .text-box.phase-5 {
   /* 585px at 1512px viewport */
  /* width: 4.1786em; */

  width: 4.1735em;
}


/* Individual text-box targeting by data-box-id (recommended - more reliable) */
/* Example: Target specific boxes in phase-4 */
/* .text-box[data-box-id="phase4-box-0"] {
  width: 5em;
} */

/* .text-box[data-box-id="phase4-box-1"] {
  width: 6em;
} */

/* .text-box[data-box-id="phase4-box-2"] {
  width: 7em;
} */


.text-box[data-box-id="phase4-box-0"] {
  /* width: 4.0735em; */
  width: 4.0735em;
}
.text-box[data-box-id="phase4-box-1"] {
  width: 4.0735em;
}

/* Combined approach: phase class + data attribute for maximum specificity */
/* .text-box.phase-4[data-box-id="phase4-box-0"] {
  width: 5em;
} */

.text-box.is-completing {
  transition: width 500ms ease-out;
}
.text-box.is-hovered {
  background: var(--text-box-fill);
}

/* Disable CSS :hover on touch devices to prevent persistent hover states */

.text-box.is-clicking {
  background: var(--text-box-fill-clicked);
  /* border-color: #0053CF; */
}
.text-box.is-clicked {
  /* background: #ffffff;
  border-color: #0053CF; */
  background: var(--text-box-fill-clicked);
  border-color: transparent;
}
@media (hover: none) {
  .text-box:hover {
    background: transparent;
  }
  .text-box.is-clicking {
    background: transparent;
  }
}


/* Disable active state background during phase-enter transition */
.text-container.phase-enter .text-box.is-clicked,
.text-container.phase-enter-active .text-box.is-clicked {
  background: transparent;
}
.text-container.phase-enter .text-box.is-clicking,
.text-container.phase-enter-active .text-box.is-clicking {
  background: transparent;
}
.text-box.is-completed {
  /* background: red; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;

  border-color: transparent;
  /* border-color: red; */
}





/* Outro Styling */
.outro-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* Center-align text boxes with text spans */
  row-gap: 0.2286em; /* 16px at 70px font-size */
  column-gap: 0px;
}
.outro-box {
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* Prevent iOS callout menu on long press */
}
.text-box.outro-box {
  margin: 0;
  margin-right: 0.2286em; /* 16px at 70px font-size - only right margin, no left margin */
  width: auto; /* Allow width to expand to fit content */
  min-width: fit-content; /* Ensure it fits the text */
  height: 1em; /* 70px at 70px font-size (matches text font-size) */
  border-radius: 0.1429em; /* 10px at 70px font-size */
}

/* Desktop: position relative to contain absolutely positioned category text */
@media (min-width: 649px) {
  .text-box.outro-box {
    position: relative;
  }
}

/* Category text for outro boxes (hidden by default) */
.outro-box-category-text {
  display: none;
  font-family: 'ABCDiatype', Helvetica, sans-serif;
  font-size: 1em; /* Inherits from .text-container.outro-mode (70px, scales to 50px on mobile) */
  font-weight: normal;
  color: var(--brand-black);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.04em; /* -2.8px at 70px font-size, scales proportionally */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.28em; /* 19.6px at 70px font-size */
  padding-right: 0.32em; /* 22.4px at 70px font-size */
  background: white;
  border-radius: 0.0857em; /* 6px at 70px font-size */
}

/* Mobile: Toggle visibility on hover - show category text, hide image */
.outro-box.show-category .target-png-image {
  display: none;
}

.outro-box.show-category .outro-box-category-text {
  display: block;
  position: static;
}

/* Desktop: Always show category text below PNG (no hover interaction) */
@media (min-width: 649px) {
  .outro-box-category-text {
    display: block !important; /* Always visible on desktop */
    position: absolute;
    top: 100%; /* Position directly below the PNG */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    margin-top: 0.1429em; /* 10px at 70px font-size - spacing below PNG */
    /* Original: font-size: 1em; */ /* 70px at 70px base font-size */
    /* Original: line-height: (inherited, typically ~1.2-1.5em, from .text-span which has line-height: 123.5714%) */
    line-height: 1.5; /* Tighter line-height for smaller box height */
    /* Previous: font-size: 0.3em; */ /* 21px at 70px base font-size */
    /* Previous: font-size: 0.26em; */ /* 18.2px at 70px base font-size */
    font-size: 18.2px; /* Fixed pixel size - outro font-size is consistent at 70px */
    /* Original: letter-spacing: -0.04em; */ /* -2.8px at 70px font-size */
    letter-spacing: -0.4px; /* Fixed pixel spacing */
    /* Original: padding-left: 0.28em; */ /* 19.6px at 70px font-size */
    /* Original: padding-right: 0.32em; */ /* 22.4px at 70px font-size */
    /* Previous: width: 5.5em; */ /* 115.5px at 0.3em font-size */
    /* Previous: width: 5.75em; */ /* 104.65px at 0.26em font-size */
    width: 105px; /* Fixed pixel width */
    text-align: center; /* Center text within uniform width */
    padding-left: 0; /* No left padding needed with uniform width */
    padding-right: 0; /* No right padding needed with uniform width */
    /* Original: border-radius: 0.0857em; */ /* 6px at 70px font-size */
    border-radius: 7px; /* Fixed pixel border-radius */
    white-space: nowrap;
    z-index: -1; /* Below text spans and PNG images */
  }
  
  /* On desktop, don't hide the PNG when showing category text */
  .outro-box.show-category .target-png-image {
    display: block !important;
  }
}

/* Wrapper to keep text-box and period together - prevents period from wrapping alone */
.text-box-period-wrapper {
  display: inline-flex;
  /* align-items: flex-start; */
  align-items: center;
  white-space: nowrap;
}

/* CTA buttons line in outro */
.outro-cta-line {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Desktop CTA - fixed position, shown on desktop only */
.outro-cta-line-desktop {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  margin-top: 0;
}

/* Mobile CTA - static position, shown on mobile only */
.outro-cta-line-mobile {
  position: static;
  /* margin-top: 40px; */
}

/* Hide mobile CTA on desktop */
@media (min-width: 649px) {
  .outro-cta-line-mobile {
    display: none;
  }
}

/* Hide desktop CTA on mobile */
@media (max-width: 648px) {
  .outro-cta-line-desktop {
    display: none;
  }
}

/* Phase transitions for CTA - desktop only (mobile inherits from text-container) */
.outro-cta-line-desktop.phase-enter {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.outro-cta-line-desktop.phase-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  pointer-events: none;
}

.outro-cta-line-desktop.phase-exit {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* Mobile CTA transitions - only opacity (transform inherited from text-container) */
.outro-cta-line-mobile.phase-enter {
  opacity: 0;
  pointer-events: none;
}

.outro-cta-line-mobile.phase-enter-active {
  opacity: 1;
  transition: opacity 0.7s ease-out;
  pointer-events: none;
}

.outro-cta-line-mobile.phase-exit {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* Unique properties for .outro-button */
.outro-button {
  font-weight: normal;
  line-height: normal;
  pointer-events: auto;
  text-decoration: none;
}

/* Unique properties for .outro-button-start */
.outro-button-start {
  font-weight: bold;
}

.outro-button-share {
  background: var(--brand-tan);
  color: var(--brand-black);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.outro-button-share:hover {
  background: var(--brand-tan-dark);
  border: 1px solid var(--brand-tan-dark);
}

.outro-button-share-icon {
  width: 1.2em;
  height: 1.2em;
  display: block;
}
.outro-button-share-text {
  position: relative;
  display: inline-block;
}





/* Base debug button styles - shared across debug, reset, and phase buttons */
.debug-button,
.reset-button,
.phase-button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #333;
  padding: 4px 8px;
  border-radius: 999px;

}
.debug-button,
.reset-button {
  border-radius: 5px;
}
.debug-button:hover,
.reset-button:hover,
.phase-button:hover {
  background-color: #e0e0e0;
}

/* Debug phase controls container */
.debug-controls {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 1100;
}
.phase-button.is-active {
  color: #e30707;
}





/* MARCHING ANTS */
/* The SVG border */
.text-box .ants-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  display: none;
}

/* Shared marching ants styling for text boxes and images */
.text-box .ants-border rect,
.marching-ants-image-svg .marching-ants-path,
.marching-ants-image-border .marching-ants-path {
  fill: none;
  /* stroke: #0053CF; */
  /* stroke: #B60AE3; */
  stroke: var(--brand-black);


  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  /* Dash pattern: 10px + 4px + 4px = 18px dash (appears continuous), then gap */
  /* Tiny gaps between segments make them appear as one continuous dash */
  stroke-dasharray: 0.0414em 0.0000em 0.0286em 0.0000em 0.0286em 0.1em;
  /* stroke-dasharray: 0.0114em 0.0000em 0.0386em 0.0000em 0.0486em 0.1em; */
  stroke-dashoffset: 0em;
  shape-rendering: geometricPrecision;
}

/* Animate marching ants - text boxes only when active, images always */
.text-box .ants-border.is-active rect,
.marching-ants-image-svg .marching-ants-path,
.marching-ants-image-border .marching-ants-path {
  animation: ants-walk 0.5s linear infinite;
}

/* Single animation for all marching ants */
@keyframes ants-walk {
  to {
    stroke-dashoffset: 0.1986em; /* Pattern length (0.0414+0.0000+0.0286+0.0000+0.0286+0.1 = 0.1986em) for seamless loop */
  }
}

/* TEMPORARY TEST: Solid stroke during proximity */
.marching-ants-image-wrapper.is-in-proximity .marching-ants-path {
  stroke-dasharray: none;
  animation: none;
  
  stroke: #B60AE3;
}




/* Eye styles */
.eyes-container {
  position: fixed;
  pointer-events: none;
  z-index: 6; /* Above PNG overlay (5) but below debug dots (10) */
  transform-origin: center center;
}
.eye {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
}
.pupil {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: black;
}
.mouth {
  position: absolute;
  width: 64px;
  height: 45px;
  border-radius: 50%;
  background-color: black;
  display: none;
}


/* PNG overlay images for draggable bodies */
.body-png-overlay {
  position: fixed;
  pointer-events: none;
  transform-origin: center center;
  z-index: 5;
  object-fit: contain;
}

/* Target PNG image in completed text box */
.target-png-image {
  pointer-events: none;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Stop-motion rotation animation for outro PNGs */
@keyframes outro-png-wiggle {
  0% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}

/* Apply stop-motion rotation animation to PNGs in outro mode */
.outro-mode .target-png-image {
  transform-origin: center center;
  animation: outro-png-wiggle 1.2s steps(3, end) infinite;
}

/* Disable animation by adding 'data-outro-animation="false"' to body */
body[data-outro-animation="false"] .outro-mode .target-png-image {
  animation: none;
}

/* Width-constrained image (when object would be wider than text-box at 100% height) */
.target-png-image-width-constrained {
  width: 100%;
  height: auto;
}

/* Marching ants image wrapper */
.marching-ants-image-wrapper {
  position: absolute;
  pointer-events: none;
  transform-origin: center center;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  overflow: visible; /* Allow stroke to extend beyond bounds */
}

/* Width-constrained marching ants wrapper */
.marching-ants-image-wrapper-width-constrained {
  width: 100%;
  height: auto;
}

/* Marching ants display SVG */
.marching-ants-image-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: calc(100% + 8px); */
  height: calc(100% + 6px);
  width: auto;
  display: block;
  overflow: visible; /* Allow stroke to extend beyond bounds */
}

/* Width-constrained marching ants SVG */
.marching-ants-image-wrapper-width-constrained .marching-ants-image-svg {
  width: calc(100% + 6px);
  height: auto;
}

/* Debug dots */
.debug-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
}
.debug-dot-center-of-mass {
  background-color: green;
}
.debug-dot-visual-center {
  background-color: purple;
}

/* Hand container styles */
.hand-container {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: top 0.3s ease-out, left 0.3s ease-out, transform 0.3s ease-out;
}

/* Hand container edge-specific flex directions */
.hand-container--right {
  flex-direction: row-reverse;
  transform-origin: top left;
}

.hand-container--left {
  flex-direction: row;
  transform-origin: top left;
}

.hand-container--bottom {
  flex-direction: row-reverse;
  transform-origin: top left;
}


/* Hand container images (hand and tiles) */
.hand-container img {
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

/* Debug outlines for hands (applied via JavaScript class when needed) */
.hand-container img.hand-debug {
  outline: 3px solid red;
  outline-offset: 0;
}

.hand-container img.tile-debug {
  outline: 2px solid red;
  outline-offset: 0;
}








/* Breakpoint for very small screens (429px and below) */
@media (max-width: 429px) {
  .text-box[data-box-id="phase4-box-0"] {
    width: 3.0735em;
  }
  .text-box[data-box-id="phase4-box-1"] {
    width: 3.0735em;
  }
  .text-box[data-box-id="phase4-box-2"] {
    width: 2.9em;
  }
}

/* Intro line width for very small screens (430px and below) */
@media (max-width: 430px) {
  :root {
    /* --logo-letter-transition-duration: 0.76s; */
    --logo-letter-transition-duration: 0.78s;
    /* --logo-letter-transition-duration: 0.8s; */
  }
  .intro-line.text-span {
    width: 300px;
  }
}

/* Lock font size at 60px for viewports smaller than 648px */
@media (max-width: 648px) {
  #main-cta {
    box-shadow: 0 4px 8.9px 0 rgba(0, 0, 0, 0.05);
  }
  
  .text-container {
    font-size: 60px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 78px;
  }
  .text-span {
    font-size: 60px;
  }

  .text-container.outro-mode {
    max-width: 100%;
    /* font-size: 32px; */
    font-size: 36px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 32px;
    /* margin-top: 90px; */
  }
  
  .outro-button-start, .outro-button-share {
    align-self: flex-start;
  }
  
  /* Mobile caption for phase-2 and outro phases */
  .mobile-caption {
    position: fixed;
    bottom: 24px;
    left: 24px;
    font-family: 'ABCDiatype', Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--mobile-caption-color);
    z-index: 1001; /* Above outro CTA (1000) */
    pointer-events: none;
  }

  .mobile-caption.phase-enter {
    opacity: 0;
  }

  .mobile-caption.phase-enter-active {
    opacity: 1;
    transition: opacity 0.7s ease-out;
  }

  .mobile-caption.phase-exit {
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }
}

/* Hide mobile caption on desktop */
@media (min-width: 649px) {
  .mobile-caption {
    display: none;
  }
}

/* Lock font size and object scale at maximum breakpoint (1512px) */
@media (min-width: 1512px) {
  .text-container,
  .text-span {
    font-size: 140.077px; /* 9.2645vw at 1512px = 140.077px */
  }
}

/* Outro max-width breakpoint (kept at 1660px) */
@media (min-width: 1660px) {
  .text-container.outro-mode {
    /* Keep outro font-size at 70px for consistent em calculations */
    font-size: 70px;
    /* At 1660px with 70px font-size: 2.1428em = 2.1428 × 70px = 150px */
    /* max-width = 1660px - 150px = 1510px */
    max-width: 1510px; /* Fixed width equivalent to calc(100% - 2.1428em) at 1660px with 70px font-size */
  }
}