/* css/timeline.css */

.timeline-wrapper {
  position: relative;
  /* Limit the maximum width of the timeline to align with the education grid (1200px).
   * On very wide screens the wrapper will not exceed 1200px and will be centred. */
  width: 100%;
  max-width: 1200px;
  height: 600px;
  margin: 0 auto 2rem auto;
}

/* Entry-Icon (Desktop) */
.timeline-entry-icon {
  position: absolute;
  left: calc(var(--x) / 1200 * 100%);
  top: calc(var(--y) / 600 * 100%);
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
}
.timeline-entry-icon.visible {
  opacity: 1;
}
.timeline-entry-icon img {
  width: 40px;
  height: auto;
  display: block;
}

/* SVG-Pfad (Desktop) */
.timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#timeline-path {
  stroke: #0F3B88;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--path-length) var(--path-length);
  stroke-dashoffset: var(--path-length);
  fill: none;
}

/* Timeline-Knoten (Desktop) */
.timeline-node {
  position: absolute;
  left: calc(var(--x) / 1200 * 100%);
  top: calc(var(--y) / 600 * 100%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  cursor: pointer;
  z-index: 3;
}
.timeline-node.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Kreis-Design */
.node-circle {
  width: 120px;
  height: 120px;
  border: 8px solid #0F3B88;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.node-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Datums-Label (Desktop) */
.node-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: .875rem;
  color: #0F3B88;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease .2s;
}
.timeline-node.visible .node-label {
  opacity: 1;
}

/* Hover-Zoom (Desktop) */
.timeline-node:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.timeline-node:active {
  transform: translate(-50%, -50%) scale(0.95);
}

/* Shake-Animation fürs Entry-Icon */
/* (bereits in animations.css) */

/* ------------------------------------------------------ */
/* Mobile ≤ 600px: … (unverändert) … */

/* ------------------------------------------------------ */
/* Modal-Overlay und Dialogbox */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-overlay.open {
  display: flex;
}
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
  /* Enable 3D preservation so flip animations behave correctly */
  transform-style: preserve-3d;
  /* Maximalbreite der Boxen */
  max-width: 800px;
  /* Flexbox, damit der CTA-Button nach unten wandert */
  display: flex;
  flex-direction: column;
}
/* Desktop: max-width + Padding */
@media (min-width: 601px) {
  .modal-content {
    padding: 2rem 6rem 3rem;
    /* Begrenze die maximale Breite auf 800px */
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
  }
}
/* Mobile */
@media (max-width: 600px) {
  .modal-content {
    padding: 1.5rem 1rem;
    /* Mobile: maximal 1000px, aber die Breite wird durch den Rand begrenzt */
    max-width: 1000px;
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.modal-close img {
  width: 24px;
  height: 24px;
}

.modal-body {
  margin-top: 1rem;
  /* Hide the back face of content during rotation to avoid mirrored text */
  backface-visibility: hidden;
  /* Lässt den Textbereich wachsen, damit der CTA-Button an den unteren Rand gedrückt wird */
  flex: 1 1 auto;
}
/* Icon, Titel, Rolle, Zeit als kompakter Block */
.modal-body .node-circle {
  width: 100px;
  height: 100px;
  margin: 0 auto 0.5rem;
  border-width: 6px;
}
.modal-body h3 {
  margin: 0.25rem 0;
  font-size: 2rem;
  color: #333;
  text-align: center;
}
.modal-body p.role {
  margin: 0.25rem 0;
  font-weight: bold;
  color: #0F3B88;
  text-align: center;
}
.modal-body p.time {
  margin: 0.25rem 0;
  color: #777;
  font-size: 0.875rem;
  text-align: center;
}
/* größerer Abstand vor Fließtext */
.modal-body p.desc {
  margin: 1rem 0;
  text-align: left;
  color: #444;
  line-height: 1.5;
  /* zusätzlicher Abstand nach dem Fliesstext für Rückseite */
  margin-bottom: 2rem;
}

.modal-cta {
  /* Automatisch nach unten schieben, so dass der Abstand zum unteren Rand einheitlich bleibt */
  margin-top: auto;
  background: #0F3B88;
  color: #fff;
  border: none;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  /* Breite an den Inhalt anpassen und horizontal zentrieren */
  align-self: center;
  width: auto;
  display: inline-block;
}

/* Wrapper für Zurück-Pfeil und CTA, sitzt am unteren Rand */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* Drückt den Footer nach unten innerhalb des flexiblen Modal-Contents */
  margin-top: auto;
}

/* CTA innerhalb des Footer-Containers benötigt keinen oberen Rand */
.modal-footer .modal-cta {
  margin-top: 0;
}

/* Override the back button styling specifically when it resides in the footer.
 * This selector has higher specificity than `.modal-back` in animations.css,
 * allowing us to reset its absolute positioning and size. */
.modal-footer .modal-back {
  position: static;
  width: 40px;
  height: 40px;
}
.modal-footer .modal-back img {
  width: 100%;
  height: 100%;
}

/* Ensure the back arrow is always placed to the left of the CTA button within the footer. By
   explicitly setting the flex order on both elements we avoid any unexpected reordering due
   to browser defaults or CSS overrides. */
.modal-footer .modal-back {
  order: 0;
}
.modal-footer .modal-cta {
  order: 1;
}


/*
 * Responsives Layout für die Dialogbox:
 *
 *   – Auf sehr grossen Bildschirmen (ab 1201px) nimmt die Box 50% der Breite ein.
 *   – Zwischen 801px und 1200px wächst sie auf 60% der Breite.
 *   – Zwischen 601px und 800px nutzt sie 80% der Breite.
 *   – In der mobilen Ansicht (≤ 600px) füllt sie fast die ganze Breite mit einem kleinen Rand.
 */
@media (min-width: 1201px) {
  .modal-content {
    /* Obergrenze 800px, ansonsten 50% der Breite */
    max-width: 800px;
    width: min(50vw, 800px);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 3rem 3rem;
  }
}
@media (min-width: 801px) and (max-width: 1200px) {
  .modal-content {
    max-width: 800px;
    width: min(60vw, 800px);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 2.5rem 3rem;
  }
}
@media (min-width: 601px) and (max-width: 800px) {
  .modal-content {
    max-width: 800px;
    width: min(80vw, 800px);
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 2rem 2.5rem;
  }
}
@media (max-width: 600px) {
  .modal-content {
    /* Mobile: enger Rand links und rechts, volle Breite innerhalb des Rands */
    margin-left: 1rem;
    margin-right: 1rem;
    width: auto;
    /* Begrenze auch auf mobilen Geräten die maximale Breite */
    max-width: 800px;
  }
}

/* Preserve card orientation when flipped */
.flipped-state {
  transform: perspective(600px) rotateY(-180deg);
}
/* Rotate inner content so that it appears upright on the back side */
.modal-content.flipped-content .modal-body {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

/* Wenn die Karte gedreht wird (neuer Inhalt), soll der Schliessen-Button wieder oben rechts erscheinen. */
.modal-content.flipped-content .modal-close {
  /* Auf der Rückseite: Positioniere das Exit-Icon links, damit es optisch rechts erscheint */
  left: 1rem;
  right: auto;
}

/* Nach der Drehung (flipped-state) soll der Schliessen-Button ebenfalls oben rechts bleiben */
.modal-content.flipped-state .modal-close {
  /* Nach der Drehung: Positioniere das Exit-Icon links, damit es optisch rechts erscheint */
  left: 1rem;
  right: auto;
}

/* Increase whitespace after description text for better spacing */
/* Der Abstand wird oben bereits gesetzt */
.modal-body p.desc {
  margin-bottom: 2rem;
}

/* Position and size adjustments for the back arrow */
/*
 * Back button inside the footer. It should sit to the left of the CTA and be
 * sufficiently large to be tappable. Because the arrow lives inside
 * `.modal-footer`, we deliberately avoid any absolute positioning here.
 */
.modal-back {
  /* Base styling for the back button. Do not set position here, since it
   * will be overridden inside the more specific `.modal-footer .modal-back` rule below. */
  background: transparent;
  border: none;
  cursor: pointer;
  /* Use flex to centre the SVG inside the button */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Larger size for better visibility */
  width: 40px;
  height: 40px;
}
.modal-back img {
  width: 100%;
  height: 100%;
}

/* Wenn die Karte gedreht ist, soll der CTA-Button und der Zurück-Button korrekt orientiert bleiben */
/* CTA on the backside should be rotated but remain visible (avoid mirrored text using rotation) */
.modal-content.flipped-content .modal-cta {
  transform: rotateY(180deg);
  backface-visibility: visible;
}
/* Back arrow should be rotated but remain visible */
/* Back arrow should be rotated 180deg and mirrored so that it points left even after flipping */
/* Rotate the back arrow so that it continues to point left on the backside. First mirror the
   arrow along the X-axis then rotate it 180° around the Y-axis. This order of transforms
   corrects the mirrored effect that occurs when the card itself is flipped. */
.modal-content.flipped-content .modal-back {
  transform: scaleX(-1) rotateY(180deg);
  backface-visibility: visible;
}

/*
 * On the backside of the modal (icon 11), position the action row (back arrow + CTA) in the vertical
 * centre of the card rather than anchored to the bottom. Also remove any automatic top margin on
 * the CTA to keep both elements aligned. This helps achieve a balanced layout when the card
 * contains less text.
 */
.modal-content.flipped-content .modal-footer {
  margin-top: auto;
  margin-bottom: auto;
}
.modal-content.flipped-content .modal-cta {
  margin-top: 0;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Mobile-Ansicht der Timeline: 2‑Spalten‑Raster und Slide‑In‑Animation */
@media (max-width: 600px) {
  /* Timeline: 2-Spalten-Grid, Icons slide-in, letztes Icon zentriert */
  .timeline-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    column-gap: 1rem;
    row-gap: 1.5rem;
    padding: 1.5rem 1rem 2rem;
    margin: 0;
    height: auto;
  }

  .timeline-wrapper .timeline-entry-icon,
  .timeline-wrapper .timeline-svg,
  .timeline-wrapper #timeline-path {
    display: none !important;
  }

  .timeline-wrapper .timeline-node {
    position: static !important;
    transform: none !important;
    opacity: 0;
    --icon-size: 100px;
  }
  .timeline-wrapper .timeline-node .node-circle {
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    border-width: 6px;
  }
  .timeline-wrapper .timeline-node .node-label {
    position: static !important;
    transform: none !important;
    margin: .5rem 0 0;
    text-align: center;
    opacity: 1 !important;
  }
  .timeline-wrapper .timeline-node.visible {
    animation: slide-in .6s ease-out forwards;
  }
  .timeline-wrapper .timeline-node:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* Modal-Content: engeres Padding, volle Breite */
  .modal-content {
    padding: 1.5rem 1rem;
    /* Begrenze die maximale Breite auch im zweiten Mobile-Block */
    max-width: 800px;
  }
}

/* Styling for the timeline introduction text (typewriter). The container should
   not exceed the same width as the TL;DR blocks and should be centred.
   It inherits typewriter styles from the `typewriter-container` class defined
   in components.css. */
#timeline-typewriter {
  /* Default: constrain width like the TL;DR section and centre on narrow screens */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

/*
 * The timeline layout wrapper holds both the introduction text and the timeline itself. By default it
 * behaves like a normal block-level container and centres its contents via the margin on the
 * timeline-wrapper and typewriter container. On very large viewports we switch to a two‑column
 * layout where the text sits to the left of the timeline. The total width of both columns is
 * constrained to 1400px (200px for the text + 1200px for the timeline).
 */
/*
 * The container that wraps the typewriter intro and the timeline. By default it behaves like
 * a normal block element and allows its children to stack vertically. Once the viewport
 * exceeds 1500px in width, we switch to a fixed two‑column layout: 200px for the intro and
 * 1200px for the timeline (1400px total, leaving ~100px of horizontal padding on very wide
 * screens). The wrapper is centred horizontally via auto margins.
 */
.timeline-layout {
  width: 100%;
  /* On narrow screens the wrapper width collapses to fit its contents and centres via the
     margins applied on its children (timeline-wrapper and typewriter). */
}

@media (min-width: 1500px) {
  .timeline-layout {
    display: flex;
    /* Keep the wrapper at a fixed total width to accommodate both columns */
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Left column: typewriter intro. Reserve exactly 200px and prevent shrinking. */
  .timeline-layout #timeline-typewriter {
    flex: 0 0 300px;
    max-width: none;
    margin: 0;
    margin-top: 70px;
  }
  /* Right column: timeline view. Reserve 1200px and remove its centreing margins */
  .timeline-layout .timeline-wrapper {
    flex: 0 0 1200px;
    max-width: none;
    width: 1200px;
    margin: 0;
  }
}

/* Keyframes für das slide-in der Icons */
@keyframes slide-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Shake animation used for the entry icon. This subtle horizontal wobble occurs when
 * the user clicks on the portfolio icon at the start of the timeline. */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.shake {
  animation: shake 0.5s ease-in-out;
}

/* Override the generic shake for the timeline entry icon to keep it anchored at its
   original position. The translate(-50%, -50%) ensures the icon remains centred on
   its coordinate during the horizontal shake. */
@keyframes entry-icon-shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  20%, 60% { transform: translate(-50%, -50%) translateX(-4px); }
  40%, 80% { transform: translate(-50%, -50%) translateX(4px); }
}
.timeline-entry-icon.shake {
  animation: entry-icon-shake 0.5s ease-in-out;
}