/*==================== HERO — terminal portrait ====================
  Brings two design-lab ideas into the live site's light, brutalist frame:
   - dither lab : 1-bit Bayer portrait + a checkerboard (50% tone) offset shadow
   - ascii lab  : the photograph showing through dense Space Mono glyphs
  The portrait is a dark terminal window (same family as Skills / Projects);
  the look is pure CSS (src/js/portrait.js only fills the glyphs and handles taps).
  Loaded after styles.css so it can re-lay the hero.
=================================================================== */

.home {
    --hp-ink: var(--first-color-dark);
    --hp-cell: 2px;                       /* one dither cell; portrait.js snaps it to device px */
    /* 4 x 4 Bayer threshold map as a 4 px greyscale PNG (from the dither lab) */
    --hp-bayer: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAHUlEQVR42mPgaNdYznDc43kGg8V2iekM3yuuRwAASEQH+SCCbjwAAAAASUVORK5CYII=");
    --hp-lift: 10px;
    --hp-ease: cubic-bezier(.22, 1, .36, 1);
    --hp-std: cubic-bezier(.4, 0, .2, 1);   /* develop: photo cross-fade */
    --hp-out: cubic-bezier(0, 0, .2, 1);    /* develop: letters fade, dots bloom */
}

/* global `span { italic; grey }` in styles.css: not in the hero.
   :where() keeps this at element specificity, so the colour rules below still win;
   it beats the global rule only because this file loads after styles.css. */
:where(.home__data, .portrait) span { font-style: normal; color: inherit; }

/* ---------- dither lift: a 50% checkerboard stands in for a solid offset shadow ---------- */
.hp-lift { position: relative; isolation: isolate; }
.hp-lift::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--hp-lift) calc(var(--hp-lift) * -1) calc(var(--hp-lift) * -1) var(--hp-lift);
    background-image: repeating-conic-gradient(var(--hp-ink) 0 25%, transparent 0 50%);
    background-size: calc(var(--hp-cell) * 2) calc(var(--hp-cell) * 2);
    image-rendering: pixelated;
    pointer-events: none;
}

/* ---------- layout ---------- */
.home .home__content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.4rem;
    align-items: center;
}
.home .home__img { order: 0; justify-self: center; width: min(290px, 76vw); max-width: none; }
.home .home__data { order: 1; grid-column: auto; max-width: 36rem; min-width: 0; padding-right: 0; }
.home .home__social {
    order: 2;
    grid-template-columns: none;
    grid-auto-flow: column;
    justify-content: start;
    gap: .5rem;
    margin-top: -1rem;
}

@media screen and (min-width: 768px) {
    .home .home__content {
        grid-template-columns: max-content minmax(0, 1fr) minmax(0, 250px);
        column-gap: 2rem;
        padding-top: 6.5rem;
    }
    .home .home__social { order: 1; grid-auto-flow: row; margin-top: 0; }
    .home .home__data { order: 2; }
    .home .home__img { order: 3; width: 100%; }
}

@media screen and (min-width: 1024px) {
    .home .home__content {
        grid-template-columns: max-content minmax(0, 35rem) minmax(0, 380px);
        column-gap: clamp(3rem, 5vw, 5.5rem);
        justify-content: center;
    }
    .home .home__data { max-width: none; }
}

/* ---------- social: one bordered toolbar on the dithered lift ----------
   Replaces the old floating icons (bounce, scale, shine sweep, soft shadow).
   Hover fills the cell with ink and slides out a mono label. */
.home .home__social {
    --hp-lift: 6px;
    gap: 0;
    align-self: center;
    justify-self: start;
    margin: 0 var(--hp-lift) var(--hp-lift) 0;
    border: 2px solid var(--hp-ink);
    background: var(--body-color);
}
.home .home__social-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: var(--body-color);
    color: var(--hp-ink);
    font-size: 1.2rem;
    overflow: visible;
    box-shadow: none;
    transform: none;
    transition: background .15s ease, color .15s ease;
}
.home .home__social-icon + .home__social-icon { border-top: 1.5px solid hsl(0, 0%, 82%); }
.home .home__social-icon::before { display: none; }          /* old shine sweep */
.home .home__social-icon svg { width: 17px; height: 17px; }
.home .home__social-icon i,
.home .home__social-icon svg { transition: none; }
.home .home__social-icon:hover,
.home .home__social-icon:focus-visible {
    background: var(--hp-ink);
    color: #fff;
    transform: none;
    box-shadow: none;
}
.home .home__social-icon:hover i,
.home .home__social-icon:hover svg { transform: none; }
.home .home__social-icon:active { transform: none; }
.home .home__social-icon:focus-visible { outline: 2px solid var(--hp-ink); outline-offset: 2px; z-index: 1; }

/* the label: a small ink tag that slides out beside the cell */
.home .home__social-icon::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    padding: .25rem .45rem;
    background: var(--hp-ink);
    color: #fff;
    font: 700 .7rem/1 var(--mono-font);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity .15s ease, transform .2s var(--hp-ease);
}
@media (hover: hover) and (pointer: fine) {
    .home .home__social-icon:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.home .home__social-icon:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* phones: the strip runs horizontally under the buttons, no labels */
@media screen and (max-width: 767px) {
    .home .home__social { margin-top: -.6rem; }
    .home .home__social-icon + .home__social-icon { border-top: 0; border-left: 1.5px solid hsl(0, 0%, 82%); }
    .home .home__social-icon::after { display: none; }
}

/* ---------- copy ---------- */
/* the typed line is the hero's heading */
/* inline flow, so the blinking cursor always follows the last typed letter */
.home .home__role {
    display: block;
    margin: 0 0 1.4rem;
    min-height: 2.6rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.25;
    color: var(--title-color);
}
/* Space Mono centres ">" on cap height (.35em); the line is mostly lowercase
   (x-height centre .25em), so drop it .1em to sit centred on the letters */
.home__role .home__caret { position: relative; top: .1em; color: hsl(0, 0%, 60%); margin-right: .35em; }
.home .home__role #text {
    display: inline;
    font-family: var(--mono-font);
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0;
    min-height: 0;
    color: var(--title-color);
}
.home .home__role .console-underscore {
    display: inline;
    font-size: inherit;
    min-height: 0;
    color: var(--title-color);
}

.home .home__description {
    font-size: .95rem;
    line-height: 1.75;
    color: hsl(0, 0%, 22%);
    max-width: 60ch;
    margin-bottom: 2rem;
}

/* ---------- buttons: ink face over a dithered lift ---------- */
.home__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; }
.hbtn {
    --hp-lift: 6px;
    display: inline-block;
    margin: 0 var(--hp-lift) var(--hp-lift) 0;
    text-decoration: none;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
}
.hbtn--ghost { color: var(--hp-ink); }
.hbtn__face {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: 0 1.3rem;
    font-family: var(--mono-font);
    font-weight: 700;
    font-size: .88rem;
    border: 2px solid var(--hp-ink);
    background: var(--hp-ink);
    color: inherit;
    transition: transform .16s var(--hp-ease);
}
.home .hbtn--ghost .hbtn__face { background: var(--body-color); }
.hbtn__face i { font-size: 1.1rem; }
@media (hover: hover) and (pointer: fine) {
    .hbtn:hover .hbtn__face { transform: translate(-2px, -2px); }
}
.hbtn:active .hbtn__face { transform: translate(var(--hp-lift), var(--hp-lift)); transition-duration: 60ms; }
.hbtn:focus-visible { outline: none; }
.hbtn:focus-visible .hbtn__face { outline: 2px solid var(--hp-ink); outline-offset: 4px; }

/* ---------- the portrait window ---------- */
.portrait { margin: 0; }
.portrait__frame {
    display: block;
    margin: 0 var(--hp-lift) var(--hp-lift) 0;
    animation: hp-in .7s var(--hp-ease) both;   /* window + its dithered shadow move as one */
}
.portrait__win {
    container-type: inline-size;   /* caption adapts to the card, not the viewport */
    background: #111;
    border: 2px solid var(--hp-ink);
    font-family: var(--mono-font);
    color: #d0d0d0;
}
@keyframes hp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.portrait__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    background: #1a1a1a;
    border-bottom: 1px solid #353535;
    font-size: .7rem;
    line-height: 1;
    white-space: nowrap;
}
/* window buttons: same traffic lights as the Skills terminal */
.portrait__dots { display: inline-flex; gap: .4rem; flex: none; }
.portrait__dots i { width: .66rem; height: .66rem; border-radius: 50%; background: #4e4e4e; display: block; }
.portrait__dots i:nth-child(1) { background: #ff5f56; }
.portrait__dots i:nth-child(2) { background: #febc2e; }
.portrait__dots i:nth-child(3) { background: #28c840; }
.portrait .portrait__name { color: #f2f2f2; font-weight: 700; margin-left: .2rem; }

/* ---------- the portrait: 1-bit dots for the light, ascii for the dark ----------
   Two layers of the same photograph, both pure CSS (no pixel reads, so it works
   from file:// too):
     .portrait__chars : dense Space Mono glyphs, the photo showing through them
                        (background-clip: text), from the ascii lab
     .portrait__bits  : true ordered dither (Bayer map averaged in at 50%, then an
                        extreme contrast filter), from the dither lab
   The dots sit on top with mix-blend-mode: lighten, so the lit face reads as dots
   and the backdrop, hair and suit (where the dither drops out) fill with letters.
   Hover, or tap/Enter on the button, develops it into the original photograph:
   the letters fade, the dots bloom as the exposure lifts, then the photo comes up
   through them (.portrait__photo). Leaving runs it backwards. Opacity does most of
   the work; the dither's contrast is never animated (mid-contrast shows the raw
   Bayer grid as a screen door over the black). */
.portrait__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    overflow: hidden;
    isolation: isolate;
    background: #111;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.custom-cursor .portrait__stage { cursor: none; }
.portrait__stage:focus-visible { outline: 2px solid #f2f2f2; outline-offset: -4px; }

.portrait__chars,
.portrait__bits,
.portrait__photo {
    position: absolute;
    inset: 0;
    display: block;
}

.portrait__chars {
    margin: 0;
    font: 700 8px/8px var(--mono-font);
    letter-spacing: 0;
    white-space: pre;
    text-align: left;
    overflow: hidden;
    color: transparent;
    background: url("../img/erennn.jpg") 50% 18% / cover no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    filter: grayscale(1) brightness(3.1) contrast(1.05);
    opacity: .6;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 550ms var(--hp-out) 350ms;            /* back in last */
}

.portrait__bits {
    overflow: hidden;
    mix-blend-mode: lighten;
    filter: contrast(120);
}
.portrait__bits::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hp-bayer) 0 0 / calc(var(--hp-cell) * 4) calc(var(--hp-cell) * 4);
    image-rendering: pixelated;
    opacity: .5;
    pointer-events: none;
}
.portrait__bits img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    /* pushes the dark studio backdrop to pure black so only the light dithers */
    filter: grayscale(1) brightness(1.6) contrast(1.4);
    transition: filter 600ms var(--hp-std) 150ms;
}

.portrait__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    filter: grayscale(1) brightness(1.12) contrast(1.02);
    opacity: 0;
    transition: opacity 600ms var(--hp-std);                  /* goes first on the way back */
}

/* developed (about 1.1 s): letters out, dots bloom, photo up through them */
.portrait__stage[aria-pressed="true"] .portrait__chars { opacity: 0; transition: opacity 450ms var(--hp-out); }
.portrait__stage[aria-pressed="true"] .portrait__bits img { filter: grayscale(1) brightness(2.3) contrast(1.4); transition: filter 600ms var(--hp-out); }
.portrait__stage[aria-pressed="true"] .portrait__photo { opacity: 1; transition: opacity 850ms var(--hp-std) 250ms; }
@media (hover: hover) and (pointer: fine) {
    .portrait__stage:hover .portrait__chars { opacity: 0; transition: opacity 450ms var(--hp-out); }
    .portrait__stage:hover .portrait__bits img { filter: grayscale(1) brightness(2.3) contrast(1.4); transition: filter 600ms var(--hp-out); }
    .portrait__stage:hover .portrait__photo { opacity: 1; transition: opacity 850ms var(--hp-std) 250ms; }
}

.portrait__cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .7rem .6rem;
    border-top: 1px solid #353535;
    font-size: .7rem;
    white-space: nowrap;
}
.portrait .portrait__where { color: #d0d0d0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.portrait .portrait__hint { color: #8c8c8c; }
.portrait__hint--touch { display: none; }
@media (hover: none), (pointer: coarse) {
    .portrait__hint--mouse { display: none; }
    .portrait__hint--touch { display: inline; }
}

@container (max-width: 260px) {
    .portrait__bar, .portrait__cap { font-size: .64rem; }
}

@media (prefers-reduced-motion: reduce) {
    .portrait__frame { animation: none; }
    .hbtn__face,
    .portrait__stage .portrait__chars,
    .portrait__stage .portrait__bits img,
    .portrait__stage .portrait__photo { transition: none !important; }
}