/* Repet layered hover/drag effect */
.repet {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: grab;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.repet--dragging {
  cursor: grabbing;
}

.repet--rotation {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.repet__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: clip-path 0.3s ease;
}

.repet__layer--base {
  z-index: 1;
}

.repet__layer:not(.repet__layer--base) {
  z-index: 2;
}

.repet__outline,
.repet__shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.repet__outline {
  z-index: 15;
}

.repet__outline.is-active {
  opacity: 0.5;
}

.repet__shadow {
  z-index: 14;
  filter: blur(4px);
}

.repet__shadow.is-active {
  opacity: 1;
}

.repet__outline svg,
.repet__shadow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.repet__layer.rectangle {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.repet__layer.triangle {
  clip-path: polygon(50% 5%, 10% 95%, 90% 95%);
}

.repet__layer.chevron {
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.repet__layer.oval {
  clip-path: ellipse(45% 35% at 50% 50%);
}

.repet__overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* =========================
   YOUR SCRAMBLE STYLES (UNCHANGED)
   ========================= */
.scramble-text,
.scramble-text.scramble-scroll{
  visibility:hidden !important;
  opacity:0;
}
.scramble-visible,
.scramble-text.scramble-visible,
.scramble-scroll.scramble-visible,
.scramble-text.scramble-scroll.scramble-visible{
  visibility:visible !important;
  opacity:1;
}
.scramble-text{position:relative;display:inline-block;line-height:1.1;visibility:hidden;--anim:0;z-index:0;isolation:isolate}
.scramble-text::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:currentColor;opacity:.08;transform-origin:0 50%;transform:scaleX(var(--anim));pointer-events:none;z-index:-1}
.scramble-char{position:relative;display:inline-block;padding:0.08em 0;line-height:1;background:transparent;color:inherit;transition:background-color .12s ease,color .12s ease;vertical-align:middle;letter-spacing:inherit;white-space:pre;--opa:0}
.scramble-char::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1ch;background:currentColor;opacity:var(--opa);pointer-events:none}
.scramble-char.active-current,.scramble-char.active-trail{background-color:#000!important;color:#fff!important;border-radius:0;padding:0.08em 0}
.scramble-char{box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scramble-grey .scramble-char.active-current,.scramble-grey .scramble-char.active-trail{background-color:#8b8b8b!important;color:#fff!important}
.black_box .scramble-text.head.scramble-once{color:#fff}
.scramble-text.head.scramble-once.is-on-black-box{color:#fff}

/* Hide index wrapper until JS reveals (prevents return flicker) */
body.page-index .page_wrapper{opacity:0}

/* Load delay (ms) before entry reveal starts */
.scramble-delay-2000{--scramble-load-delay:2000}

/* Loop start delay (ms) AFTER entry animation finishes */
.scramble-loop-delay-2000{--scramble-loop-start-delay:2000}

/* Optional: pause between loop runs (overrides default LOOP_DELAY) */
.scramble-loop-pause-2000{--scramble-loop-pause:2000}

/* Scroll blur-in headlines */
.h-in__char{display:inline-block}
.name__char{display:inline-block}
.name__word{display:inline-block}

/* =========================
   PRELOADER HELPERS
   ========================= */
.preloader{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  transition:opacity 1.35s ease, visibility 1.35s ease;
}
.preloader.is-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.preloader-lock, body.preloader-lock{height:100%;overflow:hidden}

/* Prevent main scramble flash before script runs */
html.preloader-active .scramble-text{visibility:hidden}

/* Keep page wrapper fades smooth */
.page_wrapper{will-change:opacity}

/* Background alignment system (single source of truth) */
:root{
  --bg-padding-x:15vw;
  --bg-pair-gap:20px;
  --bg-pairs-desktop:11;
  --bg-pairs-laptop:9;
  --bg-pairs-tablet:7;
  --bg-pairs-mobile:5;
  --bg-pairs-tiny:3;
}

/* Vertical dashed background pairs */
.background{
  position:fixed;
  inset:0;
  padding:0 var(--bg-padding-x);
  box-sizing:border-box;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.background__line{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:1px dashed rgba(0, 0, 0, 0.07);
}
.blackbg{
  position:absolute;
  inset:0;
  padding:0 var(--bg-padding-x);
  box-sizing:border-box;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.blackbg .background__line{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:1px dashed rgba(255, 255, 255, 0.18);
}