/**
 * View Toggle Styles
 * Smooth transitions between full and bio views
 */

/* Content view transitions - FAST WITH GRAYSCALE */
.content-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px) grayscale(0%) brightness(100%);
  transition: opacity 0.4s ease-out,
    transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), filter 0.4s ease;
  will-change: opacity, transform, filter;
  transform-origin: center top;
}

.content-view.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px) grayscale(0%) brightness(100%);
  pointer-events: all;
}

.content-view.hidden {
  opacity: 0;
  transform: translateY(-120px) scale(0.85);
  filter: blur(8px) grayscale(100%) brightness(130%);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

/* Enable GPU acceleration for smooth animations */
.background,
.introembed,
.video-container,
.introembed iframe,
.video-container iframe {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}

/* Prevent repainting issues */
.introembed,
.video-container {
  contain: layout style paint;
}

/* Video container for switcher */
.video-container {
  transition: opacity 0.5s ease;
}

.video-container.fading {
  opacity: 0;
}

/* Background video - Only apply effects during toggle, let JS handle scroll */
body.transitioning .background {
  transition: opacity 0.08s ease-out !important,
    transform 0.12s ease-out !important, filter 0.1s ease !important;
  opacity: 0 !important;
  transform: translateY(-200px) scale(1) !important;
  filter: grayscale(100%) brightness(150%) !important;
}

/* Hide background video in bio view */
body.bodylight .background {
  display: none !important;
}

/* Navigation - only during toggle */
body.transitioning .content-view .navigation,
.content-view.transitioning .navigation {
  transition: opacity 0.25s ease-out,
    transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), filter 0.3s ease !important;
}

body.transitioning .content-view.hidden .navigation {
  opacity: 0 !important;
  transform: translateY(-100px) !important;
  filter: grayscale(100%) !important;
}

/* Intro section layout for toggle button - SLOWEST TRANSITION */
.introsection.intro {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px;
  padding: 30px 8vw 60px !important;
  margin-top: 25vh !important;
  position: relative;
  z-index: 100;
  transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s !important;
}

/* More horizontal margin on large screens */
@media screen and (min-width: 1440px) {
  .introsection.intro {
    padding-left: 12vw !important;
    padding-right: 12vw !important;
  }
}

@media screen and (min-width: 1920px) {
  .introsection.intro {
    padding-left: 16vw !important;
    padding-right: 16vw !important;
  }
}

@media screen and (min-width: 2560px) {
  .introsection.intro {
    padding-left: 20vw !important;
    padding-right: 20vw !important;
  }
}

/* Natural top spacing in bio view */
body.bodylight .introsection.intro {
  margin-top: 0 !important;
  padding-top: 30px !important;
}

/* More top margin in creative view to show more video */
body.bodyindex .introsection.intro {
  margin-top: 35vh !important;
}

/* Hide bio paragraph 2 (vision statement - not ready) - strong selectors */
.intro-wrap .heading-jumbo:nth-of-type(2),
body .intro-wrap .heading-jumbo:nth-of-type(2),
.container.intro-text .intro-wrap .heading-jumbo:nth-of-type(2),
.introsection.intro .intro-wrap .heading-jumbo:nth-of-type(2) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Photo column styles removed - photos deleted from HTML */

.container.intro-text {
  flex: 1;
  min-width: 0;
}

.intro-button-col {
  flex-shrink: 0;
  width: 80px;
  display: none !important; /* Hidden - will be re-enabled later */
  align-items: flex-start;
}

/* Toggle Button - Layered Glass Effect */
.view-toggle-btn {
  display: none !important; /* Hidden - will be re-enabled later */
  width: 100%;
  height: 320px;
  max-height: 100%;

  /* Frosted glass with pink tint - layered effect */
  background: linear-gradient(
    180deg,
    rgba(255, 20, 147, 0.4) 0%,
    rgba(230, 0, 122, 0.5) 50%,
    rgba(255, 20, 147, 0.6) 100%
  );
  backdrop-filter: blur(20px) saturate(200%) brightness(120%);
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(120%);

  /* Glass borders - brighter than main card */
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;

  /* Multi-layer shadows for depth */
  box-shadow: 0 4px 20px rgba(255, 20, 147, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(255, 20, 147, 0.3);

  color: white;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  position: relative;
  overflow: hidden;
}

.view-toggle-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-toggle-btn:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 20, 147, 0.6) 0%,
    rgba(230, 0, 122, 0.7) 50%,
    rgba(255, 20, 147, 0.8) 100%
  );
  box-shadow: 0 8px 30px rgba(255, 20, 147, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 20, 147, 0.5);
  transform: scale(1.03) rotate(-1deg);
}

.view-toggle-btn:hover::before {
  opacity: 1;
}

.toggle-icon {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  display: block;
  line-height: 1;
  z-index: 1;
}

body.bodylight .view-toggle-btn .toggle-icon {
  transform: rotate(180deg) scale(1.2);
}

/* Body background - FIRST thing to change, no delay */
body.bodylight {
  background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%) !important;
  transition: background 0.3s ease 0s !important;
}

body.bodyindex {
  background: #000000 !important;
  transition: background 0.3s ease 0s !important;
}

/* Add grayscale transition to body */
body {
  transition: filter 0.5s ease;
}

body.transitioning {
  filter: grayscale(50%);
}

body.bodylight .introsection.intro {
  /* Glassmorphism effect - frosted glass */
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(30px) saturate(180%) brightness(110%);
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(110%);

  /* Glass borders and shadows */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 24px;

  transition: background 0.8s ease 0.2s, backdrop-filter 0.8s ease 0.2s,
    box-shadow 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s,
    border-radius 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s,
    transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s !important;
  transform: scale(1.02);

  /* Prevent background bleed */
  overflow: hidden;
}

body.bodyindex .introsection.intro {
  /* Glassmorphism with gradient - darker middle, quick transition to 90% */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.01) 0%,
    rgba(0, 0, 0, 0.3) 25%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.85) 75%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  backdrop-filter: blur(30px) saturate(150%) brightness(90%);
  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(90%);

  /* Dark glass borders and shadows */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.2);
  border-radius: 24px;

  transition: background 0.8s ease 0s, backdrop-filter 0.8s ease 0s,
    box-shadow 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s,
    border-radius 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s,
    transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s !important;
  transform: scale(1);

  /* Prevent background bleed */
  overflow: hidden;
}

body.bodylight .name-text {
  color: #ff1493 !important;
}

body.bodylight .paragraph-light,
body.bodylight .paragraph-light .typer,
body.bodylight .paragraph-light span,
body.bodylight .heading-jumbo {
  color: #000000 !important;
  transition: color 0.8s ease 0.3s !important;
}

body.bodyindex .paragraph-light,
body.bodyindex .paragraph-light .typer,
body.bodyindex .paragraph-light span,
body.bodyindex .heading-jumbo {
  transition: color 0.8s ease 0s !important;
}

body.bodylight .name-text {
  transition: color 0.8s ease 0.3s !important;
}

body.bodylight .doclink {
  color: #ff1493 !important;
  transition: color 0.6s ease;
}

body.bodylight .introlink {
  color: #ff1493 !important;
  transition: color 0.6s ease;
}

/* Keep icons same color in both views */
.connecticon {
  transition: filter 0.6s ease;
}

/* Remove visual indicator - it's causing white space */

/* Hide navigation in bio view */
body.bodylight .navigation {
  display: none !important;
}

/* Hide background video in bio view */
body.bodylight .background {
  display: none !important;
}

/* Hide all grid layouts in bio view */
body.bodylight .w-layout-grid,
body.bodylight .maingrid,
body.bodylight .othersgrid,
body.bodylight .sidegrid,
body.bodylight .fabstudies {
  display: none !important;
}

/* Hide research headings in bio view */
body.bodylight .research-heading {
  display: none !important;
}

/* Hide interests sections in bio view */
body.bodylight .interests,
body.bodylight .interestsnote {
  display: none !important;
}

/* Hide block quote in bio view */
body.bodylight .block-quote {
  display: none !important;
}

/* Responsive adjustments */
/* Note: Photos and toggle button removed */