/* =============================================================
   SHARED.CSS — Playbox Studio
   Stili comuni a tutte le pagine: header, nav, footer,
   page transition, menu fullscreen, back-to-top.
   ============================================================= */

/* =============================================================
   ROOT & RESET
   ============================================================= */
:root {
  --dark:   #030a08;
  --green:  #007a62;
  --neon:   #2ecc71;
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --real-vh: 1dvh; /* sovrascritta via JS in shared.js */
}

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

html {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  background: #fff;
  color: #000;
  overflow-x: hidden;
  margin: 0;
}

/* =============================================================
   FOCUS — accessibilità tastiera
   ============================================================= */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =============================================================
   HEADER
   ============================================================= */
header {
  position:        fixed;
  top:             0;
  left:            0;
  width:           100%;
  height:          100px;
  padding:         0 6%;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  z-index:         10000;
}

.logo {
  width:      55px;
  height:     55px;
  object-fit: contain;
  cursor:     pointer;
  transition: 0.4s var(--bounce);
}

.logo:hover {
  transform: scale(1.1);
  filter:    drop-shadow(0 0 15px var(--neon));
}

/* Logos alternati per sezioni scure */
.logo-light { display: none; }
.logo-dark  { display: block; }

body.is-footer .logo-light { display: block; }
body.is-footer .logo-dark  { display: none; }

/* Logo dinamico (progetti.html usa id=logoImg) */
#logoImg { transition: opacity 0.3s ease; }

/* =============================================================
   NAV TOGGLE (hamburger)
   ============================================================= */
.nav-toggle {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  cursor:         pointer;
  padding:        10px;
  z-index:        10001;
  transition:     0.4s var(--bounce);
}

.nav-toggle span {
  width:         35px;
  height:        3px;
  background:    var(--dark);
  border-radius: 2px;
  transition:    0.4s var(--bounce);
}

.nav-toggle:hover {
  transform: scale(1.1);
  filter:    drop-shadow(0 0 15px var(--neon));
}

/* Colori barre in base al contesto */
body.is-video  .nav-toggle span,
body.is-intro  .nav-toggle span  { background: var(--green); }
body.is-content .nav-toggle span { background: var(--dark); }
body.is-footer .nav-toggle span  { background: #fff; }
body.white-nav .nav-toggle span  { background: #fff; }

/* Stato aperto */
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(7px, 8px);   background: var(--green) !important; }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -8px); background: var(--green) !important; }

/* =============================================================
   FULLSCREEN MENU
   ============================================================= */
.fs-menu {
  position:              fixed;
  inset:                 0;
  background:            rgba(255, 255, 255, 0.35);
  backdrop-filter:       blur(45px);
  -webkit-backdrop-filter: blur(45px);
  padding:               100px 8% 60px;
  display:               flex;
  justify-content:       flex-start;
  align-items:           flex-end;
  transform:             translateX(100%);
  transition:            0.7s cubic-bezier(0.85, 0, 0.15, 1);
  z-index:               9999;
}

.fs-menu.active { transform: translateX(0); }

/* Sfondo scuro su sezioni video/intro */
body.is-video .fs-menu,
body.is-intro .fs-menu { background: rgba(0, 0, 0, 0.6); }

.menu-wrapper {
  display:        flex;
  flex-direction: column;
  width:          100%;
  position:       relative;
}

.main-links {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            10px;
}

.main-links a {
  font-family:     'Sora', sans-serif;
  font-size:       clamp(2.5rem, 7vw, 7rem);
  font-weight:     800;
  line-height:     1;
  letter-spacing:  -0.04em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--dark);
  display:         inline-flex;
  align-items:     flex-start;
  vertical-align:  top;
}

body.is-video .main-links a,
body.is-intro .main-links a { color: #fff; }

/* Effetto lettera scroll */
.menu-letter {
  display:  inline-block;
  overflow: hidden;
  height:   1em;
  position: relative;
}

.menu-letter-inner {
  display:        flex;
  flex-direction: column;
  transition:     transform 0.48s cubic-bezier(0.76, 0, 0.24, 1);
}

.menu-letter-inner span:first-child { display: block; }
.menu-letter-inner span:last-child  { display: block; color: var(--green); }
.menu-space { display: inline-block; width: 0.28em; }

.main-links a:hover .menu-letter-inner { transform: translateY(-50%); }

/* Icona Instagram */
.menu-insta {
  position:        absolute;
  right:           0;
  bottom:          10px;
  font-size:       45px;
  color:           #e9e9ea;
  text-decoration: none;
  transition:      0.4s var(--bounce);
}

.menu-insta:hover { transform: scale(1.2); color: var(--green) !important; }

body.is-video .menu-insta,
body.is-intro .menu-insta  { color: rgba(255,255,255,0.4); }
body.is-footer .menu-insta { color: rgba(255,255,255,0.4); }

/* =============================================================
   PAGE TRANSITION
   ============================================================= */
.page-transition {
  position:       fixed;
  inset:          0;
  z-index:        99998;
  pointer-events: none;
  display:        flex;
  flex-direction: row;
}

.pt-layer {
  flex:        1;
  height:      100%;
  background:  #fff;
  transform:   translateY(0%);
  will-change: transform;
}

.page-transition.pt-enter .pt-layer:nth-child(1) { animation: pt-in  0.55s cubic-bezier(0.76, 0, 0.24, 1) 0ms   forwards; }
.page-transition.pt-enter .pt-layer:nth-child(2) { animation: pt-in  0.55s cubic-bezier(0.76, 0, 0.24, 1) 80ms  forwards; }
.page-transition.pt-enter .pt-layer:nth-child(3) { animation: pt-in  0.55s cubic-bezier(0.76, 0, 0.24, 1) 160ms forwards; }
.page-transition.pt-exit  .pt-layer:nth-child(1) { animation: pt-out 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0ms   forwards; }
.page-transition.pt-exit  .pt-layer:nth-child(2) { animation: pt-out 0.55s cubic-bezier(0.76, 0, 0.24, 1) 80ms  forwards; }
.page-transition.pt-exit  .pt-layer:nth-child(3) { animation: pt-out 0.55s cubic-bezier(0.76, 0, 0.24, 1) 160ms forwards; }

@keyframes pt-in  { from { transform: translateY(100%); } to { transform: translateY(0%);    } }
@keyframes pt-out { from { transform: translateY(0%);   } to { transform: translateY(-100%); } }

/* =============================================================
   FOOTER
   ============================================================= */
footer {
  display:        flex;
  flex-direction: column;
  height:         calc(var(--real-vh, 1dvh) * 100);
  background:     #000;
  color:          #fff;
  overflow:       hidden;
  position:       relative;
}

.footer-top {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  padding:               120px 5% 40px;
  gap:                   8rem;
  flex-shrink:           0;
}

.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-col-label {
  font-family:    'Inter', sans-serif;
  font-size:      0.58rem;
  font-weight:    600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.4);
  margin-bottom:  6px;
}

.footer-col a,
.footer-col p {
  font-family:     'Inter', sans-serif;
  font-size:       0.82rem;
  font-weight:     300;
  color:           rgba(255, 255, 255, 0.75);
  text-decoration: none;
  line-height:     1.9;
}

.footer-col a:hover { color: #fff; }

.footer-col strong {
  font-family:    'Sora', sans-serif;
  font-size:      0.75rem;
  font-weight:    600;
  color:          #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-bottom-img {
  flex:        1;
  display:     flex;
  align-items: flex-end;
  overflow:    hidden;
  padding-top: 45%;
}

.footer-bottom-img img {
  width:           100%;
  display:         block;
  object-fit:      contain;
  object-position: bottom;
}

/* Footer mobile */
.footer-mobile { display: none; }

@media (max-width: 768px) {
  footer { height: auto; min-height: calc(var(--real-vh, 1dvh) * 100); }
  .footer-top    { display: none !important; }
  .footer-mobile {
    display:        flex;
    flex-direction: column;
    padding:        90px 6% 0;
    width:          100%;
    flex-shrink:    0;
  }
  .fm-credits { text-align: center; margin-bottom: 23px; margin-top: 15px; }
  .fm-credits p { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 300; color: rgba(255,255,255,0.65); white-space: nowrap; }
  .fm-credits strong { font-weight: 600; color: #fff; }
  .fm-block { padding: 10px 0 5px; display: flex; flex-direction: column; gap: 0; text-align: left; }
  .fm-label { font-family: 'Sora', sans-serif; font-size: clamp(1.6rem,6vw,2.4rem); font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-bottom: 4px; line-height: 1; }
  .fm-block a,
  .fm-block p { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 300; color: rgba(255,255,255,0.75); text-decoration: none; line-height: 1.8; }
  .fm-block a:hover { color: #fff; }
  .fm-divider { border: none; border-top: 2px solid rgba(255,255,255,0.15); margin: 3px; width: 100%; }
  .fm-social-block { flex-direction: row !important; align-items: center; justify-content: space-between; }
  .fm-social-handle { font-size: 0.95rem; color: rgba(255,255,255,0.65) !important; }
  .fm-insta-icon { font-size: 3.8rem; color: #fff; text-decoration: none; transition: color 0.3s, transform 0.3s; }
  .fm-insta-icon:hover { color: #fff; transform: scale(1.1); }
  .fm-location-header { display: flex; align-items: center; justify-content: space-between; }
  a.fm-maps-icon { font-size: 1.8rem !important; color: #fff; text-decoration: none; transition: color 0.3s, transform 0.3s; line-height: 1; display: inline-block; }
  .fm-maps-icon:hover { color: #fff; transform: scale(1.1); }
  .footer-bottom-img { padding-top: 0; width: 100%; }
}

@media (min-width: 769px) { .footer-mobile { display: none; } }

/* =============================================================
   BACK TO TOP
   ============================================================= */
#backTop {
  position:        fixed;
  bottom:          60px;
  right:           7%;
  width:           50px;
  height:          50px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.2rem;
  cursor:          pointer;
  opacity:         0;
  visibility:      hidden;
  background:      rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition:      all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index:         9000;
}

#backTop.visible { opacity: 1; visibility: visible; }

#backTop:hover {
  transform:  scale(1.1);
  background: var(--green);
  color:      #fff;
}

body.is-video  #backTop,
body.is-footer #backTop { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
body.is-content #backTop { background: rgba(0,122,98,0.15); border: 1px solid rgba(0,122,98,0.3); color: var(--green); }

/* =============================================================
   RESPONSIVE — Header & Menu
   ============================================================= */
@media (max-width: 968px) {
  html, body { width: 100vw; overflow-x: hidden !important; }
}

@media (max-width: 768px) {
  header { height: 80px; padding: 0 5%; }
  .nav-toggle { gap: 5px; padding: 6px; }
  .nav-toggle span { width: 28px; height: 2px; }
  .fs-menu { justify-content: center; align-items: center; padding: 0; }
  .menu-wrapper { align-items: center; justify-content: center; text-align: center; }
  .main-links { align-items: center; gap: 15px; margin-bottom: 40px; }
  .main-links a { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
  .menu-insta { position: relative; right: auto; bottom: auto; font-size: 35px; margin-top: 20px; }
}

/* =============================================================
   ACCESSIBILITÀ
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}