/* Lifted verbatim from the live oriburstein.com hero. */

/* ── HERO VIDEO ── */
#hero {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  overflow: hidden;
  background: #0d0b08;
  z-index: 100;
}

#hero-push {
  height: 100vh;
  pointer-events: none;
}


#hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── VINTAGE FILM LOOK — preserves original colours ── */
/* Slightly faded contrast + lift only — no colour shift */
#vid-a, #vid-b {
  opacity: 0;
  filter: contrast(0.90) saturate(0.88) brightness(1.04);
}
#vid-a.active, #vid-b.active { opacity: 1; transition: opacity 0.55s ease; }

/* Thin dark base */
#overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 4, 0.20);
  z-index: 5;
  pointer-events: none;
}

/* ── VINTAGE OVERLAY ── */
#vintage-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
/* Neutral lens vignette — no colour tint, just optical darkening at edges */
#vintage-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 66% 62% at 50% 50%,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.20) 65%,
    rgba(0, 0, 0, 0.52) 100%
  );
}
/* Halation — very soft white bloom in the centre, screen blend only */
#vintage-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 52% 48% at 50% 50%,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 60%
  );
  mix-blend-mode: screen;
}
/* Lifted blacks — screen blend with near-black lifts shadows without adding colour */
#film-burn {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: rgba(28, 24, 20, 0.18);
  mix-blend-mode: screen;
}
/* Scanlines — barely visible */
#scanlines {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.035) 3px,
    rgba(0, 0, 0, 0.035) 4px
  );
}
#flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* ── BRANDING — centered, horizontal row: social LEFT | name RIGHT ── */
#branding {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  flex-direction: row-reverse; /* name=right, social=left */
  align-items: center;
  gap: 36px;
  pointer-events: none;
  white-space: nowrap;
}

#branding-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

#branding-text h2 {
  font-family: 'Yarden', serif;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  direction: rtl;
  color: #F6EEDC;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0,0,0,0.7), 0 0 80px rgba(0,0,0,0.4);
}

.tagline-text {
  font-family: 'Caveat', cursive;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(238, 228, 210, 0.6);
  margin: 0;
}

#branding-line {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.3);
  transform-origin: center center;
}

/* Scroll animation compositing hints */
#branding-text { will-change: transform; }
#branding-text h2 { will-change: transform; transform-origin: center center; }
#social { will-change: transform; transform-origin: left center; }

#social {
  display: flex;
  gap: 18px;
  pointer-events: all;
  align-items: center;
}

#social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: rgba(255,255,255,0.75);
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
#social a:hover {
  border-color: rgba(255,255,255,0.9);
  color: #fff;
  background: rgba(255,255,255,0.1);
}
#social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ── LIGHT EFFECTS CANVAS ── */
#light-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
}

/* ── VIDEO COUNTER ── */
#vid-counter {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 15;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(238, 228, 210, 0.45);
  line-height: 1;
  transition: opacity 0.3s ease;
}
#vid-sep { margin: 0 1px; opacity: 0.6; }

/* ── SCROLL ARROW ── */
#scroll-arrow {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  cursor: none;
  opacity: 0.55;
  transition: opacity 0.2s;
  animation: bounce 2.2s ease-in-out infinite;
}
#scroll-arrow:hover { opacity: 1; }
#scroll-arrow svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}
/* ── HERO MAIL CTA ── */
#hero-cta {
  position: absolute;
  bottom: 38px;
  left: 44px;
  z-index: 10;
  pointer-events: all;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-cta-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
#hero-cta a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.28);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
#hero-cta a:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 700px) {
  #contact-inner { grid-template-columns: 1fr; gap: 52px; }
  #newsletter-form { max-width: 100%; }

  /* Mobile CTA: centered above the scroll arrow instead of bottom-left,
     so it doesn't collide with it on narrow screens. */
  #hero-cta {
    left: 50%;
    transform: translateX(-50%);
    bottom: 68px;
  }

  /* Mobile branding: name top-right, tagline below it, social bottom-right vertical */
  #branding {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 52px 24px 160px;
    gap: 0;

  #branding-line { display: none; }
  #branding-text {
    align-items: flex-end;
    gap: 10px;
  }
  #branding-text h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  /* Social: vertical column, bottom-left */
  #social {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
  }
  #social a { width: 34px; height: 34px; }
}
  </style>
}