/* ============ NORELL STYLES ============ */

/* ---- Iris Canopy Reveal ---- */
@keyframes irisLeft {
  0%   { transform: translateX(0) scaleX(1.1); opacity: 1; }
  100% { transform: translateX(-105%) scaleX(1.4); opacity: 0; }
}
@keyframes irisRight {
  0%   { transform: translateX(0) scaleX(1.1); opacity: 1; }
  100% { transform: translateX(105%) scaleX(1.4); opacity: 0; }
}
.iris-left  { animation: irisLeft  2.2s cubic-bezier(.65,0,.35,1) 0.4s forwards; }
.iris-right { animation: irisRight 2.2s cubic-bezier(.65,0,.35,1) 0.4s forwards; }

@keyframes sceneIn {
  0%   { transform: scale(1.18); filter: blur(6px); }
  100% { transform: scale(1);   filter: blur(0px); }
}
#layer-scene { animation: sceneIn 2.8s cubic-bezier(.22,1,.36,1) 0.3s both; }

/* ---- Hero Slideshow ---- */
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero-slide.active { opacity: 1; }

@keyframes kenburns {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.16); }
}
.hero-slide.active .hero-bg {
  animation: kenburns 8s ease-out forwards;
}

/* Caption container transitions */
#hero-content {
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.22,1,.36,1);
}
#hero-content.cap-hidden {
  opacity: 0;
  transform: translateY(16px);
}

/* Hero nav buttons */
.hero-nav-btn {
  width: 48px; height: 48px; border-radius: 9999px;
  border: 1px solid rgba(247,244,240,.35);
  color: #F7F4F0; display: flex; align-items: center; justify-content: center;
  transition: all .4s ease;
  background: transparent;
}
.hero-nav-btn:hover {
  background: #F7F4F0; color: #4D3627; border-color: #F7F4F0;
}

/* Hero dots */
.hero-dot {
  height: 6px; width: 12px; border-radius: 99px;
  background: rgba(247,244,240,.35);
  transition: all .5s ease; cursor: pointer; border: none;
}
.hero-dot.active { width: 44px; background: #C8B291; }

/* ---- Fade-In Sections ---- */
.fade-in {
  opacity: 0; transform: translateY(44px);
  transition: opacity .85s ease-out, transform .85s ease-out;
  will-change: opacity, transform;
}
.fade-in.vis { opacity: 1; transform: translateY(0); }

/* ---- Floating badge ---- */
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-10px)} 100%{transform:translateY(0)} }
.floating { animation: floaty 6s ease-in-out infinite; }

/* ---- 3D Card Tilt ---- */
.tilt-card { transition: transform .45s ease-out; transform-style: preserve-3d; }

/* ---- Experience Cards ---- */
.exp-card {
  position: relative; border-radius: 12px; overflow: hidden;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.exp-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.15); transform: translateY(-6px); }
.exp-card .card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1.1s ease-out;
}
.exp-card:hover .card-bg { transform: scale(1.06); }
.exp-card .card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(77,54,39,.88) 0%, rgba(77,54,39,.15) 50%, transparent 100%);
  opacity: .88; transition: opacity .5s ease;
}
.exp-card:hover .card-overlay { opacity: .95; }
.exp-card .card-body {
  position: absolute; inset: 0; padding: 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.exp-card .card-desc {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .5s ease;
}
.exp-card:hover .card-desc { max-height: 120px; opacity: 1; }
.exp-card .card-cta {
  opacity: 0; transition: opacity .4s ease .1s;
}
.exp-card:hover .card-cta { opacity: 1; }

/* ---- Filter Chips ---- */
.filter-chip {
  font-family: Outfit, sans-serif;
  font-size: 12px; line-height: 16px; letter-spacing: 0.1em; font-weight: 600;
  text-transform: uppercase;
  padding: 10px 20px; border-radius: 9999px;
  border: 1px solid #d3c3bb; color: #4f453f;
  background: transparent; cursor: pointer;
  transition: all .35s ease;
}
.filter-chip:hover { border-color: #4D3627; }
.filter-chip.active { background: #4D3627; color: #F7F4F0; border-color: #4D3627; }

/* ---- Lightbox ---- */
#lightbox { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox img { transform: scale(.92); transition: transform .45s cubic-bezier(.22,1,.36,1); }
#lightbox.open img { transform: scale(1); }

/* ---- Mobile Menu ---- */
#mobile-menu.open { opacity: 1; pointer-events: auto; }

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .floating, .tilt-card { opacity:1!important; transform:none!important; transition:none!important; animation:none!important; }
  .iris-left, .iris-right { animation:none!important; display:none!important; }
  #layer-scene { animation:none!important; }
  .hero-slide.active .hero-bg { animation:none!important; }
  #hero-content { opacity:1!important; transform:none!important; }
  .exp-card, .exp-card .card-bg { transition:none!important; }
}