/* =========================================================
   MARCO GIUGLIANO PORTFOLIO — CLEAN CSS V2
   ========================================================= */

*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}
body{min-height:100svh}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;font-weight:400}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

/* VIEWS */
.view{display:none;width:100%;min-height:100svh;background:#fff}
.view.active{display:block}

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;height:44px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;z-index:9999;background:rgba(255,255,255,.14);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.site-nav button{font-size:11px;line-height:1;letter-spacing:.06em;white-space:nowrap}
.nav-links{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.menu-toggle{display:none}
@media(max-width:760px){
  .site-nav{padding:0 16px}
  .menu-toggle{display:block}
  .nav-links{position:fixed;top:44px;left:0;right:0;width:100vw;display:none;flex-direction:column;align-items:center;gap:20px;padding:24px 0 28px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .nav-links.open{display:flex}
}

/* HOME / HERO */
.hero{position:relative;width:100vw;height:100svh;overflow:hidden;background:#fff url("../assets/home/poster.webp") center/cover no-repeat;isolation:isolate}
.hero-video,.poster-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center}
.hero-video{z-index:2;opacity:0;transition:opacity .45s ease}
.poster-layer{z-index:1;background:#fff url("../assets/home/poster.webp") center/cover no-repeat;transition:opacity .45s ease}
.hero.video-ready .hero-video{opacity:1}
.hero.video-ready .poster-layer{opacity:0}
.hero::after{content:"";position:absolute;inset:0;z-index:3;background:rgba(255,255,255,.25);pointer-events:none}
.video-light{position:absolute;inset:0;z-index:4;pointer-events:none}
.logo-layer{position:absolute;left:50%;top:50%;width:min(46vw,620px);transform:translate(-50%,-50%);z-index:5;transform-origin:center}
.logo-layer img{width:100%;height:auto}
@media(max-width:1180px){.logo-layer{width:min(72vw,420px)}}

/* ABOUT */
.about{
  width:100vw;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}

.bio-image{
  display:block;
  width:100vw;
  max-width:none;
  height:auto;
  margin:0;
  transform:none!important;
  transform-origin:center;
}

.bio-download-area{
  display:none !important;
  height:0;
  margin:0;
  padding:0;
}

.bio-download-link{
  font-size:9px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.bio-seo-text{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:normal;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
}

@media(max-width:900px){
  .bio-image{
    width:100vw;
    max-width:none;
    transform:none!important;
  }
}

/* HOME CHAPTERS */
.chapter{position:relative;width:100vw;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;isolation:isolate}
.chapter::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.10);pointer-events:none}
.chapter-title{position:relative;z-index:2;font-size:clamp(34px,5.8vw,92px);line-height:.92;letter-spacing:.01em;font-weight:400;text-align:center;transform-origin:center;text-transform:uppercase}
#ai-visual{background:url("../assets/home/ai-visual-cover.webp") center/cover no-repeat}
#collections{background:url("../assets/home/collections-cover.webp") center/cover no-repeat}
#contact{background:#fff}
#contact::after{display:none}
@media(max-width:900px){.chapter-title{font-size:clamp(30px,9vw,58px)}}

/* INDEX / AI VISUAL CARDS */
.project-view{background:#fff;padding:0}
.project-card{position:relative;width:100vw;height:100svh;overflow:hidden;margin:0;background:#fff}
.project-image{position:absolute;inset:0;width:100%;height:100%;background:#eee center/cover no-repeat;transform-origin:center;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.project-hit{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer}
.project-hit span{font-size:clamp(34px,5.8vw,92px);line-height:.92;letter-spacing:.01em;font-weight:400;text-align:center;color:#000;text-transform:uppercase}
#aiView .project-hit span{display:none}
.wc41-index-card .project-image{background-image:url("../assets/projects/wc41/cover.webp")}
.cattivi-index-card .project-image{background-image:url("../assets/projects/cattivi/cover.webp")}
.selfservice-index-card .project-image{background-image:url("../assets/projects/self-service/cover.webp")}
.artofleaving-index-card .project-image{background-image:url("../assets/projects/the-art-of-leaving/cover.webp")}
.falsealarm-index-card .project-image{background-image:url("../assets/projects/false-alarm/cover.webp")}
.pitstop-index-card .project-image{background-image:url("../assets/projects/pit-stop/cover.webp")}
.domestic-index-card .project-image{background-image:url("../assets/projects/domestic/cover.webp")}
.suspension-index-card .project-image{background-image:url("../assets/projects/suspension/cover.webp")}
.stilllife-index-card .project-image{background-image:url("../assets/projects/still-life/cover.webp")}

/* CLOSE */
.close{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;font-size:9px;line-height:1;letter-spacing:.06em;text-transform:uppercase}

/* PROJECT GRIDS */
.wc41-view,.selfservice-view,.ai-project-view,.collection-project-view{background:#fff}
.wc41-grid,.selfservice-grid,.ai-project-grid,.collection-grid{width:min(1760px,94vw);margin:0 auto;padding:9vh 0 7vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw;background:#fff}
.wc41-media,.selfservice-media,.ai-project-media,.collection-media{width:100%;aspect-ratio:4/5;margin:0;overflow:hidden;background:#fff;position:relative}
.wc41-media img,.wc41-video,.selfservice-media img,.selfservice-video,.ai-project-media img,.ai-project-video,.collection-media img,.collection-video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:scale(.9);transform-origin:center;transition:transform .55s cubic-bezier(.19,1,.22,1);will-change:transform}
.ai-project-wide,.collection-wide{grid-column:1 / -1;aspect-ratio:16/9}
.ai-project-wide img,.ai-project-wide video,.collection-wide img,.collection-wide video{object-fit:cover}
.wc41-media:hover img,.wc41-video-wrap:hover .wc41-video,.selfservice-media:hover img,.selfservice-video-wrap:hover .selfservice-video,.ai-project-media:hover img,.ai-project-video-wrap:hover .ai-project-video,.collection-media:hover img,.collection-video-wrap:hover .collection-video{transform:scale(1.08)!important}
.sound-toggle{position:absolute;left:16px;bottom:16px;z-index:3;font-size:9px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45)}

/* CATTIVI */
.cattivi-view{background:#000}.cattivi-sequence{width:100vw;margin:0;padding:0;background:#000}.cattivi-video-wrap{width:100vw;height:100svh;margin:0;overflow:hidden;background:#000;position:relative}.cattivi-video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(.94);transition:transform .7s cubic-bezier(.19,1,.22,1)}.cattivi-video-wrap:hover .cattivi-video{transform:scale(1.08)!important}

/* PROJECT-SPECIFIC */
.artleaving-grid{display:flex;flex-direction:column;width:min(1760px,94vw);gap:0}.artleaving-grid .ai-project-wide{width:100%;aspect-ratio:16/9;margin:0 0 2vw}.artleaving-grid .ai-project-video-wrap{order:-1}.falsealarm-grid .ai-project-video-wrap{grid-column:1/-1;aspect-ratio:16/9}.pitstop-grid .ai-project-wide:first-child{grid-column:1/-1;aspect-ratio:16/9}

/* COLLECTIONS */
#collectionsView .collection-grid{display:block;width:min(1760px,94vw);margin:0 auto;padding:9vh 0 7vh;background:#fff}
#collectionsView .collection-media{width:100%;aspect-ratio:16/9;margin:0 0 2vw;overflow:hidden;background:#fff}

/* CONTACT */
.contact-view{align-items:center;justify-content:center;padding:0}.contact-view.active{display:flex}.contact-content{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center}.contact-content a,.contact-download{font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#000}.contact-download:first-of-type{margin-top:28px;margin-bottom:12px}.contact-resume{margin-top:-8px}

/* PASSWORD */
.password-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.92);z-index:20000}.password-overlay.active{display:flex}.password-box{display:flex;flex-direction:column;align-items:center;gap:18px;font-weight:400}.password-box *{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:.06em}#passwordTitle{margin:0;font-size:18px;line-height:1;text-transform:uppercase}#passwordInput{width:260px;border:0;border-bottom:1px solid #000;background:transparent;padding:8px 0;text-align:center;font-size:16px;outline:none}.password-actions{display:flex;gap:24px}.password-actions button{font-size:10px}.password-error{display:none;font-size:10px;text-transform:uppercase}

/* RESPONSIVE PROJECTS */
@media(max-width:900px){
  .wc41-grid,.selfservice-grid,.ai-project-grid,.collection-grid,#collectionsView .collection-grid{width:88vw;display:block;padding:8vh 0 7vh}
  .wc41-media,.selfservice-media,.ai-project-media,.collection-media,#collectionsView .collection-media,.artleaving-grid .ai-project-wide{width:100%;margin:0 auto 6vh}
  .cattivi-video-wrap{height:64svh}
}

/* FALSE ALARM ORDER FIX */

.falsealarm-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.falsealarm-grid .ai-project-wide{
  grid-column:1 / -1;
  aspect-ratio:16/9;
}

.falsealarm-grid .ai-project-media:not(.ai-project-wide){
  aspect-ratio:4/5;
}