/* =========================
   Base
   ========================= */

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

body{
  height: 100vh;
  background: #0b0b0c;
  color: #e8e8ea;
  font-family: "Inter", sans-serif;
}

/* IMPORTANT pour que le footer en absolute marche proprement */
body { position: relative; }

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10vw;

  animation: fadeIn 1.2s ease-out forwards;
  opacity: 0;
}
@keyframes fadeIn { to { opacity: 1; } }

.tagline{
  margin-top: 1.2rem;
  font-size: 1rem;
  font-weight: 300;
  opacity: 0.75;
}

.location{
  margin-top: 3rem;
  font-size: 0.85rem;
  opacity: 0.45;
}

.legal{
  margin-top: 1rem;
  font-size: 0.75rem;
  opacity: 0.35;
}

/* =========================
   Language auto (index + legal)
   ========================= */

.lang { display: none; }
.lang.active { display: block; }

/* Pour que les liens FR/EN dans le footer s'affichent en inline */
.footer .lang.active { display: inline; }


/* =========================
   Mentions légales page layout
   (mentions-legales.html)
   ========================= */

.legal-page{
  min-height: 100vh;
  padding: 10vh 10vw;
}

.legal-page h1{
  font-weight: 500;
  margin-bottom: 2rem;
}

.legal-page p{
  max-width: 720px;
  margin-bottom: 1.2rem;
  opacity: 0.85;
}

.legal-page a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(232,232,234,0.25);
}

.legal-page a:hover{
  opacity: 0.6;
}


/* =========================
   Prism diffraction effect
   - White text stays still
   - RGB layers split & fly (rare burst)
   ========================= */

.prism{
  position: relative;
  display: inline-block;
  line-height: 1.05;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem);
  white-space: nowrap;
  isolation: isolate;      /* évite les mélanges bizarres */
  overflow: visible;
}

/* base immobile */
.prism .base{
  position: relative;
  z-index: 5;
  color: #e8e8ea;
}

/* couches RGB */
.prism .layer{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;              /* off hors burst */
  will-change: transform, opacity, clip-path, filter;
  mix-blend-mode: screen;  /* lumineux sur fond sombre */
  white-space: nowrap;

  /* glow */
  text-shadow:
    0 0 10px rgba(255,255,255,0.10),
    0 0 28px currentColor;
}

/* Couleurs “LSD” (saillantes) */
.prism .r{ color: rgba(255, 60, 120, 0.98); filter: brightness(1.6) contrast(1.5); }
.prism .g{ color: rgba(60, 255, 130, 0.98); filter: brightness(1.8) contrast(1.55); }
.prism .b{ color: rgba(90, 150, 255, 0.98); filter: brightness(1.6) contrast(1.5); }

/* on/off (burst toutes les 10s) : actif ~ 5% -> 17% (≈ 1.2s) */
.prism .layer{
  animation: layerOn 10s infinite;
}
@keyframes layerOn{
  0%,4%    { opacity: 0; }
  5%,17%   { opacity: 0.95; }
  18%,100% { opacity: 0; }
}

/* mouvement “prisme” (différent pour chaque couleur) */
.prism .r{ animation: layerOn 10s infinite, moveR 10s infinite, sliceR 10s infinite; }
.prism .g{ animation: layerOn 10s infinite, moveG 10s infinite, sliceG 10s infinite; }
.prism .b{ animation: layerOn 10s infinite, moveB 10s infinite, sliceB 10s infinite; }

/* Déplacements : “part dans tous les sens” mais lent / psyché */
@keyframes moveR{
  0%,4%    { transform: translate(0,0) skew(0deg); }
  5%       { transform: translate(-30px, 10px) skew(1deg); }
  8%       { transform: translate(80px, -35px) skew(-2deg); }
  11%      { transform: translate(-120px, 45px) skew(2.8deg); }
  14%      { transform: translate(70px, -18px) skew(-1.6deg); }
  17%      { transform: translate(-20px, 6px) skew(0.6deg); }
  18%,100% { transform: translate(0,0) skew(0deg); }
}

@keyframes moveG{
  0%,4%    { transform: translate(0,0) skew(0deg); }
  5%       { transform: translate(45px, -8px) skew(-1deg); }
  8%       { transform: translate(-95px, 28px) skew(2deg); }
  11%      { transform: translate(130px, -55px) skew(-3deg); }
  14%      { transform: translate(-70px, 22px) skew(1.8deg); }
  17%      { transform: translate(18px, -5px) skew(-0.6deg); }
  18%,100% { transform: translate(0,0) skew(0deg); }
}

@keyframes moveB{
  0%,4%    { transform: translate(0,0) skew(0deg); }
  5%       { transform: translate(18px, -22px) skew(-0.8deg); }
  8%       { transform: translate(-60px, 40px) skew(2.2deg); }
  11%      { transform: translate(105px, -20px) skew(-2.4deg); }
  14%      { transform: translate(-38px, 14px) skew(1.1deg); }
  17%      { transform: translate(10px, -6px) skew(-0.4deg); }
  18%,100% { transform: translate(0,0) skew(0deg); }
}

/* Fragmentation (prisme qui se “diffracte” en bandes)
   -> chaque couleur a son pattern de découpe */
@keyframes sliceR{
  0%,4%,18%,100% { clip-path: inset(0 0 0 0); }
  5%  { clip-path: inset(8% 0 78% 0); }
  8%  { clip-path: inset(38% 0 46% 0); }
  11% { clip-path: inset(68% 0 14% 0); }
  14% { clip-path: inset(18% 0 62% 0); }
  17% { clip-path: inset(52% 0 30% 0); }
}

@keyframes sliceG{
  0%,4%,18%,100% { clip-path: inset(0 0 0 0); }
  5%  { clip-path: inset(0 0 86% 0); }
  8%  { clip-path: inset(52% 0 22% 0); }
  11% { clip-path: inset(24% 0 58% 0); }
  14% { clip-path: inset(76% 0 8% 0); }
  17% { clip-path: inset(40% 0 42% 0); }
}

@keyframes sliceB{
  0%,4%,18%,100% { clip-path: inset(0 0 0 0); }
  5%  { clip-path: inset(14% 0 68% 0); }
  8%  { clip-path: inset(62% 0 18% 0); }
  11% { clip-path: inset(34% 0 44% 0); }
  14% { clip-path: inset(6% 0 80% 0); }
  17% { clip-path: inset(46% 0 36% 0); }
}

/* Option: un “afterglow” très doux (reste propre) */
.prism::after{
  content: "Woulden Lab";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;

  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

  background-image: conic-gradient(
    #ff0055, #ffcc00, #44ff00, #00ffd5, #0066ff, #8800ff, #ff00cc, #ff0055
  );

  opacity: 0;
  filter: blur(12px) saturate(220%) brightness(150%);
  mix-blend-mode: screen;
  will-change: opacity, transform, filter;

  animation: afterGlow 10s infinite;
}

@keyframes afterGlow{
  0%,4%,18%,100% { opacity: 0; transform: translate(0,0); }
  6%  { opacity: 0.45; transform: translate(8px,-3px); }
  11% { opacity: 0.55; transform: translate(-10px,6px); }
  16% { opacity: 0.35; transform: translate(6px,-2px); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .prism .layer,
  .prism::after{
    animation: none !important;
    opacity: 0 !important;
  }
}


/* =========================
   Footer / Copyright
   ========================= */

.footer {
  position: absolute;
  bottom: 1.5rem;
  left: 10vw;
  right: 10vw;
}

.footer p {
  font-size: 0.75rem;
  opacity: 0.35;
}

.footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(232,232,234,0.25);
}

.footer a:hover {
  opacity: 0.6;
}