/* ==========================================================================
   home.css — index.html only
   A single centred column: logo, tagline, contact, social row, portfolio
   button, footer. Accent is crimson (inherited from base.css).
   ========================================================================== */

.page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 100dvh;
    padding: 32px 20px 40px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.logo-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 6px;
    filter:
        drop-shadow(0 0 22px rgba(255, 255, 255, 0.08))
        drop-shadow(0 0 40px var(--accent-glow));
}

.hero-logo {
    display: block;
    width: min(440px, 97vw);
    height: auto;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.tagline {
    margin: 4px 0 22px;
    font-size: clamp(12px, 3vw, 15px);
    letter-spacing: 3px;
    color: var(--fg-dim);
    text-align: center;
}

.contact {
    margin: 0 0 28px;
    padding: 0 12px;
    font-size: clamp(11px, 3vw, 14px);
    letter-spacing: 1px;
    line-height: 1.9;
    color: var(--fg-dim);
    text-align: center;
}

.contact-label {
    display: block;
    margin-bottom: 2px;
}

.contact a {
    display: inline-block;
    margin-top: 2px;
    padding-bottom: 1px;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: 2px;
    text-shadow: 0 0 16px var(--accent-glow);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
    transition:
        border-color var(--speed) var(--ease),
        text-shadow var(--speed) var(--ease);
}

.contact a:hover,
.contact a:active {
    border-bottom-color: var(--accent);
    text-shadow: 0 0 22px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   Social row
   Each button is a white circle with a black glyph; on hover/tap the circle
   fills with that service's brand colour (set per-item via --icon-color)
   and the glyph flips to white.
   -------------------------------------------------------------------------- */

.social-links {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 360px;
    margin: 6px 0 30px;
    padding: 0;
    list-style: none;
}

.social-item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    --icon-color: var(--accent);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --glyph-fill: #111111;
    --note-fill: #ffffff;
    transition:
        transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        background var(--speed) var(--ease);
}

.social-links svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* The Apple Music mark is drawn on a taller viewBox than the others, so it
   needs a little more room to read at the same optical size. */
.social-links .icon-apple svg {
    width: 26px;
    height: 26px;
    overflow: visible;
}

.social-links :is(path, circle, ellipse, rect) {
    transition: fill var(--speed) var(--ease);
}

.social-links a:hover,
.social-links a:active {
    transform: translateY(-3px) scale(1.06);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.4),
        0 0 18px color-mix(in srgb, var(--icon-color) 55%, transparent),
        0 0 2px var(--icon-color);
}

/* Touch devices get the colour fill on tap... */
.social-links a:active {
    background: var(--icon-color);
    --glyph-fill: #ffffff;
    --note-fill: var(--icon-color);
}

/* ...and pointer devices get it on hover, without it sticking after a tap. */
@media (hover: hover) and (pointer: fine) {
    .social-links a:hover,
    .social-links a:focus-visible {
        background: var(--icon-color);
        --glyph-fill: #ffffff;
        --note-fill: var(--icon-color);
    }
}

/* Label under each icon. Hidden on touch, where there's no hover to reveal
   it and the labels would just crowd the row. */
.social-label {
    position: absolute;
    top: 100%;
    margin-top: 9px;
    font-size: 10px;
    letter-spacing: 2px;
    white-space: nowrap;
    color: var(--icon-color);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease),
        transform 0.3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .social-item:hover .social-label,
    .social-links a:focus-visible + .social-label {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Portfolio button
   -------------------------------------------------------------------------- */

.portfolio-link {
    margin: 0 0 22px;
    text-align: center;
}

.portfolio-link a {
    display: inline-block;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg-dim);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    transition:
        color var(--speed) var(--ease),
        border-color var(--speed) var(--ease),
        background var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        transform var(--speed) var(--ease);
}

.portfolio-link a:hover,
.portfolio-link a:active {
    color: var(--fg);
    background: var(--surface-hover);
    border-color: var(--accent);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.4),
        0 0 14px rgba(var(--accent-rgb), 0.25);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .hero-logo {
        width: min(275px, 72vw);
    }

    /* drop-shadow() on a near-viewport-width image can clip into a hard
       rectangular block on some mobile GPUs. Below 768px the filter is
       dropped and the glow is faked with a blurred radial gradient, which
       those GPUs render reliably. */
    .logo-wrap {
        filter: none;
    }

    .logo-wrap::before {
        content: "";
        position: absolute;
        inset: -20px;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--accent-glow) 0%, rgba(var(--accent-rgb), 0) 70%);
        filter: blur(16px);
    }
}

@media (max-width: 480px) {
    .page {
        gap: 4px;
        padding: 24px 16px 32px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }

    .social-links {
        gap: 12px;
    }

    .social-links a {
        width: 42px;
        height: 42px;
    }

    .social-links svg {
        width: 20px;
        height: 20px;
    }
}

/* On short screens (landscape phones) centring pushes the top of the column
   off-screen, so anchor the content to the top instead. */
@media (max-height: 640px) {
    .page {
        justify-content: flex-start;
    }
}