/* ─────────────────────────────────────────────────────────────────────────
   Public site — Home / landing showcase
   A dynamic landing built around four "disciplines": Web Design, Modelação 3D,
   Design Gráfico and Impressão 3D. Replaces the old arched portfolio cards.

   Sections, top → bottom:
     · .home-hero        — animated aurora backdrop + kinetic rotating word
     · .home-disciplines — interactive expanding panels (one per area)
     · .home-marquee     — auto-scrolling ticker of real portfolio thumbnails
     · .home-approach    — three-step "how we work" band (scroll-revealed)

   Everything is scoped under the `.home-showcase` body class and consumes the
   tokens declared in branding-andmore-design.css. Motion is layered as
   progressive enhancement: the page is fully legible (and all links reachable)
   without JS, and continuous motion is suppressed under prefers-reduced-motion.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Scroll-reveal primitive ────────────────────────────────────────────────
   Elements tagged [data-reveal] start hidden; home.js adds .is-visible when
   they scroll into view, which fires the build-up keyframe. Staggering is done
   with an inline --reveal-delay custom property set per element.

   This is an ANIMATION (not a transition) on purpose: several revealed elements
   (.home-panel, .home-step) have their own hover `transition`, and a shared
   `transition` for the reveal would collide with it. Keyframes keep the two
   independent, so the panel hover stays smooth. */
.home-showcase [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
}
.home-showcase [data-reveal].is-visible {
    animation: home-reveal .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s) both;
}
@keyframes home-reveal {
    from { opacity: 0; transform: translateY(28px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
/* Gentler variant used under reduced motion — less travel, no scale. */
@keyframes home-reveal-soft {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
.home-showcase .home-hero {
    position: relative;
    overflow: hidden;
    min-height: min(92vh, 820px);
    display: flex;
    align-items: center;
    padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 8vw, 6rem);
    isolation: isolate;
}

/* Two slow-drifting blurred "blobs" of brand light. Transform-only animation
   keeps it on the compositor. */
.home-showcase .home-hero__aurora {
    position: absolute;
    inset: -20% -10%;
    z-index: -2;
    pointer-events: none;
}
.home-showcase .home-hero__aurora::before,
.home-showcase .home-hero__aurora::after {
    content: "";
    position: absolute;
    width: 55vw;
    height: 55vw;
    max-width: 760px;
    max-height: 760px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
}
.home-showcase .home-hero__aurora::before {
    top: -8%;
    right: 2%;
    background: radial-gradient(circle at 50% 50%,
        rgba(201, 169, 110, .40) 0%, rgba(201, 169, 110, 0) 68%);
    animation: home-drift-a 17s ease-in-out infinite alternate;
}
.home-showcase .home-hero__aurora::after {
    bottom: -14%;
    left: -6%;
    background: radial-gradient(circle at 50% 50%,
        rgba(140, 158, 224, .30) 0%, rgba(140, 158, 224, 0) 68%);
    animation: home-drift-b 21s ease-in-out infinite alternate;
}
@keyframes home-drift-a {
    from { transform: translate3d(0, 0, 0)        scale(1);   }
    to   { transform: translate3d(-6%, 7%, 0)     scale(1.18);}
}
@keyframes home-drift-b {
    from { transform: translate3d(0, 0, 0)        scale(1.1); }
    to   { transform: translate3d(8%, -6%, 0)     scale(.92); }
}

/* Faint dotted grid laid over the body colour, masked to fade at the edges. */
.home-showcase .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(203, 191, 176, .14) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 42%, #000 35%, transparent 78%);
    opacity: .6;
    pointer-events: none;
}

.home-showcase .home-hero__inner {
    max-width: 60rem;
}
.home-showcase .home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--am-font-sub, sans-serif);
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    color: var(--am-text-muted, #888);
    margin-bottom: 1.4rem;
    padding: .35rem .9rem;
    border: 1px solid var(--am-border, rgba(203, 191, 176, .15));
    border-radius: var(--am-radius-pill, 999px);
    background: color-mix(in srgb, var(--am-bg, #161c18) 70%, transparent);
}
.home-showcase .home-hero__eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--am-photo-gold, #C9A96E);
    box-shadow: 0 0 0 0 rgba(201, 169, 110, .7);
    animation: home-pulse 2.4s ease-out infinite;
}
@keyframes home-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201, 169, 110, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(201, 169, 110, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0); }
}

.home-showcase .home-hero__title {
    font-family: var(--am-font-body, sans-serif);
    font-weight: 200;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    line-height: 1.04;
    letter-spacing: -.01em;
    margin: 0 0 1.4rem;
    color: var(--am-base, #fff);
}

/* Kinetic rotating word. inline-grid stacks every word in one cell so the box
   sizes to the widest term — no layout shift as words swap. */
.home-showcase .home-rotator {
    display: inline-grid;
    vertical-align: bottom;
    perspective: 700px;
    font-family: var(--am-font-heading, serif);
    font-style: italic;
    font-weight: 400;
    color: var(--am-photo-gold, #C9A96E);
}
.home-showcase .home-rotator > span {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(.55em) rotateX(-40deg);
    transform-origin: bottom center;
    transition:
        opacity   .55s ease,
        transform .55s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
    white-space: nowrap;
}
.home-showcase .home-rotator > span.is-active {
    opacity: 1;
    transform: none;
}
.home-showcase .home-rotator > span.is-leaving {
    opacity: 0;
    transform: translateY(-.55em) rotateX(40deg);
}

.home-showcase .home-hero__lead {
    max-width: 46ch;
    color: var(--am-text, #ccc);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.7;
    margin: 0 0 2.2rem;
}

.home-showcase .home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Primary / ghost buttons used across the landing. Local so the home page
   reads consistently regardless of Bootstrap button defaults. */
.home-showcase .home-btn {
    --_bg: var(--am-base, #E1DFDB);
    --_fg: var(--am-contrast, #1a1713);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--am-font-sub, sans-serif);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .85rem 1.7rem;
    border-radius: var(--am-radius-pill, 999px);
    border: 1px solid var(--_bg);
    background: var(--_bg);
    color: var(--_fg) !important;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease,
                background .25s ease, color .25s ease, border-color .25s ease;
}
.home-showcase .home-btn i { transition: transform .25s ease; }
.home-showcase .home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
}
.home-showcase .home-btn:hover i { transform: translateX(3px); }
.home-showcase .home-btn--ghost {
    --_bg: transparent;
    --_fg: var(--am-text, #cbbfb0);
    border-color: var(--am-border, rgba(203, 191, 176, .3));
}
.home-showcase .home-btn--ghost:hover {
    --_fg: var(--am-base, #fff);
    border-color: var(--am-base, #fff);
}

/* Scroll cue pinned to the hero floor. */
.home-showcase .home-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    font-family: var(--am-font-sub, sans-serif);
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--am-text-muted, #888);
    text-decoration: none;
}
.home-showcase .home-hero__scroll i { font-size: 1.1rem; animation: home-bob 2.2s ease-in-out infinite; }
@keyframes home-bob {
    0%, 100% { transform: translateY(0);    opacity: .6; }
    50%      { transform: translateY(5px);  opacity: 1;  }
}

/* ════════════════════════════════════════════════════════════════════════
   ENTRANCE — on-load assembly
   Hero pieces fall / rise into place in a quick stagger, performing the act of
   composition — the headline drops from above, everything else settles up from
   below. Each element's RESTING state is fully visible, so if animations are
   off (or reduced-motion is set) nothing is ever stuck hidden.
   The easing finishes just past the target (control point > 1) for a subtle
   "land and settle" feel.
   ════════════════════════════════════════════════════════════════════════ */
@keyframes home-assemble {
    from { opacity: 0; transform: translateY(var(--assemble-from, 24px)); }
}
/* Variant for the scroll cue, which must keep its translateX(-50%) centring. */
@keyframes home-assemble-cue {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0);    }
}
@keyframes home-fade { from { opacity: 0; } }

.home-showcase .home-hero__aurora { animation: home-fade 1.6s ease both; }

.home-showcase .home-hero__eyebrow,
.home-showcase .home-hero__title,
.home-showcase .home-hero__lead,
.home-showcase .home-hero__cta .home-btn {
    animation: home-assemble .85s cubic-bezier(.18, .7, .3, 1.12) backwards;
}
.home-showcase .home-hero__eyebrow       { animation-delay: .10s; --assemble-from: 16px;  }
.home-showcase .home-hero__title         { animation-delay: .22s; --assemble-from: -18px; } /* falls from above */
.home-showcase .home-hero__lead          { animation-delay: .44s; --assemble-from: 22px;  }
.home-showcase .home-hero__cta .home-btn { --assemble-from: 20px; }
.home-showcase .home-hero__cta .home-btn:nth-child(1) { animation-delay: .56s; }
.home-showcase .home-hero__cta .home-btn:nth-child(2) { animation-delay: .66s; }
.home-showcase .home-hero__scroll {
    animation: home-assemble-cue .8s cubic-bezier(.18, .7, .3, 1.12) .9s backwards;
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION HEADERS (shared)
   ════════════════════════════════════════════════════════════════════════ */
.home-showcase .home-section {
    padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}
.home-showcase .home-section__head {
    max-width: 52rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.home-showcase .home-section__eyebrow {
    font-family: var(--am-font-sub, sans-serif);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: .72rem;
    color: var(--am-photo-gold, #C9A96E);
    margin-bottom: .7rem;
}
.home-showcase .home-section__title {
    font-family: var(--am-font-heading, serif);
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    color: var(--am-base, #fff);
    margin: 0 0 .8rem;
}
.home-showcase .home-section__lead {
    color: var(--am-text, #ccc);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 50ch;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   DISCIPLINES — expanding panels
   Desktop: a row of panels; hover/focus expands one and reveals its copy.
   Mobile: panels stack into full, always-open cards.
   ════════════════════════════════════════════════════════════════════════ */
.home-showcase .home-panels {
    display: flex;
    gap: 1rem;
    height: clamp(360px, 56vh, 560px);
}
.home-showcase .home-panel {
    position: relative;
    flex: 1 1 0;
    overflow: hidden;
    border-radius: var(--am-radius-lg, 12px);
    border: 1px solid var(--am-border, rgba(203, 191, 176, .15));
    text-decoration: none;
    color: var(--am-text, #ccc);
    background: var(--am-bg-card, #1c2320);
    transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1),
                border-color .5s ease, box-shadow .5s ease;
    will-change: flex-grow;
}
.home-showcase .home-panel:hover,
.home-showcase .home-panel:focus-visible {
    flex-grow: 2.8;
    outline: none;
    border-color: color-mix(in srgb, var(--accent, #C9A96E) 60%, transparent);
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8),
                0 0 70px -30px var(--accent, #C9A96E);
}

/* Image / gradient backdrop. Sits behind a tinted scrim so text stays legible. */
.home-showcase .home-panel__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--panel-img, none);
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: grayscale(.5) brightness(.5);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1),
                filter .6s ease;
}
.home-showcase .home-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent, #C9A96E) 14%, transparent) 0%,
        rgba(12, 15, 13, .35) 42%,
        rgba(12, 15, 13, .92) 100%);
    transition: background .6s ease;
}
.home-showcase .home-panel:hover .home-panel__bg,
.home-showcase .home-panel:focus-visible .home-panel__bg {
    transform: scale(1.12);
    filter: grayscale(0) brightness(.74);
}

/* When there's no portfolio image, paint a branded diagonal gradient instead. */
.home-showcase .home-panel--noimg .home-panel__bg {
    background-image: linear-gradient(150deg,
        color-mix(in srgb, var(--accent, #C9A96E) 38%, var(--am-bg-card, #1c2320)) 0%,
        var(--am-bg, #161c18) 78%);
    filter: none;
}

.home-showcase .home-panel__index {
    position: absolute;
    top: 1.1rem;
    left: 1.2rem;
    z-index: 3;
    font-family: var(--am-font-sub, sans-serif);
    font-size: .72rem;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .55);
}

.home-showcase .home-panel__content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    padding: clamp(1.2rem, 2.4vw, 1.9rem);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.home-showcase .home-panel__icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: .35rem;
    font-size: 1.4rem;
    color: #fff;
    background: color-mix(in srgb, var(--accent, #C9A96E) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #C9A96E) 70%, transparent);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), background .4s ease;
}
.home-showcase .home-panel:hover .home-panel__icon,
.home-showcase .home-panel:focus-visible .home-panel__icon {
    transform: translateY(-2px) scale(1.06);
    background: color-mix(in srgb, var(--accent, #C9A96E) 55%, transparent);
}
.home-showcase .home-panel__name {
    font-family: var(--am-font-heading, serif);
    font-weight: 400;
    font-size: clamp(1.3rem, 1.7vw, 1.7rem);
    line-height: 1.1;
    color: #fff;
    margin: 0;
}

/* Copy that only appears when the panel is expanded. Reserves no height when
   collapsed (max-height + opacity) so the name hugs the panel floor. */
.home-showcase .home-panel__reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1),
                opacity .45s ease .1s;
}
.home-showcase .home-panel:hover .home-panel__reveal,
.home-showcase .home-panel:focus-visible .home-panel__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}
.home-showcase .home-panel__reveal > div { overflow: hidden; }
.home-showcase .home-panel__desc {
    color: rgba(231, 223, 211, .9);
    font-size: .92rem;
    line-height: 1.6;
    margin: .5rem 0 .9rem;
    max-width: 34ch;
}
.home-showcase .home-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--am-font-sub, sans-serif);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.home-showcase .home-panel__cta i { transition: transform .3s ease; }
.home-showcase .home-panel:hover .home-panel__cta i,
.home-showcase .home-panel:focus-visible .home-panel__cta i { transform: translateX(4px); }

/* Top accent rule that widens as the panel opens. */
.home-showcase .home-panel__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(1.2rem, 2.4vw, 1.9rem);
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent, #C9A96E);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.home-showcase .home-panel:hover .home-panel__content::before,
.home-showcase .home-panel:focus-visible .home-panel__content::before { width: 64px; }

/* ════════════════════════════════════════════════════════════════════════
   APPROACH — three steps
   ════════════════════════════════════════════════════════════════════════ */
.home-showcase .home-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    counter-reset: step;
}
.home-showcase .home-step {
    position: relative;
    padding: 1.8rem;
    border-radius: var(--am-radius-lg, 12px);
    border: 1px solid var(--am-border, rgba(203, 191, 176, .15));
    background: var(--am-bg-card, #1c2320);
    transition: transform .4s ease, border-color .4s ease;
}
.home-showcase .home-step:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--am-photo-gold, #C9A96E) 45%, transparent);
}
.home-showcase .home-step__num {
    counter-increment: step;
    font-family: var(--am-font-heading, serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--am-photo-gold, #C9A96E);
    opacity: .85;
}
.home-showcase .home-step__num::before { content: "0" counter(step); }
.home-showcase .home-step__title {
    font-family: var(--am-font-sub, sans-serif);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .95rem;
    color: var(--am-base, #fff);
    margin: .9rem 0 .5rem;
}
.home-showcase .home-step__desc {
    color: var(--am-text-muted, #888);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .home-showcase .home-panels {
        flex-direction: column;
        height: auto;
        gap: 1rem;
    }
    /* On stacked cards every panel is "open": reveal copy, full-bleed image. */
    .home-showcase .home-panel {
        flex: none;
        min-height: 230px;
    }
    .home-showcase .home-panel__bg { filter: grayscale(0) brightness(.62); transform: scale(1.04); }
    .home-showcase .home-panel__reveal { grid-template-rows: 1fr; opacity: 1; }
    .home-showcase .home-steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .home-showcase .home-hero__cta { gap: .7rem; }
    .home-showcase .home-btn { padding: .75rem 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill continuous/looping animation, keep content visible
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Suppress only CONTINUOUS / looping motion (drift, pulse, bob). The brief
       one-shot load entrance is an explicit brand moment, so it still plays —
       but the overshoot is dropped so it reads as a gentle settle, not a bounce. */
    .home-showcase .home-hero__aurora,
    .home-showcase .home-hero__aurora::before,
    .home-showcase .home-hero__aurora::after,
    .home-showcase .home-hero__eyebrow .dot,
    .home-showcase .home-hero__scroll i {
        animation: none !important;
    }
    .home-showcase .home-hero__eyebrow,
    .home-showcase .home-hero__title,
    .home-showcase .home-hero__lead,
    .home-showcase .home-hero__cta .home-btn,
    .home-showcase .home-hero__scroll {
        animation-timing-function: ease-out !important;
    }
    /* Scroll-reveal still plays, but with the gentler keyframe (small fade-up,
       no scale). It's a one-shot per element — not the continuous motion that
       reduce-motion targets. Crucially this no longer touches `transition`, so
       the panels' hover expansion stays smooth. */
    .home-showcase [data-reveal].is-visible {
        animation-name: home-reveal-soft !important;
        animation-timing-function: ease-out !important;
    }
    .home-showcase .home-rotator > span {
        transition: opacity .3s ease !important;
        transform: none !important;
    }
}