/* for custom cursor

body:has( a:hover) .cursor,
body:has( button:hover) .cursor,
body:has( [data-cursor]:hover) .cursor{
  width: 2em;
  height: 2em;
  background-color: rgba(152, 223, 45, 0.6);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}
   */




   /* for custom scramble cursor */



/* --------------------------------- Cursors --------------------------------- */

/* Scramble Cursor */
@media (hover: hover) and (pointer: fine) {
  [data-cursor] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0s, padding .4s cubic-bezier(0.625, 0.05, 0, 1), height .8s cubic-bezier(0.625, 0.05, 0, 1), background-color .6s cubic-bezier(0.625, 0.05, 0, 1);
    transform: translateX(0%) scale(1) rotate(0.001deg);
    opacity: 1;

  }
  
  [data-cursor="active"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0s, padding .4s cubic-bezier(0.625, 0.05, 0, 1), height .8s cubic-bezier(0.625, 0.05, 0, 1), background-color .6s cubic-bezier(0.625, 0.05, 0, 1);
    opacity: 1; 
    transform: translateX(0%) scale(1) rotate(0.001deg);
    background: var(--_color-modes---cursor--cursor-stroke);
    padding: 1.33em 1.66em;
  }
  
  [data-cursor="active-edge"] .cursor-scramble {
    transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0s, padding .4s cubic-bezier(0.625, 0.05, 0, 1), height .8s cubic-bezier(0.625, 0.05, 0, 1), background-color .6s cubic-bezier(0.625, 0.05, 0, 1);
    opacity: 1; 
    transform: translateX(-100%) scale(1) rotate(0.001deg);
    background-color: var(--_color-modes---cursor--cursor-stroke);
  }
}



/* Basic Cursor */
@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

body:has(:is(a, button, [data-accordion-toggle]):hover):not(:has([data-cursor-hover]:hover)) [data-cursor] .cursor-scramble{
  width: 2em;
  height: 2em;
  background-color: var(--_color-modes---cursor--cursor-fill-hover);
  transition: height .4s  cubic-bezier(0.625, 0.05, 0, 1),  width .4s  cubic-bezier(0.625, 0.05, 0, 1);
}

* {
  cursor: none !important;
}




/* --------------------------------- Navigation Theme Toggle --------------------------------- */

/* Parent button */
[data-theme-toggle] {
  position: relative;
  display: inline-block;
}

/* All icons stacked + centered */
[data-theme-toggle] svg.mode-icon {
  position: absolute;
  top: 50%;
  left: 50%;
 /*  width: 70%;          optional, adjust as needed */
 /*  height: 70%;          optional */
  transform: translate(-50%, -50%) translateY(4px);
  opacity: 0;
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
  pointer-events: none;
}

/* Active icon visible + centered */
[data-theme-toggle][data-theme="auto"]  svg.mode-icon[data-theme="auto"],
[data-theme-toggle][data-theme="light"] svg.mode-icon[data-theme="light"],
[data-theme-toggle][data-theme="dark"]  svg.mode-icon[data-theme="dark"] {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}


/* Disable icon transitions until initialization is done */
[data-theme-toggle].no-anim svg.mode-icon {
  transition: none !important;
}

/* Smooth theme transitions for when it flips - keep it limited here since its looking at EVERYTHING 
body,
body * {
  transition:
    background-color 350ms ease-in-out,
    color 350ms ease-in-out,
    border-color 350ms ease-in-out,
    fill 350ms ease-in-out,
    stroke 350ms ease-in-out;
}
*/





/* For theme testing */

[data-theme-nav="light"] .page-link {
/* color: var(--_colors-1---nav-link); */
color: #ffffff; 
}




/* set active state of item once selected */ 
[data-accordion-status=active] .accordion-css__item-top {
    opacity: 1;
}


/* Animate Accordion Bottom Grid */
.accordion-css__item-bottom {
  transition: grid-template-rows 0.8s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}



/* --------------------------------- Light/Dark Image Transition  --------------------------------- */

/* headshot img light/dark mode logic */ 

body.u-theme-light img.image.dark-mode {
    opacity: 0;
    transition: opacity .7s cubic-bezier(0.63, 0.01, 0.45, 1);
}

body:not(.u-theme-light) img.image.dark-mode {
    opacity: 1;
    transition: opacity .7s cubic-bezier(0.63, 0.01, 0.45, 1);
}


/* --------------------------------- Shutter Scroll  --------------------------------- */

/* shutter scroll transition */

[data-shutter-scroll-panel] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
  
[data-shutter-scroll-row] {
  height: 3em;
  width: 100%;
  background-color: currentColor;
  backface-visibility: hidden;
  will-change: opacity;
}

[data-shutter-scroll-transition][data-shutter-height="1.5em"] [data-shutter-scroll-row] {
  height: 1.5em;
}


/* --------------------------------- Directional List --------------------------------- */

/* directional list */

[data-directional-hover-tile] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}

::selection {
  background-color: var(--_color-modes---selection-bg); 
  color: var(--_color-modes---selection-text); 
}


/* --------------------------------- Video Thumbnail Hover --------------------------------- */


/* ———— If video is active and hovered, set it to opacity 1 ———— */
[data-video-on-hover="active"] video{ opacity: 1; }





/* --------------------------------- Bold Nav Hamburger --------------------------------- */

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar {
  transform: translate(0, 0)  rotate(0.001deg);
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
}

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, -.45em) scale(1, 1) rotate(0.001deg);
}

.bold-nav-full__hamburger .bold-nav-full__hamburger-bar:nth-child(3) {
  transform: translate(0, .45em) scale(1, 1) rotate(0.001deg);
}

/* Hamburger - Hover */
.bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, -.45em) scale(.5, 1) rotate(0.001deg);
}

.bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) {
   transform: translate(0, .45em) scale(.5, 1) rotate(0.001deg);
}

/* Hamburger (Navigation Open) */

[data-navigation-status="active"]  .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, 0) rotate(45deg) scale(1, 1);
}

[data-navigation-status="active"] .bold-nav-full__hamburger-bar:nth-child(2) {
  transform: translate(-150%, 0) rotate(0.001deg) scale(1, 1);
}

[data-navigation-status="active"]  .bold-nav-full__hamburger-bar:nth-child(3) {
  transform: translate(0, 0) rotate(-45deg) scale(1, 1);
}

/*  Hamburger - Hover (Navigation Open)  */

[data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(1) {
  transform: translate(0, 0) rotate(45deg) scale(.7, 1);
}

[data-navigation-status="active"] .bold-nav-full__hamburger:hover .bold-nav-full__hamburger-bar:nth-child(3) {
  transform: translate(0, 0) rotate(-45deg) scale(.7, 1);
}


/* --------------------------------- Tile --------------------------------- */

.bold-nav-full__tile {
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

/* Tile (Navigation Open) */

[data-navigation-status="active"] .bold-nav-full__tile {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Tile - Links */

.bold-nav-full__link {
  transform: translateY(100%) rotate(5deg);
  transition: transform 0.75s cubic-bezier(.7, 0, .3, 1);
}

.bold-nav-full__li:nth-child(1) .bold-nav-full__link {transition-delay: 0.2s;}
.bold-nav-full__li:nth-child(2) .bold-nav-full__link {transition-delay: 0.15s;}
.bold-nav-full__li:nth-child(3) .bold-nav-full__link {transition-delay: 0.1s;}
.bold-nav-full__li:nth-child(4) .bold-nav-full__link {transition-delay: 0.05s;}
.bold-nav-full__li:nth-child(5) .bold-nav-full__link {transition-delay: 0s;}

/* Tile - Links (Navigation Open) */

[data-navigation-status="active"] .bold-nav-full__link {
  transform: translateY(0%) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-navigation-status="active"] .bold-nav-full__li:nth-child(1) .bold-nav-full__link {transition-delay: 0.3s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(2) .bold-nav-full__link {transition-delay: 0.35s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(3) .bold-nav-full__link {transition-delay: 0.4s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(4) .bold-nav-full__link {transition-delay: 0.45s;}
[data-navigation-status="active"] .bold-nav-full__li:nth-child(5) .bold-nav-full__link {transition-delay: 0.5s;}


/* Tile - Links (Hover) */

.bold-nav-full__li {
  transition: opacity 0.5s cubic-bezier(.7, 0, .3, 1);
}

.bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li {
  opacity: 0.15;
}

.bold-nav-full__ul:has(.bold-nav-full__li:hover) .bold-nav-full__li:hover {
  opacity: 1;
}

/* Tile - Links (Hover) */

.bold-nav-full__link .bold-nav-full__link-text {
  transition: transform 0.5s cubic-bezier(.7, 0, .3, 1);
  transform: translateY(0%) rotate(0.001deg);
}

.bold-nav-full__link:hover .bold-nav-full__link-text {
  transform: translateY(-100%) rotate(0.001deg);
}



/* --------------------------------- Odometer countup --------------------------------- */

[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"], 
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}


/* --------------------------------- Before/After Slider --------------------------------- */


img::selection{ background: none; }

.splitter-handle__center::after{
  content:'';
  position:absolute;
  z-index: 1;
  width: 100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius:100em;
  opacity: 1;
  border: 1px solid white;
  transition: all 0.4s cubic-bezier(0.35, 1, 0.6, 1);
}

.splitter-handle:hover .splitter-handle__center::after{
  width: 130%;
  height:130%;
  opacity: 0.5;
}