/*
 * Copyright © 2025 YIANTAL. All rights reserved.
 *
 * This code and all associated content are the intellectual property of YIANTAL.
 * Unauthorized use, reproduction, modification, distribution, or commercial exploitation 
 * of any part of this code is strictly prohibited without prior written consent.
 *
 * This file is licensed for personal viewing only. Any public or commercial use is forbidden.
 *
 * Author: YIANTAL
 * Date: 2025-07-24
 */

/* ------------------------------------- */
/* RESET & GLOBALS                      */
/* ------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Proxima', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow: hidden;
  background: #E2E2E2;
}

.container {
  position: absolute;
  top: 35px;
  right: 35px;
  left: 35px;
  bottom: 35px;
  display: flex;
  box-sizing: border-box;
  z-index: 1;
}

/* ------------------------------------- */
/* BACKGROUND LAYERS                    */
/* ------------------------------------- */
.backgrounds {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 0;
}

.main-content-bgLeft,
.main-content-bgRight {
  flex: 1;
  display: flex;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
  position: relative;
  box-sizing: border-box;
}

.main-content-bgLeft {
  background-image: url('../assets/porfura_back_page_1570x1010px.svg');
}

.main-content-bgRight {
  background-image: url('../assets/erganh_back_page_1570x1010px.svg');
}

/**************INSET FALLBACK FOR TIZEN******************/
.main-content-bgRight {
  position: relative; /* για να «δέσει» το ::after */
}
/* overlay πάνω από το background image, κάτω από το περιεχόμενο */
.main-content-bgRight::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* αντί για inset */
  background-color: #3F364C;
  /* προαιρετικά: opacity αν θες να «σκουραίνει» πάνω από το bg image */
  /* opacity: .65; */
  z-index: -1;
  pointer-events: none;
}

/* φρόντισε το περιεχόμενο να είναι πάνω από το overlay */
.main-content-bgRight > * {
  position: relative;
  z-index: 1;
}

/*.main-content-bgRight::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #3F364C;
  z-index: -1;
  pointer-events: none;
}*/
/**************INSET FALLBACK FOR TIZEN******************/

/* ------------------------------------- */
/* 2. ANIMATIONS */
/* ------------------------------------- */

.main-content-with-bg.slideRightAnim {
  animation: slideRight 1.5s ease forwards;
}

.main-bg.slide-right-delayAnim {
  animation: slideRight 1.5s ease forwards;
  animation-delay: 0.1s;
}

@keyframes slideRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(101%);
  }
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.page-slide-in {
  transform: translateX(0%);
  transition: transform 1.1s ease;
  /*transition: transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);*/
}

.page-slide-in.enter {
  transform: translateX(0);
}

.no-anim {
  animation: none !important;
  transition: none !important;
}
.no-anim, .no-anim * {
  opacity: 1 !important;
}

/* ------------------------------------- */
/* SECTION CONTENT                       */
/* ------------------------------------- */
.section {
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.left-content {
  left: 18%;
}

.right-content {
  right: 16%;
}

.section img {
  max-height: 32vh;
  margin-bottom: 5vh;
}

.section a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/**************CLAMP FALLBACK FOR TIZEN******************/

/*.section span {
  font-size: clamp(1.1rem, 1.3vw, 1.5rem);
  color: #D9C6B4;
  letter-spacing: .025em;
}*/

/* baseline για όλους */
.section span {
  font-size: 25px;
  color: #D9C6B4;
  letter-spacing: .025em;
}

/* ρευστό μέγεθος από 480px έως 1080px */
/*@media (min-width: 480px) and (max-width: 1080px) {
  .section span {
	font-size: 35px;
  }
}*/

/* πάνω από 1080px “οροφή” */
@media (min-width: 1921px) {
  .section span { font-size: 27px; }
}

/***********************************************************/

.right-content span {
  color: #3f3553;
}

.section-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 20px;
}


/* ------------------------------------- */
/* LANGUAGE OPTIONS                      */
/* ------------------------------------- */
.lang-options {
  position: absolute;
  bottom: 0px;
  margin-left: 2.45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.lang-options img {
  width: 24px;
  margin-bottom: 5px;
}

.language-switch {
  position: absolute;
  bottom: 0;
  left: 75%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  /*gap: 0;*/
}

/**************CLAMP FALLBACK FOR TIZEN******************/
/* baseline για όλους (και Tizen 4) */
.language-switch button {
  position: relative;
  background: none;
  border: none;
  font-size: 18px;             /* ελάχιστο της clamp */
  cursor: pointer;
  color: #333333;
  margin-right: 5px;
  padding: 4px 2px 2px 2px;
  display: inline-block;
  border-bottom: 2px solid transparent;
}

@media (min-width: 1921px) {
  .language-switch button { font-size: 20px; }
}

/*.language-switch button {
  position: relative;
  background: none;
  border: none;
  font-size: clamp(18px, 0.9vw, 22px);
  cursor: pointer;
  color: #3F364C;
  margin-right: 5px;
  padding: 4px 2px 2px 2px;
  display: inline-block;
  border-bottom: 2px solid transparent;
}*/
/**************CLAMP FALLBACK FOR TIZEN******************/


.language-switch button:hover,
.language-switch button.active {
  border-bottom: 2px solid #3F364C;
}

/*.language-switch button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -55px;
  transform: translateX(-50%);
  width: 25px;
  height: 33px;
  background: #3F364C;
  border: 2px solid #3F364C;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  opacity: 0;
  transition: opacity 0.2s ease;
}*/

.language-switch button:hover::before,
.language-switch button.active::before {
  opacity: 1;
}

/* ------------------------------------- */
/* INTERACTIVE OVERLAYS                  */
/* ------------------------------------- */
.enter-porfyra-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}


/********************-------------------------TIZEN FIX ----------------------*************************/

/* 1) Δώσε “πραγματικό” ύψος στη σελίδα */
html, body { height: 100%; }
body { margin: 0; }

/* 2) Το main container να πιάνει όλη την οθόνη TV */
.container {
  /*position: relative;
  /*min-height: 100vh;   /* για κάθε περίπτωση */
  /*height: 100vh;       /* 1080p: δώσε σταθερό viewport ύψος */
  overflow: hidden;    /* να μη “ξεφεύγουν” pseudo/backgrounds */
}

/* 3) Το backgrounds layer να απλωθεί full-bleed πίσω απ’ το περιεχόμενο */
.backgrounds {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;  /* αντί για inset (Tizen δεν το υποστηρίζει) */
  z-index: 0;           /* από κάτω */
  display: flex;        /* μοιράζει Left/Right 50/50 */
}

/*--------------------------------------------------------------------------------------------------------*/