/* Pixy landing page — custom CSS that doesn't fit cleanly as Tailwind utilities.
   Section markers like /* ▼ NAME ▼ */ /* ▲ /NAME ▲ */ make ranges easy to grep.
*/

/* ▼ FAN-CARD POSITIONING ▼ */
/* Each card is absolutely placed at the same anchor; the transform
   inline-style from cardFan.cardTransform(i) translates/rotates it.
   While the entrance fan-out is playing, the long 0.9s easing reads as
   a graceful unfurl. Once parallax kicks in (.fan-interactive added by
   the cardFan component), we want a much shorter transition so mouse
   movement feels like the cards are following the cursor, not chasing it. */
.fan-card {
  position: absolute;
  left: calc(50% - 5.1875rem);          /* 83px → 5.1875rem */
  top:  calc(50% + 6rem);
  transform-origin: center center;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.fan-interactive .fan-card {
  transition: transform 0.5s ease-out;
}
/* ▲ /FAN-CARD POSITIONING ▲ */


/* ▼ SPACES SCROLL TIMELINE ▼ */
/* Section 2 is a 500vh wrapper containing a sticky h-screen child.
   The wrapper exposes a view-timeline named --spaces, so any descendant
   can drive a keyframe animation by scroll progress instead of time:

     .my-thing {
       animation: my-keyframes linear both;
       animation-timeline: --spaces;
       animation-range: cover 0% cover 100%;
     }
     @keyframes my-keyframes {
       from { transform: translateY(0); opacity: 0; }
       to   { transform: translateY(-10rem); opacity: 1; }
     }

   `cover 0% cover 100%` runs the animation across the section's full
   visibility window (entry → fully covering → exit). Tighten the range
   if you want the animation to happen only while the section is pinned:
   `animation-range: contain 0% contain 100%` (when the scrollport is
   fully inside the section). `both` keeps the final keyframe state
   when scroll passes the end.

   Browser support (2026): Chromium and Safari 18+ run this natively.
   Firefox without the flag ignores `animation-timeline` — design the
   initial keyframe to be the acceptable static state for that case. */
.spaces-scroll {
  view-timeline-name: --spaces;
  view-timeline-axis: block;
}

/* Reference for animation-range below:
   The section is 500vh tall in a 100vh viewport, so the `cover` range
   spans 600vh of scroll (100vh entry + 400vh pinned + 100vh exit).
   Pin starts at ~17% of cover, ends at ~83%. Animations live inside
   that pinned window:
     Beat 1  cover 17%–35%   path draws + title fades in
     Beat 2  cover 35%–60%   phone pops, pills stagger in
     Beat 3  cover 60%–83%   data cards fly out from behind phone
*/

@supports (animation-timeline: scroll()) {
  /* — Beat 1: wavy path strokes itself in, left-to-right —
     The inline <path> has pathLength="1" so dasharray/offset are
     normalized regardless of the path's real geometric length. Start
     with offset = 1 (full length hidden), end with offset = 0 (fully
     drawn). Same trick used by Stripe's marketing diagrams. */
  .spaces-anim-path-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: spaces-path-draw linear both;
    animation-timeline: --spaces;
    animation-range: cover 17% cover 35%;
  }
  @keyframes spaces-path-draw {
    to { stroke-dashoffset: 0; }
  }



  /* — Beat 2: phone pops up from below with an overshoot — */
  .spaces-anim-phone {
    animation: spaces-phone-pop linear both;
    animation-timeline: --spaces;
    animation-range: cover 35% cover 60%;
  }
  /* Centering classes on the phone produce translate(-50%, -50%); the
     keyframes preserve that and stack a vertical offset on top. */
  @keyframes spaces-phone-pop {
    0%   { transform: translate(-50%, calc(-50% + 100vh)); }
    70%  { transform: translate(-50%, calc(-50% - 2.5rem)); }
    85%  { transform: translate(-50%, calc(-50% + 0.6rem)); }
    100% { transform: translate(-50%, -50%); }
  }

  /* — Beat 2: pills slide in from the left, staggered via --pill-i — */
  .spaces-anim-pill {
    animation: spaces-pill-in linear both;
    animation-timeline: --spaces;
    animation-range:
      cover calc(35% + var(--pill-i, 0) * 2.5%)
      cover calc(48% + var(--pill-i, 0) * 2.5%);
  }
  @keyframes spaces-pill-in {
    from { transform: translateX(-40rem); opacity: 0; }
    to   { transform: translateX(0);      opacity: 1; }
  }

  /* — Beat 3: floating data cards fly out from the phone's bottom-right
     grid card, one after another with overlap —
     Each card carries:
       --card-i       stagger index (0..3)
       --card-rot     final rotation
       --card-from-x  start translate X (negative, pulls card leftward
                      onto the phone grid card position)
       --card-from-y  start translate Y (positive, pulls card downward)
     Ranges: 11% duration with 4% stagger so the next card begins when
     the previous one is ~36% through its flight — visible overlap but
     no chaos. Last card finishes at cover 83% (pin end). */
  .spaces-anim-data-card {
    animation: spaces-data-card-out linear both;
    animation-timeline: --spaces;
    animation-range:
      cover calc(60% + var(--card-i, 0) * 4%)
      cover calc(71% + var(--card-i, 0) * 4%);
  }
  @keyframes spaces-data-card-out {
    0% {
      transform:
        translate(var(--card-from-x, -10rem), var(--card-from-y, 0))
        rotate(0deg)
        scale(0.5);
      opacity: 0;
    }
    35% { opacity: 1; }
    100% {
      transform: translate(0, 0) rotate(var(--card-rot, 0deg)) scale(1);
      opacity: 1;
    }
  }
}
/* ▲ /SPACES SCROLL TIMELINE ▲ */


/* ▼ LIFE-OS FAN ▼ */
/* Cards in section 6 transition from low+straight+invisible to
   fanned+visible when the section enters the viewport. easeOutBack
   adds a slight overshoot so they land with a small bounce. Per-card
   transition-delay (set inline by the lifeOSFan component) staggers
   them so they pop one after another, not all at once. */
.life-card {
  transform: translateY(var(--ty, 6rem)) rotate(var(--rot, 0deg));
  transform-origin: bottom center;
  transition:
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.5s ease-out,
    z-index   0s linear;
}
.life-card:hover {
  transform: translateY(calc(var(--ty, 0rem) - 4rem)) rotate(var(--rot, 0deg));
  z-index: 10;
  cursor: pointer;
}
/* ▲ /LIFE-OS FAN ▲ */


/* ▼ TILT-CARD ▼ */
/* Smooths the transform updates driven by the tiltCard Alpine component.
   Short enough to feel like the card is following the cursor in real
   time, long enough to round off any micro-jitter and to make the
   pointer-leave reset look graceful.

   preserve-3d puts children into the card's 3D space — descendants with
   .tilt-pop can then translateZ() above the card surface and rotate with
   the card on hover, the way Aceternity's 3d-card effect works. */
.tilt-card {
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}
.tilt-card .tilt-pop {
  transition: transform 0.3s ease-out;
}
.tilt-card:hover .tilt-pop {
  transform: translateZ(40px);
}
/* ▲ /TILT-CARD ▲ */


/* ▼ MARQUEE ▼ */
/* CSS-only infinite marquee. Each row duplicates the item set into two
   .marquee__group children; the .marquee__track translates by -50% of
   its own width (= exactly one group), then the animation loops. Because
   group 2 is identical to group 1, the wrap is visually seamless.

   padding-right on each group equals its internal gap, so the spacing
   between the trailing item of group 1 and the leading item of group 2
   matches the spacing between any other two items.

   .marquee--right reverses direction (items appear to move left→right).
   Hovering anywhere in a row pauses just that row. */
.marquee {
  overflow: hidden;
  width: 100%;
  padding: 2rem 0;                 /* room for card shadows */
  -webkit-mask-image: linear-gradient(to right,
                        transparent 0,
                        #000 var(--marquee-fade, 10rem),
                        #000 calc(100% - var(--marquee-fade, 10rem)),
                        transparent 100%);
          mask-image: linear-gradient(to right,
                        transparent 0,
                        #000 var(--marquee-fade, 10rem),
                        #000 calc(100% - var(--marquee-fade, 10rem)),
                        transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 60s) linear infinite;
  will-change: transform;
}
.marquee--right .marquee__track {
  animation-direction: reverse;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  gap: var(--marquee-gap, 1rem);
  padding-right: var(--marquee-gap, 1rem);
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* ▲ /MARQUEE ▲ */

/* ▼ RESPONSIVE HEIGHT SCROLL LAYOUTS ▼ */

/* --- SECTION 3: PERSONALIZED WORLDS RESPONSIVE BREAKPOINTS --- */
@media (max-height: 1000px) {
  .section-personalized-worlds {
    padding-top: 4.5rem !important;
  }
  .section-personalized-worlds h2 {
    font-size: 1.85rem !important;
  }
  .section-personalized-worlds p {
    font-size: 1.25rem !important;
    margin-top: 0.125rem !important;
  }
  .section-personalized-worlds button {
    margin-top: 0.75rem !important;
    padding: 0.45rem 1.5rem !important;
    font-size: 0.95rem !important;
  }
  .section-personalized-worlds .marquee-container {
    margin-top: 1.25rem !important;
    gap: 0.5rem !important;
  }
  .section-personalized-worlds .marquee {
    padding: 0.75rem 0 !important;
    --marquee-gap: 0.75rem !important;
  }
  .section-personalized-worlds .tilt-card {
    width: 13rem !important;
    height: 17rem !important;
    border-radius: 1.25rem !important;
  }
  .section-personalized-worlds .tilt-card img {
    height: 115px !important;
    border-radius: 1.0rem !important;
  }
  .section-personalized-worlds .tilt-card h3 {
    font-size: 1.0rem !important;
  }
  .section-personalized-worlds .tilt-card p {
    font-size: 12.5px !important;
    line-height: 1.05rem !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }
  .section-personalized-worlds .tilt-card span {
    font-size: 9.5px !important;
  }
}

@media (max-height: 880px) {
  .section-personalized-worlds {
    padding-top: 4.0rem !important;
  }
  .section-personalized-worlds h2 {
    font-size: 1.65rem !important;
  }
  .section-personalized-worlds p {
    font-size: 1.15rem !important;
    margin-top: 0.1rem !important;
  }
  .section-personalized-worlds button {
    margin-top: 0.6rem !important;
    padding: 0.4rem 1.35rem !important;
    font-size: 0.9rem !important;
  }
  .section-personalized-worlds .marquee-container {
    margin-top: 1.0rem !important;
    gap: 0.4rem !important;
  }
  .section-personalized-worlds .marquee {
    padding: 0.6rem 0 !important;
    --marquee-gap: 0.6rem !important;
  }
  .section-personalized-worlds .tilt-card {
    width: 12rem !important;
    height: 15rem !important;
    border-radius: 1.1rem !important;
  }
  .section-personalized-worlds .tilt-card img {
    height: 95px !important;
    border-radius: 0.85rem !important;
  }
  .section-personalized-worlds .tilt-card h3 {
    font-size: 0.9rem !important;
  }
  .section-personalized-worlds .tilt-card p {
    font-size: 11.5px !important;
    line-height: 1.0rem !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
  }
  .section-personalized-worlds .tilt-card span {
    font-size: 9px !important;
  }
}

@media (max-height: 768px) {
  .section-personalized-worlds {
    padding-top: 2.75rem !important;
  }
  .section-personalized-worlds h2 {
    font-size: 1.45rem !important;
  }
  .section-personalized-worlds p {
    font-size: 1.05rem !important;
  }
  .section-personalized-worlds button {
    margin-top: 0.4rem !important;
    padding: 0.35rem 1.15rem !important;
    font-size: 0.85rem !important;
  }
  .section-personalized-worlds .marquee-container {
    margin-top: 0.75rem !important;
    gap: 0.3rem !important;
  }
  .section-personalized-worlds .marquee {
    padding: 0.5rem 0 !important;
    --marquee-gap: 0.5rem !important;
  }
  .section-personalized-worlds .tilt-card {
    width: 11rem !important;
    height: 13.5rem !important;
    border-radius: 1.0rem !important;
  }
  .section-personalized-worlds .tilt-card img {
    height: 80px !important;
    border-radius: 0.75rem !important;
  }
  .section-personalized-worlds .tilt-card h3 {
    font-size: 0.85rem !important;
  }
  .section-personalized-worlds .tilt-card p {
    font-size: 11px !important;
    line-height: 0.95rem !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .section-personalized-worlds .tilt-card span {
    font-size: 8.5px !important;
  }
}

@media (max-height: 680px) {
  .section-personalized-worlds {
    padding-top: 2.0rem !important;
  }
  .section-personalized-worlds h2 {
    font-size: 1.25rem !important;
  }
  .section-personalized-worlds p {
    font-size: 0.95rem !important;
  }
  .section-personalized-worlds button {
    margin-top: 0.25rem !important;
    padding: 0.3rem 1.0rem !important;
    font-size: 0.8rem !important;
  }
  .section-personalized-worlds .marquee-container {
    margin-top: 0.5rem !important;
    gap: 0.25rem !important;
  }
  .section-personalized-worlds .marquee {
    padding: 0.4rem 0 !important;
    --marquee-gap: 0.4rem !important;
  }
  .section-personalized-worlds .tilt-card {
    width: 9.5rem !important;
    height: 12.0rem !important;
    border-radius: 0.9rem !important;
  }
  .section-personalized-worlds .tilt-card img {
    height: 65px !important;
    border-radius: 0.7rem !important;
  }
  .section-personalized-worlds .tilt-card h3 {
    font-size: 0.8rem !important;
  }
  .section-personalized-worlds .tilt-card p {
    font-size: 10px !important;
    line-height: 0.85rem !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .section-personalized-worlds .tilt-card span {
    font-size: 8.0px !important;
  }
}


/* --- SECTION 5: TINY WORKERS ORIGINAL BREAKPOINTS --- */
@media (max-height: 900px) {
  .section-tiny-workers h2 {
    font-size: 1.75rem !important;
  }
  .section-tiny-workers p {
    font-size: 1.25rem !important;
    margin-top: 0.25rem !important;
  }
  .section-tiny-workers button {
    margin-top: 1rem !important;
    padding: 0.5rem 1.5rem !important;
    font-size: 0.95rem !important;
  }
  .section-tiny-workers .marquee-container {
    margin-top: 1.5rem !important;
    gap: 0.75rem !important;
  }
  .section-tiny-workers .marquee {
    padding: 1rem 0 !important;
    --marquee-gap: 1.5rem !important;
  }
  .section-tiny-workers .tilt-card {
    width: 9.5rem !important;
    height: 9.5rem !important;
    border-radius: 1.25rem !important;
  }
  .section-tiny-workers .tilt-card img {
    width: 9.5rem !important;
    height: 9.5rem !important;
    border-radius: 1.25rem !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
  }
  .section-tiny-workers .tilt-card .tilt-pop {
    width: 9.5rem !important;
    max-height: 9.5rem !important;
    border-radius: 1.25rem !important;
    padding: 1rem !important;
  }
}

@media (max-height: 768px) {
  .section-tiny-workers h2 {
    font-size: 1.4rem !important;
  }
  .section-tiny-workers p {
    font-size: 1.05rem !important;
  }
  .section-tiny-workers button {
    margin-top: 0.75rem !important;
    padding: 0.4rem 1.25rem !important;
    font-size: 0.85rem !important;
  }
  .section-tiny-workers .marquee-container {
    margin-top: 1rem !important;
    gap: 0.5rem !important;
  }
  .section-tiny-workers .marquee {
    padding: 0.75rem 0 !important;
    --marquee-gap: 1rem !important;
  }
  .section-tiny-workers .tilt-card {
    width: 8rem !important;
    height: 8rem !important;
    border-radius: 1rem !important;
  }
  .section-tiny-workers .tilt-card img {
    width: 8rem !important;
    height: 8rem !important;
    border-radius: 1rem !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
  }
  .section-tiny-workers .tilt-card .tilt-pop {
    width: 8rem !important;
    max-height: 8rem !important;
    border-radius: 1rem !important;
    padding: 0.75rem !important;
  }
}
/* ▲ /RESPONSIVE HEIGHT SCROLL LAYOUTS ▲ */