@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&display=swap');

:root{
  --bg: #0b0b0b;
  --fg: #f5f4f0;
  --accent: #cfcabe;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  cursor:none;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--fg); color:var(--bg); }

/* ---------- grain overlay ---------- */
.grain{
  position:fixed; inset:0;
  z-index:9990;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;
  top:0; left:0;
  width:22px; height:22px;
  border:1px solid var(--fg);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s ease;
  opacity:0;
}
.cursor.ready{ opacity:1; }
.cursor.hover{ width:52px; height:52px; }

@media (hover:none), (pointer:coarse){
  .cursor{ display:none; }
  html,body{ cursor:auto; }
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0;
  z-index:9998;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.loader-name{
  font-family:'Cormorant Garamond', serif;
  font-size:15px;
  letter-spacing:.35em;
  color:var(--fg);
  opacity:0;
  animation:fadeIn 1s var(--ease) forwards .2s;
}
.loader-line{
  width:160px; height:1px;
  background:rgba(245,244,240,.15);
  overflow:hidden;
}
.loader-line span{
  display:block;
  height:100%;
  width:0%;
  background:var(--fg);
  animation:loadLine 1.6s var(--ease) forwards .3s;
}
.loader.done{ opacity:0; visibility:hidden; }

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes loadLine{ to{ width:100%; } }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:32px 40px;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity 1s var(--ease);
}
.site-header.in{ opacity:1; }

.logo{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:18px;
  letter-spacing:.04em;
  white-space:nowrap;
}

.main-nav{ display:flex; gap:40px; }
.nav-link{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  position:relative;
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0%; height:1px;
  background:currentColor;
  transition:width .4s var(--ease);
}
.nav-link:hover::after{ width:100%; }

.menu-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  margin:-10px;
  background:none; border:none; cursor:none;
}
.menu-toggle span{
  width:26px; height:1px; background:var(--fg);
  transition:transform .35s var(--ease), opacity .2s ease;
}
.site-header.menu-open .menu-toggle span:first-child{
  transform:translateY(3.5px) rotate(45deg);
}
.site-header.menu-open .menu-toggle span:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

.lang-toggle{
  background:none;
  border:none;
  color:var(--fg);
  font-size:11px;
  letter-spacing:.15em;
  cursor:none;
  padding:0;
}

@media (max-width:720px){
  .main-nav{
    display:none;
    position:fixed;
    inset:0;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    padding:110px 32px 40px;
    background:var(--bg);
  }
  .main-nav.open{ display:flex; }
  .main-nav .nav-link{ font-size:14px; }
  .menu-toggle{ display:flex; }
  .site-header{ padding:24px; }
  .logo{ font-size:15px; }
  /* solid mobile menu must not blend-invert into the backdrop */
  .site-header.menu-open{ mix-blend-mode:normal; }
}

/* ---------- i18n ---------- */
/* revert (not inline) so this works on inline spans AND block paragraphs alike */
.lang-en{ display:none; }
[data-lang="en"] .lang-en{ display:revert; }
[data-lang="en"] .lang-it{ display:none; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100vh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

.hero-video-wrap{
  position:absolute; inset:0;
  z-index:0;
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
}
.hero-video.active{ opacity:1; }

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 40%, rgba(0,0,0,.55) 100%);
  z-index:1;
}

.hero-content{
  position:relative; z-index:2;
  padding:0 40px 120px;
}

.hero-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(38px, 9vw, 116px);
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hero-role{
  margin-top:22px;
  font-size:15px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }

@media (max-width:720px){
  .hero-content{ padding:0 24px 84px; }
  .hero-name{ font-size:clamp(30px, 10vw, 48px); letter-spacing:.05em; }
  .hero-role{ font-size:13px; letter-spacing:.15em; margin-top:14px; }
}

.teaser-btn{
  position:absolute;
  z-index:2;
  right:40px; bottom:40px;
  display:flex; align-items:center; gap:12px;
  background:none; border:none;
  color:var(--fg);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  cursor:none;
}
.teaser-btn::before{
  content:'';
  width:36px; height:36px;
  border:1px solid rgba(245,244,240,.5);
  border-radius:50%;
  flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5f4f0' d='M9 7l9 5-9 5V7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px;
  transition:transform .4s var(--ease), border-color .4s ease;
}
.teaser-btn:hover::before{
  transform:scale(1.1);
  border-color:var(--fg);
}

@media (max-width:720px){
  .teaser-btn{ right:24px; bottom:24px; }
}

/* ---------- Video modal (shared: Progetti popups + Home teaser) ---------- */
.video-modal{
  position:fixed; inset:0;
  z-index:9997;
  background:rgba(6,6,6,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.video-modal.open{
  opacity:1;
  visibility:visible;
}

.modal-frame{
  width:min(90vw, 1100px);
  aspect-ratio:16/9;
  background:#000;
  transform:scale(.96);
  transition:transform .5s var(--ease), width .3s var(--ease);
}
.video-modal.open .modal-frame{ transform:scale(1); }

.modal-frame--portrait{
  width:min(88vw, 420px);
  aspect-ratio:9/16;
}

.modal-frame iframe,
.modal-frame video{
  width:100%; height:100%;
  border:none;
  display:block;
}

.modal-close{
  position:fixed;
  top:32px; right:40px;
  z-index:9999;
  background:none;
  border:none;
  color:var(--fg);
  font-size:32px;
  line-height:1;
  cursor:none;
  font-weight:300;
  opacity:0;
  transform:rotate(-90deg);
  transition:opacity .5s var(--ease) .1s, transform .6s var(--ease) .1s;
}
.video-modal.open .modal-close{
  opacity:1;
  transform:rotate(0deg);
}

@media (max-width:720px){
  .modal-close{ top:20px; right:24px; font-size:28px; }
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(245,244,240,.12);
  padding:28px 40px;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(245,244,240,.55);
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.site-footer a{ color:rgba(245,244,240,.55); transition:color .3s ease; }
.site-footer a:hover{ color:var(--fg); }
.site-footer .footer-links{ display:flex; gap:24px; }
.footer-copyright{
  font-size:10px;
  color:rgba(245,244,240,.35);
}

@media (max-width:640px){
  .site-footer{ padding:24px 24px; }
  .footer-top{ flex-direction:column; align-items:flex-start; }
}