/* ═══════════════════════════════════════════
   WELCOME PAGE — Immagina POV
   ═══════════════════════════════════════════ */

html, body {
  height: 100%;
  overflow: hidden;
}

/* ─── BACKGROUND ─── */
.bg-cover {
  position: fixed;
  inset: 0;
  z-index: 0;
}
.bg-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── MAIN LAYOUT ─── */
.welcome {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 20px;
}

/* ─── LOGO ─── */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 15px;
  flex-shrink: 0;
}
.logo {
  width: 100%;
  max-width: 664px;
  height: auto;
  max-height: 259px;
  aspect-ratio: 563.5 / 220;
}

/* ─── SIGNPOST WRAPPER ─── */
.signpost-wrapper {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 0 15px;
  min-height: 0;
  overflow: hidden;
}

.signpost {
  position: relative;
  width: 267px;
  height: 700px;
  flex-shrink: 0;
  transform-origin: bottom center;
  filter: drop-shadow(8px 8px 4px rgba(0,0,0,0.25));
}

/* ─── WOODEN POST ─── */
.signpost-pole {
  position: absolute;
  top: 0;
  left: 21.3%;
  right: 25.3%;
  width: 53.4%;
  height: 100%;
}

/* ─── SIGNS CONTAINER ─── */
.signs {
  position: absolute;
  top: 45px;
  left: 13.5px;
  width: 235px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

/* ─── INDIVIDUAL SIGN ─── */
.sign {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.sign:hover {
  transform: scale(1.05) rotate(-1deg);
  filter: brightness(1.08);
}
.sign:active {
  transform: scale(0.97);
}

.sign-bg {
  display: block;
  width: 100%;
  height: 100%;
}

.sign-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 32px;
  color: #1d0b00;
  pointer-events: none;
  line-height: 1;
}

.sign--menu           { width: 228px; height: 76px; }
.sign-label--menu     { font-weight: 500; font-size: 40px; }
.sign--location       { width: 235px; height: 61px; }
.sign--location .sign-label { padding-left: 26px; padding-right: 44px; }
.sign--attivita       { width: 235px; height: 61px; }
.sign--attivita .sign-label { padding-left: 44px; padding-right: 26px; }
.sign--camere         { width: 235px; height: 61px; }
.sign--camere .sign-label   { padding-left: 26px; padding-right: 44px; }
.sign--contatti       { width: 180px; height: 49px; }
.sign-label--contatti { font-size: 24px; }

/* ═══════════════════════════════════════════
   CONTACT OVERLAY
   ═══════════════════════════════════════════ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}

body:has(.overlay.is-open) .welcome {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

/* ─── CARD ─── */
.contact-card {
  position: relative;
  width: 332px;
  height: 421px;
  transform: scale(0.85) translateY(30px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}
.overlay.is-open .contact-card {
  transform: scale(1) translateY(0);
}

.overlay-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay-main-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── SVG STRIP POSITIONING ─── */
.strip { position: absolute; width: 9.85%; }
.strip-l-top { left: 0; top: 0;       height: 11.24%; }
.strip-l-m1  { left: 0; top: 11.24%;  height: 25.92%; }
.strip-l-m2  { left: 0; top: 37.16%;  height: 25.92%; }
.strip-l-m3  { left: 0; top: 63.08%;  height: 25.92%; }
.strip-l-bot { left: 0; top: 89%;     height: 11%;    }
.strip-r-top { right: 0; top: 0;       height: 11.24%; transform: rotate(180deg); }
.strip-r-m1  { right: 0; top: 11.24%;  height: 25.92%; transform: rotate(180deg); }
.strip-r-m2  { right: 0; top: 37.16%;  height: 25.92%; transform: rotate(180deg); }
.strip-r-m3  { right: 0; top: 63.08%;  height: 25.92%; transform: rotate(180deg); }
.strip-r-bot { right: 0; top: 89%;     height: 11%;    transform: rotate(180deg); }

/* ─── CONTENT ─── */
.contact-content {
  position: absolute;
  top: 0; left: 42px; right: 42px; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.contact-header {
  width: 100%;
  padding: 0 14px;
  color: #1d0b00;
}
.contact-title  { font-weight: 700; font-size: 34px; line-height: 1.2; }
.contact-subtitle { font-weight: 300; font-size: 14px; line-height: 1.3; margin-top: 4px; }

.contact-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  text-decoration: none;
  color: #1d0b00;
  transition: opacity 0.2s;
}
.contact-row:hover { opacity: 0.7; }

.contact-icon { width: 24px; height: 24px; flex-shrink: 0; }

.contact-text { display: flex; flex-direction: column; min-width: 0; }
.contact-label { font-weight: 600; font-size: 15px; line-height: 1.4; }
.contact-value { font-weight: 400; font-size: 14px; line-height: 1.4; }

.contact-social {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 4px;
}
.contact-social .social-link {
  display: block;
  width: 38px;
  height: 38px;
  transition: transform 0.2s;
}
.contact-social .social-link:hover { transform: scale(1.15); }
.contact-social .social-link img { width: 100%; height: 100%; object-fit: contain; }

/* ═══ RESPONSIVE ═══ */
@media (min-width: 600px) {
  .contact-card { width: 360px; height: 457px; }
  .contact-content { left: 46px; right: 46px; gap: 30px; }
  .contact-title { font-size: 36px; }
  .contact-subtitle { font-size: 15px; }
  .contact-label { font-size: 16px; }
  .contact-value { font-size: 15px; }
  .contact-social .social-link { width: 40px; height: 40px; }
}

@media (min-width: 768px) {
  .contact-card { width: 380px; height: 482px; }
  .contact-content { left: 48px; right: 48px; }
  .contact-title { font-size: 38px; }
}

@media (min-width: 1024px) {
  .contact-card { width: 400px; height: 507px; }
  .contact-content { left: 50px; right: 50px; gap: 32px; }
  .contact-title { font-size: 40px; }
  .contact-subtitle { font-size: 16px; }
  .contact-label { font-size: 17px; }
  .contact-value { font-size: 16px; }
  .contact-social .social-link { width: 44px; height: 44px; }
  .contact-social { gap: 32px; }
}

@media (min-width: 1440px) {
  .contact-card { width: 440px; height: 558px; }
  .contact-content { left: 55px; right: 55px; gap: 34px; }
  .contact-title { font-size: 44px; }
  .contact-subtitle { font-size: 17px; }
  .contact-label { font-size: 18px; }
  .contact-value { font-size: 17px; }
  .contact-social .social-link { width: 46px; height: 46px; }
  .contact-social { gap: 34px; }
}

@media (max-width: 379px) {
  .contact-card { width: 290px; height: 368px; }
  .contact-content { left: 36px; right: 36px; gap: 22px; }
  .contact-title { font-size: 28px; }
  .contact-subtitle { font-size: 12px; }
  .contact-label { font-size: 13px; }
  .contact-value { font-size: 12px; }
  .contact-social .social-link { width: 34px; height: 34px; }
}

@media (max-height: 600px) {
  .welcome { padding-top: 10px; }
}