/* Prototypes: spaces menu, scroll reveals, home gallery strip.
   Hidden states exist only after proto.js marks the document. */

/* —— 1. Spaces menu (desktop) —— */
.proto-spaces{display:none}

@media(min-width:1024px){
  .proto-spaces{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:5;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-6px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
    background:linear-gradient(180deg,#14161b 0%,#08090a 22%,#08090a 100%);
    border-top:1px solid #c2a26066;
    box-shadow:0 28px 48px #000c;
  }
  .proto-spaces.is-open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  /* Keep the sticky bar on screen while the panel is open. */
  header:has(.proto-spaces.is-open){transform:none!important}
  .proto-bridge{
    position:absolute;
    top:-36px;
    height:36px;
  }
  .proto-spaces-inner{
    max-width:1440px;
    margin:0 auto;
    padding:28px 5% 32px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px 28px;
  }
  .proto-room{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
    color:inherit;
    padding:0;
    font-size:16px;
    border-bottom:0;
  }
  .proto-room:after{content:none!important;display:none!important}
  .proto-room .frame{background:#111}
  .proto-frame-lacquer{background:#08090a}
  .proto-lacquer{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:14%;
    background:linear-gradient(168deg,#23262b 0%,#08090b 42%,#15181d 78%,#050607 100%);
    font-family:Bodoni,Georgia,serif;
    font-weight:400;
    font-size:clamp(22px,1.5vw,30px);
    line-height:1.05;
    letter-spacing:-.02em;
    color:#e3c786;
  }
  .proto-lacquer:before{
    content:'';
    position:absolute;
    width:55%;
    height:160%;
    left:-10%;
    top:-30%;
    background:linear-gradient(90deg,transparent,#d9e2e428 40%,transparent 62%);
    transform:rotate(-19deg);
    pointer-events:none;
  }
  .proto-name{
    font-family:Bodoni,Georgia,serif;
    font-weight:400;
    font-size:clamp(22px,1.6vw,28px);
    line-height:1.05;
    letter-spacing:-.02em;
    color:#f3eee2;
  }
  .proto-line{
    font-family:Archivo,Arial,sans-serif;
    font-size:13px;
    line-height:1.45;
    color:#aaa69d;
  }
  .proto-go{
    margin-top:auto;
    padding-top:4px;
    font-family:Archivo,Arial,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#e3c786;
  }
  .proto-room:hover .proto-name,.proto-room:focus-visible .proto-name{color:#e3c786}
  .proto-room:hover .proto-go,.proto-room:focus-visible .proto-go{color:#f3eee2}
}

@media(max-width:1023px){
  .proto-spaces{display:none!important}
}
/* Panel sits between "The spaces" and "Weddings" in the nav, so restore phone-menu stagger. */
@media(max-width:700px){
  #navigation>a:nth-child(3){animation-delay:.06s}
  #navigation>a:nth-child(4){animation-delay:.12s}
  #navigation>a:nth-child(5){animation-delay:.18s}
  #navigation>a:nth-child(6){animation-delay:.24s}
}

/* —— 2. Scroll reveals —— */
html.proto-motion .proto-reveal:not(.is-in):not(.is-shown){
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}
html.proto-motion .proto-reveal.is-in{
  opacity:1;
  transform:none;
  animation:proto-rise 700ms ease both;
  animation-delay:var(--proto-delay,0ms);
}
html.proto-motion .proto-reveal.is-shown{opacity:1;transform:none}
@keyframes proto-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .proto-spaces{transition:none}
  html.proto-motion .proto-reveal,
  html.proto-motion .proto-reveal.is-in{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}

/* —— 3. Gallery strip —— */
.proto-gallery-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}
.proto-arrows{display:flex;gap:10px;flex:none}
.proto-arrow{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  background:#08090a;
  color:#e3c786;
  border:1px solid #c2a260;
  box-shadow:inset 0 0 0 3px #08090a,inset 0 0 0 4px #c2a26059;
  cursor:pointer;
}
.proto-arrow svg{display:block}
.proto-arrow:hover{background:#c2a260;color:#15140f}
.proto-arrow:disabled{opacity:.35;cursor:default;background:#08090a;color:#e3c786}
.proto-strip{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:#c2a260 #14140f;
  cursor:grab;
}
.proto-strip.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.proto-strip::-webkit-scrollbar{height:8px}
.proto-strip::-webkit-scrollbar-thumb{background:#c2a260}
.proto-shot{
  flex:0 0 min(440px,78%);
  margin:0;
  scroll-snap-align:start;
  min-width:0;
}
.proto-shot .frame{aspect-ratio:3/2}
.proto-shot img{-webkit-user-drag:none;user-select:none;pointer-events:none}
@media(max-width:700px){
  .proto-gallery-head{margin-bottom:20px}
  .proto-shot{flex-basis:84%}
}
@media(prefers-reduced-motion:reduce){
  .proto-strip{scroll-behavior:auto}
}