:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --sbw: calc(100vw - 100%);
  --tri-title-weight: 900;
  --tri-title-letter: .08em;
  --tri-title-stroke: 1.4px;
  --tri-title-stroke-alpha: .82;
}

/* Robust full-bleed hero (no horizontal scrollbar); visible by default */
.tri-hero{
  position:relative;
  width:calc(100vw - var(--sbw));
  margin-left:calc(50% - 50vw + var(--sbw)/2);
  margin-right:calc(50% - 50vw + var(--sbw)/2);
  height:100dvh; height:100svh;
  overflow:hidden;
  background:#000; color:#fff;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  opacity:1;         /* visible even if JS fails */
  z-index:2;         /* above stray overlays */
}
.tri-hero.is-ready{  /* gentle fade if JS marks it */
  transition:opacity .25s ease;
}
.tri-hero *{ box-sizing:border-box }

/* SLIDES */
.tri-slides{ position:absolute; inset:0 }
.tri-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; will-change:transform,opacity }
.tri-slide.is-visible{ opacity:1; pointer-events:auto }
.tri-vignette{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.45)) }

/* MEDIA (image OR video) */
.tri-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  will-change:transform;
  display:block;
  clip-path: inset(0 100% 0 0);
  animation: revealCols 1.5s ease forwards;
}
@keyframes revealCols{
  0%{clip-path: inset(0 100% 0 0)}
  25%{clip-path: inset(0 75% 0 0)}
  50%{clip-path: inset(0 50% 0 0)}
  75%{clip-path: inset(0 25% 0 0)}
  100%{clip-path: inset(0 0 0 0)}
}

/* DIRECTIONAL SLIDE TRANSITIONS */
.tri-enter-bottom{ opacity:1; transform:translateY(100%) }
.tri-enter-active{ transform:translateY(0); transition:transform .8s var(--ease),opacity .8s var(--ease) }
.tri-exit-up{ opacity:1; transform:translateY(0) }
.tri-exit-up.tri-exit-active{ opacity:.35; transform:translateY(-25%); transition:transform .6s var(--ease),opacity .6s var(--ease) }
.tri-enter-top{ opacity:1; transform:translateY(-100%) }
.tri-exit-down{ opacity:1; transform:translateY(0) }
.tri-exit-down.tri-exit-active{ opacity:.35; transform:translateY(25%); transition:transform .6s var(--ease),opacity .6s var(--ease) }

/* Parallax on media during slide */
.tri-enter-bottom .tri-media{ transform:translateY(12%) }
.tri-enter-top    .tri-media{ transform:translateY(-12%) }
.tri-enter-active .tri-media{ transform:translateY(0); transition:transform 1.1s var(--ease) }
.tri-exit-up.tri-exit-active   .tri-media{ transform:translateY(-6%); transition:transform .7s var(--ease) }
.tri-exit-down.tri-exit-active .tri-media{ transform:translateY(6%); transition:transform .7s var(--ease) }

/* OVERLAY */
.tri-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px }
.tri-title{
  font-family:"Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight:var(--tri-title-weight);
  letter-spacing:var(--tri-title-letter);
  line-height:.9; text-transform:uppercase;
  font-size:clamp(42px,12vw,160px);
  color:transparent;
  -webkit-text-stroke:var(--tri-title-stroke) rgba(255,255,255,var(--tri-title-stroke-alpha));
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.tri-cta{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; padding:12px 26px; border:1px solid rgba(255,255,255,.92);
  background:transparent; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.08em }
.tri-overlay .tri-title,.tri-overlay .tri-cta{ opacity:0; transform:translateY(0) }
.tri-title.pre{ transform:translateY(-28px) }
.tri-cta.pre{ transform:translateY(28px) }
.tri-overlay.reveal .tri-title{ opacity:1; transform:translateY(0); transition:transform .5s var(--ease),opacity .5s var(--ease) }
.tri-overlay.reveal .tri-cta{ opacity:1; transform:translateY(0); transition:transform .5s var(--ease) .1s,opacity .5s var(--ease) .1s }

/* BOTTOM BAR */
.tri-bottom{ position:absolute; left:24px; right:24px; bottom:24px; display:flex; align-items:center; justify-content:space-between; z-index:5 }
.tri-left{ display:flex; align-items:center; gap:16px }

/* Counter */
.tri-count{ display:flex; align-items:flex-end; gap:8px; font-weight:300; letter-spacing:.08em; font-variant-numeric:tabular-nums }
.tri-count .tri-num{ font-size:clamp(16px,2.6vw,28px) }
.tri-sep{ opacity:.6 }

/* Sound */
.tri-sound{ display:flex; align-items:center; gap:10px; cursor:pointer; background:transparent; border:0; color:#fff; font-weight:700 }
.tri-sound:focus,.tri-sound:hover,.tri-sound:active{ background:transparent; outline:none }

/* Dots equalizer */
.tri-eq{ display:flex; gap:6px; height:12px; align-items:flex-end }
.tri-eqdot{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.85; transform:translateY(0) }
@keyframes tri-bob{ 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
.tri-eq.is-on .tri-eqdot{ animation:tri-bob .9s ease-in-out infinite }
.tri-eq.is-on .tri-eqdot:nth-child(2){ animation-delay:.12s }
.tri-eq.is-on .tri-eqdot:nth-child(3){ animation-delay:.24s }
.tri-eq.is-on .tri-eqdot:nth-child(4){ animation-delay:.36s }

/* Prev/Next */
.tri-right{ display:flex; align-items:center; gap:12px }
.tri-btn{ background:transparent; color:#fff; border:0; padding:10px 0; cursor:pointer; font-weight:800; letter-spacing:.08em }
.tri-btn:hover,.tri-btn:active,.tri-btn:focus{ background:transparent; outline:none; opacity:.9 }

/* Side overlays */
.tri-side{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; display:flex; gap:14px; align-items:center }
.tri-side-left{ left:24px; flex-direction:column }
.tri-side-right{ right:24px }
.tri-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.85); color:#fff; text-decoration:none; opacity:.85; transition:opacity .2s }
.tri-ico:hover,.tri-ico:focus{ opacity:1; outline:none }
.tri-ico svg{ width:16px; height:16px; display:block }

/* Vertical email toggle */
.tri-hero[data-vertical-email="1"] .tri-email{
  color:#fff; text-decoration:none; font-weight:600; letter-spacing:.02em; opacity:.9;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding-right:6px; padding-bottom:0; border-bottom:0; border-right:1px solid rgba(255,255,255,.7);
}
.tri-hero[data-vertical-email="1"] .tri-email:hover,
.tri-hero[data-vertical-email="1"] .tri-email:focus{ opacity:1; border-right-color:#fff; outline:none }

.tri-hero[data-vertical-email="0"] .tri-email{
  color:#fff; text-decoration:none; font-weight:600; letter-spacing:.02em; opacity:.9;
  border-bottom:1px solid rgba(255,255,255,.7); padding-bottom:2px
}
.tri-hero[data-vertical-email="0"] .tri-email:hover,
.tri-hero[data-vertical-email="0"] .tri-email:focus{ opacity:1; border-bottom-color:#fff; outline:none }

/* Hide side overlays on small screens */
@media (max-width:640px){
  .tri-side{ display:none }
}

/* Desktop height a tad shorter (~2%) */
@media (min-width:1024px){
  .tri-hero{ height:98dvh; height:98vh; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .tri-enter-active,
  .tri-exit-up.tri-exit-active,
  .tri-exit-down.tri-exit-active,
  .tri-overlay.reveal *{ transition:none !important }
}