/* ===== ABOUT (PF26 "About", node 4:65) =====
   Builds on css/project.css: same column, back arrow, title, text blocks, spring entry and edge blur. */

.about-main {
    padding: 80px 0 160px;
}

/* ===== PHOTOS =====
   Three tilted cards (−7.5° / 7.5° / −7.5°) overlapping 280px apart; later cards sit on top.
   The images already carry their white frame, rounded corners and shadow: the framed card is
   1292 of the image's 1332px, so the image is drawn 3.1% larger than the card and centred. */
.photos {
    --card: min(400px, calc((100vw - 2 * var(--gutter)) / 2.55));
    position: relative;
    height: calc(var(--card) * 1.122);           /* the tilted cards' bounding box */
    margin: 56px 0 96px;
}

.photo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--card);
    height: var(--card);
    /* centred with margins, not translate: the entry animation holds this element's transform */
    margin: calc(var(--card) / -2) 0 0 calc(var(--card) / -2 + var(--x, 0px));
    padding: 0;
    border: 0;
    background: none;
    border-radius: 10%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.photo:nth-child(1) { --x: calc(var(--card) * -0.7); }
.photo:nth-child(3) { --x: calc(var(--card) * 0.7); }

.photo:focus-visible {
    outline: none;
}

.photo-card,
.pv-card {
    position: absolute;
    inset: 0;
    display: block;
}

.photo-card {
    transform: rotate(var(--tilt, 0deg));
    transition: transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.photo-card img,
.pv-front {
    position: absolute;
    left: -1.55%;
    top: -1.55%;
    width: 103.1%;
    height: 103.1%;
    max-width: none;
    display: block;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* hover (or keyboard focus) on any photo straightens them all */
.photos:has(.photo:hover) .photo-card,
.photos:has(.photo:focus-visible) .photo-card,
.photos.is-straight .photo-card {
    transform: none;
}

@supports not selector(:has(*)) {
    .photos:hover .photo-card { transform: none; }
}

.photo:focus-visible .photo-card::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 11%;
    box-shadow: 0 0 0 2px var(--accent);
}

@supports (animation-timing-function: linear(0, 1)) {
    .photo-card {
        transition: transform var(--spring-dur) var(--spring);
    }
}

/* ===== PHOTO VIEWER =====
   The clicked photo flips (3D), grows 15% and comes to the centre of the window; everything
   behind is blurred. Built and animated by js/about.js. */
.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    visibility: hidden;
}

.photo-viewer.is-active {
    visibility: visible;
}

.photo-viewer.is-open {
    pointer-events: auto;
    cursor: zoom-out;
}

.pv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(242, 242, 242, 0.4);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-viewer.is-open .pv-backdrop {
    opacity: 1;
}

/* the edge-blur bars would otherwise stay sharp above the backdrop */
.viewer-open .edge-blur {
    opacity: 0;
}

.pv-card {
    position: fixed;
    inset: auto;
    transform-style: preserve-3d;
    will-change: transform;
}

.pv-front,
.pv-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* the back of the card: plain white frame with the logomark, seen mid-flip */
.pv-back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 10%;
    background: #FFFFFF;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.03);
    transform: rotateY(180deg);
}

.pv-back img {
    width: 14%;
    height: auto;
    opacity: 0.9;
}

/* ===== SECTIONS =====
   Heading (400) + 24 + body (528), separated by 1px rules with 40px either side */
.about-sections > * + * {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.block-body.facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0;
}

.facts div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.facts dt {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--label);
}

.facts dd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    line-height: 1.4;
}

/* quote + last updated sit in the body column, with no heading */
.about-sign {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: calc(400px + 24px);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.02em;
    font-feature-settings: "liga" 0;
}

/* ===== ENTRY =====
   Same spring and 50ms stagger as the project pages: back, title, photos one by one, then the intro */
.photo,
.about-sections > .about-section:first-child > * {
    opacity: 0;
    animation:
        pp-rise var(--spring-dur) cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--i, 0) * var(--stagger)) both,
        pp-clear var(--spring-dur) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * var(--stagger)) both;
}

@supports (animation-timing-function: linear(0, 1)) {
    .photo,
    .about-sections > .about-section:first-child > * {
        animation:
            pp-rise var(--spring-dur) var(--spring) calc(var(--i, 0) * var(--stagger)) both,
            pp-clear var(--spring-dur) var(--spring-capped) calc(var(--i, 0) * var(--stagger)) both;
    }
}

.photo:nth-child(1) { --i: 2; }
.photo:nth-child(2) { --i: 3; }
.photo:nth-child(3) { --i: 4; }
.about-sections > .about-section:first-child > :nth-child(1) { --i: 6; }
.about-sections > .about-section:first-child > :nth-child(2) { --i: 7; }

@media (prefers-reduced-motion: reduce) {
    .photo,
    .about-sections > .about-section:first-child > * {
        animation: fade-in 0.3s ease-out forwards !important;
    }

    .photo-card {
        transition: none;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .about-sign {
        padding-left: calc(34% + 24px);
    }
}

/* Mobile: photos stand straight in a horizontal scroll, 16px apart, edge to edge */
@media (max-width: 760px) {
    .about-main {
        padding: 72px 0 120px;
    }

    .photos {
        --card: min(300px, 76vw);
        display: flex;
        gap: 16px;
        height: auto;
        margin: 32px calc(-1 * var(--gutter)) 56px;
        padding: 8px var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    .photos::-webkit-scrollbar {
        display: none;
    }

    .photo {
        position: relative;
        left: auto;
        top: auto;
        flex: 0 0 var(--card);
        margin: 0;
        scroll-snap-align: start;
    }

    .photo-card {
        transform: none;
    }

    .about-sections > * + * {
        margin-top: 32px;
        padding-top: 32px;
    }

    .about-sign {
        padding-left: 0;
        gap: 24px;
    }

    /* "Values I bring" and "Where I've created impact": one column instead of the 2×3 grid */
    .block-body.facts {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}