/* ==========================================================================
   TSL - Turkse Studentenvereniging Leuven
   Landing Page / Work in Progress Stylesheet
   ========================================================================== */

/* --- Design Tokens --- */
:root {
  --bg-crimson: #6b0e07;
  --text-cream: #fae3b0;
  --text-gold: #f9b200;
  --motif-opacity: 0.16;
  
  /* Motif sidebars width */
  --motif-width: clamp(42px, 11vmin, 150px);
  
  /* Safe minimum side padding for center content to prevent overlap */
  --content-padding-x: clamp(54px, 14vmin, 190px);
  --content-padding-y: clamp(16px, 4vh, 50px);
  
  /* Proportional component constraints */
  --logo-max-h: clamp(85px, 24vh, 230px);
  --logo-max-w: clamp(85px, 26vmin, 220px);
  
  --title-max-h: clamp(28px, 8vh, 75px);
  --title-max-w: clamp(140px, 35vmin, 310px);
  
  --wip-max-h: clamp(75px, 24vh, 240px);
  --wip-max-w: clamp(180px, 50vmin, 440px);
  
  /* Spacing */
  --gap-logo-title: clamp(8px, 2.5vh, 24px);
  --gap-title-wip: clamp(16px, 5.5vh, 55px);
}

/* --- Reset & Global Baseline --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Strict zero-scroll guarantee */
  background-color: var(--bg-crimson);
  color: var(--text-cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Master Screen Container --- */
.page-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-crimson);
}

/* --- Side Motifs (Repeating smoothly to the screen bottom) --- */
.motif {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--motif-width);
  height: 100%;
  opacity: var(--motif-opacity);
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat-y;
  transition: opacity 0.4s ease;
}

.motif-left {
  left: 0;
  background-image: url('assets/motif-left.png');
  background-position: left top;
  background-size: 100% auto;
}

.motif-right {
  right: 0;
  background-image: url('assets/motif-right.png');
  background-position: right top;
  background-size: 100% auto;
}

/* --- Central Content Area --- */
.content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 900px;
  padding: var(--content-padding-y) var(--content-padding-x);
  text-align: center;
  animation: fadeInContent 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Section 1: Logo Crest --- */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--gap-logo-title);
  flex-shrink: 1;
}

.logo-image {
  max-height: var(--logo-max-h);
  max-width: var(--logo-max-w);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.28));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.logo-image:hover {
  transform: scale(1.04) translateY(-2px);
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 14px rgba(250, 227, 176, 0.2));
}

/* --- Section 2: Organization Title --- */
.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--gap-title-wip);
  flex-shrink: 1;
}

.title-image {
  max-height: var(--title-max-h);
  max-width: var(--title-max-w);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.22));
}

/* Hidden semantic element for Screen Readers & SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Section 3: "Work in Progress" Banner --- */
.wip-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
}

.wip-image {
  max-height: var(--wip-max-h);
  max-width: var(--wip-max-w);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.28));
}

/* --- Subtle Ambient Polish & Lighting --- */
.ambient-glow {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 70vmin, 800px);
  height: clamp(280px, 70vmin, 800px);
  background: radial-gradient(circle, rgba(175, 25, 14, 0.3) 0%, rgba(107, 14, 7, 0) 70%);
  pointer-events: none;
  z-index: 1;
}

/* --- Micro-Animations --- */
@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- High DPI / Retina Optimization --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-image,
  .title-image,
  .wip-image {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* --- Responsive Layout Optimizations for Compact Heights (Landscape Mobile / Laptops) --- */
@media (max-height: 540px) {
  :root {
    --content-padding-y: 8px;
    --gap-logo-title: 6px;
    --gap-title-wip: 10px;
    --logo-max-h: 70px;
    --title-max-h: 24px;
    --wip-max-h: 70px;
    --motif-width: 34px;
  }
}