/**
 * ティーズオート - カスタムスタイル
 * Tailwind CSSと併用
 */

/* ========================================
   Base Styles
   ======================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
}

/* ========================================
   Animations
   ======================================== */

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ========================================
   Transitions
   ======================================== */

.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* ========================================
   FAQ Accordion
   ======================================== */

.faq-content {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.faq-content.open {
    max-height: 200px;
    opacity: 1;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.rotate {
    transform: rotate(90deg);
}

/* ========================================
   Price Simulator
   ======================================== */

.size-btn {
    transition: all 0.2s ease;
}

.size-btn.active {
    background-color: #0f172a;
    color: white;
    border-color: #0f172a;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    transform: scale(1.05);
}

.size-btn:not(.active) {
    background-color: white;
    color: #475569;
    border-color: #e2e8f0;
}

.size-btn:not(.active):hover {
    border-color: #fdba74;
    background-color: #fff7ed;
}

/* Option labels */
.option-label {
    transition: all 0.2s ease;
}

.option-label.checked {
    background-color: #fff7ed;
    border-color: #fdba74;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.option-label.checked span:first-child {
    color: #7c2d12;
}

.option-label:not(.checked) {
    background-color: white;
    border-color: #e2e8f0;
}

.option-label:not(.checked):hover {
    background-color: #f8fafc;
}

/* Checkbox styling */
.option-checkbox {
    transition: all 0.2s ease;
}

.option-checkbox.checked {
    background-color: #f97316;
    border-color: #f97316;
    color: white;
}

.option-checkbox:not(.checked) {
    background-color: white;
    border-color: #cbd5e1;
}

/* Range slider */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #cbd5e1;
    border-radius: 9999px;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #f97316;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #f97316;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ========================================
   Mobile CTA
   ======================================== */

#mobileCta {
    transition: transform 0.3s ease;
}

#mobileCta.visible {
    transform: translateY(0);
}

#mobileCta.hidden {
    transform: translateY(100%);
}

/* ========================================
   Gallery Hover Effects
   ======================================== */

.gallery-item img {
    transition: transform 0.7s ease-out;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* ========================================
   Feature Cards
   ======================================== */

.feature-image-wrapper {
    transition: transform 0.5s ease;
}

.feature-image-wrapper:hover {
    transform: translateY(-4px);
}

.feature-bg {
    transition: transform 0.5s ease;
}

.feature-image-wrapper:hover .feature-bg {
    transform: translate(16px, 16px);
}

/* ========================================
   Flow Cards
   ======================================== */

.flow-card {
    transition: transform 0.3s ease;
}

.flow-card:hover {
    transform: translateY(-8px);
}

/* ========================================
   Buttons
   ======================================== */

.btn-primary {
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-4px);
}

.btn-cta {
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: #05b54c;
}

/* Arrow animation */
.btn-arrow {
    transition: transform 0.3s ease;
}

.group:hover .btn-arrow {
    transform: translateX(4px);
}

/* ========================================
   Header
   ======================================== */

header {
    transition: all 0.3s ease;
}

/* ========================================
   Responsive Utilities
   ======================================== */

@media (max-width: 768px) {
    .mobile-menu {
        transition: all 0.3s ease;
    }
}

/* ========================================
   Star Rating (Testimonials)
   ======================================== */

.star-rating {
    color: #facc15;
}

.star-rating svg {
    fill: currentColor;
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}