/* Custom Text Gradient for AnchorDream */
.anchordream-title {
  /* Italic as requested */
  font-style: normal;
  
  /* The Gradient: Deep Ocean Blue -> Cyan -> Dreamy Lavender */
  background: linear-gradient(90deg, #0f3d5c 0%, #2b7095 40%, #a46db5 100%);
  
  /* Clip background to text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  
  /* Optional: small filter to make it pop */
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}

/* --- 1. OVERRIDE NERFIES DEFAULT VIDEO WRAPPER --- */
/* The default 'publication-video' forces 16:9. We must reset this 
so the container grows/shrinks with your video's actual size. */
.task-content .publication-video {
height: auto !important;
padding-bottom: 0 !important; /* Removes the fixed aspect ratio */
overflow: visible !important;
}

/* --- 2. FLUID VIDEO RESIZING --- */
/* Ensures the video fills the width but calculates its own height */
.task-content video {
  width: 100%;
  height: auto;
  display: block; /* Removes bottom whitespace */
  object-fit: contain;
  border-radius: 10px; /* Optional: adds rounded corners to video */
}

/* --- 3. BLUE TABS (Reference Style) --- */
/* Makes the active tab blue instead of the default dark grey */
.tabs.is-toggle li.is-active a {
  background-color: #3273dc !important; /* Bulma Blue */
  border-color: #3273dc !important;
  color: #ffffff !important;
}

.tabs.is-toggle li.is-active a:hover {
  background-color: #276cda !important;
}

/* --- REMOVE ARC/ROUNDED CORNERS --- */

/* 1. Remove curves from the container */
.task-content .publication-video {
  border-radius: 0 !important;
  mask-image: none !important;         /* Removes any shape masking */
  -webkit-mask-image: none !important;
  box-shadow: none !important;         /* Removes shadow which sometimes looks like a crop */
}

/* 2. Remove curves from the actual video element */
.task-content video {
  border-radius: 0 !important;
  outline: none !important;
}

body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

.author-block {
  display: inline-block;
}

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}

.interpolation-video-column {
}

.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}

/* --- TRICK 1: DREAM FLOW BACKGROUND --- */
body {
  /* A large gradient that shifts slowly */
  background: linear-gradient(-45deg, #ffffff, #f0f8ff, #e6e6fa, #fffaf0);
  background-size: 400% 400%;
  animation: dreamFlow 15s ease infinite;
}

@keyframes dreamFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Ensure text is readable on the slight color */
.title, .subtitle, .content, .navbar-item {
  mix-blend-mode: multiply; /* Helps text blend nicely */
}

/* --- TRICK 3: HOVER GLOW & ELEVATION --- */
.publication-video {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05); /* Very subtle border */
}

.publication-video:hover {
  transform: translateY(-5px); /* Lift up slightly */
  /* A soft blue/purple glow matching your theme */
  box-shadow: 0 10px 30px -10px rgba(86, 204, 242, 0.4); 
}

/* Make the Active Tab button pulse slightly */
.tabs.is-toggle li.is-active a {
  box-shadow: 0 0 15px rgba(50, 115, 220, 0.5);
  transition: all 0.3s ease;
}

/* --- TRICK 4: CUSTOM ANCHOR SVG BULLETS --- */
.content ul {
  list-style: none; /* Remove default dots */
  padding-left: 1.5em;
}

.content ul li {
  position: relative;
  margin-bottom: 0.5em;
}

.content ul li::before {
  content: ''; /* Empty content because we are using a background image */
  position: absolute;
  left: -1.6em; /* Adjust spacing to left */
  top: 0.2em;   /* Adjust vertical alignment */
  
  /* Size of the icon */
  width: 1.2em;
  height: 1.2em;
  
  /* The Image */
  background-image: url('../images/anchordream.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- TRICK 5: BLEND WHITE VIDEO BACKGROUND --- */
#teaser, #method {
  /* Makes white pixels transparent, letting the page background show through */
  mix-blend-mode: multiply;
  
  /* Optional: Boost contrast slightly so the blacks look deep */
  filter: contrast(1.05); 
  
  /* Ensure it has block layout */
  display: block;
}

/* --- TRICK 6: BLEND PLOTS & TABLES --- */
/* Target images inside the columns of the experimental results section */
.section .column img {
  /* 1. Make white backgrounds transparent */
  mix-blend-mode: multiply;
  
  /* 2. Slightly boost contrast so text remains sharp against the colored background */
  filter: contrast(1.05);
  
  /* 3. Ensure they don't look flat */
  transition: transform 0.3s ease;
}

/* Optional: Subtle lift on hover for tables/plots */
.section .column img:hover {
  transform: scale(1.02);
}

/* --- TRICK 7: BLEND GENERATED VARIATIONS VIDEOS --- */
.task-content video {
  /* Makes the white background of the video transparent */
  mix-blend-mode: multiply;
  
  /* Slightly boosts contrast to ensure the robot/objects don't look washed out */
  filter: contrast(1.05);
}

/* --- REMOVE VIDEO BORDERS --- */
.task-content .publication-video,
.task-content video {
  border: none !important;       /* Removes the 1px solid line */
  box-shadow: none !important;   /* Removes any glow or shadow */
  outline: none !important;      /* Removes focus outlines */
  background: transparent !important; /* Ensures container is clear */
}