/* Home cover mockup: 3 sticky cards that COVER the previous one.
   Keep this file separate so we can iterate without touching ultiunreal.css. */

:root{
  --uu-header-h: 60px;
  --uu-gap: 4px;
  --uu-radius: 26px;
}

.uu-home-cover{
  background: #070a0d;
  padding-top: calc(var(--uu-header-h) + 0px);
}

/* Stage holding the covering cards */
.uu-cover-stage{
  padding: 0;
}

/* Each step provides scroll space.
   Negative margin lets the next step start BEFORE the previous is finished => “cover” effect. */
.uu-cover-step{
  position: relative;
  height: 190vh;
  background: #070a0d;
}

/* Last sticky card (Contrôle) ends sooner so Plugins start right after */
.uu-cover-step.uu-z3{
  height: 115vh;
}

.uu-cover-step + .uu-cover-step{
  margin-top: calc(-1 * (100vh - var(--uu-header-h) - (var(--uu-gap) * 2)));
}

/* z-index so newer cards appear on top */
.uu-z1{ z-index: 1; }
.uu-z2{ z-index: 2; }
.uu-z3{ z-index: 3; }

/* Sticky card (the “page”) */
.uu-cover-card{
  position: sticky;
  top: calc(var(--uu-header-h) + var(--uu-gap));
  height: auto;
  max-width: 1220px;
  margin: 0 auto;
  border-radius: var(--uu-radius);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(9,12,16,1);
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  overflow: hidden;
}

/* subtle grid background */
.uu-cover-card:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .10;
  pointer-events:none;
}

/* per step accent */
.uu-z1 .uu-cover-card{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 50%, rgba(74,222,128,.07), transparent 55%),
    rgba(9,12,16,1);
}

.uu-z2 .uu-cover-card{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(147,197,253,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 55%, rgba(251,191,36,.06), transparent 55%),
    rgba(9,12,16,1);
}

/* Index: reduce the big empty space before the plugins section */
.uu-z3 .uu-cover-card{
  height: auto;
}

.uu-cover-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  height: 100%;
  padding: 18px 22px 14px;
  align-items: center;
}

.uu-cover-copy{
  max-width: 58ch;
}

.uu-cover-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.uu-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.90);
  font-weight: 600;
}

.uu-kicker-text{ color: rgba(255,255,255,.70); }

.uu-cover-title{
  color:#fff;
  font-size: 46px;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}

.uu-cover-lead{
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 14px;
}

.uu-cover-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
}

.uu-cover-bullets li{
  color: rgba(255,255,255,.78);
  margin: 0 0 10px;
}

.uu-cover-cta{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Media */
.uu-cover-media{
  position: relative;
  height: 100%;
  display:flex;
  align-items: center;
  justify-content: center;
}

.uu-cover-img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display:block;
}

.uu-cover-img-float{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 78%;
  transform: rotate(1.2deg);
}

/* Scroll hint */
.uu-scroll-hint{
  position: absolute;
  left: 22px;
  bottom: 16px;
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.uu-scroll-dot{
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  animation: uuDot 1.2s ease-in-out infinite;
}

@keyframes uuDot{
  0%{ transform: translateY(-3px); opacity: .55; }
  50%{ transform: translateY(3px); opacity: .95; }
  100%{ transform: translateY(-3px); opacity: .55; }
}

/* Plugins section (normal scroll) */
.uu-plugins{
  padding: 18px 0 60px;
}

.uu-plugins-title{
  color:#fff;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.uu-plugins-lead{
  color: rgba(255,255,255,.78);
  max-width: 78ch;
  margin: 0 0 22px;
}

.uu-plugin-grid{
  display:grid;
  /* 2 plugins -> 2 colonnes pour des cartes plus larges */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.uu-plugin-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: 16px 16px 14px;
}

.uu-plugin-card h3{
  margin: 10px 0 8px;
  color: rgba(255,255,255,.95);
  font-size: 18px;
}

.uu-plugin-card p{
  margin: 0;
  color: rgba(255,255,255,.72);
}

.uu-plugin-icon{
  width: 128px;
  height: 128px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  overflow: hidden;
}

.uu-plugin-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.uu-plugins-cta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 980px){
  :root{ --uu-gap: 4px; }
  .uu-cover-step{ height: 125vh; }
  .uu-cover-step + .uu-cover-step{ margin-top: -18vh; } /* overlap later on mobile */
  .uu-cover-grid{ grid-template-columns: 1fr; padding: 18px; }
  .uu-cover-title{ font-size: 38px; }
  .uu-cover-media{ height: auto; }
  .uu-cover-img-float{
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    margin-top: 12px;
  }
  .uu-plugin-grid{ grid-template-columns: 1fr; }
}

/* Simple zoom overlay (click images) */
.uu-img-zoom-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

.uu-img-zoom-overlay.is-open{
  display:flex;
  pointer-events:auto;
  cursor: zoom-out;
}

.uu-img-zoom-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(2px);
}

.uu-img-zoom-overlay img{
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  cursor: zoom-out;
}

.uu-noscroll{ overflow: hidden; }

/* --- Home: wide image + 2 columns (Setup/Launch etc.) --- */

.uu-cover-grid2{
  position: relative;
  z-index: 1;
  height: auto;
  padding: 18px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}

/* Titre / intro */
.uu-cover-head{
  max-width: 100%;
}

/* Image large horizontale */
.uu-cover-banner{
  width: 100%;
  height: clamp(490px, 57.5vh, 660px);
  flex: 0 0 auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.uu-cover-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* recadrage propre */
  object-position: center;
  display: block;
}

/* 2 colonnes de points forts */
.uu-cover-two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.uu-cover-col{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  padding: 14px 16px;
}

.uu-cover-coltitle{
  margin: 0 0 10px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 700;
}

/* Un peu plus compact pour tenir dans la carte */
.uu-cover-grid2 .uu-cover-bullets{
  margin: 0;
  padding-left: 18px;
}

.uu-cover-grid2 .uu-cover-bullets li{
  margin: 0 0 8px;
}

/* Mobile */
@media (max-width: 980px){
  .uu-cover-banner{ height: clamp(460px, 57.5vh, 605px); }
  .uu-cover-two{ grid-template-columns: 1fr; }
}

/* Phone: disable the cover overlap so all text stays visible */
@media (max-width: 720px){
  .uu-cover-step{
    height: auto;
    min-height: 0;
    padding-bottom: 24px;
  }
  .uu-cover-step + .uu-cover-step{
    margin-top: 18px;
  }
  .uu-cover-card{
    position: relative;
    top: auto;
  }
  .uu-cover-grid2{
    padding: 16px;
  }
  .uu-cover-banner{
    height: clamp(260px, 40vh, 340px);
  }
  .uu-cover-title{
    font-size: 30px;
  }
}



/* Bigger product name in top-left (home page) */
.uu-brand span{ font-size: 22px; font-weight: 800; letter-spacing: .01em; }



/* --- Home overrides: keep header always visible --- */
.uu-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: rgba(10,12,16,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.uu-brand span{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}