.story-album {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: clamp(28px, 6vw, 72px);
    padding: clamp(28px, 5vw, 58px);
    border: 1px solid var(--border-soft);
    border-radius: 40px;
    background:
        radial-gradient(circle at 15% 20%, rgba(236,72,153,.13), transparent 34%),
        radial-gradient(circle at 85% 80%, rgba(56,189,248,.14), transparent 38%),
        var(--card-bg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.album-intro { position: relative; z-index: 2; }
.album-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--accent-pink);
    font-weight: 900;
}
.album-open-btn { margin-top: 14px; }

.album-cover {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 4 / 3;
    justify-self: center;
    padding: 0;
    border: 0;
    border-radius: 12px 30px 30px 12px;
    overflow: hidden;
    color: white;
    cursor: pointer;
    transform: perspective(1200px) rotateY(-8deg) rotateX(2deg);
    box-shadow: -22px 28px 55px rgba(7,19,29,.32), inset 16px 0 20px rgba(0,0,0,.2);
    transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s ease;
}
.album-cover::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 24px;
    z-index: 2;
    background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.16), transparent);
}
.album-cover:hover {
    transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-8px);
    box-shadow: 0 34px 70px rgba(7,19,29,.38);
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cover-shine {
    position: absolute;
    inset: -100% -50%;
    background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
    transform: translateX(-45%);
    animation: albumShine 5s ease-in-out infinite;
}
.album-cover-copy {
    position: absolute;
    inset: auto 28px 26px;
    z-index: 3;
    text-align: right;
    text-shadow: 0 5px 18px rgba(0,0,0,.72);
}
.album-cover-copy b { display: block; font-size: clamp(1.45rem, 3vw, 2.5rem); }
.album-cover-copy small { font-size: .95rem; font-weight: 800; }

.album-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 18px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease, visibility .45s ease;
}
.album-modal.is-open,
.album-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.album-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.84);
    backdrop-filter: blur(18px);
}
.album-dialog {
    position: relative;
    width: min(1040px, 96vw);
    z-index: 2;
    transform: translateY(24px) scale(.96);
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.album-modal.is-open .album-dialog,
.album-modal:target .album-dialog { transform: translateY(0) scale(1); }
.album-close {
    position: absolute;
    top: -16px;
    left: -10px;
    z-index: 20;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(15,23,42,.82);
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    display: grid;
    place-items: center;
    text-decoration: none;
}
.album-book {
    position: relative;
    min-height: min(68vh, 650px);
    border-radius: 20px;
    background: #f8f1e4;
    box-shadow: 0 35px 100px rgba(0,0,0,.52), inset 0 0 0 10px rgba(126,82,48,.1);
    overflow: hidden;
    perspective: 1800px;
}
.album-book::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    z-index: 4;
    background: linear-gradient(90deg, rgba(0,0,0,.15), rgba(255,255,255,.7), rgba(0,0,0,.1));
    box-shadow: 0 0 24px rgba(0,0,0,.22);
}
.album-page {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    opacity: 0;
    visibility: hidden;
    transform-origin: right center;
    transform: rotateY(-22deg) scale(.97);
    transition: opacity .5s ease, transform .75s cubic-bezier(.2,.8,.2,1), visibility .5s;
    background: linear-gradient(110deg, #fffaf0, #f2e5d2);
}
.album-page.is-active {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0) scale(1);
}
.album-page.is-turning { transform: rotateY(18deg) scale(.98); opacity: 0; }
.album-photo {
    min-height: min(68vh, 650px);
    padding: clamp(14px, 2.2vw, 24px);
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.88), transparent 34%),
        linear-gradient(135deg, #f7efe1, #ead7bd);
    box-shadow: inset -12px 0 28px rgba(61,43,37,.14);
}
.album-photo img {
    width: 100%;
    height: 100%;
    max-height: calc(min(68vh, 650px) - 42px);
    object-fit: contain;
    display: block;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(61,43,37,.24);
    background: #fffaf0;
}
.album-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 5vw, 62px);
    color: #3d2b25;
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(126,82,48,.09) 32px);
}
.album-caption span { color: #be185d; font-weight: 900; }
.album-caption h3 { margin: 10px 0 16px; font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.3; }
.album-caption p { margin: 0; line-height: 2; font-weight: 700; }
.album-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-top: 16px;
    color: white;
}
.album-controls button {
    min-width: 118px;
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: white;
    cursor: pointer;
    font: 800 .9rem 'Cairo', sans-serif;
}
.album-progress { display: flex; gap: 7px; font-size: 1.05rem; }
body.album-open { overflow: hidden; }

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.memory-flyer{
    position:fixed;

    bottom:30px;
    right:25px;

    width:130px;
    height:95px;

    border:0;
    border-radius:18px;

    background:
    linear-gradient(135deg,#b90f67,#d9468f 45%,#5c6ac4);

    box-shadow:
    0 15px 35px rgba(0,0,0,.35);

    cursor:pointer;
    z-index:1100;

    overflow:hidden;

    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    animation:
    memoryFloat 5s ease-in-out infinite;

    opacity:0;
    pointer-events:none;
    transform:translateY(18px) scale(.94);
    transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .55s ease;
}

.memory-flyer.is-visible{
    display:flex;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.memory-flyer.is-hiding{
    opacity:0;
    pointer-events:none;
    transform:translateY(18px) scale(.94);
    filter:blur(4px);
}
	
@keyframes albumShine {
    0%, 60% { transform: translateX(-45%); }
    85%, 100% { transform: translateX(45%); }
}

.memory-heart{
    color:white;
    font-size:28px;
    margin-bottom:8px;
}

.memory-title{
    color:white;
    font-weight:900;
    font-size:14px;
}

@keyframes memoryFloat{

    0%,100%{
        translate:0 0;
    }

    50%{
        translate:0 -12px;
    }

}

@keyframes shineMove{

    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }

}
@media (max-width: 820px) {
    .story-album { grid-template-columns: 1fr; text-align: center; border-radius: 28px; }
    .album-page { grid-template-columns: 1fr; grid-template-rows: minmax(0, 62%) minmax(0, 38%); }
    .album-photo { min-height: 0; padding: 12px; }
    .album-photo img { max-height: 100%; }
    .album-book { min-height: 72vh; }
    .album-book::after { display: none; }
    .album-caption { padding: 22px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .album-cover-shine { animation: none; }
    .reveal-on-scroll { opacity: 1; transform: none; }
    .album-page, .album-dialog, .album-modal { transition-duration: .01ms; }
}

/* Premium album restyle to match the clinic visual identity. */
.story-album {
    background:
        radial-gradient(circle at 18% 16%, rgba(217,108,159,.16), transparent 34%),
        radial-gradient(circle at 84% 76%, rgba(58,168,160,.14), transparent 38%),
        linear-gradient(145deg, rgba(255,252,248,.9), rgba(255,239,246,.62));
    border-color: rgba(183,110,121,.22);
}

[data-mode="dark"] .story-album {
    background:
        radial-gradient(circle at 18% 16%, rgba(217,108,159,.13), transparent 34%),
        radial-gradient(circle at 84% 76%, rgba(58,168,160,.1), transparent 38%),
        linear-gradient(145deg, rgba(45,33,46,.92), rgba(31,23,32,.88));
}

.album-kicker,
.album-caption span {
    color: #b76e79;
}

.album-cover {
    box-shadow: -22px 28px 55px rgba(111,47,79,.24), inset 16px 0 20px rgba(0,0,0,.18);
}

.album-book {
    background: #fff7ed;
    box-shadow: 0 35px 100px rgba(54,34,48,.48), inset 0 0 0 10px rgba(183,110,121,.08);
}

.album-page {
    background: linear-gradient(110deg, #fffaf5, #f8e7df);
}

.album-photo {
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.9), transparent 34%),
        linear-gradient(135deg, #fff3ea, #f2d5dc);
    box-shadow: inset -12px 0 28px rgba(111,47,79,.12);
}

.album-photo img {
    background: #fffaf5;
    box-shadow: 0 18px 42px rgba(111,47,79,.22);
}

.album-caption {
    color: #40323b;
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(183,110,121,.09) 32px);
}

.album-controls button,
.album-close {
    background: rgba(111,47,79,.72);
    border-color: rgba(255,210,223,.26);
}

/* Album v2 polish: more luxurious and less like the old style. */
.story-album {
    border-radius: 46px;
    padding: clamp(32px, 5.4vw, 68px);
    background:
        radial-gradient(circle at 10% 12%, rgba(198,95,137,.18), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(47,159,152,.14), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,231,239,.62));
    box-shadow:
        0 26px 80px rgba(90,41,66,.14),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.album-kicker {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(198,95,137,.1);
}

.album-cover {
    border-radius: 20px 38px 38px 20px;
    box-shadow:
        -24px 30px 70px rgba(90,41,66,.22),
        inset 16px 0 22px rgba(90,41,66,.22);
}

.album-modal {
    background:
        radial-gradient(circle at 50% 14%, rgba(198,95,137,.16), transparent 34%);
}

.album-backdrop {
    background: rgba(18,13,19,.86);
}

.album-dialog {
    width: min(1120px, 96vw);
}

.album-book {
    border-radius: 28px;
    background: linear-gradient(135deg, #fffaf6, #f8e1dc);
    box-shadow:
        0 38px 105px rgba(0,0,0,.5),
        inset 0 0 0 10px rgba(156,82,102,.08);
}

.album-page {
    grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
    background: linear-gradient(110deg, #fffaf6, #f8e5df);
}

.album-photo {
    padding: clamp(18px, 2.4vw, 30px);
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,.92), transparent 34%),
        linear-gradient(135deg, #fff5ee, #edd1d8);
}

.album-photo img {
    border: 8px solid rgba(255,255,255,.78);
    border-radius: 22px;
}

.album-caption {
    padding-inline: clamp(30px, 5vw, 68px);
    background-image:
        linear-gradient(90deg, rgba(156,82,102,.08), transparent 24%),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(156,82,102,.08) 32px);
}

.album-caption h3 {
    color: #5a2942;
}

.album-close {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #5a2942, #9c5266);
}

.album-controls button {
    background: linear-gradient(135deg, rgba(90,41,66,.9), rgba(156,82,102,.82));
    box-shadow: 0 14px 30px rgba(0,0,0,.2);
}

/* =========================================
   Mobile Album Fix
   ========================================= */

@media (max-width: 820px){

    .story-album{
        grid-template-columns:1fr;
        text-align:center;
        border-radius:28px;
    }

    .album-book{
        height:min(84vh, 760px);
        min-height:620px;
    }

    .album-book::after{
        display:none;
    }

    .album-page{
        display:flex;
        flex-direction:column;
        grid-template-columns:none;
        grid-template-rows:none;
        overflow-y:auto;
    }

    .album-photo{
        min-height:0;
        padding:12px;
        flex:0 0 58%;
    }

    .album-photo img{
        width:100%;
        height:100%;
        max-height:none;
        object-fit:contain;
    }

    .album-caption{
        display:flex;
        flex:1 1 auto;
        min-height:0;
        padding:18px 22px 22px;
        text-align:right;
        overflow:auto;
    }
    .album-caption h3{font-size:clamp(1.35rem,6vw,1.8rem);margin:6px 0 8px}
    .album-caption p{font-size:.86rem;line-height:1.85}

}