/* 3-Part Split-Screen Hero — styles (converging "cone" split)
   Shape knobs (--gap-top, --spread) are set per-instance via the
   shortcode's inline style; these are the defaults. */
.ssh {
  --gap-top: 34%;
  --spread: 8%;
  --seam: 3px;
  --seam-color: #000;
  --fade-ms: 800ms;
  --bg: #000;
  --media-filter: none;
  --icon: clamp(30px, 5vh, 46px);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}
.ssh, .ssh * { box-sizing: border-box; }

.ssh__panel { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.ssh__panel--1 {
  clip-path: polygon(0 0, var(--gap-top) 0,
                     calc(var(--gap-top) - var(--spread)) 100%, 0 100%);
}
.ssh__panel--2 {
  clip-path: polygon(var(--gap-top) 0, calc(100% - var(--gap-top)) 0,
                     calc(100% - var(--gap-top) + var(--spread)) 100%,
                     calc(var(--gap-top) - var(--spread)) 100%);
}
.ssh__panel--3 {
  clip-path: polygon(calc(100% - var(--gap-top)) 0, 100% 0, 100% 100%,
                     calc(100% - var(--gap-top) + var(--spread)) 100%);
}

.ssh__inner { position: absolute; top: 0; bottom: 0; filter: var(--media-filter, none); }

/* Per-split texture/filter overlay: above the media, inside the clip. */
.ssh__tex {
  position: absolute; inset: 0; z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--tex-size, cover);
  mix-blend-mode: var(--tex-blend, multiply);
  opacity: var(--tex-opacity, 1);
  pointer-events: none;
}
.ssh__panel--1 .ssh__inner { left: 0;   right: 60%; }
.ssh__panel--2 .ssh__inner { left: 22%; right: 22%; }
.ssh__panel--3 .ssh__inner { left: 60%; right: 0;   }

.ssh__layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--fade-ms) ease;
  will-change: opacity;
}
.ssh__layer.is-active { opacity: 1; }

.ssh__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.ssh__panel--1 .ssh__media { object-position: var(--pos1, center); }
.ssh__panel--2 .ssh__media { object-position: var(--pos2, center 20%); }
.ssh__panel--3 .ssh__media { object-position: var(--pos3, center); }
.ssh__media.is-photo.is-zooming {
  animation: sshZoom var(--zoom-ms, 8000ms) ease-out forwards;
}
@keyframes sshZoom {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.5%, -1%); }
}

.ssh__seams {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}
.ssh__seams line {
  stroke: var(--seam-color);
  stroke-width: var(--seam);
  vector-effect: non-scaling-stroke;
}

.ssh__title {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; padding: 0 6vw; margin: 0;
  color: #fff; text-align: center;
  font: 800 clamp(2.5rem, 9vw, 8rem)/0.95 "Arial Narrow", Arial, sans-serif;
  letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}

/* Logo + social-icon band */
.ssh__overlay {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
}
.ssh__brand {
  pointer-events: auto;
  position: absolute; left: 0; right: 0;
  top: var(--band-top, 66%);
  transform: translateY(-50%);
  background: var(--band-color, rgba(0,0,0,.7));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: clamp(1.2rem, 4vh, 3rem) 6vw;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  text-align: center;
}
.ssh__logo-group {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.35rem, 1.2vh, .8rem);
}
.ssh__logo {
  height: var(--logo-size, clamp(60px, 15vh, 180px));
  width: auto; max-width: 80%;
  object-fit: contain; display: block;
}
.ssh__tagline {
  margin: 0;
  color: var(--tagline-color, #6b6b6b);
  font: 400 clamp(.7rem, 1.5vw, 1rem)/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-indent: .28em;
}
.ssh__socials {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2.2rem);
}
.ssh__socials a {
  display: inline-flex; line-height: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.ssh__socials a:hover { transform: translateY(-2px) scale(1.08); }
.ssh__socials a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.ssh__socials img { height: var(--icon); width: auto; display: block; }

/* ---- Intro choreography ---- */
.ssh__logo {
  -webkit-mask-image: linear-gradient(100deg, #000 0, #000 55%, rgba(0,0,0,0) 72%);
          mask-image: linear-gradient(100deg, #000 0, #000 55%, rgba(0,0,0,0) 72%);
  -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;  mask-position: 100% 0;
  animation: sshWrite var(--logo-write-ms, 2000ms) cubic-bezier(.65,.02,.25,1) forwards;
}
@keyframes sshWrite { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

.ssh__tagline { opacity: 0; animation: sshFade 700ms ease 1800ms forwards; }
@keyframes sshFade { to { opacity: 1; } }

.ssh__socials { perspective: 700px; }
.ssh__socials a {
  transform-origin: center;
  animation: sshFlipIn 600ms cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes sshFlipIn {
  from { opacity: 0; transform: rotateY(-90deg); }
  to   { opacity: 1; transform: rotateY(0); }
}
.ssh__socials a:nth-child(1) { animation-delay: 2000ms; }
.ssh__socials a:nth-child(2) { animation-delay: 2130ms; }
.ssh__socials a:nth-child(3) { animation-delay: 2260ms; }
.ssh__socials a:nth-child(4) { animation-delay: 2390ms; }
.ssh__socials a:nth-child(5) { animation-delay: 2520ms; }

/* Real handwriting stroke-draw (draw mode) */
[data-logo-anim="draw"] .ssh__logo { -webkit-mask-image: none; mask-image: none; animation: none; }
[data-logo-anim="draw"] .ssh__logo path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sshDraw var(--logo-write-ms, 2000ms) ease-in-out forwards;
}
@keyframes sshDraw { to { stroke-dashoffset: 0; } }

.ssh--intro .ssh__panel { opacity: 0; transition: opacity .7s ease; }
.ssh--intro .ssh__panel.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ssh__logo { -webkit-mask-image: none; mask-image: none; animation: none; }
  .ssh__tagline { opacity: 1; animation: none; }
  .ssh__socials a { animation: none; }
  [data-logo-anim="draw"] .ssh__logo path { stroke-dashoffset: 0; animation: none; }
  .ssh--intro .ssh__panel { opacity: 1; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ssh__media.is-photo.is-zooming { animation: none; transform: scale(1.05); }
  .ssh__layer { transition-duration: 300ms; }
}

/* Phones: collapse to a single full-screen panel cycling the pool. */
@media (max-width: 640px) {
  .ssh[data-stack-mobile="yes"] .ssh__panel { clip-path: none; }
  .ssh[data-stack-mobile="yes"] .ssh__inner { left: 0; right: 0; }
  .ssh[data-stack-mobile="yes"] .ssh__panel:not(.ssh__panel--1) { display: none; }
  .ssh[data-stack-mobile="yes"] .ssh__seams { display: none; }
}