/*  View Transition API  */

/* 1. Name the container that will be animated */
body:not(.user-logged-in) .nodend{
  view-transition-name: node-content;
}

/* 2. Define the animations for moving FORWARD (Next) */
html.slide-next::view-transition-old(node-content) {
  animation: slide-out-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html.slide-next::view-transition-new(node-content) {
  animation: slide-in-right 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 3. Define the animations for moving BACKWARD (Prev) */
html.slide-prev::view-transition-old(node-content) {
  animation: slide-out-right 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
html.slide-prev::view-transition-new(node-content) {
  animation: slide-in-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 4. The Keyframes that power the sliding */
@keyframes slide-out-left {
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
}
@keyframes slide-out-right {
  to { transform: translateX(30%); opacity: 0; }
}
@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
}

/* 5. Give the navigation its own unique view-transition-name */
/* This pulls it out of the .layout-content sliding animation */
body:not(.user-logged-in) .nodenav{
  view-transition-name: isolated-nav;
}

/* 6. Turn off the default animation for this specific layer */
/* By default, the API will try to crossfade it. Setting animation to 'none' 
   ensures it stays completely static while the rest of the page slides behind it. */
::view-transition-old(isolated-nav),
::view-transition-new(isolated-nav) {
  animation: none;
  height: 100%; /* Keeps its layout stable during the swap */
}
/* z-index to the navigation's view transition group to guarantee it stays on top */
::view-transition-group(isolated-nav) {
  z-index: 10;
}
/* End View Transition API  */


/* Hide the source data block (The View) */
/* IMPORTANT: Ensure your View's CSS class in Drupal matches this! */
.blockwrap[class$="nodenav"] {
  display: none;
}

/* Navigation Container */
.nodend > .wwrap {
  position: relative;
}

.nodenav{
  position: absolute;
  top: -40px;
  right: var(--space);
  display: flex;
  justify-content: flex-end;
  z-index: 80;
  gap: 1px;
}

/* Button Styles */
.nodenav > a {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
}

/* Icons using CSS shapes */
.nodenav > a::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color 300ms ease-out;
}
.nodenav > a:hover::after{
  background-color: rgba(255, 255, 255, 1);
}

.nodenav-next::after,
.nodenav-prev::after{
  clip-path: polygon(30% 17%, 36% 11%, 75% 50%, 36% 89%, 30% 83%, 63% 50%);
}
.nodenav-prev::after {
  transform: rotate(180deg);
}
.goback::after {
  clip-path: polygon(18% 11%, 50% 43%, 82% 11%, 89% 18%, 57% 50%, 89% 82%, 82% 89%, 50% 57%, 18% 89%, 11% 82%, 43% 50%, 11% 18%);
}

@media screen and (max-width: 1150px) {
  .nodenav {
    right: var(--space-0-5);
  }
}
@media screen and (max-width: 850px) {
  .wt-node .nodenav {
    right: unset;
    left: var(--space-0-5);
  }
}