/*
 * Portal Page Parallax Styling
 * Provides specific styles for the parallax effects on the portal page
 */

.portal {
  position: relative;
  /* Replace viewport-height dependency with ixu grid (approx: 1 ixu = vh/12). 120vh ≈ 120/ (100/12) = 14.4 ixu -> choose 15 ixu for headroom */
  min-height: calc(var(--ixu, 60px) * 15);
  overflow-y: visible;
  overflow-x: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 10vh top padding ≈ 1.2 ixu; use 1.25 ixu for roundness */
  padding-top: calc(var(--ixu, 60px) * 1.25);
  box-sizing: border-box;
}

.trinkatitle-container {
  position: relative;
  width: calc(var(--ixu, 60px) * 6.5);
  /* Top margin 0.6 ixu, bottom gap now 5.625 ixu (45/8) for binary-friendly rhythm */
  margin: calc(var(--ixu,60px)*0.6) auto calc(var(--ixu,60px)*5.625) auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.trinkatitle-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Auto height to maintain aspect ratio */
  object-fit: contain; /* Ensures the image maintains its aspect ratio */
  transition: transform 0.4s ease-out; /* Smooth, slow transition for subtle movement */
}

.trinkatitle-1 {
  z-index: 3; /* Highest z-index - foreground */
  filter: drop-shadow(0 0 5px rgba(14, 247, 255, 0.999)); /* Base glow */
  animation: gentle-float 5s ease-in-out infinite; /* Add gentle floating animation */
}

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.trinkatitle-2 {
  z-index: 1; /* Lowest z-index - background */
}

.trinkatitle-3 {
  z-index: 2; /* Mid z-index - middle layer */
}

/* Button and footer positioning */
.portal-buttons-container {
  margin-top: 0;
  padding-top: 0; /* gap handled entirely by title container bottom margin */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  position: relative;
}

/* Remove extra top margin on first (Begin) button so the visual gap is exactly 4 ixu */
.portal-buttons-container .main-button:first-child {
  margin-top: 0 !important;
}

.portal-footer {
  /* 5vh ≈ 0.6 ixu */
  margin-top: calc(var(--ixu,60px)*0.6);
  text-align: center;
}

/* ...rest of file omitted for brevity... */