/* ==========================================================
   SAM'S BIRTHDAY SURPRISE
   Pages 1–5
========================================================== */

:root {
    --cream: #f8f3ef;
    --ink: #29262b;
    --burgundy: #5b1023;
    --gold: #e9c6a2;
    --white: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #050505;
    font-family: Arial, Helvetica, sans-serif;
}

body.memories-unlocked {
    overflow-y: auto;
}

.stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

/* ==========================================================
   PAGE 1 — OPENING CURTAINS
========================================================== */

.curtains {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    background: #350b17;
}

.curtain {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        #350b17 0px,
        #681729 22px,
        #791b30 38px,
        #4b101c 57px,
        #791b30 78px,
        #350b17 100px
    );
    box-shadow: inset 0 0 75px rgba(0, 0, 0, .55);
    transition: transform 2s cubic-bezier(.77, 0, .18, 1);
}

.curtain-left {
    left: 0;
    border-right: 4px solid #b68a62;
}

.curtain-right {
    right: 0;
    border-left: 4px solid #b68a62;
}

.welcome {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: min(90%, 700px);
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
    transition: opacity .65s ease;
}

.welcome p {
    margin-bottom: 28px;
    color: var(--gold);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 6px;
}

.welcome h1 {
    margin-bottom: 48px;
    color: var(--white);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 400;
}

#openButton {
    position: relative;
    z-index: 10;
    padding: 19px 38px;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    pointer-events: auto;
    transition: background .3s ease, color .3s ease;
}

#openButton:hover {
    background: var(--gold);
    color: #350b17;
}

.curtains.open .curtain-left {
    transform: translateX(-101%);
}

.curtains.open .curtain-right {
    transform: translateX(101%);
}

.curtains.open .welcome {
    opacity: 0;
    pointer-events: none;
}

.curtains.gone {
    display: none;
}

/* ==========================================================
   PAGE 2 — BLACK AGE DIAL
========================================================== */

.age-section {
    position: relative;
    display: flex;
    flex: 0 0 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #050505;
    color: var(--white);
}

.dial-intro {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
}

.dial-intro p {
    color: #aaa;
    font-size: 11px;
    letter-spacing: 5px;
}

.age-button {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: default;
    appearance: none;
    -webkit-appearance: none;
}

.age-button:disabled {
    opacity: 1;
}

.age-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .015em;
    height: 3em;
    overflow: hidden;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(100px, 16vw, 190px);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.age-wheel {
    position: relative;
    width: .62em;
    height: 3em;
    overflow: hidden;
    text-align: center;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.04) 12%,
        rgba(0,0,0,.18) 23%,
        #000 36%,
        #000 64%,
        rgba(0,0,0,.18) 77%,
        rgba(0,0,0,.04) 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.04) 12%,
        rgba(0,0,0,.18) 23%,
        #000 36%,
        #000 64%,
        rgba(0,0,0,.18) 77%,
        rgba(0,0,0,.04) 88%,
        transparent 100%
    );
}

.age-wheel-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
}

.age-wheel-track span {
    display: block;
    flex: 0 0 1em;
    width: 100%;
    height: 1em;
    color: #fff;
    font: inherit;
    line-height: 1em;
    text-align: center;
    opacity: 1;
    text-shadow: 0 0 12px rgba(255,255,255,.15);
}

.age-wheel-track span.active-digit {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 0 6px rgba(255,255,255,.5), 0 0 20px rgba(255,255,255,.2);
}

.click-hint {
    color: #aaa;
    font-size: 12px;
    letter-spacing: 2px;
    transition: color .5s ease, text-shadow .5s ease;
}

.age-button.ready {
    cursor: pointer;
}

.age-button.ready .click-hint {
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,.75);
}

.age-button.celebrated .age-display {
    text-shadow: 0 0 10px #fff, 0 0 25px #efb6e8, 0 0 55px #c58cf4;
}

.blossom-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.blossom {
    position: absolute;
    top: -30px;
    width: 11px;
    height: 16px;
    border-radius: 80% 10% 80% 10%;
    opacity: .85;
    filter: drop-shadow(0 0 5px rgba(255,190,230,.55));
    animation: blossom-fall linear infinite;
}

@keyframes blossom-fall {
    0% {
        transform: translate3d(0,-30px,0) rotate(0deg);
        opacity: 0;
    }
    12% { opacity: .9; }
    100% {
        transform: translate3d(var(--drift),110vh,0) rotate(540deg);
        opacity: 0;
    }
}

.scroll-hint {
    position: absolute;
    bottom: 7%;
    left: 0;
    width: 100%;
    color: #c9b8c7;
    font-size: 10px;
    letter-spacing: 4px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .8s ease, transform .8s ease;
    pointer-events: none;
}

.scroll-hint.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-hint span {
    display: inline-block;
    margin-left: 8px;
    animation: arrow-bob 1.5s ease-in-out infinite;
}

@keyframes arrow-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* ==========================================================
   PAGE 3 — HANGING PHOTO LOOP
========================================================== */

.memories-section {
    position: relative;
    flex: 0 0 100vh;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 65% 42%, #fffaf7 0%, var(--cream) 70%);
    color: var(--ink);
}

.memory-copy {
    position: absolute;
    z-index: 20;
    top: 8%;
    left: 5.5%;
    width: 31%;
    max-width: 420px;
    pointer-events: none;
}

.memory-copy h2 {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(34px, 4.1vw, 62px);
    font-weight: 300;
    line-height: .99;
    letter-spacing: -2.5px;
}

.memory-copy .sam-name {
    margin-top: 3px;
    font-weight: 750;
}

.memory-message {
    max-width: 390px;
    margin-top: 22px;
    color: #77717a;
    font-size: clamp(12px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.75;
}

.memory-ribbon {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.memory-rope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.memory-rope-path {
    fill: none;
    stroke: #9b806e;
    stroke-width: 2.2;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 1px rgba(80, 55, 45, .18));
}

.memory-photos {
    position: absolute;
    inset: 0;
}

.memory-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(76px, 7.1vw, 108px);
    height: clamp(112px, 10.3vw, 156px);
    padding: 0;
    border: 0;
    background: transparent;
    transform-origin: 50% 0;
    will-change: left, top, transform;
    pointer-events: auto;
}

.photo-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid #fff;
    background: linear-gradient(135deg, #777 0%, #c5c0bd 48%, #85817f 100%);
    box-shadow: 0 8px 20px rgba(49, 38, 42, .18);
    color: rgba(255,255,255,.92);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    filter: grayscale(1);
    transition: filter .45s ease, box-shadow .45s ease;
}

.memory-photo::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -13px;
    left: 50%;
    width: 13px;
    height: 22px;
    transform: translateX(-50%);
    border: 2px solid #a9a9a9;
    border-radius: 3px 3px 5px 5px;
    background: linear-gradient(90deg, #d8d8d8, #777, #eeeeee);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.memory-photo::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -3px;
    left: 50%;
    width: 2px;
    height: 8px;
    transform: translateX(-50%);
    background: #8d796b;
}

.memory-photo:hover .photo-placeholder,
.memory-photo:focus-visible .photo-placeholder {
    filter: grayscale(0);
    box-shadow: 0 12px 26px rgba(49, 38, 42, .25);
}

.memory-photo:focus-visible {
    outline: 2px solid #9b806e;
    outline-offset: 5px;
}

.memory-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(49, 38, 42, .18);
    filter: grayscale(1);
    transition: filter .45s ease, box-shadow .45s ease;
}

.memory-photo:hover img,
.memory-photo:focus-visible img {
    filter: grayscale(0);
    box-shadow: 0 12px 26px rgba(49, 38, 42, .25);
}

@media (max-width: 900px) {
    .memories-section {
        min-height: 760px;
    }

    .memory-copy {
        top: 5%;
        left: 6%;
        width: 75%;
        max-width: 440px;
    }

    .memory-copy h2 {
        font-size: clamp(34px, 7vw, 52px);
    }

    .memory-message {
        max-width: 330px;
        margin-top: 14px;
        font-size: 13px;
    }

    .memory-photo {
        width: 76px;
        height: 112px;
    }
}

@media (max-width: 520px) {
    .welcome h1 { font-size: 42px; }
    .welcome p { letter-spacing: 3px; }
    #openButton { padding: 16px 24px; }
    .age-display { font-size: 112px; }

    .memories-section {
        min-height: 760px;
    }

    .memory-copy {
        top: 5%;
        left: 6%;
        width: 88%;
    }

    .memory-copy h2 {
        font-size: 40px;
        letter-spacing: -1.8px;
    }

    .memory-message {
        max-width: 300px;
        line-height: 1.55;
    }

    .memory-photo {
        width: 64px;
        height: 96px;
    }

    .photo-placeholder {
        border-width: 3px;
        font-size: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   PAGE 4 — WOODEN PHOTO PUZZLE
========================================================== */

.puzzle-section {
    min-height: 100vh;
    padding: 55px 5% 70px;
    color: #382b23;
    background-color: #c99b69;
    background-image:
        repeating-linear-gradient(
            2deg,
            transparent 0px,
            rgba(92, 53, 25, .10) 2px,
            transparent 5px,
            transparent 42px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.07) 0px,
            transparent 3px,
            transparent 110px,
            rgba(80,45,20,.09) 112px
        ),
        linear-gradient(120deg, #e0bd91, #b9824e 48%, #d6ad7e);
    box-shadow: inset 0 10px 35px rgba(70, 39, 18, .18);
}

.puzzle-heading {
    text-align: center;
    margin-bottom: 35px;
}

.puzzle-heading > p {
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 12px;
    color: #68472f;
}

.puzzle-heading h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 400;
    margin-bottom: 10px;
}

.puzzle-heading span {
    font-size: 14px;
    color: #5e4634;
}

.puzzle-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    max-width: 1100px;
    margin: auto;
}

.puzzle-board {
    width: min(44vw, 440px);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 3px;
    padding: 7px;
    background: rgba(73, 44, 26, .35);
    border: 8px solid #9b673d;
    box-shadow: 0 12px 30px rgba(48, 28, 15, .3);
}

.puzzle-slot {
    position: relative;
    min-width: 0;
    background: rgba(255, 246, 228, .28);
    border: 1px dashed rgba(75, 48, 30, .38);
}

.puzzle-slot.correct {
    border: 0;
}

.puzzle-tray {
    width: min(40vw, 430px);
    text-align: center;
}

.tray-heading {
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 22px;
    color: #513a29;
}

.puzzle-pieces {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: center;
    justify-items: center;
    min-height: 300px;
}

.puzzle-piece {
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid #f5e8d6;
    border-radius: 3px;
    background-color: #d8c2a4;
    background-image: linear-gradient(135deg, #c4b49c, #e8dcc8);
    background-size: 400% 400%;
    box-shadow: 2px 5px 10px rgba(50, 30, 15, .35);
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: transform .2s, box-shadow .2s;
    position: relative;
    z-index: 1;
}

.puzzle-piece:hover {
    transform: scale(1.06) rotate(0deg) !important;
    box-shadow: 0 9px 18px rgba(50, 30, 15, .35);
    z-index: 5;
}

.puzzle-piece.dragging {
    opacity: .85;
    cursor: grabbing;
    z-index: 100;
    box-shadow: 0 15px 30px rgba(0,0,0,.35);
}

.puzzle-slot .puzzle-piece {
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: none;
    cursor: default;
}

.puzzle-slot .puzzle-piece:hover {
    transform: none !important;
}

.puzzle-complete {
    display: none;
    margin: 35px auto 0;
    text-align: center;
    color: #fff8ed;
}

.puzzle-complete.show {
    display: block;
    animation: puzzle-reveal .8s ease both;
}

.puzzle-complete h2 {
    font-family: Georgia, serif;
    font-size: 38px;
    margin-bottom: 8px;
}

@keyframes puzzle-reveal {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 750px) {
    .puzzle-layout {
        flex-direction: column;
        gap: 30px;
    }

    .puzzle-board {
        width: min(88vw, 420px);
    }

    .puzzle-tray {
        width: min(88vw, 420px);
    }

    .puzzle-pieces {
        gap: 8px;
    }
}

/* ==========================================================
   PAGE 4 — BUTTERFLIES
========================================================== */

.butterfly-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow: hidden;
    pointer-events: none;
}

.butterfly {
    position: absolute;
    display: block;
    padding: 5px;
    border: 0;
    background: transparent;
    font-size: 32px;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 3px 5px rgba(50,30,50,.2));
    animation: butterfly-float 12s ease-in-out infinite alternate,
               butterfly-flutter 2.2s ease-in-out infinite;
}

.butterfly-1 { left: 8%; top: 18%; filter: hue-rotate(235deg); animation-duration: 13s, 2s; }
.butterfly-2 { left: 78%; top: 22%; filter: hue-rotate(300deg); animation-duration: 16s, 2.4s; }
.butterfly-3 { left: 45%; top: 72%; filter: hue-rotate(35deg); animation-duration: 14s, 1.9s; }
.butterfly-4 { left: 88%; top: 70%; filter: hue-rotate(150deg); animation-duration: 17s, 2.5s; }
.butterfly-5 { left: 25%; top: 48%; filter: hue-rotate(190deg); animation-duration: 15s, 2.1s; }
.butterfly-6 { left: 62%; top: 12%; filter: hue-rotate(270deg); animation-duration: 18s, 2.3s; }
.butterfly-7 { left: 15%; top: 82%; filter: hue-rotate(45deg); animation-duration: 14s, 2s; }
.butterfly-8 { left: 72%; top: 85%; filter: hue-rotate(330deg); animation-duration: 16s, 2.6s; }

@keyframes butterfly-float {
    0%   { translate: 0 0; }
    25%  { translate: 35px -25px; }
    50%  { translate: 65px 15px; }
    75%  { translate: 20px 40px; }
    100% { translate: -25px -15px; }
}

@keyframes butterfly-flutter {
    0%, 100% { rotate: -12deg; scale: 1; }
    50% { rotate: 12deg; scale: 1.12; }
}

.butterfly:hover {
    scale: 1.3;
}

.butterfly-popup {
    display: none;
    position: fixed;
    z-index: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(85%, 360px);
    padding: 42px 30px;
    border: 1px solid #ead7d5;
    border-radius: 18px;
    background: #fffaf7;
    box-shadow: 0 15px 60px rgba(0,0,0,.22);
    color: #46363d;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 22px;
    line-height: 1.6;
}

.butterfly-popup.show {
    display: block;
    animation: butterfly-popup-in .35s ease both;
}

.butterfly-close {
    position: absolute;
    top: 9px;
    right: 15px;
    border: 0;
    background: transparent;
    color: #806b75;
    font-size: 28px;
    cursor: pointer;
}

@keyframes butterfly-popup-in {
    from { opacity: 0; scale: .85; }
    to { opacity: 1; scale: 1; }
}

/* Keep butterflies confined to Page 4 */
.puzzle-section {
    position: relative;
    isolation: isolate;
}

.butterfly-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}

.butterfly {
    pointer-events: auto;
}

.butterfly-popup {
    position: fixed;
    z-index: 9999;
}

/* Puzzle pieces have no visible numbers */
.puzzle-piece {
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
}

.puzzle-slot .puzzle-piece {
    color: transparent;
    font-size: 0;
}

/* =====================================================
   PAGE 5 — HANDMADE VINTAGE SCRAPBOOK
   Physical black notebook cover + Olivia-inspired pages
===================================================== */

.scrapbook-section {
    position: relative;
    min-height: 100vh;
    padding: 48px 20px 65px;
    overflow: hidden;
    isolation: isolate;
    color: #272321;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(115,94,78,.18), transparent 58%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
        #171719;
}

.scrapbook-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image: radial-gradient(#b7a99a .65px, transparent .9px);
    background-size: 5px 5px;
}

.scrapbook-intro {
    text-align: center;
    margin: 0 auto 30px;
}

.scrapbook-intro p {
    color: #c1a991;
    font-size: 10px;
    letter-spacing: 4px;
    margin-bottom: 12px;
}

.scrapbook-intro h2 {
    color: #f0e6dc;
    font: 400 clamp(27px, 4vw, 43px) Georgia, serif;
    margin: 0;
}

/* Physical portrait notebook cover */

.scrapbook-cover-scene {
    min-height: min(72vw, 690px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1400px;
    position: relative;
}

.scrapbook-cover {
    position: relative;
    width: min(390px, 76vw);
    aspect-ratio: .73 / 1;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #4a4642;
    border-radius: 4px 7px 7px 4px;
    color: #eee2d3;
    background:
        radial-gradient(ellipse at 80% 18%, rgba(255,255,255,.08), transparent 34%),
        repeating-linear-gradient(8deg, transparent 0 4px, rgba(255,255,255,.018) 5px, transparent 7px),
        linear-gradient(115deg, #111214, #242326 48%, #101012);
    box-shadow:
        14px 18px 0 -5px #08090a,
        19px 25px 45px rgba(0,0,0,.72),
        inset 0 0 28px rgba(0,0,0,.55);
    transform: rotate(-1deg);
    transition: transform .4s, box-shadow .4s;
}

.scrapbook-cover:hover {
    transform: rotate(0) translateY(-5px);
}

.scrapbook-cover::after {
    content: "";
    position: absolute;
    inset: 12px 12px 12px 25px;
    border: 1px solid rgba(230,216,197,.14);
    pointer-events: none;
}

.cover-spiral {
    position: absolute;
    z-index: 10;
    left: 5px;
    top: 2%;
    bottom: 2%;
    width: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.cover-spiral span {
    width: 19px;
    height: 13px;
    border: 3px solid #aaa7a1;
    border-radius: 50%;
    background: linear-gradient(90deg, #555, #e2ded5 48%, #696762);
    box-shadow: 1px 2px 3px #000;
}

.cover-paper-layer {
    position: absolute;
    inset: 17px 17px 17px 31px;
    border: 1px solid rgba(220,200,177,.2);
}

.cover-newspaper {
    position: absolute;
    z-index: 2;
    padding: 9px 11px;
    color: #40382f;
    background: #d9c9ae;
    font: bold 8px/1.55 Georgia, serif;
    letter-spacing: 1px;
    text-align: center;
    box-shadow: 2px 5px 9px rgba(0,0,0,.5);
}

.cover-news-one {
    top: 17%;
    left: 13%;
    width: 57%;
    transform: rotate(-7deg);
}

.cover-news-two {
    right: 8%;
    bottom: 14%;
    width: 55%;
    transform: rotate(5deg);
}

.cover-collage-paper {
    position: absolute;
    z-index: 2;
    padding: 10px 13px;
    color: #55483b;
    background: #e7dcc8;
    font: italic 12px/1.35 Georgia, serif;
    box-shadow: 2px 4px 8px #0008;
    text-align: center;
}

.cover-collage-one {
    left: 13%;
    bottom: 27%;
    transform: rotate(-5deg);
}

.cover-collage-two {
    right: 12%;
    top: 22%;
    transform: rotate(8deg);
    font-size: 15px;
}

.cover-photo {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 7px solid #eee6d9;
    color: #f8eee0;
    background: linear-gradient(145deg, #82796e, #393633);
    box-shadow: 0 7px 14px #0009;
    font: 9px Georgia, serif;
    letter-spacing: 1px;
}

.cover-photo-a {
    width: 48%;
    height: 31%;
    left: 21%;
    top: 32%;
    transform: rotate(-7deg);
}

.cover-photo-b {
    width: 39%;
    height: 27%;
    right: 8%;
    top: 48%;
    transform: rotate(8deg);
}

.cover-doodle {
    position: absolute;
    z-index: 5;
    color: #d5b99a;
    font-family: "Bradley Hand", "Comic Sans MS", cursive;
    text-shadow: 1px 2px 1px #0008;
}

.cover-flower {
    left: 14%;
    bottom: 9%;
    font-size: 43px;
    transform: rotate(-13deg);
}

.cover-star {
    right: 13%;
    top: 9%;
    font-size: 42px;
    color: #e5c56f;
}

.cover-heart {
    left: 55%;
    bottom: 9%;
    font-size: 44px;
}

.cover-moon {
    right: 10%;
    top: 37%;
    font-size: 42px;
}

.cover-leaf {
    position: absolute;
    z-index: 4;
    left: 14%;
    top: 12%;
    color: #b9a17c;
    font: 42px Georgia, serif;
    transform: rotate(-25deg);
}

.cover-title {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 53%;
    width: 100%;
    transform: translate(-50%, -50%) rotate(-3deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: 0 3px 9px #000;
}

.cover-title span {
    font: italic 20px Georgia, serif;
}

.cover-title strong {
    font: bold 57px Georgia, serif;
    letter-spacing: 7px;
}

.cover-caption {
    position: absolute;
    z-index: 6;
    bottom: 5%;
    left: 10%;
    right: 5%;
    text-align: center;
    color: #e0cdb7;
    font: italic 12px Georgia, serif;
}

.cover-tape {
    position: absolute;
    z-index: 8;
    top: -5px;
    left: 42%;
    width: 88px;
    height: 24px;
    background: rgba(215,196,165,.7);
    transform: rotate(-4deg);
}

.cover-instruction {
    color: #b8a99c;
    font: italic 13px Georgia, serif;
    margin-top: 24px;
}

/* Open notebook */

.scrapbook-inside {
    display: none;
    width: min(1180px, 97vw);
    margin: 32px auto 0;
    animation: scrapbook-open .6s ease both;
}

.scrapbook-inside.open {
    display: block;
}

@keyframes scrapbook-open {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.scrapbook-book {
    position: relative;
    width: 100%;
    aspect-ratio: 1.48 / 1;
    min-height: 430px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.5));
}

.scrapbook-spread {
    display: none;
    position: absolute;
    inset: 0;
    grid-template-columns: 1fr 1fr;
    transform-origin: center;
}

.scrapbook-spread.active {
    display: grid;
    animation: scrapbook-turn .45s ease both;
}

@keyframes scrapbook-turn {
    from {
        opacity: .5;
        transform: rotateY(-4deg) scale(.99);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Paper texture and page layout */

.scrapbook-page {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 5% 6%;
    color: #38312d;
    background-color: #f2eee6;
    background-image:
        linear-gradient(90deg, rgba(70,55,43,.035), transparent 18%, transparent 85%, rgba(70,55,43,.045)),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(108,125,133,.08) 28px, transparent 29px),
        radial-gradient(rgba(86,65,48,.11) .65px, transparent .9px),
        linear-gradient(135deg, #faf8f1, #e9e4da);
    background-size: auto, auto, 6px 6px, auto;
    box-shadow: inset 0 0 22px rgba(75,51,32,.1);
}

.left-page {
    border-radius: 5px 0 0 5px;
}

.right-page {
    border-radius: 0 5px 5px 0;
    border-left: 1px solid rgba(79,59,45,.2);
}

.scrapbook-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .45;
    background: linear-gradient(90deg, rgba(255,255,255,.45), transparent 12%, transparent 88%, rgba(80,60,45,.07));
}

.scrapbook-page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 13px;
    pointer-events: none;
    opacity: .16;
}

.left-page::after {
    right: 0;
    background: linear-gradient(90deg, transparent, #796957);
}

.right-page::after {
    left: 0;
    background: linear-gradient(90deg, #796957, transparent);
}

/* Center spiral binding */

.scrapbook-rings {
    position: absolute;
    z-index: 8;
    top: -2%;
    bottom: -2%;
    left: 50%;
    width: 31px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    pointer-events: none;
}

.scrapbook-rings::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 5px;
    transform: translateX(-50%);
    background: #b9b3a9;
    box-shadow: 0 0 4px #514b43;
}

.scrapbook-rings span {
    position: relative;
    display: block;
    width: 29px;
    height: 15px;
    border: 3px solid #77756f;
    border-radius: 50%;
    background: linear-gradient(180deg, #f1eee7, #77736e);
    box-shadow: 0 2px 4px rgba(0,0,0,.35);
}

/* Handwritten words are annotations, not page headings */

.handwritten,
.scrap-heading {
    font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
    font-weight: 600;
    color: #282725;
    letter-spacing: -.7px;
}

.scrap-heading {
    position: absolute;
    z-index: 5;
    display: block;
    width: auto;
    max-width: 72%;
    font-size: clamp(19px, 2.8vw, 34px);
    line-height: 1.05;
    text-align: left;
    text-shadow: .3px .3px #282725;
}

.word-ghar {
    top: 8%;
    left: 9%;
    transform: rotate(-8deg);
}

.word-sister {
    top: 8%;
    right: 8%;
    transform: rotate(5deg);
}

.word-school {
    top: 9%;
    left: 12%;
    transform: rotate(-5deg);
}

.word-chaos {
    top: 10%;
    right: 8%;
    transform: rotate(6deg);
}

.word-distance {
    top: 7%;
    left: 8%;
    max-width: 84%;
    font-size: clamp(16px, 2.2vw, 27px);
    transform: rotate(-4deg);
}

.word-miss {
    top: 9%;
    right: 8%;
    transform: rotate(5deg);
}

.word-note {
    top: 8%;
    left: 10%;
    transform: rotate(-5deg);
}

.word-forever {
    top: 9%;
    right: 8%;
    transform: rotate(4deg);
}

/* Torn paper scraps */

.newspaper,
.torn-paper {
    position: relative;
    z-index: 2;
    display: block;
    width: fit-content;
    max-width: 72%;
    padding: 3% 4%;
    margin: 3% auto;
    color: #554b40;
    background:
        radial-gradient(rgba(85,65,45,.16) .6px, transparent .8px),
        repeating-linear-gradient(0deg, rgba(80,65,48,.08) 0 1px, transparent 1px 3px),
        #e0d4bf;
    background-size: 4px 4px, auto, auto;
    font: clamp(8px, 1vw, 11px)/1.6 Georgia, serif;
    letter-spacing: .7px;
    text-align: center;
    box-shadow: 2px 4px 8px rgba(60,43,30,.17);
    clip-path: polygon(2% 0, 98% 2%, 100% 95%, 95% 100%, 3% 97%, 0 6%);
}

.newspaper-a,
.newspaper-b,
.newspaper-c {
    margin-top: 20%;
}

.newspaper-a { transform: rotate(-3deg); }
.newspaper-b { transform: rotate(2deg); }
.newspaper-c { transform: rotate(-2deg); }

.torn-paper {
    background-color: #e9dfcf;
    padding: 4% 5%;
    transform: rotate(2deg);
}

.torn-two { transform: rotate(-3deg); }
.torn-three { transform: rotate(3deg); }
.torn-four { transform: rotate(-2deg); }

/* Photo mats, tape and pasted snapshots */

.pasted-photo {
    position: absolute;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 30%;
    height: 39%;
    border: 7px solid #fffdf7;
    background: linear-gradient(145deg, #b7a999, #70665d);
    color: #fff7eb;
    font: 9px Georgia, serif;
    letter-spacing: 2px;
    box-shadow: 2px 6px 12px rgba(53,37,25,.3);
}

.pasted-photo::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 30%;
    width: 48%;
    height: 19px;
    background: rgba(191,174,145,.7);
    transform: rotate(-4deg);
    box-shadow: 0 1px 2px #6c5a4540;
}

.pasted-photo-one {
    left: 12%;
    top: 29%;
    transform: rotate(-6deg);
    width: 46%;
    height: 43%;
}

.pasted-photo-two {
    right: 10%;
    top: 25%;
    transform: rotate(5deg);
    width: 37%;
    height: 39%;
}

.pasted-photo-three {
    left: 18%;
    bottom: 9%;
    transform: rotate(4deg);
    width: 31%;
    height: 29%;
}

.pasted-photo-four {
    left: 19%;
    top: 27%;
    transform: rotate(5deg);
    width: 46%;
    height: 42%;
}

.pasted-photo-five {
    left: 9%;
    top: 27%;
    transform: rotate(-6deg);
    width: 36%;
    height: 39%;
}

.pasted-photo-six {
    right: 9%;
    bottom: 12%;
    transform: rotate(5deg);
    width: 35%;
    height: 34%;
}

.pasted-photo-seven {
    left: 17%;
    top: 29%;
    transform: rotate(-5deg);
    width: 44%;
    height: 44%;
}

.pasted-photo-eight {
    right: 13%;
    top: 25%;
    transform: rotate(7deg);
    width: 43%;
    height: 42%;
}

.pasted-photo-nine {
    left: 29%;
    top: 25%;
    transform: rotate(-4deg);
    width: 42%;
    height: 46%;
}

/* Medium handwritten notes */

.paper-note {
    position: absolute;
    z-index: 5;
    padding: 3% 4%;
    max-width: 72%;
    background: #eee2d3;
    color: #574744;
    font: italic clamp(11px, 1.35vw, 16px)/1.45 "Bradley Hand", "Segoe Print", cursive;
    box-shadow: 2px 5px 9px rgba(60,40,30,.2);
}

.note-home { right: 6%; bottom: 13%; transform: rotate(3deg); }
.note-sister { left: 9%; bottom: 9%; transform: rotate(-4deg); }
.note-school { right: 6%; bottom: 11%; transform: rotate(-3deg); }
.note-chaos { left: 10%; bottom: 8%; transform: rotate(3deg); }
.note-distance { right: 6%; bottom: 12%; transform: rotate(2deg); }
.note-miss { left: 8%; bottom: 9%; transform: rotate(-3deg); }
.note-letter { left: 12%; top: 43%; width: 75%; text-align: center; }
.note-final { left: 25%; bottom: 13%; transform: rotate(2deg); }

/* Medium hand-drawn doodles */

.doodle {
    position: absolute;
    z-index: 6;
    color: #39312f;
    font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
    font-weight: 500;
    pointer-events: none;
    line-height: 1;
    text-shadow: .5px .5px rgba(45,35,30,.25);
}

.doodle-moon {
    top: 15%;
    right: 13%;
    font-size: clamp(34px, 4vw, 48px);
    transform: rotate(12deg);
}

.doodle-star {
    top: 17%;
    left: 12%;
    font-size: clamp(34px, 4vw, 47px);
    color: #a77b34;
    transform: rotate(-12deg);
}

.doodle-arrow {
    right: 9%;
    bottom: 32%;
    font-size: clamp(35px, 4vw, 48px);
    transform: rotate(-8deg);
}

.doodle-flower {
    left: 7%;
    bottom: 12%;
    font-size: clamp(36px, 4.3vw, 52px);
    color: #b66d70;
    transform: rotate(8deg);
}

.doodle-heart {
    right: 9%;
    top: 18%;
    font-size: clamp(36px, 4vw, 49px);
    color: #a45e5d;
    transform: rotate(9deg);
}

.doodle-sparkle {
    left: 12%;
    top: 18%;
    font-size: clamp(34px, 4vw, 46px);
    color: #b18b53;
}

.page-number {
    position: absolute;
    bottom: 3%;
    right: 5%;
    color: #9a8573;
    font: 10px Georgia, serif;
}

/* Clickable left and right page areas */

.book-click-zone {
    position: absolute;
    z-index: 12;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.book-left-zone { left: 0; }
.book-right-zone { right: 0; }

.book-click-zone:focus-visible {
    outline: 2px dashed rgba(139,93,80,.7);
    outline-offset: -8px;
}

.book-hint {
    position: absolute;
    z-index: 13;
    bottom: 3%;
    color: rgba(70,60,52,.5);
    font: italic 11px Georgia, serif;
    pointer-events: none;
}

.book-hint-left { left: 3%; }
.book-hint-right { right: 3%; }

.scrapbook-page-count,
.scrapbook-touch-hint {
    text-align: center;
    color: #b9a99b;
    font: italic 12px Georgia, serif;
    margin-top: 16px;
}

.scrapbook-touch-hint {
    opacity: .7;
    margin-top: 6px;
}

/* Responsive scrapbook */

@media (max-width: 700px) {
    .scrapbook-section {
        padding: 34px 8px 45px;
    }

    .scrapbook-cover-scene {
        min-height: 470px;
    }

    .scrapbook-cover {
        width: min(330px, 82vw);
    }

    .scrapbook-book {
        min-height: 340px;
        aspect-ratio: 1.05 / 1;
    }

    .scrapbook-page {
        padding: 5% 4%;
    }

    .scrapbook-rings {
        width: 21px;
    }

    .scrapbook-rings span {
        width: 20px;
        height: 12px;
        border-width: 2px;
    }

    .scrap-heading {
        font-size: clamp(15px, 3.4vw, 23px);
    }

    .word-distance {
        font-size: clamp(13px, 2.8vw, 19px);
    }

    .pasted-photo {
        border-width: 4px;
    }

    .paper-note {
        font-size: 9px;
    }

    .doodle {
        transform: scale(.82);
    }

    .book-hint {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .butterfly {
        animation: none;
    }

    .scrapbook-spread.active {
        animation: none;
    }

    .scrapbook-inside {
        animation: none;
    }
}
/* =====================================================
   PAGE 5 — UPDATED HANDMADE NOTEBOOK LOOK
   These rules intentionally override the earlier Page 5 styling.
===================================================== */

.scrapbook-intro {
    display: none !important;
}

.scrapbook-cover-scene {
    min-height: 660px;
}

.scrapbook-cover {
    width: min(390px, 76vw);
    aspect-ratio: .73 / 1;
    border-radius: 5px 9px 9px 5px;
    background:
        radial-gradient(ellipse at 78% 20%, rgba(255,255,255,.07), transparent 36%),
        repeating-linear-gradient(8deg, transparent 0 4px, rgba(255,255,255,.025) 5px, transparent 7px),
        linear-gradient(115deg, #111214, #242326 48%, #101012);
    box-shadow:
        13px 15px 0 -4px #08090a,
        18px 25px 42px rgba(0,0,0,.72),
        inset 0 0 28px rgba(0,0,0,.55);
}

.cover-collage-paper {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 15px;
}

.cover-collage-two {
    right: 9%;
    top: 23%;
    max-width: 36%;
    font-size: 14px;
}

.cover-newspaper {
    padding: 12px 13px 11px;
    background:
        repeating-linear-gradient(0deg, rgba(72,60,45,.09) 0 1px, transparent 1px 3px),
        radial-gradient(rgba(85,65,45,.18) .6px, transparent .85px),
        #d9c9ae;
    background-size: auto, 4px 4px, auto;
    clip-path: polygon(
        1% 5%, 7% 1%, 18% 3%, 27% 0, 39% 3%,
        51% 1%, 63% 4%, 76% 1%, 89% 4%, 99% 2%,
        97% 96%, 87% 99%, 74% 96%, 60% 100%,
        46% 97%, 33% 100%, 19% 96%, 3% 99%
    );
    font-size: 9px;
}

.cover-news-one {
    top: 16%;
    left: 13%;
    width: 66%;
    min-height: 78px;
}

.cover-news-one span,
.cover-news-one i,
.cover-news-one small {
    display: block;
}

.cover-news-one span {
    margin: 3px 0 5px;
    font: italic 10px Georgia, serif;
    letter-spacing: .2px;
}

.cover-news-one i {
    border-top: 1px solid rgba(70,55,40,.5);
    border-bottom: 1px solid rgba(70,55,40,.5);
    padding: 3px 0;
    font: bold 7px Georgia, serif;
}

.cover-news-one small {
    margin-top: 5px;
    font: 8px/1.35 Georgia, serif;
    letter-spacing: .1px;
}

.cover-news-two {
    font: italic 13px "Segoe Print", "Bradley Hand", cursive;
    letter-spacing: .2px;
}

.cover-sun {
    left: 12%;
    top: 25%;
    color: #e2bd70;
    font-size: 38px;
}

.cover-planet {
    right: 15%;
    bottom: 27%;
    font-size: 35px;
}

.cover-title {
    top: 57%;
    width: 88%;
    transform: translate(-50%, -50%) rotate(-4deg);
}

.cover-title span {
    font: italic 22px "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

.cover-title strong {
    max-width: 100%;
    font: 600 clamp(24px, 4vw, 36px) "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    letter-spacing: -1.5px;
    text-align: center;
}

.cover-caption,
.cover-instruction {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 14px;
}

/* Open spread is twice the cover width, but the same height. */

.scrapbook-inside {
    width: min(780px, 94vw);
    margin: 28px auto 0;
}

.scrapbook-book {
    width: 100%;
    aspect-ratio: 1.46 / 1;
    min-height: 0;
}

.handwritten,
.scrap-heading,
.paper-note,
.doodle {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}

.scrap-heading {
    max-width: 78%;
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.1;
    text-shadow: .4px .4px #282725;
}

.word-distance {
    font-size: clamp(17px, 2.1vw, 25px);
}

.newspaper,
.torn-paper {
    background:
        repeating-linear-gradient(0deg, rgba(80,65,48,.10) 0 1px, transparent 1px 3px),
        radial-gradient(rgba(85,65,45,.16) .6px, transparent .8px),
        #e0d4bf;
    background-size: auto, 4px 4px, auto;
    clip-path: polygon(
        2% 0, 8% 2%, 15% 0, 24% 3%, 33% 1%,
        42% 3%, 53% 0, 64% 2%, 75% 0, 87% 3%,
        100% 1%, 98% 13%, 100% 24%, 97% 36%,
        100% 49%, 98% 61%, 100% 74%, 97% 87%,
        99% 100%, 87% 97%, 75% 100%, 63% 97%,
        51% 100%, 39% 97%, 27% 100%, 14% 97%,
        1% 100%, 3% 86%, 0 73%, 3% 60%, 0 47%,
        2% 34%, 0 20%
    );
    font-size: clamp(9px, 1.05vw, 12px);
}

.paper-note {
    font-size: clamp(13px, 1.5vw, 18px);
    line-height: 1.5;
    background:
        radial-gradient(rgba(100,75,55,.12) .6px, transparent .8px),
        #eee2d3;
    background-size: 4px 4px;
}

.doodle-planet {
    right: 12%;
    bottom: 17%;
    font-size: clamp(32px, 3.8vw, 45px);
}

.doodle-sun {
    left: 12%;
    top: 51%;
    color: #c18b3c;
    font-size: clamp(32px, 3.8vw, 44px);
}

/* Mobile sizing */

@media (max-width: 700px) {
    .scrapbook-cover-scene {
        min-height: 520px;
    }

    .scrapbook-cover {
        width: min(330px, 82vw);
    }

    .scrapbook-inside {
        width: 96vw;
    }

    .scrapbook-book {
        aspect-ratio: 1.25 / 1;
        min-height: 0;
    }

    .paper-note {
        font-size: clamp(9px, 2.1vw, 13px);
    }
}

@media (max-width: 420px) {
    .scrapbook-book {
        aspect-ratio: 1.12 / 1;
    }

    .scrap-heading {
        font-size: 14px;
    }

    .paper-note {
        font-size: 9px;
    }
}
/* =========================================
   PAGE 6 — FLOATING 3D MEMORY GALAXY
========================================= */

.galaxy-page {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, #11101c 0%, #05050b 48%, #000 100%);
    color: white;
    isolation: isolate;
}

/* Star background */

.galaxy-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff 99%, transparent),
        radial-gradient(1px 1px at 30% 70%, #fff 99%, transparent),
        radial-gradient(2px 2px at 70% 30%, #d9caff 99%, transparent),
        radial-gradient(1px 1px at 85% 80%, #fff 99%, transparent),
        radial-gradient(1px 1px at 50% 50%, #fff 99%, transparent),
        radial-gradient(2px 2px at 20% 90%, #c9baff 99%, transparent),
        radial-gradient(1px 1px at 90% 15%, #fff 99%, transparent);
    background-size:
        180px 180px,
        230px 230px,
        280px 280px,
        200px 200px,
        250px 250px,
        300px 300px,
        220px 220px;
    animation: galaxyStarDrift 70s linear infinite;
    opacity: 0.8;
}

@keyframes galaxyStarDrift {
    from { transform: translateY(0); }
    to { transform: translateY(-180px); }
}

/* Heading */

.galaxy-heading {
    position: absolute;
    z-index: 20;
    top: 5%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.galaxy-heading p {
    font-family: Georgia, serif;
    font-size: 12px;
    letter-spacing: 7px;
    margin-bottom: 12px;
    color: #d8c9e8;
}

.galaxy-heading h1 {
    font-family: "Brush Script MT", cursive;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: normal;
    font-style: italic;
    margin: 0 0 10px;
    color: #fff2ff;
    text-shadow: 0 0 25px rgba(210, 160, 255, 0.35);
}

.galaxy-heading span {
    font-family: Georgia, serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: #bdb2cc;
}

/* 3D space */

.galaxy-space {
    position: absolute;
    inset: 0;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* Floating photo cards */

.memory-card {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    transform-style: preserve-3d;
    animation: memoryFloat 18s ease-in-out infinite;
    animation-delay: var(--delay);
    cursor: pointer;
    z-index: 2;
    transition: filter 1s ease, opacity 1s ease;
}

.memory-photo {
    position: relative;
    width: 100%;
    padding: 7px 7px 27px;
    background: linear-gradient(145deg, #f8edf2, #cfc1d0);
    border-radius: 3px;
    box-shadow:
        0 0 15px rgba(255, 210, 255, 0.18),
        0 12px 35px rgba(0, 0, 0, 0.65);
    transform: rotate(var(--tilt, -5deg));
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, #343044, #15131f 70%, #49354d);
    color: rgba(255, 255, 255, 0.7);
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: 2px;
}

.photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    text-align: center;
    color: #493b4b;
    font-family: Georgia, serif;
    font-size: 9px;
    white-space: nowrap;
}

/* Photo angles */

.memory-card:nth-child(1)  { --tilt: -9deg; }
.memory-card:nth-child(2)  { --tilt: 7deg; }
.memory-card:nth-child(3)  { --tilt: -4deg; }
.memory-card:nth-child(4)  { --tilt: 11deg; }
.memory-card:nth-child(5)  { --tilt: 5deg; }
.memory-card:nth-child(6)  { --tilt: -8deg; }
.memory-card:nth-child(7)  { --tilt: 9deg; }
.memory-card:nth-child(8)  { --tilt: -12deg; }
.memory-card:nth-child(9)  { --tilt: 3deg; }
.memory-card:nth-child(10) { --tilt: -6deg; }
.memory-card:nth-child(11) { --tilt: 10deg; }
.memory-card:nth-child(12) { --tilt: -3deg; }

/* Forward/backward and sideways movement */

@keyframes memoryFloat {
    0%, 100% {
        transform:
            translate(-50%, -50%)
            translateZ(var(--z))
            translate3d(0, 0, 0);
    }

    25% {
        transform:
            translate(-50%, -50%)
            translateZ(calc(var(--z) + 100px))
            translate3d(25px, -25px, 0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateZ(calc(var(--z) - 90px))
            translate3d(-20px, 20px, 0);
    }

    75% {
        transform:
            translate(-50%, -50%)
            translateZ(calc(var(--z) + 55px))
            translate3d(15px, -15px, 0);
    }
}

/* Hover */

.memory-card:hover {
    z-index: 50;
    filter: brightness(1.2);
}

.memory-card:hover .memory-photo {
    transform: rotate(0deg) scale(1.12);
    box-shadow:
        0 0 30px rgba(226, 179, 255, 0.55),
        0 15px 45px rgba(0, 0, 0, 0.8);
}

/* Clicked photo comes forward */

.memory-card.is-focused {
    z-index: 100 !important;
    animation: none;
    left: 50% !important;
    top: 52% !important;
    transform: translate(-50%, -50%) translateZ(450px) scale(1.7) !important;
    filter: brightness(1.15);
}

.memory-card.is-focused .memory-photo {
    transform: rotate(0deg);
    box-shadow:
        0 0 45px rgba(230, 190, 255, 0.65),
        0 20px 70px rgba(0, 0, 0, 0.9);
}

/* Dim other photos when one is selected */

.galaxy-space.has-selection .memory-card:not(.is-focused) {
    opacity: 0.18;
    filter: blur(2px);
}

/* Bottom instruction */

.galaxy-hint {
    position: absolute;
    z-index: 20;
    bottom: 4%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #d8cce4;
    font-family: "Brush Script MT", cursive;
    font-size: 21px;
    font-style: italic;
    pointer-events: none;
}

/* Mobile */

@media (max-width: 600px) {
    .galaxy-heading {
        top: 4%;
    }

    .galaxy-heading p {
        font-size: 9px;
        letter-spacing: 4px;
    }

    .galaxy-heading h1 {
        font-size: 35px;
    }

    .galaxy-heading span {
        font-size: 10px;
    }

    .memory-card {
        width: calc(var(--size) * 0.72);
    }

    .memory-card.is-focused {
        transform:
            translate(-50%, -50%)
            translateZ(250px)
            scale(1.5) !important;
    }

    .galaxy-hint {
        font-size: 18px;
        bottom: 3%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .memory-card,
    .galaxy-stars {
        animation: none;
    }
}
/* =========================================
   PAGE 6 — 3D FLOATING MEMORY GALAXY
   All styles are scoped to Page 6.
========================================= */

#galaxySection {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    isolation: isolate;
    background: #020207;
    color: #fff;
}

/* Starfield */

#galaxySection .galaxy-stars {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 10% 20%, #fff 99%, transparent),
        radial-gradient(1px 1px at 30% 70%, #fff 99%, transparent),
        radial-gradient(2px 2px at 70% 30%, #d9caff 99%, transparent),
        radial-gradient(1px 1px at 85% 80%, #fff 99%, transparent),
        radial-gradient(1px 1px at 50% 50%, #fff 99%, transparent),
        radial-gradient(2px 2px at 20% 90%, #c9baff 99%, transparent),
        radial-gradient(1px 1px at 90% 15%, #fff 99%, transparent);
    background-size:
        180px 180px,
        230px 230px,
        280px 280px,
        200px 200px,
        250px 250px,
        300px 300px,
        220px 220px;
    animation: galaxyStarTravel 100s linear infinite;
    opacity: .8;
}

@keyframes galaxyStarTravel {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-100px, -180px, 0); }
}

/* Heading */

#galaxySection .galaxy-heading {
    position: absolute;
    z-index: 200;
    top: 3.5%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

#galaxySection .galaxy-heading p {
    font-family: Georgia, serif;
    font-size: 12px;
    letter-spacing: 7px;
    margin: 0 0 14px;
    color: #e7dcef;
}

#galaxySection .galaxy-heading h1 {
    font-family: "Brush Script MT", cursive;
    font-size: clamp(38px, 5.5vw, 68px);
    font-weight: normal;
    font-style: italic;
    margin: 0 0 12px;
    color: #fff5ff;
    text-shadow: 0 0 24px rgba(226, 190, 255, .35);
}

#galaxySection .galaxy-heading span {
    font-family: Georgia, serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: #c9bfd2;
}

/* 3D camera and space */

#galaxySection .galaxy-space {
    position: absolute;
    inset: 0;
    perspective: 850px;
    perspective-origin: 50% 48%;
    transform-style: preserve-3d;
    overflow: hidden;
}

/* Individual photographs */

#galaxySection .memory-card {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    transform-style: preserve-3d;
    transform-origin: center center;
    transform:
        translate3d(-50%, -50%, var(--z))
        rotate(var(--tilt, -5deg));
    animation: galaxyPhotoTravel var(--duration, 22s) ease-in-out infinite;
    animation-delay: var(--delay);
    cursor: pointer;
    z-index: 2;
    will-change: transform;
    transition: filter .7s ease, opacity .7s ease;
}

/* Photos move in depth, not just side to side */

@keyframes galaxyPhotoTravel {
    0%, 100% {
        transform:
            translate3d(-50%, -50%, var(--z))
            rotate(var(--tilt, -5deg));
    }

    25% {
        transform:
            translate3d(
                calc(-50% + 35px),
                calc(-50% - 25px),
                calc(var(--z) + 180px)
            )
            rotate(calc(var(--tilt, -5deg) + 4deg));
    }

    50% {
        transform:
            translate3d(
                calc(-50% - 25px),
                calc(-50% + 20px),
                calc(var(--z) - 120px)
            )
            rotate(calc(var(--tilt, -5deg) - 3deg));
    }

    75% {
        transform:
            translate3d(
                calc(-50% + 15px),
                calc(-50% - 15px),
                calc(var(--z) + 100px)
            )
            rotate(calc(var(--tilt, -5deg) + 2deg));
    }
}

/* Polaroid frame */

#galaxySection .memory-photo {
    position: relative;
    width: 100%;
    padding: 7px 7px 27px;
    background: #f8f5f7;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 2px;
    box-shadow:
        0 0 18px rgba(255,255,255,.16),
        0 15px 45px rgba(0,0,0,.65);
    transition: box-shadow .5s ease;
}

/* Placeholder until real photos are added */

#galaxySection .photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(145deg, #27242e, #09090e);
    color: #e6dce9;
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: 2px;
}

/* Caption */

#galaxySection .photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    text-align: center;
    color: #514653;
    font-family: Georgia, serif;
    font-size: 9px;
    white-space: nowrap;
}

/* Small metallic clips */

#galaxySection .memory-photo::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 25px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        #777,
        #f3f3f3 35%,
        #999 65%,
        #555
    );
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
}

/* Different photo angles and movement speeds */

#galaxySection .memory-card:nth-child(1) {
    --tilt: -8deg;
    --duration: 25s;
}

#galaxySection .memory-card:nth-child(2) {
    --tilt: 7deg;
    --duration: 21s;
}

#galaxySection .memory-card:nth-child(3) {
    --tilt: -4deg;
    --duration: 27s;
}

#galaxySection .memory-card:nth-child(4) {
    --tilt: 11deg;
    --duration: 23s;
}

#galaxySection .memory-card:nth-child(5) {
    --tilt: 5deg;
    --duration: 29s;
}

#galaxySection .memory-card:nth-child(6) {
    --tilt: -8deg;
    --duration: 22s;
}

#galaxySection .memory-card:nth-child(7) {
    --tilt: 9deg;
    --duration: 26s;
}

#galaxySection .memory-card:nth-child(8) {
    --tilt: -12deg;
    --duration: 24s;
}

#galaxySection .memory-card:nth-child(9) {
    --tilt: 3deg;
    --duration: 28s;
}

#galaxySection .memory-card:nth-child(10) {
    --tilt: -6deg;
    --duration: 20s;
}

#galaxySection .memory-card:nth-child(11) {
    --tilt: 10deg;
    --duration: 30s;
}

#galaxySection .memory-card:nth-child(12) {
    --tilt: -3deg;
    --duration: 25s;
}

/* Hover */

#galaxySection .memory-card:hover {
    filter: brightness(1.2);
    z-index: 50;
}

#galaxySection .memory-card:hover .memory-photo {
    box-shadow:
        0 0 35px rgba(226,179,255,.45),
        0 20px 55px rgba(0,0,0,.8);
}

/* Selected photo moves towards viewer */

#galaxySection .memory-card.is-focused {
    z-index: 300 !important;
    animation: none;
    left: 50% !important;
    top: 54% !important;
    transform:
        translate3d(-50%, -50%, 300px)
        scale(1.5) !important;
    filter: brightness(1.12);
}

#galaxySection .memory-card.is-focused .memory-photo {
    box-shadow:
        0 0 55px rgba(230,190,255,.65),
        0 25px 80px rgba(0,0,0,.9);
}

/* Other photographs recede */

#galaxySection .galaxy-space.has-selection .memory-card:not(.is-focused) {
    opacity: .22;
    filter: blur(2px);
}

/* Bottom instruction */

#galaxySection .galaxy-hint {
    position: absolute;
    z-index: 200;
    bottom: 3%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #e4d6ec;
    font-family: "Brush Script MT", cursive;
    font-size: 22px;
    font-style: italic;
    pointer-events: none;
}

/* Mobile */

@media (max-width: 600px) {
    #galaxySection {
        min-height: 650px;
    }

    #galaxySection .galaxy-heading {
        top: 4%;
    }

    #galaxySection .galaxy-heading p {
        font-size: 9px;
        letter-spacing: 4px;
    }

    #galaxySection .galaxy-heading h1 {
        font-size: 37px;
    }

    #galaxySection .galaxy-heading span {
        font-size: 10px;
    }

    #galaxySection .memory-card {
        width: calc(var(--size) * .7);
    }

    #galaxySection .memory-card.is-focused {
        transform:
            translate3d(-50%, -50%, 250px)
            scale(1.35) !important;
    }

    #galaxySection .galaxy-hint {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #galaxySection .memory-card,
    #galaxySection .galaxy-stars {
        animation: none;
    }
}
/* PAGE 6 — PHOTO-ONLY GALAXY */

#galaxySection .galaxy-heading,
#galaxySection .photo-caption,
#galaxySection .galaxy-hint {
    display: none !important;
}

#galaxySection .galaxy-space {
    position: absolute;
    inset: 0;
}

#galaxySection .memory-card {
    cursor: pointer;
}
/* PAGE 6 — ONLY FLOATING PHOTOS, NO TEXT */

#galaxySection .galaxy-heading,
#galaxySection .photo-caption,
#galaxySection .galaxy-hint {
    display: none !important;
}
/* PAGE 3 — FORCE SMALL HANGING PHOTOS */

#memoriesSection {
    --photo-size: 105px;
}

#memoriesSection .memory-ribbon {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#memoriesSection .memory-photo {
    position: absolute !important;
    top: 0;
    left: 0;
    width: var(--photo-size) !important;
    height: var(--photo-size) !important;
    min-width: var(--photo-size);
    max-width: var(--photo-size);
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#memoriesSection .photo-placeholder,
#memoriesSection .memory-photo img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0;
    border: 4px solid white;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    filter: grayscale(1);
}

#memoriesSection .memory-photo:hover .photo-placeholder,
#memoriesSection .memory-photo:hover img {
    filter: grayscale(0);
}
/* PAGE 6 — 3D MEMORY GALAXY */

#galaxySection {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(ellipse at 50% 50%, #0e0b1f 0%, #05040d 55%, #000 100%);
    color: #fff;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

#galaxySection.is-dragging {
    cursor: grabbing;
}

#galaxySection .g6-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

#galaxySection .g6-scene {
    position: absolute;
    inset: 0;
    perspective-origin: 50% 50%;
    touch-action: pan-y;
}

#galaxySection .g6-world {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

#galaxySection .g6-photo {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w, 190px);
    transform-style: preserve-3d;
    will-change: transform;
    cursor: pointer;
}

#galaxySection .g6-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 4px;
    overflow: hidden;
    background: #1a1630;
    box-shadow: 0 0 22px rgba(190,150,255,.22), 0 14px 40px rgba(0,0,0,.7);
    filter: brightness(var(--shade,1));
    transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, filter .45s ease;
}

#galaxySection .g6-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

#galaxySection .g6-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #f0a97a 0%, #c98aa8 50%, #5b6fd6 100%);
    color: rgba(255,255,255,.95);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

#galaxySection .g6-photo:hover .g6-card {
    transform: translateZ(70px) scale(1.12);
    filter: brightness(1.15);
    box-shadow: 0 0 36px rgba(226,179,255,.6), 0 18px 50px rgba(0,0,0,.8);
}

#galaxySection .g6-photo.is-focused .g6-card {
    transform: translateZ(var(--lift,300px)) scale(1.1);
    filter: brightness(1.2);
    box-shadow: 0 0 50px rgba(226,179,255,.7), 0 22px 60px rgba(0,0,0,.85);
}

@media (prefers-reduced-motion: reduce) {
    #galaxySection .g6-card {
        transition: none;
    }
}
/* ==========================================================
   PAGE 7 — iMESSAGE FILM (FINAL PAGE)
   Every selector starts with #phonePage and every class starts
   with pp-, so nothing here can touch Pages 1–6.
   Paste at the VERY END of style.css.
========================================================== */

#phonePage {
    --pp-blue: #0a84ff;
    --pp-in: #262629;
    --pp-gray: #8e8e93;

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 700px;
    overflow: hidden;
    isolation: isolate;
    background: #040406;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

#phonePage *,
#phonePage *::before,
#phonePage *::after {
    box-sizing: border-box;
}

#phonePage img[hidden] { display: none; }


/* ---------- background lighting ---------- */

#phonePage .pp-ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

#phonePage .pp-glow {
    position: absolute;
    border-radius: 50%;
    transition: opacity 2.6s ease;
}

#phonePage .pp-glow-cool {
    width: 70vmax;
    height: 70vmax;
    left: -18vmax;
    top: -24vmax;
    background: radial-gradient(circle, rgba(70, 110, 255, .24), rgba(70, 110, 255, 0) 62%);
    opacity: .45;
}

#phonePage .pp-glow-warm {
    width: 80vmax;
    height: 80vmax;
    right: -24vmax;
    bottom: -34vmax;
    background: radial-gradient(circle, rgba(255, 150, 120, .34), rgba(255, 150, 120, 0) 62%);
    opacity: 0;
}

#phonePage.is-lit .pp-glow-cool  { opacity: .85; }
#phonePage.is-warm .pp-glow-cool { opacity: .3; }
#phonePage.is-warm .pp-glow-warm { opacity: 1; }

#phonePage .pp-bokeh {
    position: absolute;
    bottom: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 190, .55), rgba(255, 170, 150, 0) 70%);
    opacity: 0;
    transition: opacity 3.5s ease;
    animation: pp-rise linear infinite;
    animation-play-state: paused;
}

#phonePage.is-warm .pp-bokeh {
    opacity: .5;
    animation-play-state: running;
}

@keyframes pp-rise {
    from { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(24px, -60vh, 0); }
    to   { transform: translate3d(-14px, -125vh, 0); }
}


/* ---------- camera + phone body ---------- */

#phonePage .pp-camera {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: calc(50% - 34px);
    width: 417px;
    height: 876px;
    transform: translate(-50%, -50%) scale(var(--pp-fit, .9));
    transform-origin: center;
}

#phonePage .pp-rig {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform-origin: 50% 50%;
    transform: perspective(1800px) translate3d(0, 60px, 0)
               rotateX(10deg) rotateY(-16deg) scale(.86);
}

#phonePage .pp-phone {
    position: absolute;
    inset: 0;
    padding: 4px;
    border-radius: 66px;
    background: linear-gradient(145deg, #4a4a50 0%, #1b1b1e 22%, #34343a 48%, #161618 74%, #3b3b41 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 0 0 1px rgba(0, 0, 0, .6),
        0 50px 110px rgba(0, 0, 0, .65),
        0 20px 40px rgba(0, 0, 0, .5),
        0 0 140px rgba(90, 120, 255, .14);
    transition: box-shadow 2.6s ease;
}

#phonePage.is-warm .pp-phone {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 0 0 1px rgba(0, 0, 0, .6),
        0 50px 110px rgba(0, 0, 0, .65),
        0 20px 40px rgba(0, 0, 0, .5),
        0 0 170px rgba(255, 150, 120, .26);
}

#phonePage .pp-side {
    position: absolute;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2a2a2e, #55555b, #2a2a2e);
}

#phonePage .pp-side-action  { left: -3px;  top: 128px; height: 32px; }
#phonePage .pp-side-volup   { left: -3px;  top: 188px; height: 58px; }
#phonePage .pp-side-voldown { left: -3px;  top: 258px; height: 58px; }
#phonePage .pp-side-power   { right: -3px; top: 220px; height: 92px; }

#phonePage .pp-bezel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 62px;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

#phonePage .pp-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 54px;
    background: #000;
    transform: translateZ(0);
}


/* ---------- Liquid Glass ---------- */

#phonePage .pp-glass {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05));
    -webkit-backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
    backdrop-filter: blur(22px) saturate(1.8) brightness(1.05);
    border: .5px solid rgba(255, 255, 255, .22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -1px 0 rgba(255, 255, 255, .07),
        inset 0 0 14px rgba(255, 255, 255, .04),
        0 6px 18px rgba(0, 0, 0, .35);
}

#phonePage .pp-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 48%);
    pointer-events: none;
}


/* ---------- status bar + Dynamic Island ---------- */

#phonePage .pp-status {
    position: absolute;
    z-index: 60;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 30px 0 46px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    pointer-events: none;
}

#phonePage .pp-status-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

#phonePage .pp-island {
    position: absolute;
    left: 50%;
    top: 11px;
    width: 124px;
    height: 36px;
    transform: translateX(-50%);
    border-radius: 20px;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

#phonePage .pp-island::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #20233a 0, #0a0b14 55%, #000 100%);
    box-shadow: 0 0 0 2px #050507, inset 0 0 3px rgba(80, 100, 255, .5);
}


/* ---------- views (list -> conversation) ---------- */

#phonePage .pp-view {
    position: absolute;
    inset: 0;
    background: #000;
    transition: transform .65s cubic-bezier(.32, .72, 0, 1),
                filter .65s ease;
}

#phonePage .pp-convo {
    transform: translateX(100%);
    box-shadow: -14px 0 34px rgba(0, 0, 0, .65);
}

#phonePage .pp-screen.is-open .pp-list  { transform: translateX(-30%); filter: brightness(.45); }
#phonePage .pp-screen.is-open .pp-convo { transform: translateX(0); }


/* ---------- avatar ---------- */

#phonePage .pp-avatar {
    position: relative;
    display: block;
    flex: none;
    width: 1em;
    height: 1em;
    font-size: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(160deg, #9b9ba6, #5e5e69);
}

#phonePage .pp-avatar-big { font-size: 56px; }

#phonePage .pp-avatar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: .46em;
    color: rgba(255, 255, 255, .92);
}

#phonePage .pp-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#phonePage .pp-avatar.has-image .pp-avatar-fallback { display: none; }


/* ---------- messages list ---------- */

#phonePage .pp-list-bar {
    position: absolute;
    top: 62px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#phonePage .pp-pill {
    height: 38px;
    padding: 0 18px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    font-size: 16px;
    font-weight: 500;
}

#phonePage .pp-circle {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

#phonePage .pp-list-title {
    position: absolute;
    top: 116px;
    left: 20px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .3px;
}

#phonePage .pp-search {
    position: absolute;
    top: 172px;
    left: 16px;
    right: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 20px;
    color: var(--pp-gray);
    font-size: 17px;
}

#phonePage .pp-row {
    position: absolute;
    top: 232px;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 0 30px;
    transition: background .25s ease;
}

#phonePage .pp-row.is-pressed { background: rgba(255, 255, 255, .09); }

#phonePage .pp-unread {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: var(--pp-blue);
}

#phonePage .pp-row-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#phonePage .pp-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#phonePage .pp-row-top b  { font-size: 17px; font-weight: 600; }
#phonePage .pp-row-top em { font-size: 15px; font-style: normal; color: var(--pp-gray); }
#phonePage .pp-row-preview { font-size: 15px; color: var(--pp-gray); }

#phonePage .pp-touch {
    position: absolute;
    left: 168px;
    top: 245px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
    opacity: 0;
    pointer-events: none;
}

#phonePage .pp-touch.is-on { animation: pp-tap .7s ease forwards; }

@keyframes pp-tap {
    0%   { opacity: 0;  transform: scale(1.7); }
    35%  { opacity: 1;  transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.12); }
}

#phonePage .pp-compose {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}


/* ---------- conversation ---------- */

#phonePage .pp-thread {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 138px 12px 118px;
    scrollbar-width: none;
    pointer-events: none;          /* page scroll still works over the phone */
}

#phonePage .pp-thread::-webkit-scrollbar { display: none; }

#phonePage .pp-thread-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#phonePage .pp-stamp {
    align-self: center;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--pp-gray);
    letter-spacing: .1px;
}

#phonePage .pp-stamp b { font-weight: 600; }

/* header */

#phonePage .pp-header {
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    height: 146px;
    pointer-events: none;
}

#phonePage .pp-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .6) 58%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

#phonePage .pp-back,
#phonePage .pp-video {
    position: absolute;
    top: 62px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--pp-blue);
}

#phonePage .pp-back  { left: 14px; }
#phonePage .pp-video { right: 14px; }

#phonePage .pp-contact {
    position: absolute;
    left: 50%;
    top: 56px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

#phonePage .pp-contact .pp-avatar {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .5);
}

#phonePage .pp-contact-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* composer */

#phonePage .pp-composer {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 34px;
    pointer-events: none;
}

#phonePage .pp-composer::before {
    content: "";
    position: absolute;
    inset: -34px 0 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 55%, transparent 100%);
    z-index: -1;
}

#phonePage .pp-plus {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

#phonePage .pp-field {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: 22px;
    color: var(--pp-gray);
    font-size: 17px;
}


/* ---------- bubbles ---------- */

#phonePage .pp-bubble {
    position: relative;
    max-width: 78%;
    margin-top: 3px;
    padding: 8px 14px 9px;
    border-radius: 19px;
    background: var(--pp-in);
    color: #fff;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -.24px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    transform-origin: 0% 100%;
    animation: pp-pop .45s cubic-bezier(.2, 1.15, .3, 1) both;
}

#phonePage .pp-bubble.is-first { margin-top: 4px; }

#phonePage .pp-bubble.has-tail::before {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 0;
    width: 20px;
    height: 25px;
    background: var(--pp-in);
    border-bottom-right-radius: 16px 14px;
}

#phonePage .pp-bubble.has-tail::after {
    content: "";
    position: absolute;
    left: -26px;
    bottom: 0;
    width: 26px;
    height: 25px;
    background: #000;
    border-bottom-right-radius: 10px;
}

@keyframes pp-pop {
    0%   { opacity: 0; transform: scale(.55) translateY(8px); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

#phonePage .pp-bubble.is-sent { animation: pp-settle .42s ease; }

@keyframes pp-settle {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}

/* typing indicator */

#phonePage .pp-dots {
    display: none;
    gap: 5px;
    align-items: center;
    height: 22px;
    padding: 0 3px;
}

#phonePage .pp-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8e8e93;
    animation: pp-dot 1.3s ease-in-out infinite;
}

#phonePage .pp-dots i:nth-child(2) { animation-delay: .18s; }
#phonePage .pp-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes pp-dot {
    0%, 60%, 100% { opacity: .35; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

#phonePage .pp-bubble.is-dots .pp-dots { display: flex; }
#phonePage .pp-bubble.is-dots .pp-text { display: none; }

/* text + caret */

#phonePage .pp-caret {
    display: inline-block;
    width: 2px;
    height: 20px;
    margin-left: 1px;
    vertical-align: -4px;
    border-radius: 1px;
    background: var(--pp-blue);
    animation: pp-blink 1s steps(1) infinite;
}

#phonePage .pp-caret.is-active { animation: none; opacity: 1; }
#phonePage .pp-bubble.is-sent .pp-caret { visibility: hidden; }

@keyframes pp-blink {
    0%, 55%  { opacity: 1; }
    56%, 100% { opacity: 0; }
}

/* photo bubble */

#phonePage .pp-bubble.pp-photo-bubble {
    width: 224px;
    height: 280px;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
}

#phonePage .pp-bubble.pp-photo-bubble.is-dots {
    width: auto;
    height: auto;
    padding: 8px 14px 9px;
}


/* ---------- photo slots ---------- */

#phonePage .pp-photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(155deg, #6c6f86 0%, #3d3f52 55%, #58435a 100%);
}

#phonePage .pp-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#phonePage .pp-photo-fallback {
    position: absolute;
    inset: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1.5px dashed rgba(255, 255, 255, .4);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.5;
}

#phonePage .pp-photo-fallback small {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: .7;
}

#phonePage .pp-photo.has-image .pp-photo-fallback { display: none; }


/* ---------- final reveal ---------- */

#phonePage .pp-reveal {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(.7);
    backdrop-filter: blur(30px) saturate(1.5) brightness(.7);
    transition: opacity 1.5s ease;
}

#phonePage .pp-reveal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, rgba(255, 170, 140, .30), rgba(255, 170, 140, 0) 60%);
    pointer-events: none;
}

#phonePage .pp-reveal.is-on { opacity: 1; }

#phonePage .pp-reveal-card {
    position: relative;
    width: 292px;
    height: 366px;
    padding: 7px;
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .08));
    border: .5px solid rgba(255, 255, 255, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 30px 70px rgba(0, 0, 0, .55),
        0 0 60px rgba(255, 170, 140, .22);
    opacity: 0;
    transform: translateY(26px) scale(.82);
    transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) .35s,
                opacity 1.2s ease .35s;
}

#phonePage .pp-reveal.is-on .pp-reveal-card {
    opacity: 1;
    transform: none;
}

#phonePage .pp-reveal-photo {
    border-radius: 29px;
}

#phonePage .pp-reveal-photo img {
    transform: scale(1);
}

#phonePage .pp-reveal.is-on .pp-reveal-photo img {
    animation: pp-kenburns 16s ease-out forwards;
}

@keyframes pp-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

#phonePage .pp-reveal-title,
#phonePage .pp-reveal-sub {
    position: relative;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}

#phonePage .pp-reveal-title {
    margin-top: 26px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.4px;
    text-shadow: 0 2px 18px rgba(255, 170, 140, .35);
}

#phonePage .pp-reveal-sub {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
}

#phonePage .pp-reveal.is-on .pp-reveal-title { opacity: 1; transform: none; transition-delay: 1.6s; }
#phonePage .pp-reveal.is-on .pp-reveal-sub   { opacity: 1; transform: none; transition-delay: 2.2s; }


/* ---------- screen glare, home bar, wake ---------- */

#phonePage .pp-glare {
    position: absolute;
    inset: 0;
    z-index: 65;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 26%);
}

#phonePage .pp-glare::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    opacity: 0;
}

#phonePage .pp-screen.is-awake .pp-glare::after {
    animation: pp-sweep 2.4s ease .3s forwards;
}

@keyframes pp-sweep {
    0%   { left: -60%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

#phonePage .pp-home {
    position: absolute;
    z-index: 66;
    left: 50%;
    bottom: 8px;
    width: 134px;
    height: 5px;
    margin-left: -67px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .7);
    pointer-events: none;
}

#phonePage .pp-wake {
    position: absolute;
    z-index: 70;
    inset: 0;
    background: #000;
    pointer-events: none;
    transition: opacity 1.3s ease;
}

#phonePage .pp-screen.is-awake .pp-wake { opacity: 0; }


/* ---------- replay ---------- */

#phonePage .pp-replay {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .9s ease, transform .9s ease, background .25s ease;
}

#phonePage .pp-replay.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

#phonePage .pp-replay:hover { background: rgba(255, 255, 255, .24); }
#phonePage .pp-replay:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    #phonePage .pp-bokeh { display: none; }
}

/* PAGE 7 — make iMessage bubbles fit their text */
#phonePage .pp-thread-inner {
    align-items: flex-start;
}

#phonePage .pp-bubble {
    display: block;
    width: fit-content;
    height: auto;
    min-height: 0;
    max-width: 78%;
    padding: 8px 14px 9px;
    text-align: left;
    line-height: 22px;
}

#phonePage .pp-text {
    display: inline;
    text-align: left;
}

#phonePage .pp-chars {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
/* PAGE 3 — actual hanging photos */
#memoryRibbon .memory-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* Fix scrapbook photo sizing */

#scrapbookSection .pasted-photo {
    position: relative;
    overflow: hidden;
}

#scrapbookSection .pasted-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Fix front and back cover photo sizing */

#scrapbookSection .cover-photo {
    position: relative;
    overflow: hidden;
}

#scrapbookSection .cover-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
/* Scrapbook images: fill their existing photo frames */

#scrapbookSection .pasted-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Cover images: fill their existing frames */

#scrapbookSection .cover-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* FORCE scrapbook photos to fit their frames */
#scrapbookSection .pasted-photo {
    overflow: hidden !important;
}

#scrapbookSection .pasted-photo img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* FORCE cover photos to fit their frames */
#scrapbookSection .cover-photo {
    overflow: hidden !important;
}

#scrapbookSection .cover-photo img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}