/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#1a0d14;color:#fff;-webkit-font-smoothing:antialiased}
body{font-family:"Heebo",system-ui,sans-serif;font-weight:400}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}

:root{
  /* palette pulled from the shevet logo: coral-pink shell + warm brown outline */
  --pink:#ee5ba1;
  --pink-soft:#f7a3c8;
  --pink-deep:#c8327d;
  --rose:#fdebf3;
  --brown:#8b6244;
  --brown-deep:#5a3d2a;
  --brown-soft:#b48566;
  --cream:#fdf6ec;
  --ink:#2a1318;
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --display:"Heebo",system-ui,sans-serif;
}

/* === Floating shells background (used by title/quote slides) === */
.shells{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.4}
.shells span{
  position:absolute;
  font-size:2rem;
  color:var(--pink-soft);
  animation:float 18s linear infinite;
  filter:blur(.3px);
}
.shells span:nth-child(1){top:90%;left:10%;animation-duration:20s;font-size:1.5rem}
.shells span:nth-child(2){top:80%;left:30%;animation-duration:25s;animation-delay:-5s;font-size:2.2rem;color:var(--brown-soft)}
.shells span:nth-child(3){top:95%;left:50%;animation-duration:22s;animation-delay:-12s;font-size:1.8rem}
.shells span:nth-child(4){top:85%;left:70%;animation-duration:28s;animation-delay:-3s;font-size:2.5rem;color:var(--pink-soft)}
.shells span:nth-child(5){top:88%;left:88%;animation-duration:24s;animation-delay:-8s;font-size:1.6rem;color:var(--brown-soft)}
@keyframes float{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:.6}
  90%{opacity:.4}
  100%{transform:translateY(-110vh) rotate(360deg);opacity:0}
}

/* === Start screen === */
.start-screen{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(238,91,161,.25), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(139,98,68,.4), transparent 60%),
    linear-gradient(160deg, #2a1318, var(--brown-deep) 55%, var(--brown));
  cursor:pointer;
  transition:opacity .8s ease, transform .8s ease;
  overflow:hidden;
}
.start-screen.hide{opacity:0;transform:scale(1.04);pointer-events:none}
.start-inner{text-align:center;padding:2rem;max-width:min(90vw,720px);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;position:relative;z-index:2}
.start-logo{
  width:min(40vw,180px);height:auto;
  margin:0 auto 1.5rem;
  filter:drop-shadow(0 8px 32px rgba(238,91,161,.5));
  animation:logoFloat 6s ease-in-out infinite;
}
.start-inner h1{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(2.6rem,8vw,5.5rem);
  letter-spacing:.02em;
  background:linear-gradient(180deg, #fff, var(--pink-soft) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.4rem;
  line-height:1;
}
.start-sub{
  font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:.4em;
  color:var(--pink-soft);
  margin-bottom:3rem;
  font-weight:300;
}
.start-cta{
  display:inline-flex;align-items:center;gap:1rem;
  padding:1rem 2.5rem;
  border:1px solid rgba(238,91,161,.5);
  border-radius:9999px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  transition:all .3s ease;
}
.start-screen:hover .start-cta,
.start-screen:focus-visible .start-cta{
  border-color:var(--pink);
  background:rgba(238,91,161,.14);
  transform:translateY(-2px);
}
.start-cta-circle{
  width:2.4rem;height:2.4rem;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  font-size:1rem;
  padding-right:.15em;
  animation:pulse 2s ease-in-out infinite;
}
.start-cta-text{font-size:clamp(1rem,2vw,1.2rem);font-weight:500}
.start-hint{
  margin-top:2rem;
  font-size:.85rem;
  color:rgba(253,235,243,.6);
  letter-spacing:.05em;
}

@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(238,91,161,.7)}50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(238,91,161,0)}}

/* === Stage === */
.stage{
  position:fixed;inset:0;
  background:#1a0d14;
  opacity:0;transition:opacity 1s ease;
}
.stage.live{opacity:1}
.slides{position:absolute;inset:0}

/* base slide */
.slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
  overflow:hidden;
}
.slide.active{opacity:1;pointer-events:auto}

/* === photo slide (single image, full bleed) === */
.slide.photo .media,
.slide.video .media{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.slide.photo .media{animation:kenburns 9s ease-out forwards}
.slide.photo.flip .media{animation-name:kenburnsFlip}
.slide.photo .overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(42,19,24,.5) 0%,
      rgba(42,19,24,0) 25%,
      rgba(42,19,24,0) 60%,
      rgba(42,19,24,.75) 100%);
  pointer-events:none;
}
.slide.photo .caption{
  position:absolute;
  inset:auto 0 7vh 0;
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.95);
  padding:0 6vw;
}
.slide.photo .caption .word{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  animation:wordIn .6s cubic-bezier(.2,.7,.2,1) forwards;
  margin:0 .12em;
}
.slide.photo .caption .accent{
  color:var(--pink-soft);
  text-shadow:0 4px 24px rgba(238,91,161,.5), 0 1px 2px rgba(0,0,0,.95);
}

@keyframes kenburns{
  from{transform:scale(1.04) translate(-.5%,.5%)}
  to{transform:scale(1.16) translate(.8%,-.8%)}
}
@keyframes kenburnsFlip{
  from{transform:scale(1.04) translate(.5%,-.5%)}
  to{transform:scale(1.16) translate(-.8%,.8%)}
}
@keyframes wordIn{
  from{opacity:0;transform:translateY(20px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* === COLLAGE: multiple photos in one slide === */
.slide.collage{background:linear-gradient(160deg, #1a0d14, var(--brown-deep))}
.slide.collage .grid{
  position:absolute;inset:0;
  display:grid;
  gap:.6vh;
  padding:.6vh;
}
.slide.collage .tile{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:#000;
  opacity:0;
  transform:scale(.9);
  animation:tileIn .9s cubic-bezier(.2,.8,.2,1) forwards;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.slide.collage .tile img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  animation:tileZoom 11s ease-out forwards;
}
.slide.collage .tile.flip img{animation-name:tileZoomFlip}
.slide.collage .tile:nth-child(1){animation-delay:.1s}
.slide.collage .tile:nth-child(2){animation-delay:.3s}
.slide.collage .tile:nth-child(3){animation-delay:.5s}
.slide.collage .tile:nth-child(4){animation-delay:.7s}
.slide.collage .tile:nth-child(5){animation-delay:.9s}
.slide.collage .tile:nth-child(6){animation-delay:1.1s}

/* duo: 2 photos side by side */
.slide.collage.duo .grid{grid-template-columns:1fr 1fr}

/* trio: 3 photos */
.slide.collage.trio .grid{grid-template-columns:1fr 1fr 1fr}

/* featured: 1 big + 2 small */
.slide.collage.featured .grid{
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
}
.slide.collage.featured .tile:nth-child(1){grid-row:1/3}

/* mosaic: 2x2 */
.slide.collage.mosaic .grid{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}

/* strip: 4 in a row */
.slide.collage.strip .grid{grid-template-columns:1fr 1fr 1fr 1fr}

/* asym: featured + 3 below */
.slide.collage.asym .grid{
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:2fr 1fr;
}
.slide.collage.asym .tile:nth-child(1){grid-column:1/4}

@keyframes tileIn{
  from{opacity:0;transform:scale(.85) translateY(20px);filter:blur(8px)}
  to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes tileZoom{
  from{transform:scale(1.05)}
  to{transform:scale(1.2)}
}
@keyframes tileZoomFlip{
  from{transform:scale(1.2)}
  to{transform:scale(1.05)}
}

.slide.collage .collage-caption{
  position:absolute;
  bottom:3vh;left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.2rem,2.6vw,2rem);
  color:var(--cream);
  background:rgba(42,19,24,.7);
  backdrop-filter:blur(12px);
  padding:.6em 1.4em;
  border-radius:9999px;
  border:1px solid rgba(238,91,161,.3);
  opacity:0;
  animation:capRise 1s ease 1.5s forwards;
  white-space:nowrap;
}
.slide.collage .collage-caption .accent{color:var(--pink-soft)}
@keyframes capRise{
  from{opacity:0;transform:translateX(-50%) translateY(20px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* === title slide === */
.slide.title{
  background:
    radial-gradient(ellipse at 50% 35%, rgba(238,91,161,.2), transparent 60%),
    radial-gradient(ellipse at 30% 80%, rgba(139,98,68,.3), transparent 55%),
    linear-gradient(160deg, #2a1318, var(--brown-deep) 55%, var(--brown));
}
.slide.title .title-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  gap:1rem;
  padding:2rem;
  text-align:center;
  z-index:2;
}
.slide.title .eyebrow{
  font-size:clamp(.9rem,1.4vw,1.05rem);
  letter-spacing:.5em;
  color:var(--pink-soft);
  text-transform:uppercase;
}
.slide.title .eyebrow .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(8px);
  animation:charIn .5s ease forwards;
}
.slide.title .big{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(3rem,9vw,7rem);
  line-height:1;
  background:linear-gradient(180deg, #fff, var(--pink-soft) 70%, var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.slide.title .big .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(40px) scale(.5);
  animation:bigCharIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.slide.title .sub{
  font-size:clamp(1.1rem,2.2vw,1.5rem);
  letter-spacing:.3em;
  color:rgba(255,255,255,.85);
  margin-top:.5rem;
  opacity:0;transform:translateY(10px);
  transition:opacity 1.4s ease, transform 1.4s ease;
}
.slide.title .logo-large{
  width:min(28vw,180px);
  margin-bottom:1.2rem;
  filter:drop-shadow(0 8px 32px rgba(238,91,161,.5));
  opacity:0;transform:scale(.8) rotate(-5deg);
  transition:opacity 1.2s ease, transform 1.2s ease;
  animation:logoFloat 6s ease-in-out infinite 1.5s;
}
.slide.active.title .sub{opacity:1;transform:translateY(0);transition-delay:1.5s}
.slide.active.title .logo-large{opacity:1;transform:scale(1) rotate(0)}

@keyframes charIn{to{opacity:1;transform:translateY(0)}}
@keyframes bigCharIn{
  0%{opacity:0;transform:translateY(40px) scale(.5);filter:blur(6px)}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* === quote slide === */
.slide.quote{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(238,91,161,.15), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(139,98,68,.2), transparent 55%),
    linear-gradient(180deg, #1a0d14, #2a1318);
}
.slide.quote .quote-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:6vh 8vw;
  text-align:center;
  z-index:2;
}
.slide.quote .mark{
  font-family:var(--serif);
  font-size:clamp(4rem,8vw,7rem);
  color:var(--pink);
  line-height:.4;
  margin-bottom:1.5rem;
  opacity:0;
  transform:translateY(-10px) scale(.6);
  animation:markPop 1s cubic-bezier(.2,.8,.2,1) .3s forwards;
  text-shadow:0 0 40px rgba(238,91,161,.5);
}
.slide.quote .text{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.8rem);
  line-height:1.45;
  color:#fff;
  max-width:min(900px,90vw);
}
.slide.quote .text .word{
  display:inline-block;
  opacity:0;
  transform:translateY(15px);
  filter:blur(4px);
  animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards;
  margin:0 .14em;
}
.slide.quote .text .em{
  color:var(--pink-soft);
  font-weight:700;
  text-shadow:0 0 24px rgba(238,91,161,.4);
}
.slide.quote.short .text{
  font-size:clamp(2.2rem,5.5vw,4.5rem);
  font-weight:700;
  line-height:1.2;
}
.slide.quote.short .text .em{
  position:relative;
  display:inline-block;
}
.slide.quote.short .text .em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.1em;
  height:.08em;
  background:var(--pink);
  border-radius:9999px;
  transform-origin:right;
  transform:scaleX(0);
  animation:underline 1s ease 1.5s forwards;
}
@keyframes markPop{to{opacity:.85;transform:translateY(0) scale(1)}}
@keyframes underline{to{transform:scaleX(1)}}

/* === video slide === */
.slide.video .media{filter:saturate(1.08) contrast(1.03)}
.slide.video .overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 25%, transparent 70%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.slide.video .caption{
  position:absolute;
  inset:auto 0 7vh 0;
  text-align:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.4rem,3vw,2.4rem);
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.8);
  padding:0 6vw;
  opacity:0;
  animation:wordIn 1s ease .8s forwards;
}

/* === controls === */
.controls{
  position:fixed;
  bottom:1.5rem;left:50%;
  transform:translateX(-50%);
  display:flex;gap:.5rem;
  padding:.4rem;
  background:rgba(42,19,24,.5);
  backdrop-filter:blur(14px);
  border-radius:9999px;
  border:1px solid rgba(238,91,161,.25);
  opacity:0;
  transition:opacity .4s ease;
  z-index:50;
}
body.hover-active .controls{opacity:1}
.ctrl{
  width:2.6rem;height:2.6rem;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--cream);
  font-size:1.2rem;
  transition:background .2s ease, transform .15s ease, color .2s ease;
}
.ctrl:hover{background:var(--pink);color:#fff;transform:scale(1.08)}
.ctrl:active{transform:scale(.95)}

/* progress bar */
.progress{
  position:fixed;bottom:0;left:0;right:0;
  height:3px;
  background:rgba(238,91,161,.08);
  z-index:40;
}
.progress-bar{
  height:100%;
  background:linear-gradient(90deg, var(--pink), var(--pink-soft), var(--brown-soft));
  width:0;
  transition:width .1s linear;
  box-shadow:0 0 16px rgba(238,91,161,.7);
}

/* watermark */
.watermark{
  position:fixed;
  top:1.2rem;left:1.2rem;
  width:54px;height:auto;
  opacity:.75;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.6));
  pointer-events:none;
  z-index:30;
  transition:opacity .4s ease;
  animation:logoFloat 8s ease-in-out infinite;
}
body.hide-watermark .watermark{opacity:0}

/* === mobile tweaks === */
@media (max-width:640px){
  .controls{bottom:1rem}
  .ctrl{width:2.3rem;height:2.3rem;font-size:1rem}
  .watermark{width:42px;top:.8rem;left:.8rem}
  .start-logo{width:35vw}
  .slide.photo .caption{inset:auto 0 12vh 0;padding:0 1.2rem}
  .slide.collage.strip .grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .slide.collage.trio .grid{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
  .slide.collage.asym .grid{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr 1fr}
  .slide.collage.asym .tile:nth-child(1){grid-column:1/3}
  .slide.collage .collage-caption{font-size:1rem;white-space:normal;max-width:80vw;line-height:1.3}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .slide.photo .media,.slide.collage .tile img{animation-duration:30s}
  .slide.collage .tile{animation-duration:.4s}
  *{transition-duration:.3s!important}
}