/* ============================================================
   The hero's photographs, besides the camera roll: the line and
   the booth strips. One is drawn a visit (`landing.hero`), from
   the camera roll's own photographs, and `js/landing-hero.js`
   draws it. mockups/hero-photos-lab.html, 01 and 05.

   Each is an object rather than a page surface, so a print is
   white and its words are pine in either mode.
   ============================================================ */

/* ── A PRINT ── */
.lp-featured-label, .lp-picks { display:none; }
.lp-pl {
    position:relative; display:block; width:var(--w); text-decoration:none; border:0; cursor:pointer; font:inherit;
    padding:calc(var(--w) * .06) calc(var(--w) * .06) calc(var(--w) * .22);
    background:var(--white); border-radius:2px;
    /* Soft, the way a print throws a shadow on a wall a few centimeters behind it: a faint
       contact line and a wide blur pulled in at the sides, rather than a dark offset edge. */
    box-shadow:0 1px 2px rgba(0,0,0,.10), 0 18px 40px -10px rgba(0,0,0,.28), 0 6px 18px -6px rgba(0,0,0,.12);
    transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
}
.lp-pl-img { display:block; aspect-ratio:1; background:var(--bg-tertiary) center/cover no-repeat; }
.lp-pl-cap {
    position:absolute; left:5%; right:5%; bottom:calc(var(--w) * .055);
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    color:var(--brand-bg); transition:opacity .18s ease;
}
.lp-pl-cap {
    /* Written on in marker, a little crooked, the way somebody labels a print by hand. */
    font-family:var(--font-hand); font-size:calc(var(--w) * .1); line-height:1.1;
    transform:rotate(-1.5deg);
}
button.lp-pl:focus-visible { outline:2px solid var(--accent-color); outline-offset:3px; }

/* ════════════════════════════════════════════════════════════════
   THE LINE: twine across the top of the hero, somebody off frame
   pegging prints to it, and the view following their hand.
   ════════════════════════════════════════════════════════════════ */
.lp-line {
    /* Clipped at the sides only, for the track running past them: clipped at the foot too, it
       cut every print's shadow off along one straight line. */
    position:relative; z-index:1; overflow:hidden; overflow-x:clip; overflow-y:visible;
    height:250px; margin:-24px -20px 12px;
    --twine:var(--text-muted);
}
.lp-line-track { position:absolute; inset:0; will-change:transform; }
.lp-line { cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.lp-line.is-dragging { cursor:grabbing; }
.lp-line.is-dragging .lp-pl { pointer-events:none; }
.lp-line-svg { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.lp-line-str { fill:none; stroke:var(--twine); stroke-width:1.6; stroke-linecap:round; }
.lp-line-hold {
    position:absolute; transform-origin:50% 0;
    animation:lpSwing 2.6s cubic-bezier(.3,.6,.3,1) both, lpSway 5.5s 2.6s ease-in-out infinite alternate;
}
.lp-line-hold:hover { z-index:5; }
.lp-line-hold .lp-pl:hover { transform:translateY(-6px) scale(1.04); box-shadow:0 2px 4px rgba(0,0,0,.10), 0 30px 56px -12px rgba(0,0,0,.34), 0 10px 24px -8px rgba(0,0,0,.14); }
@keyframes lpSwing {
    0%   { transform:translateY(-42px) rotate(calc(var(--r) - 15deg)); opacity:0; }
    16%  { opacity:1; }
    30%  { transform:translateY(0) rotate(calc(var(--r) + 9deg)); }
    50%  { transform:rotate(calc(var(--r) - 5deg)); }
    68%  { transform:rotate(calc(var(--r) + 2.5deg)); }
    84%  { transform:rotate(calc(var(--r) - 1deg)); }
    100% { transform:rotate(var(--r)); }
}
@keyframes lpSway { from { transform:rotate(calc(var(--r) - 1.2deg)); } to { transform:rotate(calc(var(--r) + 1.2deg)); } }
.lp-peg {
    position:absolute; left:50%; top:-15px; width:11px; height:34px; margin-left:-5.5px; z-index:2;
    border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,.3);
    background:linear-gradient(90deg, color-mix(in srgb, var(--brand-highlight), black 22%),
                var(--brand-highlight) 45%, color-mix(in srgb, var(--brand-highlight), black 12%));
}
.lp-peg::after { content:""; position:absolute; left:50%; top:3px; bottom:3px; width:1px; background:rgba(0,0,0,.3); }

/* ── A PRINT, OPENED: the print grows off the line into the middle of the screen ── */
.lp-look { position:fixed; inset:0; z-index:1050; display:grid; place-items:center; padding:16px; }
.lp-look-scrim { position:absolute; inset:0; background:var(--scrim); opacity:0; transition:opacity .35s ease; }
.lp-look.open .lp-look-scrim { opacity:1; }
.lp-look-pl {
    position:relative; margin:0; width:min(400px, 100%); max-height:100%;
    padding:16px 16px 0; background:var(--white); border-radius:3px;
    box-shadow:0 2px 3px rgba(0,0,0,.2), 0 30px 70px rgba(0,0,0,.45);
    transition:transform .38s cubic-bezier(.2,.8,.25,1);
}
.lp-look-img { position:relative; display:block; aspect-ratio:1; background:var(--bg-tertiary) center/cover no-repeat; }
.lp-look-cap { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:16px 4px 18px; color:var(--brand-bg); }
.lp-look-place { font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.lp-look-trip { font-size:.86rem; color:color-mix(in srgb, var(--brand-bg) 65%, var(--white)); }
.lp-look-go {
    margin-top:10px; padding:9px 16px; border-radius:var(--radius-md); text-decoration:none;
    background:var(--brand-bg); color:var(--brand-text); font-size:.86rem; font-weight:700;
    transition:background .2s ease;
}
.lp-look-go:hover { background:var(--brand-bg-light); color:var(--brand-text); }
.lp-look-x {
    position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:0;
    display:grid; place-items:center; cursor:pointer; background:var(--brand-bg); color:var(--brand-text);
    box-shadow:0 4px 12px rgba(0,0,0,.3); opacity:0; transition:opacity .2s .15s ease;
}
.lp-look.open .lp-look-x { opacity:1; }
.lp-look-x svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
@media (max-width:767px) { .lp-look-x { top:8px; right:8px; } }

/* ════════════════════════════════════════════════════════════════
   THE BOOTH STRIPS: one trip in four frames, taped to the top and
   hanging; where the phone is on a desktop, under the words on a phone.
   ════════════════════════════════════════════════════════════════ */
.lp-booth { position:relative; z-index:1; height:450px; margin:28px -20px -40px; overflow:hidden; }
.lp-booth-slot {
    position:absolute; top:0; width:var(--sw); transform-origin:50% 0;
    transform:translateY(var(--y)) rotate(var(--r)); transition:transform .2s ease;
}
.lp-booth-slot:hover { transform:translateY(calc(var(--y) + 8px)) rotate(calc(var(--r) * .4)); z-index:9; }
.lp-booth-f:focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }
.lp-booth-cap:hover { color:var(--brand-bg-light); }
.lp-booth-strip {
    position:relative; display:block; text-decoration:none; background:var(--white); padding:8px 8px 0;
    box-shadow:0 2px 2px rgba(0,0,0,.16), 0 16px 34px rgba(0,0,0,.3);
    transform:translateY(-120%); transition:transform 1.1s cubic-bezier(.2,.75,.25,1);
}
.lp-booth-strip.down { transform:none; }
.lp-booth-strip.down.up { transform:translateY(-120%); transition-duration:.7s; transition-timing-function:cubic-bezier(.6,0,.8,.4); }
.lp-booth-f { display:block; width:100%; border:0; padding:0; cursor:pointer; position:relative; aspect-ratio:1; background:var(--bg-tertiary) center/cover no-repeat; margin-bottom:6px; overflow:hidden; }
.lp-booth-place {
    position:absolute; left:0; right:0; bottom:0; padding:16px 7px 5px;
    font-size:.72rem; font-weight:700; line-height:1.2; color:var(--white);
    background:linear-gradient(transparent, rgba(0,0,0,.6));
    opacity:0; transition:opacity .18s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-booth-f:hover .lp-booth-place { opacity:1; }
.lp-booth-cap {
    display:block; text-decoration:none; font-family:var(--font-mono); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--brand-bg); text-align:center; padding:5px 2px 12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lp-booth-tape {
    position:absolute; left:50%; top:-10px; width:56px; height:20px; margin-left:-28px; z-index:3;
    background:color-mix(in srgb, var(--brand-highlight) 72%, transparent);
    transform:rotate(-3deg); box-shadow:0 1px 2px rgba(0,0,0,.15);
}

@media (min-width:768px) {
    /* Under a scene across the top, as tall as the hero is with the camera roll, so the next
       section still shows at the foot of the screen: a larger headline alone on the left; on
       the right the line under it, the search, and the picks. The headline spans every row, so
       the right column's rows are as tall as what is in them and the last takes the rest.

       The line stacks above the words where the phone stands beside them, so the two share the
       phone's height (`--lp-stage`) between them: the line takes its own and the words get the
       rest, at least. Laid end to end they ran 50 to 100px past it. */
    .lp-hero-top { --lp-line-h:276px; --lp-line-up:40px; }
    .lp-hero-top .lp-hero-inner {
        align-items:flex-start;
        min-height:calc(var(--lp-stage) - var(--lp-line-h) + var(--lp-line-up));
    }
    .lp-hero-top .lp-hero-text {
        flex:1; max-width:none; display:grid; align-items:start;
        grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:64px;
        grid-template-rows:auto auto auto 1fr;
    }
    .lp-hero-top .lp-hero-text > * { grid-column:2; }
    .lp-hero-top .lp-hero-text > .lp-hero-title {
        grid-column:1; grid-row:1 / 5; margin:0;
        font-size:clamp(2.8rem, 4.8vw, 4.3rem); line-height:1.02;
    }
    .lp-hero-top .lp-hero-text > .lp-hero-sub { grid-row:1; margin:0 0 10px; max-width:none; }
    .lp-hero-top .lp-hero-text > .lp-search-wrapper { grid-row:2; margin:0; }
    .lp-hero-top .lp-hero-text > .lp-featured { grid-row:3; margin-top:14px; }
    .lp-hero-top .lp-featured-set, .lp-hero-top .lp-featured-hint { display:none; }
    .lp-hero-top .lp-featured-more { display:none; }
    .lp-featured-label {
        display:block; margin:0 0 6px; font-family:var(--font-mono); font-size:.62rem; font-weight:600;
        letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
    }

    /* The picks, as one panel of three rows: the photograph, the name, and the length over the
       price in a column of its own width, so the three line up whatever the names are. */
    .lp-picks {
        --pick:36px; display:block; list-style:none; margin:0; padding:0; overflow:hidden;
        background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg);
        box-shadow:var(--shadow-card);
    }
    .lp-picks li + li { border-top:1px solid var(--border-color); }
    .lp-pick {
        display:grid; grid-template-columns:var(--pick) minmax(0,1fr) 120px; align-items:center; gap:14px;
        padding:6px 16px 6px 6px; text-decoration:none; color:var(--text-primary); transition:background .15s ease;
    }
    .lp-pick:hover { background:var(--bg-secondary); color:var(--text-primary); }
    .lp-pick-photo { width:var(--pick); height:var(--pick); border-radius:var(--radius-sm); overflow:hidden; background:var(--brand-bg); }
    .lp-pick-photo img { width:100%; height:100%; object-fit:cover; display:block; }
    .lp-pick-name { font-size:.9rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .lp-pick-stub { display:flex; flex-direction:column; align-items:flex-end; gap:1px; white-space:nowrap; }
    .lp-pick-stub span { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
    .lp-pick-stub b { font-size:.84rem; font-weight:700; }

    /* 276 holds a print at the lowest point of the twine through its swing; 40 up into the
       padding still leaves the highest point of the twine clear of the bar. */
    .lp-line { height:var(--lp-line-h); margin:calc(-1 * var(--lp-line-up)) -32px 0; }
    .lp-booth { flex:0 0 46%; height:600px; margin:-8px 0 -48px; }
}
@media (min-width:1200px) {
    .lp-picks { --pick:40px; }
}

@media (prefers-reduced-motion:reduce) {
    .lp-line-hold { animation:none; }
    .lp-line-hold { transform:rotate(var(--r)); }
    .lp-booth-strip, .lp-look-pl { transition:none; }
}