/* ===========================
   Features Page - Animations
   見た目はそのまま、動きだけ追加
   =========================== */

/* ---- Page Hero Animations ---- */
.page-hero {
    overflow: hidden;
    position: relative;
}

.page-hero-title {
    opacity: 0;
    transform: translateY(40px);
    animation: heroTitleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.page-hero-desc {
    opacity: 0;
    transform: translateY(30px);
    animation: heroDescIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

@keyframes heroTitleIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes heroDescIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Floating Particles in Page Hero ---- */
.page-hero::before,
.page-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    pointer-events: none;
}

.page-hero::before {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: -100px;
    right: -80px;
    animation: floatBubble1 8s ease-in-out infinite;
}

.page-hero::after {
    width: 200px;
    height: 200px;
    background: var(--primary-dark);
    bottom: -60px;
    left: -40px;
    animation: floatBubble2 10s ease-in-out infinite;
}

@keyframes floatBubble1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 20px) scale(1.1); }
}

@keyframes floatBubble2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -15px) scale(1.05); }
}

/* ---- Enhanced Fade-in Variants ---- */
/* Override the base fade-in for features page */
.features-page .fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: none;
}

.features-page .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from left */
.features-page .slide-left {
    opacity: 0;
    transform: translateX(-80px);
}

.features-page .slide-left.visible {
    animation: slideFromLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideFromLeft {
    to { opacity: 1; transform: translateX(0); }
}

/* Slide from right */
.features-page .slide-right {
    opacity: 0;
    transform: translateX(80px);
}

.features-page .slide-right.visible {
    animation: slideFromRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideFromRight {
    to { opacity: 1; transform: translateX(0); }
}

/* Scale up entrance */
.features-page .scale-in {
    opacity: 0;
    transform: scale(0.85);
}

.features-page .scale-in.visible {
    animation: scaleUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes scaleUp {
    to { opacity: 1; transform: scale(1); }
}

/* Pop in with bounce */
.features-page .pop-in {
    opacity: 0;
    transform: scale(0.5);
}

.features-page .pop-in.visible {
    animation: popBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popBounce {
    to { opacity: 1; transform: scale(1); }
}

/* Blur in */
.features-page .blur-in {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
}

.features-page .blur-in.visible {
    animation: blurFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes blurFadeIn {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ---- Section Label Typing Animation ---- */
.features-page .section-label {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--primary);
    width: 0;
    opacity: 0;
}

.features-page .section-label.visible {
    opacity: 1;
    animation: typingWidth 0.8s steps(20) 0.2s forwards,
               blinkCaret 0.6s step-end 4;
}

@keyframes typingWidth {
    to { width: auto; }
}

@keyframes blinkCaret {
    50% { border-color: transparent; }
}

/* ---- Feature Detail Text - Staggered Children ---- */
.features-page .feature-detail-text.visible .section-label {
    opacity: 1;
    animation: typingReveal 0.6s ease forwards;
}

.features-page .feature-detail-text.visible .section-title {
    animation: textSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.features-page .feature-detail-text.visible .feature-detail-desc {
    animation: textSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(1) {
    animation: listItemSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(2) {
    animation: listItemSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(3) {
    animation: listItemSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(4) {
    animation: listItemSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

@keyframes typingReveal {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes textSlideUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes listItemSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Initial hidden states for staggered items */
.features-page .feature-detail-text .section-label,
.features-page .feature-detail-text .section-title,
.features-page .feature-detail-text .feature-detail-desc,
.features-page .feature-detail-text .feature-detail-list li {
    opacity: 0;
}

/* ---- List Item Bullet Animation ---- */
.features-page .feature-detail-list li::before {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(1)::before {
    animation: bulletPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.55s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(2)::before {
    animation: bulletPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.65s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(3)::before {
    animation: bulletPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.75s both;
}

.features-page .feature-detail-text.visible .feature-detail-list li:nth-child(4)::before {
    animation: bulletPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.85s both;
}

@keyframes bulletPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* ---- Phone Mockup Tilt & Float ---- */
.features-page .feature-detail-visual {
    perspective: 1000px;
}

.features-page .feature-mock {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.features-page .feature-mock:hover {
    transform: rotateY(-5deg) rotateX(3deg) translateY(-8px);
}

/* Float animation for phone mockups */
.features-page .feature-mock.floating {
    animation: phoneFloat 4s ease-in-out infinite;
}

@keyframes phoneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}


/* ---- Section Divider Line Animation ---- */
.features-page .section {
    position: relative;
}

.features-page .section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    transform: translateX(-50%);
    transition: width 1.2s ease;
}

.features-page .section.line-visible::after {
    width: 80%;
}

/* ---- CTA Section Pulse ---- */
.features-page .cta-section .btn-dark {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.features-page .cta-section .btn-dark::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50px;
    background: rgba(255,255,255,0.15);
    animation: ctaPulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaPulse {
    0%, 100% { transform: scale(1); opacity: 0; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* CTA title animation */
.features-page .cta-title {
    opacity: 0;
    transform: translateY(30px);
}

.features-page .cta-title.visible {
    animation: ctaTextIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.features-page .cta-desc {
    opacity: 0;
    transform: translateY(20px);
}

.features-page .cta-desc.visible {
    animation: ctaTextIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes ctaTextIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Parallax-ready classes ---- */
.features-page .parallax-element {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---- Glow ring on image outline (uses drop-shadow to follow alpha channel) ---- */
.features-page .feature-mock img.glow {
    animation: imgGlowRing 1.2s ease forwards;
}

@keyframes imgGlowRing {
    0%   { filter: drop-shadow(0 0 0px rgba(240,168,72,0.6)); }
    50%  { filter: drop-shadow(0 0 20px rgba(240,168,72,0.5)); }
    100% { filter: drop-shadow(0 0 0px rgba(240,168,72,0)); }
}

/* ---- Counter number animation ---- */
.features-page .counter-number {
    display: inline-block;
    transition: all 0.3s;
}

/* ---- Smooth scroll snap feel ---- */
@media (prefers-reduced-motion: no-preference) {
    .features-page {
        scroll-behavior: smooth;
    }
}

/* ---- Reduce motion for accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    .features-page * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}