/* =========================================
   Page Specific Styles: room_cleaning.html
   Theme: Refreshing Mind and Space
   ========================================= */

/* --- Zero-Based Hero Section: Prism of Clarity --- */
.hero-cleaning {
    position: relative;
    padding: 6rem 2rem;
    margin: 0 -5% 4rem -5%; /* Removed negative top margin to show rounded corners clearly */
    background: linear-gradient(135deg, #f0fdfa 0%, #e0f2fe 50%, #f5f3ff 100%);
    border-radius: 50px; /* Fully rounded for a soft, premium feel */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.hero-glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 3.5rem;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);
    text-align: center;
    max-width: 850px;
    width: 100%;
    position: relative;
    z-index: 10;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-glass-card:hover {
    transform: scale(1.02) translateY(-5px);
}

.hero-cleaning h1 {
    font-size: 3.5rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 10px rgba(94, 234, 212, 0.2);
}

.hero-cleaning .subtitle {
    font-size: 1.5rem;
    color: #475569;
    font-weight: 600;
    opacity: 0.9;
}

.hero-cleaning .line {
    margin: 2rem auto 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #5eead4, #8b5cf6);
    border-radius: 2px;
}

/* Enhanced Particle System */
.particle-engine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.magic-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* Dust State (Initial) */
.particle-dust {
    background: #94a3b8;
    filter: blur(1px);
    animation: floating-dust 8s infinite ease-in-out;
}

@keyframes floating-dust {
    0%, 100% { transform: translate(0, 0); opacity: 0.1; }
    50% { transform: translate(var(--mx), var(--my)); opacity: 0.3; }
}

/* Star State (Triggered) */
.hero-glass-card:hover ~ .particle-engine .particle-dust {
    animation: transform-to-stars 0.8s forwards ease-out;
}

@keyframes transform-to-stars {
    0% { transform: scale(1); opacity: 0.3; background: #94a3b8; }
    30% { transform: scale(1.5); opacity: 0.8; background: #5eead4; filter: blur(0); box-shadow: 0 0 10px #5eead4; }
    100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

.content-body {
    margin-top: 2rem;
}

.gradient-text-sub {
    background: linear-gradient(135deg, #0d9488, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

/* Insight Box */
.insight-box {
    margin: 3rem 0;
    padding: 2rem;
    background: #f0fdfa;
    border-radius: 16px;
    border: 1px solid #5eead4;
}

.insight-box h4 {
    color: #0d9488;
    margin-bottom: 1rem;
}

.insight-box ul {
    margin-top: 1rem;
    list-style: none;
    padding-left: 0;
}

.insight-box li {
    margin-bottom: 0.5rem;
}

.insight-box li i {
    color:#0d9488;
}

/* 75% Rule Visualization */
.rule-section {
    margin: 4rem 0;
    text-align: center;
    padding: 2.5rem;
    background: #fff;
    border: 2px dashed #3b82f6;
    border-radius: 20px;
    position: relative;
}

.rule-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: white;
    padding: 0.2rem 1.5rem;
    border-radius: 20px;
    font-weight: bold;
}

.shelf-container {
    max-width: 400px;
    margin: 2rem auto;
    border: 4px solid #94a3b8;
    border-radius: 12px;
    padding: 12px;
    background: #f8fafc;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.shelf-container:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(94, 234, 212, 0.4);
    border-color: #5eead4;
}

.shelf-display {
    display: flex;
    gap: 6px;
    height: 120px;
    position: relative;
}

.filled-zone {
    width: 75%;
    display: flex;
    gap: 6px;
    transition: width 0.5s ease;
}

.shelf-container:hover .filled-zone {
    width: 60%; /* Visualizing further decluttering */
}

.book {
    flex: 1;
    border-radius: 4px;
    transition: all 0.4s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

.book-1 { background: #93c5fd; }
.book-2 { background: #60a5fa; }
.book-3 { background: #3b82f6; }
.book-4 { background: #2563eb; }

.shelf-container:hover .book {
    transform: translateY(-8px) rotate(2deg);
}

.empty-zone {
    width: 25%;
    border: 2px dashed #5eead4;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(94, 234, 212, 0.05);
    transition: all 0.5s ease;
}

.shelf-container:hover .empty-zone {
    width: 40%;
    background: rgba(94, 234, 212, 0.2);
}

.empty-label {
    font-size: 0.85rem;
    color: #0d9488;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.rule-note {
    font-size: 0.95rem;
    color: #1e40af;
    background: #eff6ff;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* --- Interactive River: Flow of Release --- */
.flow-message {
    margin-top: 5rem;
    position: relative;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 24px;
    overflow: hidden;
    text-align: center;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid #bae6fd;
}

.river-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Clutter Box (The Luggage) */
.clutter-box {
    position: absolute;
    bottom: 20px; /* Lowered into the river area */
    left: 8%;
    font-size: 3.2rem;
    color: #64748b;
    z-index: 15; /* Above waves */
    transition: all 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
    pointer-events: auto;
    cursor: pointer;
}

.clutter-box::after {
    content: "よどみ";
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: bold;
    color: #94a3b8;
    white-space: nowrap;
}

/* River Waves */
.wave-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V120c0,0,10.15-1.92,10.15-1.92V56.44c55.82-8.62,112.55-15,168-15,55.45,0,111,6.4,168,15.31Z" fill="%237dd3fc" fill-opacity="0.3"/></svg>');
    background-size: 50% 100%;
    animation: wave-flow 10s linear infinite;
}

.wave-layer.secondary {
    bottom: 5px;
    animation: wave-flow 15s linear infinite reverse;
    opacity: 0.5;
}

@keyframes wave-flow {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Interaction States */
.flow-message:hover {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-color: #67e8f9;
}

.flow-message:hover .clutter-box {
    left: 110%;
    transform: rotate(20deg) scale(0.8);
    opacity: 0;
}

.flow-message:hover .river-message-content {
    animation: text-purify 1.5s forwards ease-out;
}

@keyframes text-purify {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); color: #0891b2; }
    100% { transform: scale(1); color: #0e7490; text-shadow: 0 0 15px rgba(34, 211, 238, 0.3); }
}

.river-message-content {
    position: relative;
    z-index: 10;
    padding: 1rem 1rem 3rem 1rem; /* Added bottom padding to clear the river space */
    transition: all 0.5s ease;
}

.river-message-content h4 {
    color: #0369a1;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.river-message-content p {
    font-size: 1.05rem;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
}

/* Sparkles after release */
.purification-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

.flow-message:hover .purification-sparkles {
    animation: sparkle-fade 2s 0.8s forwards;
}

@keyframes sparkle-fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

.back-to-list {
    margin-top: 2rem;
    text-align: center;
}

.summary-message {
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b;
    margin: 4rem 0;
}

/* New Elements for Revised Manuscript */
.personal-note {
    background: #fdf4ff;
    border-left: 4px solid #d946ef;
    padding: 2rem;
    margin: 3rem 0;
    border-radius: 0 16px 16px 0;
    font-style: italic;
    color: #701a75;
    position: relative;
}

.personal-note i {
    position: absolute;
    top: 1rem;
    left: 1rem;
    opacity: 0.1;
    font-size: 3rem;
}

.insight-box.highlight {
    background: #fff7ed;
    border-color: #fb923c;
    overflow: hidden; /* For cleaning edges */
}

.insight-box.highlight li {
    opacity: 0;
    transform: translateY(20px);
    animation: movie-intro-fade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.insight-box.highlight li:nth-child(1) { animation-delay: 1s; }
.insight-box.highlight li:nth-child(2) { animation-delay: 2.8s; }
.insight-box.highlight li:nth-child(3) { animation-delay: 4.6s; }

@keyframes movie-intro-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.insight-box.highlight h4 {
    color: #c2410c;
}

.insight-box li i.fa-circle-question {
    color: #fb923c;
}

.refresh-tips {
    margin: 4rem 0;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.refresh-tips h4 {
    text-align: center;
    margin-bottom: 2rem;
    color: #334155;
    font-size: 1.5rem;
}

.refresh-tips .tip-card {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border: 1px solid #f1f5f9;
}

.refresh-tips .tip-card strong {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #0d9488;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

/* Calm Modern Large Digital Timer (Aligned with Room Cleaning theme) */
.timer-module {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: #f0fdfa; /* Calmer mint background */
    border-radius: 20px;
    border: 3px dashed #5eead4; /* Mint dashed border */
    position: relative;
}

.timer-label {
    font-size: 1.4rem; /* Increased for better visibility */
    color: #0d9488;
    font-weight: 700;
    letter-spacing: 0.15em;
    opacity: 0.9;
    margin-bottom: -0.2rem;
}

#timer-display {
    font-family: "Outfit", "Courier New", Courier, monospace;
    font-size: 4.5rem;
    color: #0d9488; /* Calm teal instead of red */
    font-weight: 900;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.05);
    background: #fff;
    display: inline-block;
    padding: 1rem 3rem;
    border-radius: 12px;
    border: 3px solid #0d9488;
    min-width: 280px;
    text-align: center;
    transition: all 0.3s ease;
}

#timer-display.blink {
    animation: timer-blink 0.5s infinite;
}

@keyframes timer-blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#start-timer-btn {
    background: #0d9488; /* Calm teal button */
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    padding: 1rem 4rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 0 #0f766e; /* Darker teal shadow */
    transition: all 0.2s;
    font-family: "Outfit", sans-serif;
    letter-spacing: 2px;
}

#start-timer-btn:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #0f766e;
}

#start-timer-btn.running {
    background: #94a3b8;
    box-shadow: 0 5px 0 #64748b;
}

/* Cleanup old timer visual styles */
.timer-visual, .timer-svg, .timer-bg-circle, .timer-progress-circle {
    display: none;
}

.refresh-tips .tip-card p {
    margin: 0;
    font-size: 0.95rem;
    padding-left: 2.3rem;
}