/* View Transitions API styles */

:root {
  --transition-speed-multiplier: 1; /* Temporary - remove later */
}

/* Opt-in to view transitions */
@view-transition {
  navigation: auto;
}

/* Name the dimensional grid for transitioning */
.dimensional-grid-wrap {
  view-transition-name: dimensional-grid;
}

/* Name the header and hero elements for transition */
#header {
  view-transition-name: header;
}

#hero {
  view-transition-name: hero;
}

.backward::view-transition-new(dimensional-grid) {
  display: none;
}

.backward::view-transition-group(dimensional-grid) {
  z-index: 99999999;
}

/* Remove border from lander's dimensional-grid-wrap only (to prevent double border in backward transitions) */
html::view-transition #lander-canvas-link .dimensional-grid-wrap {
  border: none !important;
}

/* Border radius animation keyframes */
@keyframes adjust-border-radius {
  from {
    border-color: #000000;
  }
  to {
    border-color: transparent;
  }
}

/* Border color animation keyframes */
 

/* Styles for the transition group - controls dimensional morphing */
::view-transition-group(dimensional-grid) {
  animation-duration: calc(0.6s * var(--transition-speed-multiplier)) !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: center center !important;
  contain: layout style !important;
  overflow: clip;
  box-sizing: border-box;
  border: 4px solid #000000;
  border-radius: 32px;
  background-color: #DADFED;
}


/* Forward transition: animate border-radius and border-color */
.forward::view-transition-group(dimensional-grid) {
  animation-name: -ua-view-transition-group-anim-dimensional-grid, adjust-border-radius, adjust-border-color;
}

/* Backward transition: just the default morph, no border animations */
.backward::view-transition-group(dimensional-grid) {
  animation-name: -ua-view-transition-group-anim-dimensional-grid;
  animation-direction: normal;
}

 

 

/* Common styles for both old and new states */
::view-transition-old(dimensional-grid),
::view-transition-new(dimensional-grid) {
  mix-blend-mode: normal;
  will-change: opacity, transform;
  transform-origin: center center;
  /* Remove border from snapshots - the group handles the border animation */
  border: none !important;
  /* Also remove border-radius to prevent double styling */
  border-radius: 0 !important;
  /* Force both snapshots to fill their image-pair parent identically */
  width: 100% !important;
  height: 100% !important;
  /* Ensure consistent object fitting */
  object-fit: cover !important;
  object-position: center !important;
}

 
 

/* Default fallback for when no direction class is set */
::view-transition-old(dimensional-grid) {
  animation-name: fade-out-smooth !important;
  animation-duration: calc(0.6s * var(--transition-speed-multiplier)) !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

::view-transition-new(dimensional-grid) {
  animation-name: fade-in-smooth !important;
  animation-duration: calc(0.6s * var(--transition-speed-multiplier)) !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Ensure the new view fits within viewport bounds */
  position: absolute !important;
  inset: 0 !important;
  
  object-position: center !important;
}

/* Keep header and hero visible during forward transition */
::view-transition-old(header),
::view-transition-old(hero) {
  animation-name: fade-out-slow !important;
  animation-duration: calc(0.8s * var(--transition-speed-multiplier)) !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation-fill-mode: forwards !important;
  z-index: 100 !important;
}

/* Dimensional morphing animations */

/* Forward: Portrait to Landscape */

 

/* Smoother fade-out animation for lander content */
@keyframes fade-out-slow {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* UI element fade-in animation */
@keyframes ui-fade-in {
  from { 
    opacity: 0; 
    transform: translateY(8px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

/* Make root transition simpler to avoid browser crashes */
::view-transition-group(root) {
  animation: none !important;
}

/* Ensure UI controls stay on top during transitions */
::view-transition-group(canvas-controls) {
  z-index: 200 !important;
}

/* Undo/redo controls positioning */
html::view-transition ::view-transition-group(undo-redo-controls) {
  z-index: 400 !important;
  position: relative !important;
}

/* Layers toolbar positioning */
html::view-transition ::view-transition-group(layers-toolbar) {
  z-index: 300 !important;
  position: relative !important;
}

/* Add fade-in animation to UI elements */
::view-transition-new(canvas-controls),
::view-transition-new(undo-redo-controls),
::view-transition-new(layers-toolbar) {
  animation-name: ui-fade-in !important;
  animation-duration: calc(0.6s * var(--transition-speed-multiplier)) !important;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation-fill-mode: forwards !important;
}

/* Subtle background during transition */
::view-transition {
  background-color: rgba(0, 0, 0, 0.02);
}