/* ===================================
   Hero - full-bleed
   ===================================

   Replaces hero-banner.css. Same rotating photography and same near-black
   ground, but the split "cover" layout is gone: the photo now fills the
   viewport and carries nothing but the nav and a scroll cue, which is how the
   erikalmas.com reference Diana picked opens.

   What came out, and what that means:

     - The left intro column. The gold Cocomat Pro wordmark, the rule, the
       tagline and the two buttons are all gone from the fold. The reference
       puts no name, no strapline and no call to action over its hero either -
       the photograph is the whole pitch.

     - Because of that, the nav's own wordmark now shows at all times (see
       site-nav.css). It used to be hidden while the header floated over the hero,
       since the hero already shouted the name in 80px gold. With the intro
       column gone it is the only thing identifying whose site this is on
       first paint, which is exactly the job the reference's logo does.

     - The caption and the dot controls. The reference has neither. Losing the
       dots does cost the keyboard/manual control the old panel had, so the
       rotation still honours prefers-reduced-motion and still pauses on hover
       and on hidden tabs - a reader who needs it stopped can stop it, they
       just can't step through it any more.

     - The left-edge gradient, which existed only to soften the seam between
       the photo and the dark column. There is no seam now.

   Because the panel is exactly the viewport, the crop the markup picks has to
   match the viewport's own proportions - there is no fixed panel shape to
   design against any more. Five crops per slide cover the range, switched on
   max-aspect-ratio in index.html: 9x16 phones upright, 3x4 tablets upright,
   4x3 tablets sideways, 16x9 laptops and desktops, 21x9 ultrawides.

   Anything object-fit: cover cannot show is thrown away off the top and
   bottom, so the width of each bucket is what decides how much of Diana's
   framing survives. The pixel spec lives in scripts/check-hero-photos.sh.

   Note the 1.11 drift below is part of the sizing maths: the photo is scaled
   up 11% over its 9s push-in, so every crop needs 11% more pixels than the
   viewport it serves.
====================================== */

.hero {
    position: relative;
    display: block;
    padding: 0;
    /* Fallback first; dvh wins where supported and avoids the hero being
       clipped by mobile browser chrome. */
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #0b0b0d;
    overflow: hidden;
}

/* Header and nav styling lives in site-nav.css - it is shared with the four
   category gallery pages, which have no hero. */

/* ===================================
   The photography
====================================== */

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
}

/* Stacked cross-fade: every slide sits on top of every other one and only
   opacity separates them, so there is never a frame with no photo on screen. */
.hero-slide {
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 0;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-slide picture,
.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-slide img {
    object-fit: cover;
    object-position: center;
}

/* Slow push-in on the active photo. Scoped to .has-drift on the section so it
   can be toggled from the console without a reload; hero-fullbleed.js replays
   it per slide. */
.has-drift .hero-slide img {
    animation: hero-drift 9s ease-out forwards;
}

@keyframes hero-drift {
    from { transform: scale(1.04); }
    to   { transform: scale(1.11); }
}

/* One scrim, doing one job: keeping the white nav legible over a bright sky.
   The bottom band is much lighter and only has to carry the scroll chevron. */
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(11, 11, 13, .62) 0%,
        rgba(11, 11, 13, .30) 11%,
        rgba(11, 11, 13, 0) 28%,
        rgba(11, 11, 13, 0) 68%,
        rgba(11, 11, 13, .48) 100%);
}

/* ===================================
   Scroll cue

   A bare chevron centred on the bottom edge, like the reference's. Drawn from
   two borders on a rotated square rather than shipped as an icon font glyph -
   the page already loads two icon fonts, and neither needs to be in the
   critical path for one shape.
====================================== */

/* Shared with .about-scroll, .portfolio-scroll and .contact-scroll - the same
   glyph carries the same meaning everywhere, so the shape and position are
   defined once here rather than copied. Each section supplies its own `bottom`
   (see larger-about-me.css) and, where it differs, its own treatment:
   Portfolio overrides the colour (gallery-masonry.css), because it sits on
   white rather than the near-black the others share; Contact overrides the
   rotation (contact-dark.css), because it is the last section and so points
   back up rather than further down. */
.hero-scroll,
.about-scroll,
.portfolio-scroll,
.contact-scroll {
    position: absolute;
    left: 50%;
    bottom: 38px;
    z-index: 3;
    transform: translateX(-50%);
    display: block;
    width: 46px;
    height: 46px;
    /* The chevron itself is the ::after; this box is only a hit target, sized
       past the 44px minimum so it stays tappable on a phone. */

    /* How much wider than a right angle the glyph opens out. The two arms come
       from two borders of the same box, so they are perpendicular by
       construction and no box proportion can change that - a wider box only
       lengthens one arm. Widening the ANGLE means stretching the finished
       shape horizontally, which is what this feeds. Declared here, on the link,
       so the one number is shared by both the downward glyph below and
       Contact's upward one (contact-dark.css) - custom properties inherit into
       pseudo-elements, so both ::after rules can read it. */
    --chev-stretch: 1.35;
}

.hero-scroll::after,
.about-scroll::after,
.portfolio-scroll::after,
.contact-scroll::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -14px 0 0 -10px;
    border-right: 1px solid rgba(255, 255, 255, .85);
    border-bottom: 1px solid rgba(255, 255, 255, .85);
    /* Read right to left: rotate the corner into a V, then stretch that V
       sideways. Order matters - scaleX AFTER the rotation widens the finished
       glyph and leaves its height alone, where scaling before it would just
       feed a wider rectangle into the rotation and come back out as a 90
       degree corner again, taller as well as wider. 20px square rotated gives
       a 28.3 x 14.1 glyph; the stretch takes it to 38.2 x 14.1. */
    transform: scaleX(var(--chev-stretch)) rotate(45deg);
    transition: opacity .3s ease, transform .3s ease;
    opacity: .85;
}

/* The nudge is 2px along the direction the glyph points: rotating (2px, 2px)
   by the same 45deg resolves to straight down, and the scaleX outside it does
   not touch that - it only scales x, and the nudge is purely vertical by the
   time it gets there. Contact rotates the other way and restates this for its
   own angle (contact-dark.css). */
.hero-scroll:hover::after,
.hero-scroll:focus-visible::after,
.about-scroll:hover::after,
.about-scroll:focus-visible::after,
.portfolio-scroll:hover::after,
.portfolio-scroll:focus-visible::after,
.contact-scroll:hover::after,
.contact-scroll:focus-visible::after {
    opacity: 1;
    transform: scaleX(var(--chev-stretch)) rotate(45deg) translate(2px, 2px);
}

.hero-scroll:focus-visible,
.about-scroll:focus-visible,
.portfolio-scroll:focus-visible,
.contact-scroll:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

/* ===================================
   Motion preferences
====================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }

    .has-drift .hero-slide img {
        animation: none;
    }

    .hero-scroll::after,
    .about-scroll::after,
    .portfolio-scroll::after,
    .contact-scroll::after {
        transition: none;
    }
}

/* ===================================
   Small screens
====================================== */

@media (max-width: 767px) {
    .hero-scroll {
        bottom: 24px;
    }
}