/* Phone carousel — ported from legacy inline <style>.
 * Coverflow with data-offset attribute set by assets/js/carousel.js.
 * Used by phone-carousel section in src/index.src.html.
 */


      /* Clip horizontal overflow at 360 px viewport.
       * #experience: belt-and-suspenders clip for coverflow side phones.
       *   Uses overflow-x: clip (not hidden) to avoid flattening the 3D
       *   perspective context on .phone-carousel.
       * #problem: the decorative blur circle (-right-10 absolute) extends
       *   24 px past the viewport edge; clip it here.
       */
      #experience,
      #problem {
        overflow-x: clip;
      }


      /* Phone carousel */
      .phone-carousel {
        position: relative;
        height: 545px;
        perspective: 1400px;
        perspective-origin: 50% 50%;
        transform-style: preserve-3d;
      }


      .phone-slide {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 266px;
        height: 532px;
        margin-left: -133px;
        margin-top: -266px;
        transform-style: preserve-3d;
        transform: translateX(var(--tx, 0)) translateY(var(--ty, 0))
          rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(var(--s, 1));
        opacity: var(--o, 1);
        filter: blur(var(--bl, 0px));
        z-index: var(--z, 0);
        pointer-events: var(--pe, auto);
        transition:
          transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.6s ease,
          filter 0.6s ease;
        will-change: transform, opacity, filter;
      }


      .phone-slide[data-offset='0'] {
        --tx: 0px;
        --ty: 0px;
        --ry: 0deg;
        --rz: 0deg;
        --s: 1;
        --o: 1;
        --z: 30;
      }


      .phone-slide[data-offset='-1'] {
        --tx: -218px;
        --ty: 17px;
        --ry: 28deg;
        --rz: -6deg;
        --s: 0.82;
        --o: 1;
        --bl: 0.5px;
        --z: 20;
      }


      .phone-slide[data-offset='1'] {
        --tx: 218px;
        --ty: 17px;
        --ry: -28deg;
        --rz: 6deg;
        --s: 0.82;
        --o: 1;
        --bl: 0.5px;
        --z: 20;
      }


      .phone-slide[data-offset='-2'] {
        --tx: -375px;
        --ty: 44px;
        --ry: 38deg;
        --rz: -10deg;
        --s: 0.65;
        --o: 1;
        --bl: 1px;
        --z: 10;
        --pe: none;
      }


      .phone-slide[data-offset='2'] {
        --tx: 375px;
        --ty: 44px;
        --ry: -38deg;
        --rz: 10deg;
        --s: 0.65;
        --o: 1;
        --bl: 1px;
        --z: 10;
        --pe: none;
      }


      .phone-slide[data-offset='far'] {
        --tx: 0px;
        --ty: 88px;
        --ry: 0deg;
        --rz: 0deg;
        --s: 0.5;
        --o: 0;
        --z: 0;
        --pe: none;
      }


      .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 56px;
        height: 56px;
        border-radius: 9999px;
        background: #fff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #4b5563;
        z-index: 50;
        transition:
          transform 0.2s ease,
          background 0.2s ease,
          color 0.2s ease;
      }


      .carousel-nav:hover {
        background: #34c759;
        color: #fff;
        transform: translateY(-50%) scale(1.05);
      }


      .carousel-nav.prev {
        left: 8px;
      }


      .carousel-nav.next {
        right: 8px;
      }


      .carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: #d1d5db;
        transition:
          width 0.3s ease,
          background 0.3s ease;
      }


      .carousel-dot.active {
        width: 28px;
        background: #34c759;
      }


      @media (max-width: 1024px) {
        .phone-carousel {
          height: 495px;
        }
        .phone-slide {
          width: 242px;
          height: 484px;
          margin-left: -121px;
          margin-top: -242px;
        }
        .phone-slide[data-offset='-1'] {
          --tx: -194px;
        }
        .phone-slide[data-offset='1'] {
          --tx: 194px;
        }
        .phone-slide[data-offset='-2'] {
          --tx: -327px;
        }
        .phone-slide[data-offset='2'] {
          --tx: 327px;
        }
      }


      @media (max-width: 640px) {
        .phone-carousel {
          height: 457px;
        }
        .phone-slide {
          width: 222px;
          height: 444px;
          margin-left: -111px;
          margin-top: -222px;
        }
        .phone-slide[data-offset='-1'] {
          --tx: -153px;
          --ty: 11px;
          --ry: 24deg;
          --rz: -5deg;
          --o: 1;
          --bl: 0.5px;
        }
        .phone-slide[data-offset='1'] {
          --tx: 153px;
          --ty: 11px;
          --ry: -24deg;
          --rz: 5deg;
          --o: 1;
          --bl: 0.5px;
        }
        .phone-slide[data-offset='-2'],
        .phone-slide[data-offset='2'] {
          --o: 0;
          --pe: none;
        }
        .carousel-nav {
          width: 40px;
          height: 40px;
        }
      }


      @media (prefers-reduced-motion: reduce) {
        .phone-slide {
          transition: none;
        }
      }