/*
 * Prototype home1 (/html/home1.html): first screen "Photography That Tells Your Story" + a wall of
 * photos. Builds on the site styles (globals.css, site.css, site-header.css, app.css): header and
 * footer stay exactly as on the site.
 */
:root {
    --h1-bg: #0b0b0c;
    --h1-ink: #f5f5f4;
    --h1-soft: #8c8c93;
    --h1-pill: #2a2a2d;
}

body.proto-home1 { background: var(--h1-bg); }
.proto-home1 .ellipses { display: none; }
.proto-home1 .main { padding: 0; }

/* ── first screen ───────────────────────────────────────────────────── */
.h1-hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: clamp(56px, 9vw, 120px) 16px clamp(56px, 8vw, 110px);
}
.h1-hero__kicker {
    margin: 0 0 clamp(14px, 2vw, 26px);
    font: 400 clamp(22px, 2.6vw, 40px)/1.1 "Lazurski", "Playfair Display", Georgia, serif;
    color: #c9c9cc; letter-spacing: -0.01em;
}
.h1-hero__title {
    max-width: 14ch; margin: 0;
    font: 700 clamp(44px, 7.4vw, 112px)/0.98 var(--font-head);
    letter-spacing: -0.045em; color: var(--h1-ink);
}
.h1-hero__lead {
    max-width: 46ch; margin: clamp(20px, 2.4vw, 32px) 0 0;
    font: 300 clamp(15px, 1.3vw, 20px)/1.55 var(--font-head); color: var(--h1-soft);
}
.h1-cta {
    display: inline-flex; align-items: center; gap: 16px; margin-top: clamp(26px, 3vw, 40px);
    padding: 5px 26px 5px 5px; border-radius: 999px; background: var(--h1-pill); color: #fff;
    font: 500 16px/1 var(--font-head); text-decoration: none;
    transition: background var(--trans, 200ms ease), transform 200ms ease;
}
.h1-cta__icon {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: #fff; color: #111; transition: transform 250ms ease;
}
/* globals.css sets `* { color: #fff }`, so the arrow paths need their own dark stroke. */
.h1-cta__icon .icon { width: 20px; height: 20px; }
.h1-cta__icon .icon, .h1-cta__icon .icon * { color: #111; stroke: #111; }
.h1-cta:hover { background: #343438; }
.h1-cta:hover .h1-cta__icon { transform: translateX(4px); }
.h1-cta:focus-visible { outline: 2px solid rgb(255 255 255 / 0.7); outline-offset: 3px; }

/* Staggered entrance of the first screen. */
.h1-hero > * { opacity: 0; transform: translateY(14px); animation: h1-rise 700ms cubic-bezier(.2, .7, .2, 1) forwards; }
.h1-hero > :nth-child(2) { animation-delay: 90ms; }
.h1-hero > :nth-child(3) { animation-delay: 180ms; }
.h1-hero > :nth-child(4) { animation-delay: 270ms; }
@keyframes h1-rise { to { opacity: 1; transform: none; } }

/* ── wall of photos ─────────────────────────────────────────────────── */
/* Without JS: CSS columns. home1.js builds real columns (data-wall-ready) for the drift effect. */
.h1-wall {
    position: relative; overflow: hidden;
    height: clamp(620px, 92vw, 1100px);
    columns: 5; column-gap: 0;
}
.h1-wall::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bg, #18171a));
}
.h1-wall[data-wall-ready] { display: flex; columns: auto; }
.h1-wall__col { flex: 1 1 0; min-width: 0; will-change: transform; }
.h1-tile { display: block; position: relative; margin: 0; overflow: hidden; break-inside: avoid; background: #151517; }
.h1-tile img {
    display: block; width: 100%; height: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover;
    opacity: 0; transform: scale(1.04); transition: opacity 700ms ease, transform 1200ms ease;
}
.h1-tile.is-in img { opacity: 1; transform: none; }
.h1-tile:hover img { transform: scale(1.03); transition-duration: 700ms; }
.h1-tile__cap {
    position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px; color: #fff;
    font: 600 13px/1.2 var(--font-head); background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
    opacity: 0; transition: opacity 250ms ease;
}
.h1-tile:hover .h1-tile__cap, .h1-tile:focus-visible .h1-tile__cap { opacity: 1; }
.h1-tile:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (max-width: 1199px) { .h1-wall { columns: 4; } }
@media (max-width: 991px) { .h1-wall { columns: 3; height: clamp(560px, 120vw, 980px); } }
@media (max-width: 575px) {
    .h1-wall { columns: 2; height: 150vw; }
    .h1-hero__title { max-width: 11ch; }
    .h1-cta { font-size: 15px; }
}
@media (hover: none) { .h1-tile__cap { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .h1-hero > *, .h1-tile img { animation: none; opacity: 1; transform: none; transition: none; }
    .h1-wall__col { transform: none !important; }
}