/* Styles for the five custom widgets. Everything else on the site is Elementor. */

/* ── buttons ─────────────────────────────────────────────────────────── */
.sh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:8px; font-weight:600; font-size:16px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.sh-btn--signal{ background:var(--signal); color:#04121c; }
.sh-btn--signal:hover{ background:#5cbcf5; transform:translateY(-1px); }
.sh-btn--ghost{ border-color:var(--hairline); color:var(--fg); }
.sh-btn--ghost:hover{ border-color:var(--signal); color:var(--signal); }

/* ── editor placeholder ──────────────────────────────────────────────── */
.shamrad-ph{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  padding:38px 32px; border:1px dashed rgba(69,174,238,.5); border-radius:12px;
  background:rgba(69,174,238,.07); color:#0d1b26;
}
.shamrad-ph__tag{
  font-size:13px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:99px; background:var(--signal); color:#04121c;
}
.shamrad-ph p{ margin:0; font-size:15px; opacity:.75; }

/* ── hero ────────────────────────────────────────────────────────────── */
.sh-hero{ --sh-hero-scroll:400vh; position:relative; height:var(--sh-hero-scroll); }
.sh-hero__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto; align-items:center;
  background:var(--ink); color:#e8eef6;
}
.sh-hero__mount{ position:absolute; inset:0; }
.sh-hero__src{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* Once the scene owns the frame the flat video is only a texture source. */
.sh-hero--gl .sh-hero__src{ opacity:0; pointer-events:none; }

.sh-hero__acts{
  position:relative; z-index:2; display:grid;
  width:var(--shell); margin-inline:auto; align-self:center;
}
.sh-hero__act{
  grid-area:1 / 1;            /* all acts share one cell and cross-fade */
  visibility:hidden;          /* GSAP autoAlpha flips this, so hidden acts
                                 never sit on top of the live buttons */
  max-width:20em;
}
.sh-hero__act[data-act="0"]{ visibility:visible; }
.sh-hero__eyebrow{
  display:block; font-size:14px; letter-spacing:.08em; color:var(--signal); margin-bottom:14px;
}
.sh-hero__title{
  font-size:clamp(38px, 6vw, 84px); line-height:1.04; font-weight:800;
  letter-spacing:-.02em; margin:0; max-width:13em;
}
.sh-hero__body{ margin-top:18px; font-size:clamp(16px,1.6vw,20px); line-height:1.6; opacity:.78; max-width:34em; }
.sh-hero__stat{ margin-top:16px; font-size:clamp(18px,2vw,26px); font-weight:700; color:var(--signal); }

.sh-hero__cta{
  position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:12px;
  width:var(--shell); margin:0 auto clamp(32px,6vh,72px);
}
.sh-hero__rot{
  position:relative; z-index:2; width:var(--shell); margin:0 auto 20px;
  font-size:clamp(16px,1.7vw,21px); opacity:.8;
}

/* The mask is absolutely positioned inside the inline-block, so the wrapper
   keeps a normal baseline. An inline-block that clips its overflow takes its
   bottom margin edge as the baseline, which lifts the word off the line. */
.sh-rotator{ position:relative; display:inline-block; vertical-align:baseline; }
.sh-rotator__sizer{ visibility:hidden; }
.sh-rotator__mask{ position:absolute; inset-block:-.18em; inset-inline:0; overflow:hidden; }
.sh-rotator__word{
  position:absolute; inset-inline-start:0; inset-block-start:.18em;
  white-space:nowrap; color:var(--signal); font-weight:700;
  transform:translateY(115%); opacity:0;
}
.sh-rotator__word.is-on{ transform:none; opacity:1; }

@media (max-width:860px){
  .sh-hero{ height:auto; }
  .sh-hero__stage{ position:relative; height:auto; min-height:100svh; padding-block:clamp(96px,18vh,150px) 0; }
  .sh-hero__act{ max-width:none; }
  /* One under the other. Side by side, the second button reads as an
     afterthought at phone width. */
  .sh-hero__cta{ flex-direction:column; align-items:stretch; }
}

/* ── marquee ─────────────────────────────────────────────────────────── */
.sh-mq{ --sh-mq-dur:62s; display:grid; gap:26px; }
.sh-mq__row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
             mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.sh-mq__track{
  display:flex; align-items:center; gap:clamp(38px,5vw,76px);
  list-style:none; margin:0; padding:0; width:max-content;
  will-change:transform;
}
/* Both directions live in 0..+50%. A negative translate drags the row off the
   right edge in RTL, which is how row B vanished on the static build. */
@keyframes sh-mq-fwd{ from{ transform:translateX(0); }   to{ transform:translateX(50%); } }
@keyframes sh-mq-rev{ from{ transform:translateX(50%); } to{ transform:translateX(0); } }
.sh-mq__row--fwd .sh-mq__track{ animation:sh-mq-fwd var(--sh-mq-dur) linear infinite; }
.sh-mq__row--rev .sh-mq__track{ animation:sh-mq-rev var(--sh-mq-dur) linear infinite; }
.sh-mq:hover .sh-mq__track{ animation-play-state:paused; }
.sh-mq img{
  height:54px; width:auto; max-width:210px; object-fit:contain; flex:none;
  /* Logos ship as white pixels + alpha. On a dark band they are already right;
     on a light one they need inverting, which is what --sh-mq-filter carries. */
  filter:var(--sh-mq-filter, none);
  opacity:.72; transition:opacity .25s var(--ease);
}
.sh-mq li:hover img{ opacity:1; }
/* At 72px gap a phone shows one logo per screen, which is what made the
   static build render as a tall column instead of a strip. */
@media (max-width:700px){
  .sh-mq{ gap:18px; }
  .sh-mq__track{ gap:40px; }
  .sh-mq img{ height:42px; max-width:168px; }
}
@media (prefers-reduced-motion: reduce){
  .sh-mq__track{ animation:none; }
  .sh-mq__row{ overflow-x:auto; }
}

/* ── statement fill ──────────────────────────────────────────────────── */
.sh-fill{ --sh-fill-dim:rgba(232,238,246,.26); --sh-fill-lit:#e8eef6; position:relative; }
.sh-fill__mark{
  position:absolute; inset-block-start:50%; inset-inline-start:0;
  translate:0 -50%; width:min(46%,420px); height:auto;
  opacity:0; pointer-events:none; z-index:0;
}
.sh-fill__text{
  position:relative; z-index:1; margin:0;
  font-size:clamp(24px,3.4vw,52px); line-height:1.34; font-weight:600;
  letter-spacing:-.015em; max-width:17em;
}
.sh-fill__w{ color:var(--sh-fill-dim); transition:color .2s linear; }
.sh-fill__w.is-lit{ color:var(--sh-fill-lit); }
.sh-fill .sh-btn{ position:relative; z-index:1; margin-top:clamp(28px,4vw,44px); }

/* ── sync chapters ───────────────────────────────────────────────────── */
.sh-sync__head h2{ font-size:clamp(30px,4vw,58px); line-height:1.08; max-width:13em; margin:0 0 clamp(32px,5vw,64px); }
.sh-sync__grid{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr; }
.sh-sync__stage{ position:relative; display:none; }
.sh-sync__pic{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:14px; opacity:0; transition:opacity .55s var(--ease);
}
.sh-sync__pic.is-on{ opacity:1; }
.sh-sync__track{ display:grid; gap:clamp(20px,3vw,40px); }
.sh-sync__ch{ border-top:1px solid var(--hairline); padding-top:22px; }
.sh-sync__num{ font-size:13px; letter-spacing:.1em; color:var(--signal); }
.sh-sync__ch h3{ font-size:clamp(21px,2.4vw,30px); margin:10px 0 12px; }
.sh-sync__ch p{ margin:0; line-height:1.65; color:var(--muted); max-width:38em; }
.sh-sync__link{ display:inline-block; margin-top:14px; color:var(--signal); text-decoration:none; }
.sh-sync__link:hover{ text-decoration:underline; }

@media (min-width:901px){
  .sh-sync__grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .sh-sync__stage{ display:block; position:sticky; top:14vh; aspect-ratio:4/5; }
  .sh-sync__ch{ min-height:52vh; display:flex; flex-direction:column; justify-content:center; }
  .sh-sync__ch{ opacity:.42; transition:opacity .4s var(--ease); }
  .sh-sync__ch.is-on{ opacity:1; }
}
@media (max-width:900px){
  .sh-sync[data-pan="1"] .sh-sync__track{
    display:flex; width:max-content; gap:18px; will-change:transform;
  }
  .sh-sync[data-pan="1"] .sh-sync__ch{ width:78vw; flex:none; }
}

/* ── certificates ────────────────────────────────────────────────────── */
.sh-certs{ list-style:none; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin:0; padding:0; }
.sh-cert{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  height:100%; padding:24px 24px 22px; border:1px solid var(--hairline); border-radius:14px;
  color:var(--fg); text-decoration:none;
  background:color-mix(in srgb, var(--fg) 2.5%, transparent);
  transition:border-color .3s, background .3s, transform .3s;
}
a.sh-cert:hover{
  border-color:var(--signal); transform:translateY(-2px);
  background:color-mix(in srgb, var(--signal) 6%, transparent);
}
.sh-cert__body{ display:flex; flex-direction:column; gap:6px; }
.sh-cert__name{ font-size:19px; font-weight:700; letter-spacing:-.01em; }
.sh-cert__desc{ font-size:15px; line-height:1.5; opacity:.68; }
.sh-cert__valid{ margin-top:6px; font-size:13px; letter-spacing:.04em; color:var(--signal); }
.sh-cert__ic{ flex:none; margin-top:2px; opacity:.45; transition:opacity .3s, transform .3s; }
a.sh-cert:hover .sh-cert__ic{ opacity:1; transform:translateY(2px); }
.sh-certs__note{ margin-top:28px; max-width:60ch; color:var(--muted); }