/* ============================================================
   שבט אלמוג — מצגת בית פתוח
   ורוד #F7C9D9 · חום #623E2C · קרם #FDF3E3 · ורוד חזק #EF7FAE
   ============================================================ */

:root{
  --pink:#F7C9D9;
  --blush:#FCE9EF;
  --brown:#623E2C;
  --brown-deep:#3E2417;
  --cream:#FDF3E3;
  --hot:#EF7FAE;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--brown-deep)}
body{
  font-family:'Assistant',-apple-system,'Segoe UI',Arial,sans-serif;
  color:var(--brown);
  direction:rtl;
  cursor:default;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}
body.hide-cursor{cursor:none}

img,video{display:block}

/* ---------- scene shell ---------- */
.scene{
  position:fixed;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility 0s linear .9s;
  overflow:hidden;
}
.scene.is-active{
  opacity:1;visibility:visible;
  transition:opacity .9s var(--ease);
  z-index:2;
}
.scene.is-leaving{z-index:3}
.scene[data-slow] { transition-duration:1.6s }

/* full-bleed media */
.bleed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Ken Burns — runs only while scene active */
@keyframes kb-in {from{transform:scale(1.02)}to{transform:scale(1.12)}}
@keyframes kb-drift {from{transform:scale(1.12) translateX(0)}to{transform:scale(1.12) translateX(-2.2%)}}
.is-active .kb{animation:kb-in 22s var(--ease) forwards}
.is-active .kb-l{animation:kb-drift 24s linear forwards}

/* veils for text-over-photo */
.veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(62,36,23,.82) 0%,rgba(62,36,23,.25) 45%,rgba(62,36,23,.08) 100%)}
.veil-c{position:absolute;inset:0;background:rgba(62,36,23,.42)}

/* ---------- shared type ---------- */
.display{
  font-family:'Rubik','Assistant',sans-serif;font-weight:900;
  line-height:1.05;letter-spacing:-.01em;
}
.num{font-family:'Secular One','Rubik',sans-serif;font-weight:400}

/* staggered line reveals */
.rise{opacity:0;transform:translateY(34px)}
.is-active .rise{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.is-active .d1{transition-delay:.15s}
.is-active .d2{transition-delay:.4s}
.is-active .d3{transition-delay:.65s}
.is-active .d4{transition-delay:.9s}
.is-active .d5{transition-delay:1.15s}
.is-active .d6{transition-delay:1.4s}
.is-active .d7{transition-delay:1.65s}
.is-active .d8{transition-delay:1.9s}

/* ============================================================
   S00 — start
   ============================================================ */
#s00{background:var(--blush)}
#s00 .wrap{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3.2vmin;text-align:center;
}
#s00 .logos{height:21vmin}
#s00 h1{font-size:11vmin;color:var(--brown)}
#s00 .sub{font-size:3.1vmin;font-weight:700;color:var(--brown);opacity:.75;letter-spacing:.04em}
#s00 .go{
  margin-top:2.5vmin;
  font-family:'Rubik',sans-serif;font-weight:800;font-size:2.9vmin;
  color:var(--cream);background:var(--brown);
  border:none;border-radius:100px;padding:2.2vmin 6.5vmin;cursor:pointer;
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,127,174,.55);transform:scale(1)}
  50%{box-shadow:0 0 0 2.4vmin rgba(239,127,174,0);transform:scale(1.04)}
}
#s00 .hint{position:absolute;bottom:4vmin;width:100%;text-align:center;font-size:1.9vmin;font-weight:600;color:var(--brown);opacity:.45}
#s00 .load-note{min-height:3vmin;font-size:2vmin;font-weight:700;color:var(--hot)}

/* ============================================================
   S0Q — השאלה הגדולה
   ============================================================ */
#sq{background:var(--blush)}
#sq .q-box{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.6vmin;
  text-align:center;padding:0 6vmin;
}
#sq .q{font-size:8vmin;color:var(--brown)}
#sq .q2{color:var(--hot)}

/* ============================================================
   S01 — hook: montage + kinetic title
   ============================================================ */
#s01{background:var(--brown-deep)}
#s01 video{opacity:0;transition:opacity .5s var(--ease)}
#s01 video.on{opacity:1}
#s01 .flash{
  position:absolute;inset:0;background:var(--cream);opacity:0;pointer-events:none;
}
#s01 .flash.go{animation:flash .45s var(--ease)}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
#s01 .title{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5vmin;text-align:center;
  background:rgba(62,36,23,.34);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
#s01 .title.on{opacity:1}
#s01 .w{
  font-size:16vmin;color:var(--cream);
  text-shadow:0 .8vmin 4vmin rgba(62,36,23,.75);
  opacity:0;transform:scale(1.6);
}
#s01 .title.on .w{animation:slam .55s var(--ease) forwards}
#s01 .title.on .w2{animation-delay:.45s}
#s01 .title.on .tag{animation:slam .7s var(--ease) .5s forwards} /* delay set inline too */
@keyframes slam{
  0%{opacity:0;transform:scale(1.6)}
  70%{opacity:1;transform:scale(.97)}
  100%{opacity:1;transform:scale(1)}
}
#s01 .tag{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:4.6vmin;
  color:var(--hot);
  background:var(--cream);border-radius:100px;padding:1.2vmin 4.5vmin;
  margin-top:2.5vmin;opacity:0;transform:scale(1.6);
}

/* ============================================================
   S02 / S11 / S14 — full-bleed photo + one line
   ============================================================ */
.photo-line .line-box{
  position:absolute;right:0;left:0;bottom:9vmin;
  padding:0 8vmin;text-align:center;
}
.photo-line .big{
  font-size:5.6vmin;color:var(--cream);
  text-shadow:0 .4vmin 2.4vmin rgba(62,36,23,.7);
}
.photo-line .big b{color:var(--pink);font-weight:900}
.photo-line .big .hotw{color:var(--hot)}

#s14 .line-box{bottom:auto;top:50%;transform:translateY(-50%)}
#s14 .big{font-size:8vmin}

/* ============================================================
   S03 — about (split)
   ============================================================ */
#s03{background:var(--cream)}
#s03 .grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:1.05fr .95fr;align-items:center;
  gap:5vmin;padding:0 7vmin;
}
#s03 .txt h2{font-size:7.5vmin;color:var(--brown);margin-bottom:3.4vmin}
#s03 .txt h2 em{font-style:normal;color:var(--hot)}
#s03 .txt p{font-size:2.75vmin;font-weight:600;line-height:1.62;margin-bottom:2.2vmin;max-width:58ch}
#s03 .txt p b{font-weight:800;color:var(--hot)}
#s03 .pic{position:relative;height:74vmin;max-height:80vh}
#s03 .pic img{width:100%;height:100%;object-fit:cover;border-radius:6px}
#s03 .pic::after{
  content:"";position:absolute;inset:0;border-radius:6px;
  transform:translate(-2.4vmin,2.4vmin);
  background:var(--pink);z-index:-1;border-radius:6px;
}

/* ============================================================
   S04 — count-up stats
   ============================================================ */
#s04{background:var(--blush)}
#s04 .shell{
  position:absolute;left:-12vmin;bottom:-14vmin;height:70vmin;opacity:.1;
}
#s04 .head{position:absolute;top:8vmin;right:8vmin;left:8vmin;font-size:4.2vmin;line-height:1.3;color:var(--brown)}
#s04 .head span{color:var(--hot)}
#s04 .stats{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(4,1fr);align-items:center;
  padding:0 6vmin;gap:2vmin;text-align:center;
}
#s04 .num{font-size:11.5vmin;color:var(--brown);line-height:1;direction:ltr}
#s04 .stat:nth-child(2) .num{color:var(--hot)}
#s04 .lbl{font-size:2.7vmin;font-weight:700;color:var(--brown);margin-top:1.6vmin}

/* ============================================================
   S05 — facts
   ============================================================ */
#s05{background:var(--brown-deep)}
#s05 .bg{opacity:.28}
#s05 .head{
  position:absolute;top:8vmin;width:100%;text-align:center;
  font-size:5.2vmin;color:var(--cream);
}
#s05 .cards{
  position:absolute;top:50%;transform:translateY(-42%);right:6vmin;left:6vmin;
  height:42vmin;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.6vmin;align-items:stretch;
}
#s05 .card{
  background:var(--cream);border-radius:8px;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;padding:3vmin 2vmin;gap:1.2vmin;
}
#s05 .k{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.4vmin;color:var(--hot);letter-spacing:.06em}
#s05 .v{font-family:'Rubik',sans-serif;font-weight:900;font-size:3.6vmin;color:var(--brown);line-height:1.2}
#s05 .s{font-size:2.2vmin;font-weight:700;color:var(--brown);opacity:.65}

/* ============================================================
   S06 — kinetic method lines
   ============================================================ */
#s06{background:var(--brown)}
#s06 .lines{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:3vmin;padding-right:12vmin;
}
#s06 .l{font-size:8.4vmin;color:var(--cream)}
#s06 .l3{color:var(--hot)}
#s06 .rise{transform:translateY(46px)}

/* ============================================================
   S07 — year pillars
   ============================================================ */
#s07{background:var(--cream)}
#s07 .head{position:absolute;top:6.5vmin;right:7vmin;font-size:5.4vmin;color:var(--brown)}
#s07 .head span{color:var(--hot)}
#s07 .cards{
  position:absolute;top:19vmin;bottom:8vmin;right:6vmin;left:6vmin;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:2.4vmin;
}
#s07 .card{
  position:relative;border-radius:8px;overflow:hidden;
  transition:transform .6s var(--ease),opacity .6s var(--ease),box-shadow .6s var(--ease);
}
#s07 .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 8s linear}
#s07 .card .cv{position:absolute;inset:0;background:linear-gradient(to top,rgba(62,36,23,.85),rgba(62,36,23,.05) 55%)}
#s07 .card .nm{
  position:absolute;bottom:2vmin;right:2.4vmin;left:2.4vmin;
  font-family:'Rubik',sans-serif;font-weight:800;font-size:3.1vmin;color:var(--cream);
}
#s07.stepping .card{opacity:.35;transform:scale(.97)}
#s07.stepping .card.lit{
  opacity:1;transform:scale(1.03);
  box-shadow:0 1.5vmin 5vmin rgba(62,36,23,.35);z-index:2;
}
#s07 .card.lit img{transform:scale(1.09)}
#s07 .card.lit .nm{color:var(--pink)}

/* ============================================================
   S08 — camp hero video
   ============================================================ */
#s08{background:var(--brown-deep)}
#s08 .cap{
  position:absolute;top:4.5vmin;right:5vmin;
  font-family:'Rubik',sans-serif;font-weight:800;font-size:2.9vmin;
  color:var(--cream);background:rgba(62,36,23,.55);
  border-right:.7vmin solid var(--hot);
  padding:1.2vmin 2.4vmin;border-radius:4px;
}

/* ============================================================
   S09 / S12 — vertical reel on branded blur
   ============================================================ */
.reel-scene{background:var(--brown-deep)}
.reel-scene .bg{filter:none}
.reel-scene .tint{position:absolute;inset:0;background:rgba(247,201,217,.30)}
.reel-scene .tint.deep{background:rgba(62,36,23,.45)}
.reel-scene .frame{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:88vh;aspect-ratio:9/16;
  border-radius:10px;overflow:hidden;
  box-shadow:0 2vmin 8vmin rgba(62,36,23,.55);
  border:.55vmin solid var(--cream);
  background:#000;
}
.reel-scene .frame video{width:100%;height:100%;object-fit:cover}
.reel-scene .side{
  position:absolute;top:50%;transform:translateY(-50%);
  right:6vmin;max-width:30vw;
}
.reel-scene .side h2{font-size:5.4vmin;color:var(--cream);text-shadow:0 .4vmin 2vmin rgba(62,36,23,.6);margin-bottom:1.8vmin}
.reel-scene .side h2 span{color:var(--hot)}
.reel-scene .side p{font-size:2.6vmin;font-weight:700;color:var(--cream);opacity:.9;text-shadow:0 .3vmin 1.5vmin rgba(62,36,23,.6)}
.reel-scene .logo-c{position:absolute;top:4vmin;left:4.5vmin;height:11vmin;opacity:.92}

/* ============================================================
   S10 — layers
   ============================================================ */
#s10{background:var(--blush)}
#s10 .head{position:absolute;top:6.5vmin;right:7vmin;font-size:5.4vmin;color:var(--brown)}
#s10 .cards{
  position:absolute;top:19vmin;bottom:9vmin;right:6vmin;left:6vmin;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.8vmin;
}
#s10 .card{
  background:var(--cream);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;
}
#s10 .card img{width:100%;height:34%;object-fit:cover}
#s10 .body{padding:2.6vmin 2.8vmin;display:flex;flex-direction:column;gap:1.2vmin;flex:1}
#s10 .grades{font-family:'Rubik',sans-serif;font-weight:800;font-size:2.3vmin;color:var(--hot);letter-spacing:.05em}
#s10 .nm{font-size:4vmin;color:var(--brown)}
#s10 .body p{font-size:2.15vmin;font-weight:600;line-height:1.5;color:var(--brown);flex:1}
#s10 .when{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:2.15vmin;color:var(--brown);
  background:var(--pink);border-radius:100px;padding:.9vmin 2.2vmin;align-self:flex-start;
}

/* ============================================================
   S13 — community
   ============================================================ */
#s13{background:var(--brown-deep)}
#s13 .bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--ease)}
#s13 .bgs img.on{opacity:1}
#s13 .veil-c{background:rgba(62,36,23,.55)}
#s13 .head{position:absolute;top:8vmin;right:7vmin;font-size:5.4vmin;color:var(--cream)}
#s13 .head span{color:var(--pink)}
#s13 .chips{
  position:absolute;bottom:10vmin;right:7vmin;left:7vmin;
  display:flex;flex-wrap:wrap;gap:1.8vmin;
}
#s13 .chip{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:2.5vmin;color:var(--brown);
  background:var(--cream);border-radius:100px;padding:1.4vmin 3vmin;
}

/* ============================================================
   S15 — CTA
   ============================================================ */
#s15{background:var(--blush)}
#s15 .grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:1.1fr .9fr;align-items:center;
  gap:4vmin;padding:0 7vmin;
}
#s15 .txt h2{font-size:7vmin;color:var(--brown);margin-bottom:2.6vmin}
#s15 .txt h2 span{color:var(--hot)}
#s15 .txt .p1{font-size:3.1vmin;font-weight:800;color:var(--brown);margin-bottom:1.4vmin}
#s15 .txt .p2{font-size:2.6vmin;font-weight:700;color:var(--brown);opacity:.85;margin-bottom:3.4vmin}
#s15 .phones{display:flex;gap:2vmin;flex-wrap:wrap}
#s15 .ph{
  font-weight:800;font-size:2.4vmin;color:var(--cream);
  background:var(--brown);border-radius:100px;padding:1.3vmin 2.8vmin;
}
#s15 .ph bdo{font-weight:700}
#s15 .logos{height:10vmin;margin-top:4vmin}
#s15 .qr-card{
  justify-self:center;text-align:center;
  background:var(--cream);border-radius:10px;
  padding:3.5vmin 4vmin;
  box-shadow:0 2vmin 6vmin rgba(98,62,44,.22);
}
#s15 .qr-card img{width:38vmin;height:38vmin;margin:0 auto}
#s15 .url{font-family:'Rubik',sans-serif;font-weight:900;font-size:3.4vmin;color:var(--brown);margin-top:1.8vmin;direction:ltr}
#s15 .scan{font-size:2.2vmin;font-weight:700;color:var(--hot);margin-top:.6vmin}

/* ============================================================
   S16 — ambient loop
   ============================================================ */
#s16{background:var(--brown-deep)}
#s16 .bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 2s var(--ease)}
#s16 .bgs img.on{opacity:1;animation:kb-in 14s linear forwards}
#s16 .badge{
  position:absolute;bottom:4vmin;left:4vmin;
  background:var(--cream);border-radius:8px;padding:2vmin;
  display:flex;align-items:center;gap:2vmin;
  box-shadow:0 1vmin 4vmin rgba(62,36,23,.4);
}
#s16 .badge img{width:13vmin;height:13vmin}
#s16 .badge .t{font-family:'Rubik',sans-serif;font-weight:900;font-size:2.5vmin;color:var(--brown);direction:ltr;text-align:center}
#s16 .badge .s{font-size:1.8vmin;font-weight:700;color:var(--hot)}
#s16 .wm{position:absolute;top:4vmin;right:4.5vmin;height:12vmin;opacity:.9}

/* ============================================================
   chrome: dots, hints, blackout
   ============================================================ */
#dots{
  position:fixed;bottom:2.2vmin;left:50%;transform:translateX(-50%);
  display:flex;gap:1vmin;z-index:50;
  opacity:0;transition:opacity .5s;pointer-events:none;
}
body.show-chrome #dots{opacity:1}
#dots i{width:1.05vmin;height:1.05vmin;border-radius:50%;background:rgba(253,243,227,.4);border:1px solid rgba(98,62,44,.35)}
#dots i.on{background:var(--hot);border-color:var(--hot)}

#keys{
  position:fixed;top:2vmin;left:2vmin;z-index:50;
  background:rgba(62,36,23,.85);color:var(--cream);
  font-size:1.75vmin;font-weight:600;border-radius:8px;padding:1.6vmin 2.2vmin;line-height:1.8;
  opacity:0;transition:opacity .5s;pointer-events:none;direction:rtl;
}
body.on-start #keys,body.show-keys #keys{opacity:1}

/* buffering spinner — only while a video is waiting for data */
.scene.is-buffering::after{
  content:"";position:absolute;bottom:4vmin;right:4.5vmin;z-index:20;
  width:4vmin;height:4vmin;border-radius:50%;
  border:.55vmin solid rgba(253,243,227,.35);border-top-color:var(--hot);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#keys b{color:var(--pink);font-weight:800}

#blackout{
  position:fixed;inset:0;background:var(--brown-deep);z-index:90;
  opacity:0;visibility:hidden;transition:opacity .5s;
}
body.blackout #blackout{opacity:1;visibility:visible}

#automark{
  position:fixed;top:2vmin;right:2vmin;z-index:50;
  font-family:'Rubik',sans-serif;font-weight:800;font-size:1.9vmin;
  color:var(--cream);background:var(--hot);border-radius:100px;padding:.8vmin 2.2vmin;
  opacity:0;transition:opacity .4s;pointer-events:none;
}
body.auto #automark{opacity:1}