/* ---------- GLOBAL VARIABLES ---------- */
:root{
  --carousel-bg:#001418;
  --model-desc-color:#00e2e2;
  --model-name-color:#fff;
  --nav-btn-bg:rgba(0,0,0,.3);
  --nav-btn-border:rgba(255,255,255,.4);
  --nav-btn-bg-hover:rgba(255,255,255,.1);
  --nav-btn-border-hover:#fff;
  --nav-btn-stroke:#fff;
  --panel-left-op:.85;
  --panel-mid-op:.80; /* Set to .80 as requested */
  --panel-active-op:.1; /* Set to .1 as requested */
  --panel-right-op:.85;
  --ghost-start-op:.85;
  --ghost-end-op:1;
  --text-fade-duration: 0.35s;
  --main-transition-duration: 1.2s;
}

/* ---------- BASE LAYOUT ---------- */
html,.ebt-imported-page{margin:0;background:#001418}
#lamboCarousel,#lamboCarousel *{box-sizing:border-box}

#lamboCarousel{
  position:relative;
  width:85%; /* Set to 85% as requested */
  height:70vh; /* Set to 70vh as requested */
  overflow:hidden;
  background:var(--carousel-bg);font-family:'Urbanist',sans-serif;
  contain:layout paint style;
  transform:translateZ(0);
  opacity:0; /* Start invisible for fade-in */
  visibility:hidden; /* Keep for Divi compatibility */
  /* Fade-in animation for a smoother load */
  animation:fadeInCarousel 0.5s ease forwards 0.2s;
  margin: 0 auto; /* Center the carousel */
}

@keyframes fadeInCarousel {
  to {
    opacity: 1;
    visibility: visible;
  }
}

.model-slide{
  position:absolute;top:0;left:0;width:100vw;height:100%;
  pointer-events:none;
  transition:clip-path var(--main-transition-duration) ease, opacity var(--main-transition-duration) ease;
  transform:translateZ(0);
  will-change:clip-path,opacity;
  contain:paint;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.model-slide img{
  width:100%;
  height:100%;
  object-fit:cover; /* Retained object-fit: cover */
  object-position: right; /* Retained object-position: right */
  transform:translateZ(0);
}
.model-slide .overlay{
  position:absolute;inset:0;background:var(--carousel-bg);opacity:0;
  transition:opacity var(--main-transition-duration) ease;z-index:2
}

/* Clip-path slices */
.panel-left  {clip-path:polygon(0 0,15.5% 0,7.5% 100%,0 100%)}
.panel-middle{clip-path:polygon(14.5% 0,40.5% 0,32.5% 100%,6.5% 100%)}
.panel-active{clip-path:polygon(39.5% 0,100% 0,100% 100%,31.5% 100%)}
.panel-right {clip-path:polygon(85% 0,100% 0,100% 100%,93% 100%)}

/* ---------- CONTROLS & TEXT ---------- */
#controlsWrapper{
  position:absolute;top:50%;left:6%;transform:translateY(-50%);
  z-index:11;max-width:28%;
  contain:layout paint style;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
#textOverlay{position:relative;}

/* Text animation classes, controlled by JS */
.text-fade-out { animation: fade-out-text var(--text-fade-duration) ease forwards; }
.text-fade-in  { animation: fade-in-text var(--text-fade-duration) ease forwards; }

@keyframes fade-out-text { from { opacity: 1; } to { opacity: 0; } }
@keyframes fade-in-text  { from { opacity: 0; } to { opacity: 1; } }

#textOverlay h3,#textOverlay h2,#textOverlay p{position:relative}

/* Header 3 */
#textOverlay h3{
  font-family:'Urbanist',sans-serif;font-weight:700;font-size:1em;
  margin:0 0 .2em 0;text-transform:uppercase;line-height:1.3;
  letter-spacing:7px;color:var(--model-desc-color);
}

/* Header 2 */
#textOverlay h2{
  font-family:'Julius Sans One',sans-serif;
  font-size:3em; /* Set to 3em as requested */
  margin:0 0 .15em 0;
  text-transform:uppercase;line-height:1.1;color:var(--model-name-color);
}

/* Paragraph */
#textOverlay p{
  font-family:'Urbanist',sans-serif;font-weight:300;font-size:clamp(16.5px, 1.15vw, 18.5px);
  margin:-.5em 0 1em;
  letter-spacing:1.8px;line-height:1.3;color:var(--model-name-color);
}

/* ---------- CTA BUTTON (WHITE HOLO BUTTON) ---------- */
@property --sweep-progress { syntax:'<number>'; inherits:true; initial-value:0; }

.white-btn-wrap{ padding:24px 0; text-align:inherit; }

.white-holo-btn{
  --btn-col:#fff; --btn-border:rgba(255,255,255,.4);
  --btn-border-anim:#fff; --btn-glow:0 0 .08em rgba(255,255,255,.7);
  --btn-speed:1.7s;

  position:relative; display:inline-block; margin:8px 0;
  font:400 clamp(10px,3.5vw,14px)/1 'Archivo Black',Arial,sans-serif;
  letter-spacing:clamp(1px,0.6vw,4px);
  padding:clamp(12px,4vw,18px) clamp(18px,6vw,32px);
  text-transform:uppercase; white-space:nowrap;
  text-decoration: none; /* Added for anchor tag functionality */

  color:var(--btn-col); background:transparent;
  border:2px solid var(--btn-border); border-radius:100px;
  text-shadow:var(--btn-glow); cursor:pointer; touch-action:manipulation;

  box-sizing:border-box; max-width:calc(100% - 4px);
  transition:transform var(--btn-speed) ease,color .3s,text-shadow .3s ease;

  /* 🛑 disable text selection */
  -webkit-user-select:none; -ms-user-select:none; user-select:none;

  --sweep-progress:0;
}
.white-holo-btn:hover{ transform:scale(.95); }

.white-holo-btn::after{
  content:''; position:absolute; inset:-2px;
  border:2.1px solid var(--btn-border-anim); border-radius:100px;
  box-sizing:border-box;
  clip-path:inset(0 calc(100%*(1 - var(--sweep-progress))) 0 0);
  transition:clip-path var(--btn-speed) cubic-bezier(.4,1.5,.5,1.1); z-index:0;
}
.white-holo-btn span{
  position:relative; z-index:2; pointer-events:none;
  -webkit-user-select:none; -ms-user-select:none; user-select:none;
}

/* ---------- NAV BUTTONS ---------- */
.models-header{display:flex;align-items:center;gap:8px;z-index:11;margin-bottom:2em}
.models-header .title{
  text-transform:uppercase;font-weight:bold;font-size:1em;letter-spacing:.1em;margin:0;color:#fff
}
.nav-btn{
  width:40px;height:46px;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--nav-btn-bg);border:1px solid var(--nav-btn-border);
  transition:background .3s,border-color .3s
}
.nav-btn:hover{
  background:var(--nav-btn-bg-hover);border-color:var(--nav-btn-border-hover)
}
.nav-btn:disabled{cursor:not-allowed;opacity:0.5}
.nav-btn svg{width:50%;height:50%;stroke:var(--nav-btn-stroke);fill:none;stroke-width:2.5}

/* ---------- GHOST SLIDE ---------- */
.ghost-left{
  position:absolute;top:0;left:0;width:100vw;height:100%;
  clip-path:polygon(0 0,15% 0,7% 100%,0 100%);
  z-index:1;pointer-events:none;
  contain:paint;
}
.ghost-left .overlay{opacity:var(--ghost-start-op);animation:fadeToBlack .8s ease forwards;z-index:0}
@keyframes fadeToBlack{to{opacity:var(--ghost-end-op)}}

/* ---------- REQUIRED CSS OPTIMIZATIONS ---------- */
.panel-left    { z-index: 2; }
.panel-middle { z-index: 3; }
.panel-active { z-index: 4; }
.panel-right  { z-index: 1; }

.panel-left .overlay    { opacity: var(--panel-left-op); }
.panel-middle .overlay { opacity: var(--panel-mid-op); }
.panel-active .overlay { opacity: var(--panel-active-op); }
.panel-right  { z-index: 1; }
.panel-right .overlay  { opacity: var(--panel-right-op); }


/* ---------- MOBILE TWEAKS (already well-optimized) ---------- */
@media (max-width:768px){
  #lamboCarousel {
    height: 100vh; /* Set height to 100vh on mobile */
    width: 100%; /* Ensure it takes full width on mobile */
  }
  .model-slide{
    clip-path:none!important;left:0!important;width:100%!important;transition:opacity .8s ease;
    height: 100vh; /* Set height to 100vh on mobile for slides */
  }
  .model-slide:not(.panel-active){opacity:0;pointer-events:none}
  .panel-active .overlay{opacity:.6!important}

  #controlsWrapper{top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:80%;text-align:center}
  .models-header{justify-content:center}

  #textOverlay h3{font-size:1.1em;letter-spacing:4px}
  #textOverlay h2{font-size:2.2em}
  #textOverlay p {font-size:18.5px}

  .ghost-left{display:none!important;}
}

/* ---------- TABLET TWEAKS ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  #lamboCarousel {
    height: 90vh; /* Set height to 90vh on tablets */
  }
  .model-slide {
    height: 90vh; /* Set height to 90vh on tablets for slides */
  }
}