/* Make, in motion: things rise in as you reach them, the shelves stop looking like identical rows,
   and the pictures never sit perfectly still. All of it switches off for people who asked for less motion. */

/* rise in, one after another (make-motion.js adds .mv and the order, so nothing hides without JavaScript) */
.make-page .mv {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.make-page .mv.in {
    opacity: 1;
    transform: none;
}

/* WRITING: the pages sit straight and level in one row, and lift a little on hover */
.make-page .writing-shelf .writing-cover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.make-page .writing-shelf .writing-card:hover .writing-cover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 30px -14px rgba(42, 24, 16, 0.35);
}

/* BAKING: an even grid, every treat the same size (only Selected work and Projects get the Pinterest-style board) */

/* every food photo slowly pushes in, so the shelf is never perfectly still */
.make-page .bake-tile img,
.make-page .trip-open img {
    animation: makeDrift 14s ease-in-out infinite alternate;
    animation-delay: calc(var(--d, 0) * -2.1s);
}

@keyframes makeDrift {
    from { transform: scale(1.01); }
    to { transform: scale(1.1); }
}

/* the cake gallery cross-fades as it turns by itself: the cakes are stacked, so the old one slowly fades out
   while the new one fades in over it, with no blank moment in between */
.make-page .cake-slides {
    position: relative;
}

.make-page .cake-slide {
    position: absolute;
    inset: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.6s ease-in-out, visibility 0s;
}

.make-page .cake-slide[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s ease-in-out, visibility 0s linear 1.6s;
}

/* ITINERARIES: the cards sit straight and level. Each city's edit slides up over its photo, one card after
   another while the shelf is on screen (make-motion.js), or right away on hover */
.make-page #traveling .bake-cover {
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.make-page #traveling .trip-open:hover .bake-cover {
    transform: translateY(-6px);
}

.trip-peek {
    position: absolute;
    inset: auto 0 0;
    padding: 56px 18px 18px;
    background: linear-gradient(to top, rgba(30, 16, 10, 0.88) 0%, rgba(30, 16, 10, 0.7) 60%, rgba(30, 16, 10, 0) 100%);
    color: #FFFFFF;
    text-align: left;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.trip-peek-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #F5E0DB;
}

.trip-peek ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trip-peek li {
    margin-top: 4px;
    font-family: Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(0.15s + var(--n) * 0.09s);
}

.trip-peek li.more {
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    color: #F5E0DB;
}

.make-page #traveling .trip-open:hover .trip-peek,
.make-page #traveling .trip-open:focus-visible .trip-peek,
.make-page #traveling .shelf-item.peek .trip-peek {
    opacity: 1;
    transform: none;
}

.make-page #traveling .trip-open:hover .trip-peek li,
.make-page #traveling .trip-open:focus-visible .trip-peek li,
.make-page #traveling .shelf-item.peek .trip-peek li {
    opacity: 1;
    transform: none;
}

/* the plane on the blank journal page keeps flying */
.make-page .ticket-plane {
    display: inline-block;
    animation: makePlane 3s ease-in-out infinite;
}

@keyframes makePlane {
    50% { transform: translate(4px, -3px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .make-page .mv { opacity: 1; transform: none; transition: none; }
    .make-page .writing-shelf .writing-cover,
    .make-page .bake-tile img,
    .make-page .trip-open img,
    .make-page .ticket-plane { animation: none; }
    .make-page .cake-slide, .make-page .cake-slide[hidden] { transition: none; }
    .trip-peek, .trip-peek li { transition: none; }
}