/* FONTS */

@font-face {
    font-family: Untitledsans Medium;
    src: url(../fonts/untitledsans-medium.woff);
}

@font-face {
    font-family: Lora Regular;
    src: url(../fonts/Lora-Regular.ttf);
}

:root{
  --timing: cubic-bezier(0.23, 1, 0.32, 1);
  --opacity:0;
}

@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
     } 
}


/* BODY */

body {
	font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.8vw;
	line-height: 1.2;
	background-color: #f1efed;
	color: #262626;
	width: 100%;
  overflow: hidden;
  animation:fadeInAnimation ease-in 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
}

/* TITLE */

header .title h2 {
  font-size: 0.7vw;
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  text-transform: uppercase;
}

 /* HOLDER AND IMAGE */

.image img{
  display: flex;
  padding-top: 25px;
  width: 30vw;
  max-width: 550px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}

div.image{
  overflow: hidden;
}

div.image img{
  transform: translate(0, 120%);
  transition: transform 1.5s 2s var(--timing);
}

div.image.in-view img{
  transform: translate(0, 0);
}

/* div.text p{
  overflow: hidden;
}

div.text p{
  transform: translate(0, 2000%);
  transition: transform 1.5s 1s var(--timing);
  opacity: 0.001;
}

div.text.in-view p{
  transform: translate(0, 0);
  opacity: 1;
} */




/* MARKUP TEXT */

.text{
  display: flex;
    max-width: 30vw;
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  padding-top: 1vw;
  transition: opacity 3s;
  animation:fadeInAnimation ease-in 3s; 
    animation-iteration-count: 1; 
    animation-fill-mode: forwards;
  
}

.text p {
    transition: opacity 3s;
    font-size: 1.1vw;
    text-transform: capitalize;
    font-family: Lora Regular;
  text-align: left;
}


.text p em {
    font-family: Lora Regular;
    font-size: 0.6vw;
    position: relative;
  top: -0.4em;
}
  
.text p strong {
    font-size: 1.1vw;
    text-transform: uppercase;
    font-family: Untitledsans Medium, Helvetica, sans-serif;
}

/* FOOTER */


footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-transform: uppercase;
/*   transition: opacity 0.3s; */
}

.contact a:hover {
 opacity: 0.3;
  transition: opacity 0.3s;
  
  
}
.pgp a:hover {
 opacity: 0.3;
  transition: opacity 0.3s;
  
  
}

.location {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0%);
}

.contact {
    display: flex;
    align-items: flex-end;
    text-align: right;
}



.pgp a {
  font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.8vw;
	line-height: 1.2;
	color: #262626;
  text-decoration: none;
  transition: opacity 3s;
  
}

.contact a{
  font-family: Untitledsans Medium, Sans-Serif;
	font-size: 0.7vw;
	line-height: 1.2;
	color: #262626;
  text-decoration: none;
  transition: opacity 3s;
  
}
  
  .city h2 {
    margin-right: 5px;
}




/* ARTICLE REVEAL (fade-in pur CSS, fără GSAP) */

article {
  opacity: 0;
  animation: fadeInAnimation ease-in 1s;
  animation-delay: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* SLIDESHOW (pozele, tăietură seacă — ca în GIF-ul original) */

.image img.photos {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width:1000px) {
  
  header .title h2{
    font-size: 1.5vw;
  }
  
  .image img{
    width: 60vw;
  }
  
   .text{
    max-width: 60vw;
    padding-top: 2vw;
  }
  
  .text p{
    font-size: 2.4vw;
  }
  
  .text p strong{
    font-size: 2.4vw;
  }
  
  .text p em{
    font-size: 1vw;
    top: -1vw;
  }
  
  footer{
    font-size: 1.5vw;
  }
  
  .pgp a{
    font-size: 1.5vw;
  }
  
  .contact a{
    font-size: 1.5vw;
  }
  
  
  
  
  
}





@media (max-width:600px){

  /* Pe telefon poza și textul ocupă mult mai puțin decât ecranul, așa că
     rămânea un gol mare până la footer. Le centrăm pe verticală, cu spațiu
     rezervat sus și jos cât să nu ajungă peste nume și peste contact.
     dvh ține cont de bara de adresă a browserului; vh e plasa de siguranță. */
  main {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0;
  }

  header .title h2{
    font-size: 2vw;
  }
  
  .image img {
    width: 90vw;
    
  }
  
  .text{
    max-width: 90vw;
    padding-top: 2vw;
  }
  
  .text p{
    font-size: 5vw;
  }
  
  .text p strong{
    font-size: 5vw;
  }
  
  .text p em{
    font-size: 2vw;
    top: -2vw;
  }
  
  footer{
    font-size: 2vw;
  }
   .pgp a{
    font-size: 2vw;
  }
  
  .contact a{
    font-size: 2vw;
  }
  
  footer .location{
    display: none;
}
  
  
}