/* ==========================================================================
   DeepSim 3 — Coming Soon
   Noir sobre + lumiere de fond. Aucune dependance, aucun script.
   L'etat au repos est TOUJOURS visible : l'animation d'entree n'est
   qu'un bonus (@starting-style), jamais une condition d'affichage.
   ========================================================================== */

:root {
  --black:      #050506;
  --orange:     255, 57, 7;      /* #FF3907 — orange de la marque */
  --cool:       104, 138, 205;   /* contre-lumiere froide, tres discrete */
  --ink:        255, 255, 255;

  --ls:         .42em;           /* interlettrage de la ligne de texte */
  --logo-w:     clamp(300px, 32vw, 500px);   /* largeur du seul mot DEEPSIM */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --in:         1.2s;            /* duree de l'entree */
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--black);
  color: rgb(var(--ink));
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

::selection { background: rgba(var(--orange), .35); color: #fff; }

/* --------------------------------------------------------------------------
   1. La lumiere — dosee pour que le noir reste dominant
   -------------------------------------------------------------------------- */

.light {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.light > * { position: absolute; inset: 0; }

/* Halo principal : serre derriere le logo, il respire lentement */
.light__key {
  background:
    radial-gradient(34vmax 22vmax at 50% 43%,
      rgba(var(--orange), .13) 0%,
      rgba(var(--orange), .05) 34%,
      rgba(var(--orange), .015) 58%,
      rgba(var(--orange), 0)    76%);
  mix-blend-mode: screen;
  animation: breathe 16s var(--ease) infinite alternate;
  will-change: opacity, transform;
}

/* Contre-jour froid : juste assez pour que le noir ne soit pas plat */
.light__cool {
  background:
    radial-gradient(38vmax 30vmax at 12% 8%,
      rgba(var(--cool), .07) 0%,
      rgba(var(--cool), 0)   62%),
    radial-gradient(34vmax 26vmax at 92% 92%,
      rgba(var(--cool), .05) 0%,
      rgba(var(--cool), 0)   60%);
  mix-blend-mode: screen;
  animation: drift 38s ease-in-out infinite alternate;
  will-change: transform;
}

/* Ligne d'horizon chaude, posee sous le pied de page */
.light__floor {
  background:
    radial-gradient(70vmax 16vmax at 50% 106%,
      rgba(var(--orange), .10) 0%,
      rgba(var(--orange), .03) 40%,
      rgba(var(--orange), 0)   72%);
  mix-blend-mode: screen;
  animation: breathe 23s var(--ease) infinite alternate-reverse;
}

/* Vignettage : on referme les bords, franchement */
.light__vignette {
  background:
    radial-gradient(96% 88% at 50% 44%,
      rgba(0, 0, 0, 0)   28%,
      rgba(0, 0, 0, .55) 66%,
      rgba(0, 0, 0, .92) 100%);
}

/* Grain fin : casse le banding des degrades */
.light__grain {
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

@keyframes breathe {
  from { opacity: .68; transform: scale(1);    }
  to   { opacity: 1;   transform: scale(1.09); }
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0); }
  to   { transform: translate3d( 1.5%,  1%, 0); }
}


/* --------------------------------------------------------------------------
   2. La scene
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4.6vh, 46px);
  padding: max(32px, 6vh) clamp(20px, 6vw, 64px);
}

/* --- Le bloc DEEPSIM 3 ---------------------------------------------------
   Le PNG est recadre au ras des lettres : sa hauteur EST la hauteur de
   capitale. Le 3 partage exactement la meme boite, les deux sont donc
   cales sans calcul. L'ecart (43,5 / 1763) reprend celui du logo.        */

.mark {
  margin: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--logo-w) * .030);
  filter:
    drop-shadow(0 0 24px rgba(var(--orange), .20))
    drop-shadow(0 0 80px rgba(var(--orange), .10));
}

.mark__logo {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* --- Le 3 --------------------------------------------------------------- */

.three {
  display: block;
  width: calc(var(--logo-w) * .1151);   /* 203 / 1763 */
  height: auto;
  animation: threeGlow 6.5s ease-in-out infinite alternate;
  will-change: filter;
}

/* Le reflet qui traverse le chiffre, lentement, puis attend */
.three__sheen {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translateX(-70px) skewX(-14deg);
  animation: threeSheen 9s cubic-bezier(.45, 0, .2, 1) 3.4s infinite;
  will-change: transform;
}

@keyframes threeGlow {
  from {
    filter:
      drop-shadow(0 0  4px rgba(var(--ink), .07))
      drop-shadow(0 0 18px rgba(var(--orange), .10));
  }
  to {
    filter:
      drop-shadow(0 0  8px rgba(var(--ink), .15))
      drop-shadow(0 0 28px rgba(var(--orange), .16));
  }
}

@keyframes threeSheen {
  0%        { transform: translateX(-70px) skewX(-14deg); }
  36%, 100% { transform: translateX(250px) skewX(-14deg); }
}

/* --- Filet lumineux ------------------------------------------------------ */

.rule {
  position: relative;
  width: clamp(88px, 14vw, 160px);
  height: 1px;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(var(--ink), 0)   0%,
    rgba(var(--ink), .18) 50%,
    rgba(var(--ink), 0)   100%);
}

.rule__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--orange), 0)  0%,
    rgba(var(--orange), .9) 50%,
    rgba(var(--orange), 0)  100%);
  transform: translateX(-100%);
  animation: sweep 7s var(--ease) 2.5s infinite;
}

@keyframes sweep {
  0%        { transform: translateX(-100%); }
  45%, 100% { transform: translateX(100%);  }
}

/* --- Ligne de texte ------------------------------------------------------ */

.tagline {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.2vw, 20px);
  font-size: clamp(10.5px, 1.05vw, 13px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls);
}

/* rattrape l'espace d'interlettrage de la derniere lettre */
.tagline__text,
.tagline__when { margin-right: calc(var(--ls) * -1); }

.tagline__text { color: rgba(var(--ink), .52); }
.tagline__when { color: rgba(var(--ink), .88); }

.tagline__dot {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--orange));
  box-shadow: 0 0 10px rgba(var(--orange), .8);
}

/* --- Contact ------------------------------------------------------------- */

.contact {
  position: relative;
  margin-top: clamp(2px, 1.4vh, 16px);
  padding: 4px 0 6px;
  font-size: clamp(11px, .92vw, 12.5px);
  letter-spacing: .1em;
  color: rgba(var(--ink), .34);
  text-decoration: none;
}

.contact::after {
  content: "";
  position: absolute;
  left: 0;
  right: .1em;
  bottom: 0;
  height: 1px;
  background: rgba(var(--orange), .85);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}

.contact:hover,
.contact:focus-visible { color: rgba(var(--ink), .85); }

.contact:hover::after,
.contact:focus-visible::after { transform: scaleX(1); }

.contact:focus-visible {
  outline: 1px solid rgba(var(--orange), .6);
  outline-offset: 6px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Entree en scene — transition depuis @starting-style.
      Si le navigateur ne la connait pas, la page s'affiche simplement,
      d'un bloc : rien ne peut rester invisible.
   -------------------------------------------------------------------------- */

.mark,
.rule,
.tagline,
.contact {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--in) var(--ease),
    transform var(--in) var(--ease),
    filter    var(--in) var(--ease),
    color     .35s      var(--ease);
}

.rule    { transition-delay: .18s; }
.tagline { transition-delay: .34s; }
.contact { transition-delay: .5s;  }
.contact:hover, .contact:focus-visible { transition-delay: 0s; }

@starting-style {
  .mark    { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  .rule    { opacity: 0; transform: scaleX(.4);       }
  .tagline { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  .contact { opacity: 0; transform: translateY(8px);  }
}

/* --------------------------------------------------------------------------
   4. Adaptations
   -------------------------------------------------------------------------- */

/* Tablette et petits portables */
@media (max-width: 1024px) {
  :root { --logo-w: min(46vw, 380px); }
}

/* Portrait etroit */
@media (max-width: 620px) {
  :root { --logo-w: min(64vw, 290px); --ls: .32em; }
  .stage { gap: clamp(22px, 4vh, 36px); }
  .tagline { font-size: 11px; gap: 10px; }
}

/* Tres petits ecrans : la ligne peut passer sur deux lignes proprement */
@media (max-width: 380px) {
  :root { --ls: .26em; }
  .tagline { font-size: 10.5px; row-gap: 8px; }
}

/* Mobile couche / ecran tres bas */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --logo-w: min(38vw, 330px); }
  .stage { gap: 16px; padding-block: 20px; }
  .contact { margin-top: 0; }
}

/* Tres grands ecrans */
@media (min-width: 1900px) {
  :root { --logo-w: clamp(480px, 27vw, 590px); }
}

/* Accessibilite : plus aucun mouvement */
@media (prefers-reduced-motion: reduce) {
  .light__key,
  .light__cool,
  .light__floor,
  .rule__shimmer,
  .three,
  .three__sheen { animation: none; }

  .light__key { opacity: .9; }

  .three {
    filter:
      drop-shadow(0 0 10px rgba(var(--ink), .22))
      drop-shadow(0 0 30px rgba(var(--orange), .18));
  }

  .mark,
  .rule,
  .tagline,
  .contact { transition: none; }
}