@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap');

/* ── Wrapper ── */
.otto-banner-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  background: #060608;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Curtain Panels ── */
.otto-curtain-left,
.otto-curtain-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #060608;
  z-index: 50;
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.18, 1);
}
.otto-curtain-left  { left: 0;  transform: translateX(0); }
.otto-curtain-right { right: 0; transform: translateX(0); }

.otto-banner-wrap.otto-revealed .otto-curtain-left  { transform: translateX(-100%); }
.otto-banner-wrap.otto-revealed .otto-curtain-right { transform: translateX(100%); }

/* ── Three.js Canvas ── */
.otto-three-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  display: block;
}

/* ── Hero Content ── */
.otto-hero {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*pointer-events: none;*/
  width: 100%;
  padding: 0 20px;
}

/* ── Logo ── */
.otto-logo {
  width: min(860px, 92vw);
  max-width: 92vw;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.08));
}
.otto-banner-wrap.otto-revealed .otto-logo {
  opacity: 1;
  transform: translateY(0);
}

/* ── Chevrons ── */
.otto-chevrons {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease 2.2s;
}
.otto-banner-wrap.otto-revealed .otto-chevrons {
  opacity: 1;
  animation: otto-fadeChev 2.4s ease-in-out infinite 2.2s;
}
@keyframes otto-fadeChev {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%       { opacity: 0.9; transform: translateY(6px); }
}

/* ── Cookie Button ── */
.otto-cookie-btn {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 20;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1s ease 2.5s, border-color 0.2s, background 0.2s;
  pointer-events: all;
}
.otto-banner-wrap.otto-revealed .otto-cookie-btn {
  opacity: 1;
}
.otto-cookie-btn:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}
.bainer-sub-hdeading {
 color: white !important;
}
.bainer-sub-hdeading{
    margin-top: 15px;
}
/* ── Scroll Arrow ── */
.otto-scroll-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  margin-top: 28px;
  cursor: pointer;
  text-decoration: none;
  animation: ottoArrowBounce 1.6s ease-in-out infinite;
  pointer-events: all;
}
svg {
    position: relative;
    fill: unset !important;
}

.otto-scroll-arrow svg {
  display: block;
  margin-top: -10px;
  height: 2em !important;
  width: 2em !important;
}

@keyframes ottoArrowBounce {
  0%, 100% { transform: translateY(0);    opacity: 1;   }
  50%       { transform: translateY(8px); opacity: 0.6; }
}