/* ---------- 1. Settings: tweak the design from here ---------- */
:root {
    --hero-overlay-opacity: 30%; /* light overlay on the hero image: 0% = none, 100% = solid */

    /* Colours of the homepage texts and logo. They are fixed (no automatic light/dark switch):
       pick the colour that reads best on your hero image. Any CSS colour works. */
    --hero-title-color: #fefcf6;            /* "Alexis Poupardin" (#hero-title) */
    --hero-text-color: #fefcf6;             /* "GIS portfolio" (.home-hero-text) */
    --hero-text-shadow: 0 2px 16px rgb(0 0 0 / 0.9);  /* shadow behind those two texts; "none" = no shadow */
    --hero-logo-color: #fefcf6;             /* H&B logo (.logo-HB) */
    --hero-header-title-color: #fefcf6;     /* "Cartographic Studio" (.title) */
    --hero-motto-color: #fefcf6;            /* "A map is worth a thousand words" (.motto) */

    --appear-duration: 2s;       /* longer = smoother entrance (logo, headings, nav...) */

    /* Hero title + hero text: they zoom in from below, one after the other */
    --hero-duration: 1s;         /* length of each of the two hero animations */
    --hero-rise: 3rem;           /* how far below its final place each one starts */
    --hero-start-scale: 0.85;    /* size at the start (1 = no zoom, only the rise) */
    --delay-hero-title: 0.3s;    /* the title starts first... */
    --delay-hero-text: 0.5s;     /* ...the text 1 s later (title start + 1 s). For "text only
                                    once the title is finished", use calc(var(--delay-hero-title) + var(--hero-duration)) */

    /* Everything else waits until the hero text is fully displayed, then keeps the same order as before */
    --delay-after-hero: calc(var(--delay-hero-text) + var(--hero-duration));
    --delay-logo: var(--delay-after-hero);                     /* staggered entrance... */
    --delay-headings: calc(var(--delay-after-hero) + 0.4s);
    --delay-nav: calc(var(--delay-after-hero) + 0.9s);         /* ...nav, language switch AND bottom arrow together */
    --delay-compass-anim: calc(var(--delay-nav) + var(--appear-duration)); /* compass internals wait until every entrance animation is done */

    --map-tilt: 3deg;            /* unfolding map: tilt of the folded map (straightens while it opens) */
    --map-skew: 1deg;            /* unfolding map: slight skew of the two outer panels while folded */
    --map-radius: 0.35rem;       /* unfolding map: rounded corners of the open map */
    /* Durations (2 s unfolding, 1.5 s before the borders vanish...) are set at the top of index.js */

    --needle-opacity: 90%;   /* transparency of needle_1 and needle_2 */
}


/* ---------- 2. Entrance animations ---------- */
@keyframes appear {
    from { opacity: 0; transform: translateY(-0.75rem); }
    to   { opacity: 1; transform: none; }
}
@keyframes fade-in {             /* opacity only: the arrow already uses `translate` to centre itself */
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Hero title + text: fade in while rising from below and growing slightly (CSS-only version of
   the Framer Motion "hidden -> visible" variants: opacity 0 -> 1 and y 20 -> 0) */
@keyframes zoom-in-from-below {
    from { opacity: 0; transform: translateY(var(--hero-rise)) scale(var(--hero-start-scale)); }
    to   { opacity: 1; transform: none; }
}

/* `backwards` keeps each element hidden during its delay, then lets go of it once the
   animation is over. (With `both` the nav would stay "animated" forever, and the blur of its
   glass layer and of its sub menu would silently stop working.) */
body.homepage .logo-HB,
body.homepage .main-headings,
body.homepage .motto,
body.homepage .language-switcher,
body.homepage .navigation > nav > ul {
        animation: appear var(--appear-duration) var(--ease-smooth) backwards;
}
body.homepage .logo-HB                 { animation-delay: var(--delay-logo); }
body.homepage .main-headings           { animation-delay: var(--delay-headings); }
body.homepage .motto                   { animation-delay: calc(var(--delay-headings) + 0.15s); }
body.homepage .language-switcher,
body.homepage .navigation > nav > ul   { animation-delay: var(--delay-nav); }

/* Hero title, then hero text. They play on page load (not on scroll): a CSS animation starts
   by itself as soon as the element is rendered. `backwards` keeps them hidden during their delay. */
body.homepage #hero-title,
body.homepage .home-hero-text {
    animation: zoom-in-from-below var(--hero-duration) var(--ease-smooth) backwards;
}
body.homepage #hero-title        { animation-delay: var(--delay-hero-title); }
body.homepage .home-hero-text    { animation-delay: var(--delay-hero-text); }


/* ---------- 3. Header over the hero ---------- */
body.homepage header#top {
    position: absolute;
    top: var(--header-top);
    left: var(--header-left);
    z-index: 10;
    width: auto;
    padding: 0;
    margin: 0;
    scroll-margin-top: var(--header-top);
}

/* Colours of the logo, title and motto on the homepage: they come from the --hero-* variables
   in section 1. `body.homepage` makes these rules more specific than the ones of common.css
   (which colour them with --interface-ink on the other pages), whatever the loading order. */
body.homepage .main-headings .title {
    color: var(--hero-header-title-color);
}
body.homepage .motto {
    color: var(--hero-motto-color);
}

/* The logo is an SVG loaded with <img>, so its colour cannot be changed with `color`.
   Trick: the SVG is used as a mask over a plain coloured background, and the <img> picture
   itself is pushed out of its box (object-position) so only the coloured silhouette is left. */
body.homepage .logo-HB img {
    background-color: var(--hero-logo-color);
    -webkit-mask: url("./LOGOS/MY_LOGO/Logo_HB.svg") center / contain no-repeat;
    mask: url("./LOGOS/MY_LOGO/Logo_HB.svg") center / contain no-repeat;
    object-fit: none;
    object-position: -9999px 0;
    filter: none;
    transition: background-color 0.3s var(--ease-smooth);
}


/* ---------- 4. Section 1: hero (full screen) ---------- */
/* common.css gives <main> padding and centres its children: reset it for the full-bleed sections */
.homepage-main {
    width: 100%;
    padding: 0;
    align-items: stretch;
}
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;          /* accounts for mobile browser bars */
    padding: 7rem 1.5rem 6.5rem; /* keeps text clear of the header (top) and the arrow (bottom) */
    overflow: hidden;
    background: #000;            /* shown while the image loads */
    color: var(--color-ivory);
}
.hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;           /* fills the screen without distortion */
}

/* Light warm overlay on the hero image (same colour as --color-bg, opacity set in section 1).
   An <img> cannot hold an overlay itself, so the section's ::before layer sits right above it. */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;                  /* above the image (0); the dark gradient below (::after) comes later, so it stays on top */
    pointer-events: none;
    background: color-mix(in srgb, var(--color-bg) var(--hero-overlay-opacity), transparent);
}

/* Soft dark gradient: keeps header text and arrow readable */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 35%, transparent 65%, rgb(0 0 0 / 0.5));
}

.home-hero {
    position: relative;
    z-index: 2;                  /* above the image and the gradient */
    max-width: 760px;
    text-align: center;
}
.home-hero h1 {
    margin: 0.4rem 0 1rem;
    font-size: clamp(1.9rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;          /* avoids one lonely word on the last line */
}

/* Colours come from the --hero-* variables in section 1 (no more .is-on-dark switch) */
#hero-title {
    color: var(--hero-title-color);
}
.home-hero-text {
    color: var(--hero-text-color);
}
#hero-title,
.home-hero-text {
    text-shadow: var(--hero-text-shadow);
}

.home-hero-text {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(1rem, 2vw, 1.3rem);
}


/* ---------- 5. Scroll compass (bottom middle of the hero) ---------- */
.compass-hero {
    position: absolute;
    left: 50%;
    bottom: max(2rem, env(safe-area-inset-bottom));
    translate: -50% 0;
    z-index: 2;
    display: block;
    width: 4.5rem;
    color: #fefcf6;
    text-decoration: none;
    animation: fade-in var(--appear-duration) var(--ease-smooth) var(--delay-nav) both;
}

.compass-hero-icon {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transition: transform 0.25s var(--ease-smooth);
}
@media (hover: hover) {
    .compass-hero-icon:hover {
        transform: translateY(0.35rem);
    }
}
.compass-hero .outer-circle,
.compass-hero .inner-dot {
    fill: none;
    stroke: #fefcf6;
}
.compass-hero .inner-dot {
    fill: #fefcf6;
}
.compass-hero .small-compass-star,
.compass-hero .big-compass-star {
    fill: #fefcf6;
    stroke: none;
}
.compass-hero .needle-1,
.compass-hero .needle-2 {
    opacity: var(--needle-opacity);
    stroke: #fefcf6;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.compass-hero .needle-1 { fill: #283138; }
.compass-hero .needle-2 { fill: #fefcf6; }
.compass-hero .motion-left,
.compass-hero .motion-right,
.compass-hero .motion-middle {
    fill: #fefcf6;
    stroke: none;
}

/* Needles turn around inner_dot (cx 404.57, cy 404.57). 10s loop. */
.compass-hero .compass-needles {
    transform-box: view-box;
    transform-origin: 404.56732px 404.56744px;
    animation: compass-point-down 10s ease-in-out var(--delay-compass-anim) infinite both;
}
@keyframes compass-point-down {
    0%                { transform: rotate(0deg); }
    30%, 80%          { transform: rotate(180.75deg); } /* 3s down, hold until 8s */
    100%              { transform: rotate(0deg); }      /* 8–10s: return */
}

/* Fade only: hidden → in (1s) → out (1s) before the loop restarts. */
.compass-hero .compass-motion {
    opacity: 0;
    animation: compass-motion-fade 10s ease-in-out var(--delay-compass-anim) infinite both;
}
@keyframes compass-motion-fade {
    0%, 30%  { opacity: 0; }   /* 0–3s: hidden while the needle turns */
    40%, 80% { opacity: 1; }   /* 4s: faded in; stay until return starts */
    90%, 100% { opacity: 0; }  /* 8–9s: fade out, already gone at restart */
}

/* Three visible up-and-down bumps (5–8s). */
.compass-hero .compass-motion-bump {
    animation: compass-motion-bump 10s linear var(--delay-compass-anim) infinite both;
}
@keyframes compass-motion-bump {
    0%, 50%   { transform: translateY(0); }
    53%       { transform: translateY(-1.35rem); }
    56%       { transform: translateY(1.35rem); }
    59%       { transform: translateY(-1.35rem); }
    62%       { transform: translateY(1.35rem); }
    65%       { transform: translateY(-1.35rem); }
    68%       { transform: translateY(1.35rem); }
    72%, 100% { transform: translateY(0); }
}

.text-bottom-button {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.75rem;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}


/* ---------- 6. Section 2: unfolding-map carousel + footer (full screen) ---------- */
.lower-section {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--color-bg);
}
/* Footer: unchanged. Its margin-top: auto (common.css) pins it to the bottom of this screen */

.homepage-carousel {
    --arrow-space: clamp(3rem, 7vw, 5.5rem);   /* width kept free on each side for the arrows */
    /* The map never gets wider than the space between the two arrows (1rem = safety for scrollbars) */
    --display-width: min(calc(100vw - 2 * var(--arrow-space) - 1rem), 65rem);
    --display-height: clamp(28rem, 64vh, 47rem);

    position: relative;
    width: min(100%, 96rem);
    margin: clamp(7rem, 13vh, 10rem) auto 1.25rem;
    overflow-x: clip;            /* no sideways scroll, but shadows can still go up and down */
    isolation: isolate;
    touch-action: pan-y;         /* horizontal swipes belong to the carousel, vertical ones scroll the page */
}

/* The stage: all the maps are stacked here, only the active one is visible */
.carousel-viewport {
    position: relative;
    height: var(--display-height);
}
.carousel-track {
    position: relative;
    height: 100%;
}
.carousel-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
    pointer-events: none;
}
.carousel-slide.is-active {
    visibility: visible;
    pointer-events: auto;
}

/* The frame takes exactly the size of its image (the <img> inside gives the size) */
.carousel-image-frame {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    line-height: 0;
}

.map-source {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--display-width);
    max-height: var(--display-height);
    border-radius: var(--map-radius);
}


/* ----- Folding map (only when index.js has built the panels: .is-enhanced) -----
   index.js animates ONE number per map, --unfold (0 = folded, 1 = open).
   Everything below is computed from it, like the xDrag value of the Framer Motion version. */
.is-enhanced .carousel-image-frame {
    --unfold: 0;                                                   /* overwritten by index.js */
    --fold: calc(1 - var(--unfold));                               /* 1 = folded, 0 = open */
    --centre: clamp(0, calc((var(--unfold) - 0.5) * 2), 1);        /* centre panel: appears during the 2nd half */

    /* Folded map: tilted and slightly smaller; it straightens and grows while unfolding */
    transform: rotate(calc(var(--fold) * var(--map-tilt)))
               scale(calc(0.9 + 0.1 * var(--unfold)));
}

/* The <img> stays in place (it gives the frame its size) but is invisible while the panels are shown */
.is-enhanced .carousel-slide:not(.is-settled) .map-source {
    opacity: 0;
}

/* Drop shadow around the finished map: fades in when the fold effects fade out */
.carousel-image-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--map-radius);
    box-shadow: 0 1rem 2.5rem rgb(40 49 56 / 0.2);
    opacity: 0;
    transition: opacity var(--borders-fade, 600ms) ease;
}
.carousel-slide.is-borderless .carousel-image-frame::before {
    opacity: 1;
}

/* The 3 panels sit on top of each other, side by side in a 3-column grid */
.map-panels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Each panel shows one third of the image: 300% wide, then moved to the left / centre / right */
.map-panel {
    position: relative;
    background-image: var(--map-image);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-origin: border-box;
    transition: border-color var(--borders-fade, 600ms) ease,
                box-shadow var(--borders-fade, 600ms) ease;
}

/* Crease shading on the left edge of each panel (the 90deg gradient of the original) */
.map-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 30%);
    transition: opacity var(--borders-fade, 600ms) ease;
}

/* Left panel: slides in from the centre column to the left */
.map-panel--left {
    background-position: 0% 0;
    transform-origin: bottom right;
    transform: translateX(calc(var(--fold) * 100%))
               skewY(calc(var(--fold) * var(--map-skew) * -1));
    border-right: 1px solid rgb(255 255 255 / 0.1);          /* thin border */
    border-radius: var(--map-radius) 0 0 var(--map-radius);
}

/* Right panel: slides in from the centre column to the right */
.map-panel--right {
    background-position: 100% 0;
    transform-origin: bottom left;
    transform: translateX(calc(var(--fold) * -100%))
               skewY(calc(var(--fold) * var(--map-skew)));
    border-left: 1px solid rgb(255 255 255 / 0.1);           /* thin border */
    border-radius: 0 var(--map-radius) var(--map-radius) 0;
}

.map-panel--left,
.map-panel--right {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);         /* thin shadow */
}

/* Centre panel: grows from nothing in the 2nd half of the unfolding, and gets brighter */
.map-panel--center {
    background-position: 50% 0;
    transform: scaleX(var(--centre));
    filter: brightness(calc(0.2 + 0.8 * var(--centre)));
}

/* 1.5 s after the unfolding: borders, shadows and crease shading fade away (index.js adds .is-borderless) */
.carousel-slide.is-borderless .map-panel {
    border-color: transparent;
}
.carousel-slide.is-borderless .map-panel--left,
.carousel-slide.is-borderless .map-panel--right {
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0);
}
.carousel-slide.is-borderless .map-panel::before {
    opacity: 0;
}

/* Then (.is-settled) the three panels give way to the plain image: nothing is left over it */
.carousel-slide.is-settled .map-panels {
    visibility: hidden;
}


/* ----- Arrows: in the free space left and right of the map, never over it ----- */
.carousel-control {
    position: absolute;
    top: 0;
    z-index: 4;
    display: flex;
    width: var(--arrow-space);
    height: var(--display-height);
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    color: var(--color-dark, #283138);
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.carousel-control--previous { left: 0; }
.carousel-control--next { right: 0; }

.carousel-control span {
    display: block;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s var(--ease-smooth);
}


@media (hover: hover) {
    .carousel-control--previous:hover span { transform: translateX(-0.4rem); }
    .carousel-control--next:hover span { transform: translateX(0.4rem); }
}

.carousel-control:focus-visible,
.carousel-dot:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 0.3rem;
}


/* ----- Dots: in the flow, under the map ----- */
.carousel-dots {
    position: relative;
    z-index: 5;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

.carousel-dot {
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
    border: 1px solid var(--color-dark, #283138);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform 0.25s var(--ease-smooth),
                background-color 0.25s ease;
}

.carousel-dot.is-active {
    width: 0.95rem;
    height: 0.95rem;
    background: var(--color-dark, #283138);
}

.carousel-dot:not(.is-active):hover {
    transform: scale(1.2);
}


/* ---------- 7. Tablets and phones ---------- */
@media (max-width: 960px) {
    .hero-section { padding-top: 11rem; }

    .homepage-carousel {
        --display-height: clamp(26rem, 60svh, 38rem);
        margin-top: 8.5rem;
    }

}
@media (max-width: 600px) {
    .hero-section { padding-top: 13rem; padding-bottom: 6rem; }   /* the nav can wrap onto 2 rows */

    .homepage-carousel {
        --display-height: clamp(21rem, 52svh, 30rem);
        margin-top: 13rem;
    }
}
@media (max-width: 480px) {
    /* Not enough width beside the compass: stack the text under it */
   .compass-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: auto;
}
.compass-hero-icon { width: 4.5rem; }
.text-bottom-button { position: static; margin: 0; transform: none; }
}


/* ---------- 10. Respect the "reduce motion" system setting ---------- */
/* (The unfolding map handles it in index.js: with this setting, maps open instantly.) */
@media (prefers-reduced-motion: reduce) {
    .compass-hero { animation: none !important; }
    .compass-hero .compass-needles { animation: none !important; }
    .compass-hero .compass-motion { animation: none !important; opacity: 0; }
    .compass-hero .compass-motion-bump { animation: none !important; }

    /* Hero title + text: no rise or zoom, a simple fade instead (same delays, so the order is kept) */
    body.homepage #hero-title,
    body.homepage .home-hero-text { animation-name: fade-in; }
}