/*
 * ============================================================
 * FEARANN ALBA — hero.css
 * ============================================================
 * Styles for the homepage hero section including:
 *   - Full-screen background and gradient overlays
 *   - Drone assembly positioning
 *   - Propeller spin animation
 *   - Drone float animation
 *   - Mouse parallax transition
 *   - Service buttons bar at bottom
 *   - Services grid and cards
 *   - About and CTA sections
 * ============================================================
 */


/*
 * ============================================================
 * HERO — OUTER SECTION
 * ============================================================
 */

.hero {
    /* Full viewport height, relative so children can be
       positioned absolutely inside it */
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;

    /* Flex column so the bottom bar sits at the bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/*
 * ============================================================
 * HERO — BACKGROUND IMAGE
 * ============================================================
 */

.hero__bg {
    /* Fills the whole hero behind everything */
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}


/*
 * ============================================================
 * HERO — GRADIENT OVERLAYS
 * ============================================================
 * Two separate gradients — one from the top, one from the
 * bottom — both fading to black. This gives the cinematic
 * look where the photo bleeds into the pure black of the
 * page above and below.
 */

.hero__gradient {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none; /* Clicks pass through to elements below */
    z-index: 1;
}

.hero__gradient--top {
    top: 0;
    height: 50%;
    background: linear-gradient(
        to bottom,
        #000000 0%,
        rgba(0,0,0,0.6) 40%,
        transparent 100%
    );
}

.hero__gradient--bottom {
    bottom: 0;
    height: 60%;
    background: linear-gradient(
        to top,
        #000000 0%,
        rgba(0,0,0,0.5) 40%,
        transparent 100%
    );
}


/*
 * ============================================================
 * HERO — TITLE
 * ============================================================
 */

.hero__title-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;

    /* Push down from top, clearing the fixed nav bar */
    padding-top: 130px;

    /* Prevent title intercepting mouse events for the
       parallax effect underneath */
    pointer-events: none;
    user-select: none;
}

.hero__title {
    font-size: clamp(3rem, 9vw, 90px);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;

    /* Override the default h1 font-weight from main.css */
    font-weight: 400;
}

.hero__title--light {
    font-weight: 100;
    color: #ffffff;
    padding-right: 0.2em;
}

.hero__title--bold {
    font-weight: 700;
    color: #ffffff;
}


/*
 * ============================================================
 * DRONE ASSEMBLY — DESKTOP
 * ============================================================
 * Positioned absolutely in the centre-right of the hero.
 * The JS moves this wrapper on mousemove.
 * The inner assembly carries the float animation so both
 * effects (parallax + float) work independently.
 */

.drone-wrapper {
    position: absolute;
    z-index: 2;
    pointer-events: none;

    /* Start centred, slightly right (60% from left) */
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);

    /* Smooth parallax response — matches the React prototype */
    transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);

    /* Desktop only */
    display: none;
}

/* Show desktop drone, hide mobile drone on desktop */
@media (min-width: 769px) {
    .drone-wrapper {
        display: block;
    }
    .drone-mobile {
        display: none !important;
    }
}

/* Hide desktop drone, show mobile drone on mobile */
@media (max-width: 768px) {
    .drone-wrapper {
        display: none !important;
    }
    .drone-mobile {
        display: flex;
    }
}

.drone-wrapper .drone-assembly {
    position: relative;
    overflow: visible;
    width: 640px;
    height: 280px;

    /* Float animation on the assembly itself */
    animation: droneFloat 3.5s ease-in-out infinite;
}

.drone__body {
    /* Positioned within the assembly container */
    position: absolute;
    top: 0;
    left: 110px;
    width: 420px;
    height: auto;
    object-fit: contain;
    pointer-events: none;

    /* Strong drop shadow for depth against the landscape */
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8)) brightness(1.1);
}


/*
 * ============================================================
 * DRONE — PROPELLER POSITIONS
 * ============================================================
 * Each propeller is positioned as a percentage of the
 * drone body container (420px wide, 280px tall).
 * Positions carried across exactly from the React prototype.
 */

.drone__prop {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

/* Propeller SVG sizing */
.prop-svg {
    width: 110px;
    height: auto;
    display: block;

    /* Spin animation — alternating direction per prop
       makes it look more realistic */
    animation: propSpin 0.12s linear infinite;
}

/* Reverse spin on alternate props */
.drone__prop--2 .prop-svg,
.drone__prop--4 .prop-svg {
    animation-direction: reverse;
}

/* Propeller 1: Back Left */
.drone__prop--1 {
    top: calc(0px + 5.6% + 0px);  /* 5.6% of assembly height */
    left: calc(110px + 420px * 0.12); /* 12% of drone body width from body left */
}

/* Propeller 2: Back Right */
.drone__prop--2 {
    top: calc(280px * 0.1);
    left: calc(110px + 420px * 0.87);
}

/* Propeller 3: Front Left */
.drone__prop--3 {
    top: calc(280px * 0.262);
    left: calc(110px + 420px * 0.055);
}

/* Propeller 4: Front Right */
.drone__prop--4 {
    top: calc(280px * 0.262);
    left: calc(110px + 420px * 0.93);
}


/*
 * ============================================================
 * DRONE — MOBILE VERSION
 * ============================================================
 * Smaller, static float, no parallax. Shown instead of
 * the desktop version on narrow screens.
 */

.drone-mobile {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    pointer-events: none;
}

.drone-assembly--mobile {
    position: relative;  /* Required since base .drone-assembly no longer sets this */
    width: 280px;
    height: 187px;
}

.drone-assembly--mobile .drone__body {
    left: 0;
    width: 280px;
}

/* Scale propellers down for mobile */
.drone-assembly--mobile .prop-svg {
    width: 73px;
}

/* Adjusted propeller positions for smaller mobile drone */
.drone-assembly--mobile .drone__prop--1 {
    top: calc(187px * 0.116);
    left: calc(280px * 0.14);
}
.drone-assembly--mobile .drone__prop--2 {
    top: calc(187px * 0.116);
    left: calc(280px * 0.86);
}
.drone-assembly--mobile .drone__prop--3 {
    top: calc(187px * 0.332);
    left: calc(280px * 0.055);
}
.drone-assembly--mobile .drone__prop--4 {
    top: calc(187px * 0.332);
    left: calc(280px * 0.945);
}


/*
 * ============================================================
 * ANIMATIONS
 * ============================================================
 */

/*
 * droneFloat — gentle vertical bob
 * The drone rises 12px and falls back over 3.5 seconds
 */
@keyframes droneFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/*
 * propSpin — full rotation
 * Very fast (0.12s per revolution) to simulate real propellers.
 * CSS handles this more efficiently than JS.
 */
@keyframes propSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/*
 * ============================================================
 * HERO — BOTTOM BAR
 * ============================================================
 * Contains the service buttons on the left and the
 * Get In Touch CTA on the right. Sits above the gradients.
 */

.hero__bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 2.5rem 6.0rem;
    gap: 2rem;
}

.hero__services-label {
    display: block;
    margin-bottom: 1rem;

    /* Fix: The global p rule in main.css applies margin-left/right: auto,
       which was pushing this label away from the left edge and out of
       alignment with the buttons beneath it. Resetting those here keeps
       the label pinned to the left, exactly in line with the buttons. */
    margin-left: 0;
    margin-right: 0;

    /* Fix: Bump the font size up from the default .label 0.7rem to match
       the button text size (0.8rem) so they read as the same visual weight. */
    font-size: 0.8rem;
}

.hero__service-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero__cta {
    flex-shrink: 0;
}

/* Stack on mobile */
@media (max-width: 768px) {
    .hero__bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 1.5rem 2.5rem;
    }
    .hero__cta {
        width: 100%;
    }
    .hero__cta .btn {
        width: 100%;
        text-align: center;
    }

    /* Fix: Give the hero title left/right breathing room on mobile.
       Without this the "FEARANN ALBA" text sits uncomfortably close
       to the screen edges at narrow viewport widths. */
    .hero__title-wrap {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}


/*
 * ============================================================
 * ABOUT SECTION
 * ============================================================
 */

.home-about__heading {
    margin: 1rem 0 0;
    font-weight: 100;
}

.home-about__rule {
    margin: 2rem auto;
    width: 80px;
}

.home-about__body {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    text-align: center;
}


/*
 * ============================================================
 * SERVICES GRID
 * ============================================================
 */

.home-services__heading {
    font-weight: 100;
    margin: 1rem 0 3rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px; /* Hair-thin gold-tinted gap between cards */
    background-color: var(--color-border);
}

.service-card {
    background-color: var(--color-bg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: background-color 0.2s ease;
}

.service-card:hover {
    background-color: var(--color-surface);
}

.service-card__title {
    font-size: 1.5rem;
    font-weight: 100;
    margin: 0;
}

.service-card__body {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    flex-grow: 1; /* Pushes the button to the bottom */
    max-width: none;
}

/* Stack to single column on mobile */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}


/*
 * ============================================================
 * CTA STRIP
 * ============================================================
 */

.home-cta__heading {
    font-weight: 100;
    margin-bottom: 2rem;
}

/*
 * ============================================================
 * MOBILE OVERFLOW FIXES
 * ============================================================
 */
@media (max-width: 768px) {

    /* Constrain all buttons on mobile */
    .btn {
        box-sizing: border-box;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    /* Get In Touch button specifically */
    .hero__cta .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Constrain paragraph text */
    .home-about__body {
        max-width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Constrain the about section container */
    .home-about {
        overflow: hidden;
    }

}