/* ===================================================================
   ARTLINE - Hyper-scroll opening screen
   A 3D "hyperspace" flight: scroll pushes the camera forward through
   space, past the audience questions + happy-client badges + planets,
   arriving at the "הצטרפי להצלחה!" panel.
   =================================================================== */

.hyper{
  position:relative;
  height:920vh;               /* long, slow, heavy flight + a held arrival */
  background:#191534;
  z-index:1;
}

/* pinned stage - fixed to the viewport, shown while the .hyper section is in view */
.hyper-stage{
  position:fixed;
  inset:0;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
  z-index:2;
  transition:opacity .25s linear;
}
/* at the end of the flight the stage detaches and scrolls away with its section */
.hyper-stage.is-done{position:absolute;inset:auto 0 0 0;height:100vh}

/* ---------- background ---------- */
.hyper-bg{
  position:absolute;inset:0;z-index:0;
  background:#211c40 url("../img/background.png") center/cover no-repeat;
}
.hyper-bg::after{                     /* faint depth vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(135% 120% at 50% 42%, transparent 52%, rgba(9,7,22,.6) 100%);
}

.hyper-stars{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
}

/* ---------- 3D flight ---------- */
.hyper-viewport{
  position:absolute;inset:0;z-index:2;
  perspective:1100px;
  perspective-origin:50% 46%;
  overflow:hidden;
}
.hyper-world{
  position:absolute;top:50%;left:50%;
  transform-style:preserve-3d;
  will-change:transform;
}

.h-item{
  position:absolute;left:0;top:0;
  transform-style:preserve-3d;
  will-change:transform,opacity;
}

/* big audience question words - two lines each.
   Far away: solid white fill. As they approach the fill fades out and
   only the white outline remains. Driven by --fill / --stroke from JS. */
.h-word{
  --fill:1;
  --stroke:1;
  font-family:var(--font-display);
  font-weight:900;
  font-size:12.8vw;
  line-height:.8;
  letter-spacing:-.015em;
  color:rgba(255,255,255,var(--fill));
  -webkit-text-stroke:2.6px rgba(255,255,255,var(--stroke));
  transform:translate(-50%,-50%);
  paint-order:stroke;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.h-word span{white-space:nowrap;display:block}

/* happy-client badge - logo inside a slowly-rotating "לקוחות מרוצים" ring */
.h-badge{
  transform:translate(-50%,-50%);
  width:270px;height:270px;
  display:grid;place-items:center;
}
.h-badge .ring{
  position:absolute;inset:0;width:100%;height:100%;
  animation:h-ring-spin 26s linear infinite;
  overflow:visible;
}
.h-badge .ring text{
  fill:#ffffff;
  font-family:var(--font);
  font-weight:700;
  font-size:max(14px,0.97vw);
  letter-spacing:1px;
}
.h-badge.is-colored .ring text{fill:var(--teal)}
.h-badge .logo-wrap{
  position:relative;
  width:56%;height:56%;
  display:grid;place-items:center;
  border-radius:50%;
}
.h-badge.is-colored .logo-wrap::before{
  content:"";position:absolute;inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%);
}
.h-badge img{
  max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));
}
@keyframes h-ring-spin{to{transform:rotate(360deg)}}

/* planets (uploaded artwork) - large, bleeding past the frame for depth */
.h-planet{transform:translate(-50%,-50%);pointer-events:none}
.h-planet img{display:block;width:100%;height:auto}
.h-planet.red{width:min(135vw,1700px)}
.h-planet.teal{width:min(112vw,1380px);filter:drop-shadow(0 0 60px rgba(103,205,212,.3))}

/* ---------- brand mark ---------- */
.hyper-logo{
  position:absolute;top:26px;right:30px;z-index:6;
}
.hyper-logo img{height:38px;width:auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));}

/* ---------- arrival panel ---------- */
.hyper-final{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 24px;
  opacity:0;
  transform:translateY(40px) scale(.96);
  pointer-events:none;
  will-change:opacity,transform;
}
.hyper-final.is-in{pointer-events:auto}
.hyper-final-kicker{
  color:var(--teal);font-weight:700;letter-spacing:.22em;
  font-size:max(12px,1.1vw);text-transform:uppercase;margin-bottom:14px;
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.hyper-final-title{
  font-family:var(--font-display);
  font-weight:900;
  color:#fff;
  line-height:.8em;
  font-size:max(3rem,6vw);
  letter-spacing:-.02em;
  text-shadow:0 8px 60px rgba(58,50,137,.6);
}
.hyper-final-title span{
  color:var(--pink);
  -webkit-text-stroke:0;
}
.hyper-final-text{
  margin-top:26px;max-width:640px;margin-bottom:1em;
  font-size:max(12px,1.1vw);
  color:rgba(255,255,255,.9);
}
.hyper-final-text strong{color:#fff}
.hyper-final-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hyper-final-tag{margin-top:3.1em;font-size:max(10px,.8vw);color:rgba(255,255,255,.62)}

/* ---------- scroll hint ---------- */
.hyper-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.7);font-size:max(.8rem,0.89vw);letter-spacing:.14em;
  transition:opacity .4s ease;
}
.hyper-hint svg{width:22px;height:22px;fill:currentColor;animation:h-bob 1.8s ease-in-out infinite}
@keyframes h-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- progress rail ---------- */
.hyper-rail{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  z-index:6;width:3px;height:120px;border-radius:3px;
  background:rgba(255,255,255,.14);overflow:hidden;
}
.hyper-rail i{
  position:absolute;left:0;top:0;width:100%;height:0%;
  background:linear-gradient(var(--teal),var(--pink));
}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .hyper{height:480vh}
  .h-word{font-size:19vw;-webkit-text-stroke-width:1.6px}
  .h-badge{width:170px;height:170px}
  .h-badge .ring text{font-size:max(12px,0.83vw);letter-spacing:1.6px}
  .hyper-logo{right:16px;top:16px}
  .hyper-logo img{height:30px}
  .hyper-rail{display:none}
}

/* ---------- reduced motion: show a calm static hero ---------- */
@media (prefers-reduced-motion:reduce){
  .hyper{height:auto;min-height:100vh}
  .hyper-stage{position:relative;height:auto;min-height:100vh;padding:120px 0}
  .hyper-viewport,.hyper-hint,.hyper-rail{display:none}
  .hyper-final{position:relative;opacity:1;transform:none;pointer-events:auto;min-height:70vh}
  .h-badge .ring{animation:none}
}

/* the badge caption ring is an <svg class="ring"> - neutralise any framework
   "ring" utility so no square box is painted around the badge */
#hero .h-item,#hero .h-badge,#hero .h-badge .ring,#hero .h-badge svg{
  border:0;outline:0;box-shadow:none;
}