/**
 * 海洋主題 (Ocean)
 * 深藍到淺藍漸層，波浪意象
 * 適合：平靜、遼闊的紀念氛圍
 */

.theme-ocean {
    --theme-primary: #1e40af;
    --theme-secondary: #2563eb;
    --theme-accent: #60a5fa;
    --theme-bg-start: #0c4a6e;
    --theme-bg-end: #3b82f6;
    --theme-text: #f0f9ff;
    --theme-text-light: #bfdbfe;
}

.theme-ocean.memorial-view-page {
    background: linear-gradient(180deg,
        #0c4a6e 0%,
        #075985 25%,
        #0369a1 50%,
        #0284c7 75%,
        #0ea5e9 100%
    );
    min-height: 100vh;
    position: relative;
}

/* 氣泡上升動畫 - 加強版 */
.theme-ocean.memorial-view-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 15% 90%, rgba(255, 255, 255, 0.25) 0%, transparent 12%),
        radial-gradient(circle at 35% 85%, rgba(96, 165, 250, 0.3) 0%, transparent 15%),
        radial-gradient(circle at 55% 95%, rgba(255, 255, 255, 0.22) 0%, transparent 10%),
        radial-gradient(circle at 75% 88%, rgba(96, 165, 250, 0.28) 0%, transparent 18%),
        radial-gradient(circle at 90% 92%, rgba(255, 255, 255, 0.2) 0%, transparent 12%);
    background-size: 100% 150%;
    animation: oceanBubbles 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes oceanBubbles {
    0% { background-position: 0 100%; opacity: 0.5; }
    50% { opacity: 0.8; }
    100% { background-position: 0 -50%; opacity: 0.5; }
}

.theme-ocean .memorial-cover {
    background: linear-gradient(180deg,
        #0c4a6e 0%,
        #075985 30%,
        #0369a1 60%,
        #0284c7 100%
    );
    position: relative;
    overflow: hidden;
}

/* 波浪動畫 - 底部與背景色銜接 */
.theme-ocean .memorial-cover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgb(81, 150, 189)' d='M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,165.3C672,139,768,117,864,133.3C960,149,1056,203,1152,213.3C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center bottom;
    animation: oceanWave 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes oceanWave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-50px); }
}

/* 光暈效果 */
.theme-ocean .memorial-cover::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 200%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(96, 165, 250, 0.25) 0%,
        rgba(14, 165, 233, 0.15) 40%,
        transparent 70%
    );
    animation: oceanGlow 6s ease-in-out infinite;
}

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

/* Hero 遮罩底部邊框顏色 - 與波浪一致 */
.theme-ocean .hero-cover-overlay {
    border-bottom-color: #0a5077;
}

/* 水波紋效果 */
.theme-ocean .memorial-cover {
    overflow: visible;
}

.theme-ocean .memorial-view-page::after {
    content: '';
    position: fixed;
    top: 35%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: oceanRipple 6s ease-out infinite;
}

@keyframes oceanRipple {
    0% {
        box-shadow:
            0 0 0 0 rgba(96, 165, 250, 0.5),
            0 0 0 0 rgba(96, 165, 250, 0.5),
            0 0 0 0 rgba(96, 165, 250, 0.5);
        opacity: 1;
    }
    25% {
        box-shadow:
            0 0 0 20px rgba(96, 165, 250, 0.4),
            0 0 0 0 rgba(96, 165, 250, 0.4),
            0 0 0 0 rgba(96, 165, 250, 0.4);
        opacity: 0.9;
    }
    50% {
        box-shadow:
            0 0 0 40px rgba(96, 165, 250, 0.2),
            0 0 0 20px rgba(96, 165, 250, 0.3),
            0 0 0 0 rgba(96, 165, 250, 0.3);
        opacity: 0.7;
    }
    75% {
        box-shadow:
            0 0 0 60px rgba(96, 165, 250, 0),
            0 0 0 40px rgba(96, 165, 250, 0.1),
            0 0 0 20px rgba(96, 165, 250, 0.2);
        opacity: 0.5;
    }
    100% {
        box-shadow:
            0 0 0 80px rgba(96, 165, 250, 0),
            0 0 0 60px rgba(96, 165, 250, 0),
            0 0 0 40px rgba(96, 165, 250, 0);
        opacity: 0.3;
    }
}

.theme-ocean .memorial-profile-card {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(96, 165, 250, 0.3);
    border-top-color: #0a5077;  /* 頂部邊框使用波浪顏色 */
}

.theme-ocean .memorial-section {
    background: rgba(81, 150, 189, 0.97);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.theme-ocean .memorial-tribute-section {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1) 0%, rgba(96, 165, 250, 0.08) 100%);
}

/* 蠟燭特效 - 藍色火焰 */
.theme-ocean .memorial-tribute-btn[data-type="candle"].active .memorial-tribute-icon {
    animation: oceanCandle 2s ease-in-out infinite;
}

@keyframes oceanCandle {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 5px #60a5fa);
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 15px #3b82f6) drop-shadow(0 0 10px #0ea5e9);
    }
}

/* 花朵特效 */
.theme-ocean .memorial-tribute-btn[data-type="flower"].active .memorial-tribute-icon {
    animation: oceanFlower 1s ease-out;
}

@keyframes oceanFlower {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); filter: brightness(1.2) drop-shadow(0 0 8px #60a5fa); }
    100% { transform: scale(1); }
}

/* 文字顏色調整 - 提高對比度 */
.theme-ocean .memorial-name {
    color: #0c4a6e;
    font-weight: 600;
}

.theme-ocean .memorial-epitaph {
    color: #075985;
}

.theme-ocean .memorial-dates {
    color: #0369a1;
}

/* 區塊內文字顏色 - 深色卡片用淺色文字 */
.theme-ocean .memorial-section p,
.theme-ocean .memorial-section .timeline-desc,
.theme-ocean .memorial-message-text {
    color: #f0f9ff;
}

/* 時間軸特色 */
.theme-ocean .memorial-timeline-dot {
    background: linear-gradient(135deg, #60a5fa, #93c5fd);
    box-shadow: 0 0 10px rgba(147, 197, 253, 0.6);
}

.theme-ocean .memorial-timeline-line {
    background: linear-gradient(180deg, #60a5fa, #93c5fd);
}

.theme-ocean .memorial-timeline-date {
    color: #bfdbfe;
    font-weight: 700;
}

.theme-ocean .memorial-timeline-title {
    color: #f0f9ff;
    font-weight: 700;
}

.theme-ocean .memorial-timeline-desc {
    color: #bfdbfe !important;
}

/* 留言卡片 */
.theme-ocean .memorial-message-card {
    border-left: 3px solid #60a5fa;
}

.theme-ocean .memorial-message-author {
    color: #bfdbfe;
}

/* 年齡標籤 */
.theme-ocean .memorial-age {
    background: linear-gradient(90deg, #1e40af, #3b82f6);
    font-weight: 600;
}

/* 區塊標題 - 深色卡片用淺色文字 */
.theme-ocean .memorial-section-title {
    color: #f0f9ff;
    font-weight: 700;
}

.theme-ocean .memorial-section-title .material-icons {
    color: #93c5fd;
}

/* 按鈕樣式 */
.theme-ocean .memorial-tribute-btn:hover {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.theme-ocean .memorial-tribute-btn.active {
    border-color: #1e40af;
    background: rgba(30, 64, 175, 0.12);
}

/* 相簿圖片邊框 */
.theme-ocean .memorial-gallery-item {
    border: 2px solid rgba(96, 165, 250, 0.3);
}

.theme-ocean .memorial-gallery-item:hover {
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.4);
}