/* ── FONTS ── */
@font-face { font-family:'Mattone'; src:url('fonts/Mattone-Regular.woff') format('woff'); font-weight:400; }
@font-face { font-family:'Mattone'; src:url('fonts/Mattone-Bold.woff') format('woff');    font-weight:700; }
@font-face { font-family:'Mattone'; src:url('fonts/Mattone-Black.woff') format('woff');   font-weight:900; }

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; cursor:none !important; }
body { background:#000; color:#fff; font-family:'Mattone',sans-serif; overflow-x:hidden; width:100vw; }
body::-webkit-scrollbar { display:none; }

/* ── CURSOR ── */
.cursor { position:fixed; top:0; left:0; border-radius:50%; background:#fff; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-main     { width:20px; height:20px; transition:width .3s,height .3s; }
.cursor-follow-1 { width:10px; height:10px; }
.cursor-follow-2 { width:5px; height:5px; }
.cursor-main.active { width:30px; height:30px; }

/* ── NAVBAR ── */
#top-face-nav { position:fixed; top:50px; left:50%; transform:translateX(-50%); width:60px; height:60px; z-index:999; display:flex; justify-content:center; align-items:center; }
.face-frame { position:absolute; width:100%; height:auto; opacity:0; transition:opacity .1s; }
.face-frame.active { opacity:1; }
.face-hurt { display:none !important; }
.face-hurt.force-active { display:block !important; opacity:1 !important; }

#left-circle-nav  { position:fixed; top:50px; left:50px;  width:50px; height:50px; z-index:999; pointer-events:none; overflow:hidden; }
#right-circle-nav { position:fixed; top:50px; right:50px; width:50px; height:50px; z-index:999; pointer-events:none; overflow:hidden; }
.rotating-circle  { width:100%; height:100%; max-width:50px; max-height:50px; animation:spin 20s linear infinite; transform-origin:center; will-change:transform; }
@keyframes spin { to { transform:rotate(360deg); } }
.circle-text { font-family:'Mattone',sans-serif; font-size:9.5px; letter-spacing:-.5px; fill:white; }

/* ── HERO ── */
#hero { height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.medium-text { font-size:1.5rem; font-weight:400; }
.giant-text { font-size:12vw; font-weight:700; margin:20px 0; line-height:1; }
.giant-text span { display:inline-block; transition:font-weight .2s; }
.giant-text span:hover { font-weight:400; color:#0A1FD4; }

/* ── BIO ── */
#bio { height:100vh; display:flex; align-items:center; padding:0 5vw; overflow:hidden; }
.bio-text { font-size:3rem; line-height:1.2; font-weight:400; max-width:80%; }

/* ── WORKS ── */
#works-index { padding:10vh 0; min-height:100vh; }
.works-title-container { padding:0 5vw; margin-bottom:50px; }
.works-title-container h3 { font-size:2rem; font-weight:400; }
.work-item { position:relative; padding:20px 5vw; overflow:hidden; }
.line { position:absolute; top:0; left:0; width:100%; height:3px; background:#fff; }
.bottom-line { top:auto; bottom:0; }
.work-info { display:flex; justify-content:space-between; align-items:baseline; font-size:3vw; }
.work-name { font-weight:400; transition:color .3s; }
.work-name:hover { color:#0A1FD4; }
.work-year { font-weight:400; color:#888; font-size:2vw; }

/* ── PROJECTS ── */
.project-section { margin:50px 5%; position:relative; }
.project-header  { margin-bottom:50px; }
.project-title   { font-size:9vw; font-weight:700; line-height:1; }
.project-info    { font-size:2.5rem; color:#888; line-height:1; margin-top:20px; }
.project-year    { font-size:2rem; color:#888; font-weight:700; margin-top:10px; margin-bottom:20px; }
.project-description { font-size:1rem; line-height:1.6; max-width:600px; margin-top:20px; }
.project-cover-container { width:100%; display:flex; justify-content:center; margin-bottom:5vh; }
.project-cover { width:100%; max-width:800px; aspect-ratio:1/1.414; object-fit:cover; }
.is-logo-project .logo-wrapper { width:100%; max-width:600px; display:flex; justify-content:center; align-items:center; padding:40px; }
.is-logo-project .project-cover { height:auto; max-height:40vh; object-fit:contain; aspect-ratio:auto !important; }

/* ── GALLERY ── */
.gallery-container { position:relative; width:100%; height:150vh; }
.gallery-img { position:absolute; width:30vw; aspect-ratio:1.414/1; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .3s; }
.gallery-img:hover { transform:scale(1.5) !important; z-index:10; }
.gallery-container.is-special { height:70vh; margin-bottom:10vh; }
.is-special .gallery-img { width:40vw; aspect-ratio:7/5; }
.no-shadow { box-shadow:none !important; }
.format-square   { width:22vw; aspect-ratio:1/1 !important; }
.format-vertical { width:22vw; aspect-ratio:210/297 !important; }

/* ── LIGHTBOX ── */
#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; justify-content:center; align-items:center; z-index:9998; opacity:0; pointer-events:none; transition:opacity .3s; }
#lightbox.active { opacity:1; pointer-events:all; }
#lightbox-img { max-width:90%; max-height:90%; }
.lightbox-close { position:absolute; top:30px; right:30px; color:#fff; font-weight:700; }

/* ── FINAL SECTION ── */
#final-section { width:100%; height:100vh; overflow:hidden; position:relative; }

.final-track {
    display:flex;
    flex-wrap:nowrap;
    width:400vw;
    height:100%;
    position:relative;
}

.final-panel {
    width:100vw;
    height:100vh;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 5vw;
    position:relative;
}

.final-hero-text {
    font-size:10vw;
    font-weight:700;
    line-height:1;
    text-align:center;
    color:#fff;
    white-space:nowrap;
    position:relative;
    z-index:2;
}

.final-content-box {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4vh;
    position:relative;
    z-index:2;
}

.final-btn {
    font-size:3vw;
    color:#fff;
    text-decoration:none;
    border:2px solid #fff;
    padding:20px 60px;
    border-radius:100px;
    transition:background .3s, color .3s;
}
.final-btn:hover { background:#fff; color:#0A1FD4; }

.final-panel-hope {
    flex-direction:column;
    gap:5vh;
}

.final-panel-curriculum {
    justify-content:center;
    align-items:center;
}

/* ── JOURNEY DOTS (desktop) ── */
.journey-dot { width:25px; height:25px; flex-shrink:0; }
.journey-dot svg { width:100%; height:100%; display:block; transform:scale(0); transform-origin:center; }

.journey-dot-start,
.journey-dot-end {
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
}

/* ── JOURNEY SVG DESKTOP ── */
#journey-svg-desktop {
    position:absolute;
    top:0; left:0;
    width:400vw; height:100%;
    pointer-events:none;
    z-index:1;
    overflow:visible;
}

/* ══════════════════════════════════
   MOBILE ≤ 768px
══════════════════════════════════ */
@media (max-width:768px) {

    * { cursor:auto !important; }
    .cursor { display:none !important; }

    #top-face-nav     { top:30px; width:50px; height:50px; }
    #left-circle-nav  { left:20px; top:30px; }
    #right-circle-nav { right:20px; top:30px; }

    .medium-text { font-size:4vw; }
    .giant-text  { font-size:14vw; white-space:nowrap; }
    .giant-text span:hover { font-weight:700; color:inherit; }

    .bio-text { font-size:6vw; max-width:90%; }

    .work-info { font-size:5vw; }
    .work-year { font-size:4vw; }

    .project-title       { font-size:12vw; }
    .project-info        { font-size:5vw; }
    .project-year        { font-size:4vw; }
    .project-description { font-size:.9rem; max-width:100%; }

    .gallery-img                  { width:45vw; }
    .gallery-img:hover            { transform:none !important; }
    .gallery-container.is-special { height:100vh; }
    .is-special .gallery-img      { width:60vw; }
    .format-square                { width:35vw; }
    .format-vertical              { width:35vw; }

    /* Final section: vertical stack, no pin */
    #final-section  { height:auto; overflow:visible; }
    .final-track    { flex-direction:column; width:100vw; height:auto; }
    .final-panel    { width:100vw; height:100vh; min-height:100vh; flex-shrink:0; }
    .final-hero-text { font-size:12vw; white-space:normal; word-wrap:break-word; }
    .final-btn      { font-size:4vw; padding:15px 40px; }

    .final-panel-hope {
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5vh;
    }

    /* Original dots hidden on mobile — replaced by SVG circles built in JS */
    .journey-dot-start,
    .journey-dot-end    { display:none !important; }

    /* Desktop SVG hidden */
    #journey-svg-desktop { display:none; }

    /* Final panels sit above the body SVG journey layer */
    .final-panel {
        position:relative;
        z-index:1;
        isolation:isolate;
    }

    .final-hero-text,
    .final-content-box { position:relative; z-index:2; }
}

@media (max-width:1000px) and (min-width:769px) {
    .final-hero-text { white-space:normal; word-wrap:break-word; }
}

@media (max-width:375px) {
    .giant-text { font-size:12vw; }
}