peek-carousel 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 PeekCarousel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,238 @@
+# PeekCarousel
+
+[![npm version](https://badgen.net/npm/v/peek-carousel)](https://www.npmjs.com/package/peek-carousel)
+[![npm downloads](https://badgen.net/npm/dt/peek-carousel)](https://www.npmjs.com/package/peek-carousel)
+[![bundle size](https://badgen.net/bundlephobia/minzip/peek-carousel)](https://bundlephobia.com/package/peek-carousel)
+[![license](https://badgen.net/badge/license/MIT/blue)](https://opensource.org/licenses/MIT)
+
+[![stars](https://badgen.net/github/stars/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/stargazers)
+[![forks](https://badgen.net/github/forks/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/network/members)
+[![issues](https://badgen.net/github/open-issues/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/issues)
+[![last commit](https://badgen.net/github/last-commit/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/commits)
+[![Visitors](https://vbr.nathanchung.dev/badge?page_id=lledellebell.peek-carousel&color=50e3c2&style=flat&logo=github)](https://github.com/lledellebell/peek-carousel)
+
+[![JavaScript](https://badgen.net/badge/JavaScript/ES6+/yellow)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+[![SCSS](https://badgen.net/badge/SCSS/Sass/pink)](https://sass-lang.com/)
+[![dependencies](https://badgen.net/badge/dependencies/0/green)](https://github.com/lledellebell/peek-carousel/packages)
+
+A modular carousel library inspired by the swipe interaction on the iPhone 17 Pro product page. Features a 'peek effect' where the next/previous items are slightly visible on either side of the active item, providing intuitive navigation. Supports three layout modes (Stack/Card, Radial Rotation, Classic Slide) with smooth transitions, touch/drag support, and full accessibility.
+
+![PeekCarousel Demo](./public/assets/share_image.png)
+
+**[Live Demo](https://lledellebell.github.io/peek-carousel/examples/example-built.html)**
+
+> [한국어](./README.md)
+
+## Features
+
+- **3 Layout Modes** - Stack/Card, Radial Rotation, Classic Slide
+- **Full Interaction Support** - Touch/drag, keyboard, and mouse wheel navigation
+- **Zero Dependencies** - Built with pure vanilla JavaScript
+- **Fully Accessible** - ARIA support and keyboard navigation
+
+## Installation
+
+### NPM
+
+```bash
+npm install peek-carousel
+```
+
+```javascript
+import PeekCarousel from 'peek-carousel';
+```
+
+### CDN
+
+#### jsDelivr
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/peek-carousel@1.0.2/dist/peek-carousel.css">
+
+<!-- JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/peek-carousel@1.0.2/dist/peek-carousel.min.js"></script>
+
+<script>
+  // PeekCarousel is available as a global variable
+  const carousel = new PeekCarousel('#myCarousel');
+</script>
+```
+
+#### unpkg
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://unpkg.com/peek-carousel@1.0.2/dist/peek-carousel.css">
+
+<!-- JavaScript -->
+<script src="https://unpkg.com/peek-carousel@1.0.2/dist/peek-carousel.min.js"></script>
+```
+
+## Quick Start
+
+### 1. HTML Structure
+
+```html
+<div class="peek-carousel" id="myCarousel">
+  <div class="peek-carousel__track">
+    <!-- Carousel Items -->
+    <div class="peek-carousel__item">
+      <figure class="peek-carousel__figure">
+        <img class="peek-carousel__image" src="image1.jpg" alt="Image 1" width="650" height="490" />
+        <figcaption class="peek-carousel__caption">
+          <span class="peek-carousel__caption-title">Image 1</span>
+          <span class="peek-carousel__caption-subtitle">Description</span>
+        </figcaption>
+      </figure>
+    </div>
+
+    <div class="peek-carousel__item">
+      <figure class="peek-carousel__figure">
+        <img class="peek-carousel__image" src="image2.jpg" alt="Image 2" width="650" height="490" />
+        <figcaption class="peek-carousel__caption">
+          <span class="peek-carousel__caption-title">Image 2</span>
+          <span class="peek-carousel__caption-subtitle">Description</span>
+        </figcaption>
+      </figure>
+    </div>
+
+    <!-- More items... -->
+  </div>
+</div>
+
+<!-- Navigation buttons, indicators, auto-rotate button, and counter are automatically generated -->
+```
+
+### 2. Initialize JavaScript
+
+```javascript
+const carousel = new PeekCarousel('#myCarousel', {
+  layoutMode: 'stack', // 'stack', 'radial', 'classic'
+  autoRotate: false
+});
+```
+
+## Configuration Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `startIndex` | `number` | `0` | Starting slide index (0-based) |
+| `layoutMode` | `string` | `'stack'` | Layout mode: `'stack'` (Stack/Card), `'radial'` (circular rotation), or `'classic'` (classic slide) |
+| `autoRotate` | `boolean` | `false` | Enable auto-rotation on init |
+| `autoRotateInterval` | `number` | `2500` | Auto-rotation interval in milliseconds |
+| `swipeThreshold` | `number` | `50` | Swipe threshold distance in pixels |
+| `dragThreshold` | `number` | `80` | Drag threshold distance in pixels |
+| `preloadRange` | `number` | `2` | Number of images to preload around current item |
+| `enableKeyboard` | `boolean` | `true` | Enable keyboard navigation |
+| `enableWheel` | `boolean` | `true` | Enable mouse wheel navigation |
+| `enableTouch` | `boolean` | `true` | Enable touch/swipe navigation |
+| `enableMouse` | `boolean` | `true` | Enable mouse drag navigation |
+| `showNavigation` | `boolean` | `true` | Show navigation buttons |
+| `showCounter` | `boolean` | `true` | Show counter display |
+| `showIndicators` | `boolean` | `true` | Show indicator buttons |
+| `showAutoRotateButton` | `boolean` | `true` | Show auto-rotate toggle button |
+
+## API Methods
+
+### Navigation
+
+```javascript
+// Go to next slide
+carousel.next();
+
+// Go to previous slide
+carousel.prev();
+
+// Go to specific slide (0-based index)
+carousel.goTo(2);
+```
+
+### Auto-rotate
+
+```javascript
+// Start auto-rotation
+carousel.startAutoRotate();
+
+// Stop auto-rotation
+carousel.stopAutoRotate();
+
+// Toggle auto-rotation
+carousel.toggleAutoRotate();
+```
+
+### Cleanup
+
+```javascript
+// Destroy carousel and remove event listeners
+carousel.destroy();
+```
+
+### Properties
+
+```javascript
+// Get current slide index
+console.log(carousel.currentIndex);
+
+// Get total number of slides
+console.log(carousel.totalItems);
+
+// Check if auto-rotating
+console.log(carousel.isAutoRotating);
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile Safari (iOS 12+)
+- Chrome Mobile (Android 5+)
+
+## Usage Examples
+
+```javascript
+// Basic usage
+const carousel = new PeekCarousel('#myCarousel');
+
+// Change layout mode
+new PeekCarousel('#myCarousel', { layoutMode: 'radial' });
+
+// Enable auto-rotate
+new PeekCarousel('#myCarousel', { autoRotate: true });
+```
+
+## Customization
+
+Override CSS classes to customize styles:
+
+```css
+.peek-carousel__btn { /* Button styles */ }
+.peek-carousel__indicator--active::before { /* Indicator styles */ }
+```
+
+## Development
+
+```bash
+git clone https://github.com/lledellebell/peek-carousel.git
+npm install
+npm run build
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details
+
+## Credits
+
+Inspired by the swipe interaction on the iPhone 17 Pro product page.
+
+- [Image 1](./public/motivation0.png)
+
+## Changelog
+
+See [GitHub Releases](https://github.com/lledellebell/peek-carousel/releases) for the changelog.

package/README.md

@@ -0,0 +1,234 @@
+# PeekCarousel
+
+[![npm version](https://badgen.net/npm/v/peek-carousel)](https://www.npmjs.com/package/peek-carousel)
+[![npm downloads](https://badgen.net/npm/dt/peek-carousel)](https://www.npmjs.com/package/peek-carousel)
+[![bundle size](https://badgen.net/bundlephobia/minzip/peek-carousel)](https://bundlephobia.com/package/peek-carousel)
+[![license](https://badgen.net/badge/license/MIT/blue)](https://opensource.org/licenses/MIT)
+
+[![stars](https://badgen.net/github/stars/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/stargazers)
+[![forks](https://badgen.net/github/forks/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/network/members)
+[![issues](https://badgen.net/github/open-issues/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/issues)
+[![last commit](https://badgen.net/github/last-commit/lledellebell/peek-carousel)](https://github.com/lledellebell/peek-carousel/commits)
+[![Visitors](https://vbr.nathanchung.dev/badge?page_id=lledellebell.peek-carousel&color=50e3c2&style=flat&logo=github)](https://github.com/lledellebell/peek-carousel)
+
+[![JavaScript](https://badgen.net/badge/JavaScript/ES6+/yellow)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+[![SCSS](https://badgen.net/badge/SCSS/Sass/pink)](https://sass-lang.com/)
+[![dependencies](https://badgen.net/badge/dependencies/0/green)](https://github.com/lledellebell/peek-carousel/packages)
+
+iPhone 17 Pro 제품 소개 페이지의 스와이프 인터랙션에서 영감을 받은 모듈형 캐러셀 라이브러리. 현재 활성 아이템 양옆으로 다음/이전 아이템이 살짝 보이는 'Peek 효과'를 제공하여 직관적인 내비게이션을 지원합니다. 세 가지 레이아웃 모드(Stack/Card, Radial Rotation, Classic Slide)를 지원하며, 부드러운 전환 효과, 터치/드래그 지원, 완전한 접근성을 제공합니다.
+
+![PeekCarousel Demo](./public/assets/share_image.png)
+
+**[라이브 데모 보기](https://lledellebell.github.io/peek-carousel/examples/example-built.html)**
+
+> [English](./README.en.md)
+
+## 특징
+
+- **3가지 레이아웃 모드** - Stack/Card, Radial Rotation, Classic Slide
+- **완전한 인터랙션 지원** - 터치/드래그, 키보드, 마우스 휠 내비게이션
+- **제로 의존성** - 순수 바닐라 JavaScript로 구현
+- **완전한 접근성** - ARIA 지원 및 키보드 내비게이션
+
+## 설치
+
+### NPM
+
+```bash
+npm install peek-carousel
+```
+
+```javascript
+import PeekCarousel from 'peek-carousel';
+```
+
+### CDN
+
+#### jsDelivr
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/peek-carousel@1.0.2/dist/peek-carousel.css">
+
+<!-- JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/peek-carousel@1.0.2/dist/peek-carousel.min.js"></script>
+
+<script>
+  // PeekCarousel는 전역 변수로 사용 가능
+  const carousel = new PeekCarousel('#myCarousel');
+</script>
+```
+
+#### unpkg
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://unpkg.com/peek-carousel@1.0.2/dist/peek-carousel.css">
+
+<!-- JavaScript -->
+<script src="https://unpkg.com/peek-carousel@1.0.2/dist/peek-carousel.min.js"></script>
+```
+
+## 빠른 시작
+
+### 1. HTML 구조
+
+```html
+<div class="peek-carousel" id="myCarousel">
+  <div class="peek-carousel__track">
+    <!-- 캐러셀 아이템 -->
+    <div class="peek-carousel__item">
+      <figure class="peek-carousel__figure">
+        <img class="peek-carousel__image" src="image1.jpg" alt="이미지 1" width="650" height="490" />
+        <figcaption class="peek-carousel__caption">
+          <span class="peek-carousel__caption-title">이미지 1</span>
+          <span class="peek-carousel__caption-subtitle">설명</span>
+        </figcaption>
+      </figure>
+    </div>
+
+    <div class="peek-carousel__item">
+      <figure class="peek-carousel__figure">
+        <img class="peek-carousel__image" src="image2.jpg" alt="이미지 2" width="650" height="490" />
+        <figcaption class="peek-carousel__caption">
+          <span class="peek-carousel__caption-title">이미지 2</span>
+          <span class="peek-carousel__caption-subtitle">설명</span>
+        </figcaption>
+      </figure>
+    </div>
+
+    <!-- 더 많은 아이템... -->
+  </div>
+</div>
+
+<!-- 네비게이션 버튼, 인디케이터, 자동 회전 버튼, 카운터는 자동으로 생성됩니다 -->
+```
+
+### 2. JavaScript 초기화
+
+```javascript
+const carousel = new PeekCarousel('#myCarousel', {
+  layoutMode: 'stack', // 'stack', 'radial', 'classic'
+  autoRotate: false
+});
+```
+
+## 설정 옵션
+
+| 옵션 | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `startIndex` | `number` | `1` | 시작 슬라이드 인덱스 (0부터 시작) |
+| `layoutMode` | `string` | `'stack'` | 레이아웃 모드: `'stack'` (Stack/Card), `'radial'` (원형 회전), 또는 `'classic'` (클래식 슬라이드) |
+| `autoRotate` | `boolean` | `false` | 초기화 시 자동 회전 활성화 |
+| `autoRotateInterval` | `number` | `2500` | 자동 회전 간격 (밀리초) |
+| `swipeThreshold` | `number` | `50` | 스와이프 임계값 거리 (픽셀) |
+| `dragThreshold` | `number` | `80` | 드래그 임계값 거리 (픽셀) |
+| `preloadRange` | `number` | `2` | 현재 아이템 주변에 미리 로드할 이미지 수 |
+| `enableKeyboard` | `boolean` | `true` | 키보드 내비게이션 활성화 |
+| `enableWheel` | `boolean` | `true` | 마우스 휠 내비게이션 활성화 |
+| `enableTouch` | `boolean` | `true` | 터치/스와이프 내비게이션 활성화 |
+| `enableMouse` | `boolean` | `true` | 마우스 드래그 내비게이션 활성화 |
+
+## API 메서드
+
+### 네비게이션
+
+```javascript
+// 다음 슬라이드로 이동
+carousel.next();
+
+// 이전 슬라이드로 이동
+carousel.prev();
+
+// 특정 슬라이드로 이동 (0부터 시작하는 인덱스)
+carousel.goTo(2);
+```
+
+### 자동 회전
+
+```javascript
+// 자동 회전 시작
+carousel.startAutoRotate();
+
+// 자동 회전 중지
+carousel.stopAutoRotate();
+
+// 자동 회전 토글
+carousel.toggleAutoRotate();
+```
+
+### 정리
+
+```javascript
+// 캐러셀 제거 및 이벤트 리스너 정리
+carousel.destroy();
+```
+
+### 속성
+
+```javascript
+// 현재 슬라이드 인덱스 가져오기
+console.log(carousel.currentIndex);
+
+// 전체 슬라이드 수 가져오기
+console.log(carousel.totalItems);
+
+// 자동 회전 상태 확인
+console.log(carousel.isAutoRotating);
+```
+
+## 브라우저 지원
+
+- Chrome/Edge (최신)
+- Firefox (최신)
+- Safari (최신)
+- Mobile Safari (iOS 12+)
+- Chrome Mobile (Android 5+)
+
+## 사용 예제
+
+```javascript
+// 기본 사용
+const carousel = new PeekCarousel('#myCarousel');
+
+// 레이아웃 모드 변경
+new PeekCarousel('#myCarousel', { layoutMode: 'radial' });
+
+// 자동 회전 활성화
+new PeekCarousel('#myCarousel', { autoRotate: true });
+```
+
+## 커스터마이징
+
+CSS 클래스를 오버라이드하여 스타일을 커스터마이징할 수 있습니다:
+
+```css
+.peek-carousel__btn { /* 버튼 스타일 */ }
+.peek-carousel__indicator--active::before { /* 인디케이터 스타일 */ }
+```
+
+## 개발
+
+```bash
+git clone https://github.com/lledellebell/peek-carousel.git
+npm install
+npm run build
+```
+
+## 기여
+
+기여를 환영합니다! Pull Request를 자유롭게 제출해 주세요.
+
+## 라이선스
+
+MIT 라이선스 - 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요
+
+## 크레딧
+
+iPhone 17 Pro 제품 소개 페이지의 스와이프 인터랙션에서 영감을 받았습니다.
+
+- [이미지1](./public/motivation0.png)
+
+## 변경 로그
+
+변경 사항은 [GitHub Releases](https://github.com/lledellebell/peek-carousel/releases)를 참조하세요.

package/dist/peek-carousel.css

@@ -0,0 +1 @@
+.peek-carousel__item:focus-visible{border-radius:12px;outline:3px solid rgba(102,126,234,.8);outline-offset:8px}.peek-carousel{animation:fadeInUp .8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.1s;cursor:grab;display:grid;height:100%;opacity:0;place-items:center;position:relative;transform:translateY(30px);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;--drag-offset:0px;--drag-rotation:0deg;--drag-rotation-y:0deg}.peek-carousel__track{height:100%;position:relative;touch-action:pan-y;transform-style:preserve-3d;width:100%}.peek-carousel__item{aspect-ratio:1.3265306122;backface-visibility:hidden;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.8);transform-origin:center;width:clamp(300px,35vw,500px);will-change:transform,opacity;z-index:0;--item-x:0%;--item-scale:0.8;--item-offset-x:0px;--item-angle:0deg;--item-radius:400px}.peek-carousel__item--active .peek-carousel__caption{opacity:1}@media (max-width:768px){.peek-carousel__item{width:clamp(280px,80vw,400px);--item-radius:300px}}.peek-carousel__figure{height:100%;margin:0;position:relative;width:100%}.peek-carousel__image{border-radius:16px;box-shadow:0,20px,60px,rgba(0,0,0,.6),0,5px,15px,rgba(0,0,0,.4);height:100%;-o-object-fit:cover;object-fit:cover;transition:filter .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1);width:100%;will-change:filter,box-shadow}.peek-carousel__caption{background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);border-radius:0 0 16px 16px;color:#fff;inset:auto 0 0;opacity:0;padding:1.5rem;pointer-events:none;position:absolute;text-align:center;transition:opacity .3s ease}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.peek-carousel--stack .peek-carousel__track{transform:none;transition:none}.peek-carousel--stack .peek-carousel__item{cursor:pointer;opacity:.5;transition:transform .05s,opacity .05s,z-index 0s;visibility:visible}.peek-carousel--stack .peek-carousel__item:not(.peek-carousel__item--dragging-left):not(.peek-carousel__item--dragging-right){transition:transform .5s,opacity .5s,z-index 0s}.peek-carousel--stack .peek-carousel__item--active{opacity:1;z-index:100}.peek-carousel--stack .peek-carousel__item--active .peek-carousel__image{box-shadow:0 40px 100px rgba(102,126,234,.6),0 0 40px rgba(102,126,234,.4),0 0 80px rgba(118,75,162,.3);filter:brightness(1.2) saturate(1.1)}.peek-carousel--stack .peek-carousel__item:not(.peek-carousel--stack .peek-carousel__item--active) .peek-carousel__image{box-shadow:0 20px 50px rgba(0,0,0,.5);filter:brightness(.7) saturate(.85)}.peek-carousel--stack .peek-carousel__item:not(.peek-carousel--stack .peek-carousel__item--active):hover .peek-carousel__image{box-shadow:0 30px 70px rgba(102,126,234,.3)!important;filter:brightness(.9) saturate(1)!important;transition:all .3s ease}.peek-carousel--stack .peek-carousel__item--center{transform:translate(-50%,-50%) scale(1.15) translateX(var(--drag-offset)) rotate(var(--drag-rotation))}.peek-carousel--stack .peek-carousel__item--prev{transform:translate(-95%,-50%) scale(.85) translateX(calc(-15px + var(--drag-offset))) rotate(var(--drag-rotation))}.peek-carousel--stack .peek-carousel__item--next{transform:translate(-5%,-50%) scale(.85) translateX(calc(15px + var(--drag-offset))) rotate(var(--drag-rotation))}.peek-carousel--stack .peek-carousel__item--hidden{transform:translate(-50%,-50%) scale(.7) translateX(var(--drag-offset)) rotate(var(--drag-rotation))}.peek-carousel--radial{perspective:1200px}.peek-carousel--radial .peek-carousel__track{transform:rotateY(calc(var(--carousel-rotation, 0deg) + var(--drag-rotation-y)));transition:transform .5s cubic-bezier(.4,0,.2,1)}.peek-carousel--radial .peek-carousel__track:active{transition:transform .05s}.peek-carousel--radial .peek-carousel__item{cursor:default;opacity:0;transform:translate(-50%,-50%) rotateY(var(--item-angle)) translateZ(var(--item-radius));transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s .5s,z-index 0s;visibility:hidden}.peek-carousel--radial .peek-carousel__item--active{cursor:grab;opacity:1;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s 0s,z-index 0s;visibility:visible;z-index:100}.peek-carousel--radial .peek-carousel__item--active:active{cursor:grabbing}.peek-carousel--radial .peek-carousel__item--active .peek-carousel__image{box-shadow:0 40px 100px rgba(102,126,234,.6),0 0 40px rgba(102,126,234,.4),0 0 80px rgba(118,75,162,.3);filter:brightness(1.2) saturate(1.1)}.peek-carousel--radial .peek-carousel__item--next,.peek-carousel--radial .peek-carousel__item--prev{opacity:.3;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),visibility 0s 0s,z-index 0s;visibility:visible;z-index:50}.peek-carousel--radial .peek-carousel__item--next .peek-carousel__image,.peek-carousel--radial .peek-carousel__item--prev .peek-carousel__image{box-shadow:0 25px 60px rgba(0,0,0,.6);filter:brightness(.8) saturate(.9)}.peek-carousel--radial .peek-carousel__item:not(.peek-carousel--radial .peek-carousel__item--active) .peek-carousel__image{box-shadow:0 20px 50px rgba(0,0,0,.5);filter:brightness(.7) saturate(.85)}@media (max-width:768px){.peek-carousel--radial .peek-carousel__item{--item-radius:300px}}.peek-carousel--classic{overflow:hidden}.peek-carousel--classic .peek-carousel__track{transform:translateX(calc(var(--track-offset, 0px) + var(--drag-offset)));transition:transform .5s cubic-bezier(.4,0,.2,1)}.peek-carousel--classic .peek-carousel__track:active{transition:transform .05s}.peek-carousel--classic .peek-carousel__item{cursor:default;left:var(--item-x,50%);opacity:0;position:absolute;transform:translate(-50%,-50%) scale(var(--item-scale,1));transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),visibility 0s cubic-bezier(.4,0,.2,1) .5s,z-index 0s;visibility:hidden;z-index:0}.peek-carousel--classic .peek-carousel__item--active{cursor:grab;opacity:1;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),visibility 0s 0s,z-index 0s;visibility:visible;z-index:100}.peek-carousel--classic .peek-carousel__item--active:active{cursor:grabbing}.peek-carousel--classic .peek-carousel__item--active .peek-carousel__image{box-shadow:0 40px 100px rgba(102,126,234,.6),0 0 40px rgba(102,126,234,.4),0 0 80px rgba(118,75,162,.3);filter:brightness(1.15) saturate(1.1)}.peek-carousel--classic .peek-carousel__item--next,.peek-carousel--classic .peek-carousel__item--prev{cursor:pointer;opacity:.6;transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1),left .5s cubic-bezier(.4,0,.2,1),visibility 0s 0s,z-index 0s;visibility:visible;z-index:50}.peek-carousel--classic .peek-carousel__item--next .peek-carousel__image,.peek-carousel--classic .peek-carousel__item--prev .peek-carousel__image{box-shadow:0 25px 60px rgba(0,0,0,.5);filter:brightness(.8) saturate(.95)}.peek-carousel--classic .peek-carousel__item--next:hover .peek-carousel__image,.peek-carousel--classic .peek-carousel__item--prev:hover .peek-carousel__image{box-shadow:0 30px 70px rgba(102,126,234,.3)!important;filter:brightness(1) saturate(1.05)!important;transition:all .3s ease}.peek-carousel--classic .peek-carousel__item:not(.peek-carousel--classic .peek-carousel__item--active):not(.peek-carousel--classic .peek-carousel__item--prev):not(.peek-carousel--classic .peek-carousel__item--next) .peek-carousel__image{box-shadow:0 10px 30px rgba(0,0,0,.3);filter:brightness(.5) saturate(.7)}.peek-carousel__controls{align-items:center;animation:fadeInUpControls .6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.6s;display:flex;gap:.75rem;inset:auto auto 3% 50%;opacity:0;position:absolute;transform:translateX(-50%);z-index:100}.peek-carousel__indicators{align-items:center;backdrop-filter:blur(12px);background:rgba(0,0,0,.5);border:1px solid hsla(0,0%,100%,.15);border-radius:50px;display:flex;gap:.875rem;padding:.625rem 1rem}.peek-carousel__indicator{align-items:center;background:transparent;border:none;border-radius:50%;cursor:pointer;display:flex;height:10px;justify-content:center;padding:0;position:relative;transition:all .3s ease;width:10px}.peek-carousel__indicator:before{background:hsla(0,0%,100%,.4);border-radius:50%;content:"";height:10px;transition:all .3s ease;width:10px}.peek-carousel__indicator:hover:before{background:hsla(0,0%,100%,.6);transform:scale(1.2)}.peek-carousel__indicator--active{border-radius:50px;overflow:hidden;width:50px}.peek-carousel__indicator--active:before{background:hsla(0,0%,100%,.3);border-radius:50px;content:"";height:8px;transition:all .3s ease;width:50px}.peek-carousel__indicator--active:after{background:hsla(0,0%,100%,.95);border-radius:50px;box-shadow:0 2px 8px hsla(0,0%,100%,.3),0 0 12px hsla(0,0%,100%,.2);content:"";height:8px;inset:50% auto auto 0;position:absolute;transform:translateY(-50%);transition:all .3s ease;width:50px}.peek-carousel__indicator--active:hover:before{background:hsla(0,0%,100%,.4)}.peek-carousel__indicator--active:hover:after{background:#fff;box-shadow:0 2px 12px hsla(0,0%,100%,.4),0 0 16px hsla(0,0%,100%,.3)}.peek-carousel__indicator--active.peek-carousel__indicator--progress:after{animation:indicatorProgress linear forwards;animation-duration:var(--progress-duration,2.5s);width:0}.peek-carousel__indicator--completed:after{animation:none;width:50px!important}@keyframes fadeInUpControls{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes indicatorProgress{0%{width:0}to{width:50px}}.peek-carousel__nav{align-items:center;animation:fadeInUpNav .6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.5s;display:flex;gap:2rem;inset:auto auto 8% 50%;opacity:0;position:absolute;transform:translateX(-50%);z-index:100}@media (max-width:768px){.peek-carousel__nav{bottom:12%}}.peek-carousel__btn{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:50%;color:#fff;cursor:pointer;display:flex;display:grid;font-size:1rem;height:36px;justify-content:center;place-items:center;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:36px}.peek-carousel__btn svg{flex-shrink:0;height:18px;transition:transform .15s ease-out;width:18px}.peek-carousel__btn:hover{background:hsla(0,0%,100%,.2);transform:scale(1.1)}.peek-carousel__btn:active{transform:scale(.95)}.peek-carousel__btn:focus-visible{outline:3px solid rgba(102,126,234,.8);outline-offset:4px}.peek-carousel__btn:hover svg{transform:translateX(0)}.peek-carousel__btn.prev-btn:hover svg{transform:translateX(-2px)}.peek-carousel__btn.next-btn:hover svg{transform:translateX(2px)}@media (max-width:768px){.peek-carousel__btn{height:36px;width:36px}}.peek-carousel__btn--auto-rotate{align-items:center;backdrop-filter:blur(12px);background:rgba(0,0,0,.5);border:1px solid hsla(0,0%,100%,.15);border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;padding:0;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:36px}.peek-carousel__btn--auto-rotate svg{flex-shrink:0}.peek-carousel__btn--auto-rotate .play-icon{display:block}.peek-carousel__btn--auto-rotate .pause-icon{display:none}.peek-carousel__btn--auto-rotate:hover{background:rgba(0,0,0,.6);border-color:hsla(0,0%,100%,.3);transform:scale(1.1)}.peek-carousel__btn--auto-rotate:active{transform:scale(.95)}.peek-carousel__btn--auto-rotate:focus-visible{outline:3px solid rgba(102,126,234,.8);outline-offset:4px}.peek-carousel__btn--auto-rotate.peek-carousel__btn--active{background:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.3)}.peek-carousel__btn--auto-rotate.peek-carousel__btn--active .play-icon{display:none}.peek-carousel__btn--auto-rotate.peek-carousel__btn--active .pause-icon{display:block}@keyframes fadeInUpNav{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.peek-carousel__counter{animation:fadeInDown .6s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.7s;backdrop-filter:blur(10px);background:rgba(0,0,0,.5);border:1px solid hsla(0,0%,100%,.15);border-radius:20px;color:#fff;font-size:.875rem;font-weight:500;inset:3% auto auto 3%;line-height:1;opacity:0;padding:.5rem 1rem;pointer-events:none;position:absolute;transform:translateY(-10px);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:100}@media (max-width:768px){.peek-carousel__counter{font-size:.75rem;inset:2% auto auto 2%;padding:.4rem .8rem;position:absolute}}.peek-carousel__counter-separator{margin:0 .25rem;opacity:.7}.peek-carousel__counter-current{font-weight:600}.peek-carousel__counter-total{opacity:.8}@keyframes fadeInDown{to{opacity:1;transform:translateY(0)}}