@font-face {
  font-family: "Bourbon";
  src: url("../fonts/Bourbon.otf") format("opentype");
}

@font-face {
  font-family: "UnicaMedium";
  src: url("../fonts/UnicaMedium.otf") format("opentype");
}

@font-face {
  font-family: "TimezoneItalic";
  src: url("../fonts/TimezoneItalic.otf") format("opentype");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  overflow: hidden;
  height: 100dvh;
  width: 100vw;
  position: relative;
  background: #FFF5C8;
}

.tp-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #FFF5C8;
  z-index: 1000;
}

.tp-progress-bar {
  height: 100%;
  width: 0%;
  background: #1E1C18;
  transition: width 0.3s ease;
}

.tp-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.tp-choices {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.tp-choice {
  flex: 1;
  border: none;
  background: transparent;
  color: #1E1C18;
  font-size: 4.5rem;
  font-family: "UnicaMedium", sans-serif;
  line-height: 1;
  cursor: pointer;
  padding: 2rem;
  transition: color 0.3s ease;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.tp-choice.tp-left {
  border-right: 1px solid #ccc;
  align-items: flex-start;
}

.tp-choice.tp-right {
  align-items: flex-end;
}

.tp-choice-text {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tp-overlay {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  background: #1E1C18;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}

.tp-overlay.left {
  left: 0;
}

.tp-overlay.right {
  left: 50%;
}

.tp-overlay.visible {
  opacity: 1;
}

/* Texte blanc quand dans la zone noire */
body.overlay-left .tp-left {
  color: #FFF5C8;
}

body.overlay-right .tp-right {
  color: #FFF5C8;
}

body.overlay-left .tp-right {
  color: #1E1C18;
}

body.overlay-right .tp-left {
  color: #1E1C18;
}

.tp-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF5C8;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

.tp-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Le premier panneau apparaît immédiatement sans transition */
.tp-panel.first-panel {
  opacity: 1;
  transition: none;
}

.tp-panel.first-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Le premier panneau part en fade out */
.tp-panel.first-panel:not(.visible) {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

/* Cacher la barre de progression quand le panneau est visible */
body:has(.tp-panel.visible) .tp-progress-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tp-panel-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

/* Afficher la première vidéo (cadre) en permanence */
.tp-panel-video-first {
  opacity: 1 !important;
  z-index: 200 !important;
  width: 98vw !important;
  height: auto !important;
  max-width: 98vw !important;
  max-height: 130vh !important;
  object-fit: contain !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scaleY(0.95) !important;
  position: fixed !important;
}

/* Masquer le cadre uniquement sur le panneau final "LE COEUR RÉVÉLATEUR" (pas sur la citation) */
.tp-panel.stop-panel:not(.heart-citation-panel) .tp-panel-video-first {
  opacity: 0 !important;
  display: none !important;
}



.tp-panel-content {
  color: #1E1C18;
  font-size: 4rem;
  font-family: "TimezoneItalic", serif;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  display: inline-block;
  position: relative;
  opacity: 0;
  transition: opacity 0.8s ease-in-out 0.2s;
  max-width: 60%;
  z-index: 300;
}

/* Panneau du cœur révélateur : inverser les couleurs */
.tp-panel.stop-panel {
  background: #1E1C18;
}

.tp-panel.stop-panel .tp-panel-content {
  color: #FFF5C8;
}

.tp-panel.stop-panel .tp-panel-content.bourbon-font {
  color: #FFF5C8;
}

/* Citation initiale "C'était son cœur..." : fond beige, texte noir */
.tp-panel.stop-panel.heart-citation-panel {
  background: #FFF5C8;
}

.tp-panel.stop-panel.heart-citation-panel .tp-panel-content {
  color: #1E1C18;
}

.tp-panel.visible .tp-panel-content {
  opacity: 1;
}

/* Le contenu du premier panneau apparaît immédiatement */
.tp-panel.first-panel .tp-panel-content {
  opacity: 1;
  transition: none;
}

/* Le contenu du premier panneau part en fade out */
.tp-panel.first-panel:not(.visible) .tp-panel-content {
  opacity: 0;
  transition: opacity 0.8s ease-out 0.2s;
}

.tp-panel-content.bourbon-font {
  font-family: "TimezoneItalic", serif;
  font-weight: normal;
  font-style: italic;
  font-size: 10rem;
  line-height: 1;
  padding-bottom: 10%;
  text-align: center;
  margin-top: 12%;
  width: 100%;
  position: relative;
  z-index: 300;
}

.tp-panel-heart-image {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  margin-top: 12%;
}

.tp-panel-content .author-name {
  font-family: "TimezoneItalic", serif;
  font-size: 3rem;
  font-style: italic;
  margin-top: 2rem;
  opacity: 0.8;
  display: block;
  text-align: center;
}

.tp-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.tp-particle {
  position: absolute;
  width: 400px;
  height: 800px;
  object-fit: cover;
  will-change: transform, opacity;
  transition: filter 0.1s ease;
  pointer-events: none;
}

.tp-particle.white {
  filter: none;
  /* Désactive l'effet de différence/inversion */
}

.pixel-eye {
  position: fixed;
  width: 100px;
  height: 100px;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Animation de battement de cœur vers l'arrière */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(var(--heartbeat-scale, 0.98));
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(var(--heartbeat-scale, 0.98));
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.tp-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

body.heartbeat-beating .tp-choice-text {
  animation: heartbeat 0.6s ease-in-out;
  transform-origin: center center;
  display: inline-block;
}

/* Animation de destruction de la page */
@keyframes destroyPage {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8) rotate(5deg);
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(10deg);
    filter: blur(10px);
  }
}

body.destroying * {
  animation: destroyPage 2s ease-in forwards;
  pointer-events: none;
}

body.destroying {
  background: #1E1C18;
  animation: destroyPage 2s ease-in forwards;
}

@media screen and (max-width: 1500px) {
  .tp-panel-content.bourbon-font {
    font-size: 6rem;
    line-height: 0.8;
  }
}

/* Responsive pour téléphone */
@media screen and (max-width: 768px) {
  body {
    background: #FFF5C8 !important;
  }

  html {
    background: #FFF5C8 !important;
  }

  .tp-progress-container {
    background: #FFF5C8 !important;
  }

  .tp-content-wrapper {
    background: #FFF5C8 !important;
  }

  .tp-container {
    background: #FFF5C8 !important;
  }

  .tp-choices {
    flex-direction: column;
    background: #FFF5C8 !important;
  }

  .tp-choice {
    flex: 1;
    width: 100%;
    font-size: 2.5rem;
    padding: 1.5rem;
    border-right: none;
    border-bottom: 1px solid #ccc;
    background: #FFF5C8 !important;
    color: #1E1C18 !important;
    transition: background 0.3s ease, color 0.3s ease;
  }

  .tp-choice.tp-left {
    border-right: none;
    border-bottom: 1px solid #ccc;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  .tp-choice.tp-right {
    border-bottom: none;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  .tp-choice-text {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
  }

  /* S'assurer que les overlays restent noirs sur mobile */
  .tp-overlay {
    width: 100%;
    height: 50%;
    background: #1E1C18 !important;
  }

  .tp-overlay.visible {
    opacity: 1 !important;
    background: #1E1C18 !important;
  }

  /* Texte beige foncé et fond noir sur les overlays sur mobile (même principe que desktop) */
  body.overlay-left .tp-left {
    color: #FFF5C8 !important;
    background: #1E1C18 !important;
  }

  body.overlay-right .tp-right {
    color: #FFF5C8 !important;
    background: #1E1C18 !important;
  }

  body.overlay-left .tp-right {
    color: #1E1C18 !important;
    background: #FFF5C8 !important;
  }

  body.overlay-right .tp-left {
    color: #1E1C18 !important;
    background: #FFF5C8 !important;
  }

  .tp-overlay.left {
    left: 0;
    top: 0;
  }

  .tp-overlay.right {
    left: 0;
    top: 50%;
  }

  .tp-panel-content {
    font-size: 1.8rem;
    padding: 1rem;
    max-width: 80%;
    line-height: 1.3;
  }

  .tp-panel-content.bourbon-font {
    font-size: 2.2rem;
    line-height: 0.8;
    text-align: center;
  }

  .tp-panel-video {
    max-width: 70%;
    max-height: 70%;
  }

  .tp-panel-video-first {
    max-width: 98vw !important;
    max-height: 130vh !important;
    transform: translate(-50%, -50%) scaleY(1.05) !important;
  }


  .tp-panel-content .author-name {
    font-size: 1.2rem;
  }

  .tp-panel-heart-image {
    top: 40%;
    width: 70%;
  }

  .pixel-eye,
  #single-eye {
    width: 300px !important;
    height: 300px !important;
  }

  .tp-particle {
    width: 100px !important;
    height: 200px !important;
  }
}