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

:root{
  --bg: #2b0a0a; /* NAFAAS wine */
  --white: #fff;
  --glow: rgba(255,255,255,0.55);
  --glow2: rgba(255,255,255,0.25);

  --step: 1800; /* distance between sections (bigger = clearer transitions) */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow: hidden;
}

.noNativeScroll{ overscroll-behavior: none; }

/* Scene */
.scene{
  position: fixed;
  inset: 0;
  background: var(--bg);

  /* ✅ This is what makes "go-in" feel real */
  perspective: 1000px;
  perspective-origin: 50% 50%;
}


/* vignette like NAFAAS */
.scene::before{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 45%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.28) 70%,
      rgba(0,0,0,0.60) 100%);
  opacity: 1;
  z-index: 20;
}

.camera{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  will-change: transform;
}

.layer{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  transform-style: preserve-3d;
}


.layer0{ transform: translateZ(0px); }
.layer1{ transform: translateZ(calc(-1 * var(--step) * 1px)); }
.layer2{ transform: translateZ(calc(-1 * var(--step) * 2px)); }
.layer3{ transform: translateZ(calc(-1 * var(--step) * 3px)); }

/* Center copy always on top */
.centerCopy{
  position: relative;
  z-index: 50;  /* ABOVE photos */
  text-align:center;
  padding: 0 18px;
}

.smallScript{
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 10px;
  letter-spacing: 0.12em;
}

.glow{
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 12px var(--glow), 0 0 30px var(--glow2);
}

.sub{
  margin-top: 16px;
  font-size: 0.95rem;
  letter-spacing: 0.10em;
  opacity: 0.85;
}

/* Deeper panels */
.panel{
  position: relative;
  z-index: 50;
  width: min(920px, calc(100% - 48px));
  text-align:center;
  padding: 44px 26px;
}

.panel h2{
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.0rem, 4vw, 3.2rem);
  margin: 0 0 12px;
}
.panel p{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 1.05rem;
}

.glow2{
  text-shadow: 0 0 10px rgba(255,255,255,0.38), 0 0 22px rgba(255,255,255,0.18);
}

.cta{
  display:inline-flex;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--bg);
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
/* Story section (NAFAAS-style centered paragraphs) */
.story{
  width: min(720px, calc(100% - 48px));
  text-align: center;
  line-height: 1.5;
}

.story p{
  margin: 0 0 22px;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 0 10px rgba(255,255,255,0.18);
}

@media (max-width: 900px){
  .story p{
    font-size: 1.02rem;
  }
}

/* ===== NAFAAS-like story block ===== */
.storyWrap{
  width: min(860px, calc(100% - 48px));
  text-align: center;
  padding: 0 18px;
  z-index: 50;
}

.storyText{
  margin: 0 auto 34px; /* space before button */
  max-width: 820px;
}

.storyText p{
  margin: 0 0 30px;     /* spacing between paragraphs */
  font-weight: 800;     /* bold like screenshot */
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); /* match sizing */
  line-height: 1.25;    /* tight like screenshot */
  color: rgba(255,255,255,0.98);

  /* subtle glow like NAFAAS */
  text-shadow:
    0 0 12px rgba(255,255,255,0.14);
}

/* make the last paragraph not add extra gap */
.storyText p:last-child{ margin-bottom: 0; }

/* button spacing */
.storyWrap .cta{
  margin-top: 26px;
}


/* 12 floating images — SQUARE */
.float{
  position:absolute;
  z-index: 30;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.9;
  box-shadow: 0 18px 40px rgba(0,0,0,0.40);
}

/* positions (spread wider so 12 fit) */
.f1 { left: 6%;  top: 16%; width:170px; height:170px; }
.f2 { left: 20%; top: 28%; width:130px; height:130px; }
.f3 { left: 34%; top: 12%; width:140px; height:140px; }
.f4 { left: 8%;  top: 70%; width:190px; height:190px; }

.f5 { right: 6%; top: 18%; width:165px; height:165px; }
.f6 { right: 20%; top: 34%; width:140px; height:140px; }
.f7 { right: 10%; top: 70%; width:175px; height:175px; }

.f8 { left: 52%; top: 78%; width:160px; height:160px; }
.f9 { left: 46%; top: 36%; width:120px; height:120px; }

.f10{ right: 42%; top: 18%; width:120px; height:120px; }
.f11{ right: 36%; top: 52%; width:120px; height:120px; }
.f12{ left: 30%; top: 82%; width:140px; height:140px; }

/* optional subtle float */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
.float{ animation: floaty 6s ease-in-out infinite; }
.f2{ animation-delay:-1.2s; } .f4{ animation-delay:-2s; }
.f6{ animation-delay:-0.8s; } .f8{ animation-delay:-1.6s; }
.f11{ animation-delay:-2.4s; }

/* Mobile: reduce clutter */
@media (max-width: 900px){
  .float{ display:none; }
  .f1,.f4,.f5,.f7{ display:block; }
}

.layer { opacity: 0; }
.layer0 { opacity: 1; }