/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* OPENER */
.Opener{
  position:relative;
  height:100vh;
  overflow:hidden;
  background:#000;
}

/* Slides */
.opener-slide,
.opener-bg,
.opener-overlay,
.opener-focus{
  position:absolute;
  inset:0;
}

.opener-slide{
  opacity:0;
  transform:scale(1.12);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 2.8s cubic-bezier(.19,1,.22,1);
  z-index:1;
}

.opener-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

/* BACKGROUND – CINEMATIC MOTION */
.opener-bg{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.1) saturate(.75) brightness(.85);
  animation:bgCinema 22s ease-in-out infinite alternate;
}

@keyframes bgCinema{
  from{
    transform:scale(1) translate(0,0);
  }
  to{
    transform:scale(1.06) translate(-1.5%, -1%);
  }
}


/* OVERLAY – MOVING LIGHT */
.opener-overlay{
  pointer-events:none;
  background:radial-gradient(
    circle at var(--ox,30%) var(--oy,50%),
    rgb(var(--bg-rgb)/.25) 0%,
    rgb(var(--bg-rgb)/.65) 45%,
    rgb(var(--bg-rgb)/.97) 100%
  );
  animation:overlayDrift 26s linear infinite;
}


@keyframes overlayDrift{
  0%   { --ox:26%; --oy:48% }
  25%  { --ox:32%; --oy:46% }
  50%  { --ox:38%; --oy:52% }
  75%  { --ox:30%; --oy:54% }
  100% { --ox:26%; --oy:48% }
}


/* FOCUS – PULSE */
.opener-focus{
  pointer-events:none;
  background:radial-gradient(
    ellipse at 35% 50%,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.06) 35%,
    rgba(0,0,0,0) 62%
  );
  mix-blend-mode:overlay;
  animation:focusBreath 12s ease-in-out infinite;
}

@keyframes focusBreath{
  0%,100%{opacity:.55}
  50%{opacity:.9}
}

/* CONTENT */
.opener-content{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(32px,6vw,130px);
  max-width:900px;
  text-shadow: 0px 0px 1px var(--bg);
}

/* MOBILE */
@media (max-width:767px){
  .opener-content{
    align-items:center;
    text-align:center;
    padding:60px;
    margin:0 auto;
  }
  .opener-actions{flex-direction:column;width:100%}
  .btn{width:100%}
}

/* BUILD START */
.opener-content [data-step]{
  visibility:hidden;
  opacity:0;
  transform:translateY(60px) scale(.9);
  filter:blur(14px);
}

/* TYPO */
.opener-content h1{
  font-size:clamp(42px,7vw,96px);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:14px;
  text-shadow:0 0 30px rgba(0,0,0,.9),0 20px 50px rgba(0,0,0,.8);
}

.opener-content h2{
  font-size:clamp(15px,2vw,22px);
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom:46px;
}

/* BUTTONS – IMPACT */
.opener-actions{
  display:flex;
  gap:20px;
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
}


.btn{
  padding:18px 34px;
  border-radius:16px;
  border:1px solid rgb(var(--bg-rgb)/.28);
  background:rgb(var(--bg-rgb)/.6);
  color:var(--text);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 35px rgb(var(--bg-rgb)/.7);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s;
}

.btn:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 25px 60px rgba(0,0,0,.9);
}

.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border:none;
}

/* FLOATING VISUAL – MORE AGGRESSIVE */
.floating-visual{
  position:absolute;
  right:8%;
  top:50%;
  width:400px;
  height:400px;
  transform:translateY(-50%);
  z-index:6;
  perspective:1200px;
}

.floating-inner{
  width:100%;
  height:100%;
  border-radius:26px;
  overflow:hidden;
  transform-style:preserve-3d;
  animation:floatOrbit 14s ease-in-out infinite;
}


@keyframes floatOrbit{
  0%{
    transform:translate(-6px,-8px) rotateZ(-0.4deg);
  }
  50%{
    transform:translate(6px,8px) rotateZ(0.4deg);
  }
  100%{
    transform:translate(-6px,-8px) rotateZ(-0.4deg);
  }
}


.floating-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  animation:logoPulse 4.5s ease-in-out infinite;
}

@keyframes logoPulse{
  0%{filter:brightness(.85)}
  50%{filter:brightness(1.15)}
  100%{filter:brightness(.85)}
}

@media (max-width:1023px){
  .floating-visual{display:none}
}

/* TIMELINE – FLOW */
.opener-timeline{
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:rgba(255,255,255,.12);
  z-index:20;
}
.opener-timeline-bar{
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));
  background-size:200% 100%;
  animation:timelineFlow 3s linear infinite;
  transform-origin:left;
  transform:scaleX(0);
}

@keyframes timelineFlow{
  from{background-position:0%}
  to{background-position:200%}
}

/* NAV */
.opener-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:30px;
  cursor:pointer;
  z-index:10;
  border:none;
}
.opener-nav.prev{left:12px}
.opener-nav.next{right:12px}
a{
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}