/* =============================================================================
   ESCROW PAGE STYLES
   Closevana escrow page - brand-aligned design
   ============================================================================= */

/* =============================================================================
   HERO SECTION
   ============================================================================= */

/* Hero section styling */
.escrow-hero {
  position: relative;
  min-height: 600px;
  background: linear-gradient(180deg, #1e40af 0%, #2563eb 15%, #3b82f6 30%, #60a5fa 45%, #93c5fd 60%, #bfdbfe 75%, #dbeafe 85%, #f0f9ff 93%, #ffffff 100%);
}

/* Seal container fade animation - starts bold, fades to subtle */
.escrow-seal-container {
  opacity: 0.4;
  animation: sealFade 2.5s ease-out 0.3s forwards;
}

@keyframes sealFade {
  0% { opacity: 0.4; }
  60% { opacity: 0.35; }
  100% { opacity: 0.06; }
}

/* Seal draw animations */
.escrow-seal .seal-outer {
  animation: drawSeal 1.2s ease-out 0.3s forwards;
}

.escrow-seal .seal-inner {
  animation: drawSealInner 1s ease-out 0.8s forwards;
}

.escrow-seal .seal-check {
  animation: drawCheck 0.6s ease-out 1.4s forwards;
}

@keyframes drawSeal {
  to { stroke-dashoffset: 0; }
}

@keyframes drawSealInner {
  to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* Reduced motion support for hero */
@media (prefers-reduced-motion: reduce) {
  .escrow-seal-container {
    animation: none;
    opacity: 0.06;
  }
  .escrow-seal .seal-outer,
  .escrow-seal .seal-inner,
  .escrow-seal .seal-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}


/* =============================================================================
   UNIFIED DATA STACK - 3D Isometric Visualization
   High-performance 60fps animations with viewport-triggered assembly
   ============================================================================= */

/* CSS Custom Properties for vertical tower stack */
.unified-stack-container {
  --block-width: 320px;       /* Wide rectangular blocks */
  --block-depth: 50px;        /* Depth of block (visible on tilt) */
  --block-height: 70px;       /* Height/thickness of each layer */
  --block-gap: 14px;          /* Gap between layers */
  --stack-tilt: 12deg;        /* Slight tilt to show top face */
  --block-radius: 24px;       /* Rounded pill corners */

  /* Colors - all blue */
  --block-top: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  --block-front: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  --block-side: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
}

/* Layout: Stack + Legend side by side */
.stack-layout-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Stack visual container */
.stack-visual-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 420px;
  gap: 1rem;
}

/* Stack label above visual */
.stack-label-wrapper {
  text-align: center;
  margin-bottom: 1rem;
}

.stack-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
}

.stack-label-sub {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.5rem;
  font-style: italic;
}

.unified-stack-container {
  position: relative;
  width: 360px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No perspective - keeps all blocks same size */
}

/* 3D Stack wrapper */
.stack-perspective {
  transform-style: preserve-3d;
}

.stack-layers {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--stack-tilt));
  width: var(--block-width);
  height: calc((var(--block-height) + var(--block-gap)) * 4);
}

/* Individual Layer - positioned from bottom up */
.stack-layer {
  position: absolute;
  left: 0;
  width: var(--block-width);
  height: var(--block-height);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: pointer;
  pointer-events: none; /* Disable on wrapper */
}

/* Re-enable pointer events on the actual block */
.stack-layer .layer-block {
  pointer-events: auto;
}

/* Layer vertical positions - bottom layer is layer-1, all same z-index for hover */
.stack-layer.layer-1 { bottom: 0; }
.stack-layer.layer-2 { bottom: calc(var(--block-height) + var(--block-gap)); }
.stack-layer.layer-3 { bottom: calc((var(--block-height) + var(--block-gap)) * 2); }
.stack-layer.layer-4 { bottom: calc((var(--block-height) + var(--block-gap)) * 3); }

/* 3D Block - the actual cube layer */
.layer-block {
  position: relative;
  width: var(--block-width);
  height: var(--block-height);
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
}

/* Top face - visible due to tilt */
.block-top {
  position: absolute;
  width: var(--block-width);
  height: var(--block-depth);
  background: var(--block-top);
  transform: rotateX(90deg) translateZ(calc(var(--block-height) / 2));
  border-radius: var(--block-radius);
  transition: background 0.25s ease;
  pointer-events: none; /* Don't block hover on layers above */
}

/* Front face - displays label */
.block-front {
  position: absolute;
  width: var(--block-width);
  height: var(--block-height);
  background: var(--block-front);
  transform: translateZ(calc(var(--block-depth) / 2));
  border-radius: var(--block-radius);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

/* Right side face - hidden since we want flat pill look */
.block-right {
  display: none;
}

/* Hide the shadow div - we'll use a unified shadow */
.block-shadow {
  display: none;
}

/* Icon on front face */
.block-icon {
  color: white;
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Label on front face */
.block-label {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* =============================================================================
   ANIMATION STATES - Fall from above and lock
   ============================================================================= */

/* Before assembly - layers start above, invisible */
.unified-stack-container .stack-layer {
  opacity: 0;
  transform: translateY(-60px);
}

/* Fall and lock keyframe */
@keyframes fallIn {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  60% {
    opacity: 1;
    transform: translateY(4px);
  }
  80% {
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Assembly animation - each layer falls and locks */
.stack-assembled .stack-layer {
  animation: fallIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Sequential timing - bottom layer first, then stack up */
.stack-assembled .stack-layer.layer-1 { animation-delay: 0s; }
.stack-assembled .stack-layer.layer-2 { animation-delay: 0.35s; }
.stack-assembled .stack-layer.layer-3 { animation-delay: 0.7s; }
.stack-assembled .stack-layer.layer-4 { animation-delay: 1.05s; }

/* Shared shadow beneath entire stack */
.stack-layers::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--block-width) * 0.8);
  height: calc(var(--block-depth) * 1.2);
  background: radial-gradient(ellipse, rgba(30, 64, 175, 0.25) 0%, transparent 70%);
  filter: blur(25px);
  border-radius: 50%;
}

/* =============================================================================
   HOVER STATES
   ============================================================================= */

/* Direct hover on layer - slight grow */
.stack-layer:hover .layer-block {
  transform: scale(1.04) translateY(-3px);
}

/* Interactive highlighting - when hovering legend */
.stack-layer.layer-highlighted .layer-block {
  transform: scale(1.06) translateY(-4px);
}

.stack-layer.layer-highlighted .block-top {
  background: linear-gradient(135deg, #FF4F00 0%, #FF7A2E 100%);
}

.stack-layer.layer-highlighted .block-front {
  background: linear-gradient(180deg, #D94300 0%, #c2410c 100%);
}

.stack-layer.layer-highlighted .block-right {
  background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%);
}

.stack-layer.layer-dimmed {
  opacity: 0.5;
  transform: scale(0.98);
}

/* =============================================================================
   INTERACTIVE LEGEND
   ============================================================================= */

.stack-legend {
  padding: 1.5rem;
}

.legend-header {
  margin-bottom: 1.5rem;
}

.legend-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 9999px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.legend-item:hover {
  background: #f8fafc;
  border-color: #3b82f6;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12);
  transform: translateX(4px);
}

/* When layer is hovered, highlight corresponding legend with orange */
.legend-item.legend-highlighted {
  background: #fff7ed;
  border-color: #FF4F00;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.2);
  transform: translateX(6px);
}

.legend-item.legend-highlighted .legend-dot {
  background: linear-gradient(135deg, #FF4F00 0%, #D94300 100%);
}

.legend-item.legend-highlighted .legend-title {
  color: #c2410c;
}

.legend-item.legend-dimmed {
  opacity: 0.3;
}

.legend-marker {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.legend-dot {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 8px;
  transform: rotate(45deg);
}

.legend-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  z-index: 1;
}

.legend-content {
  flex: 1;
  min-width: 0;
}

.legend-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.legend-desc {
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}

/* =============================================================================
   RESPONSIVE SCALING
   ============================================================================= */

/* Tablet */
@media (max-width: 1023px) {
  .stack-layout-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stack-visual-wrapper {
    order: 1;
    min-height: 360px;
  }

  .stack-legend {
    order: 2;
    max-width: 480px;
    margin: 0 auto;
  }

  .unified-stack-container {
    --block-width: 280px;
    --block-depth: 40px;
    --block-height: 60px;
    --block-gap: 12px;
    --block-radius: 20px;
    width: 320px;
    height: 360px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .unified-stack-container {
    --block-width: 260px;
    --block-depth: 35px;
    --block-height: 55px;
    --block-gap: 10px;
    --block-radius: 18px;
    width: 300px;
    height: 320px;
  }

  .stack-visual-wrapper {
    min-height: 300px;
  }

  .block-icon {
    font-size: 1.25rem;
  }

  .block-label {
    font-size: 0.6rem;
  }

  .legend-item {
    padding: 0.875rem;
  }

  .legend-title {
    font-size: 0.875rem;
  }

  .legend-desc {
    font-size: 0.75rem;
  }
}

/* Very small mobile (390px) */
@media (max-width: 420px) {
  .unified-stack-container {
    --block-width: 220px;
    --block-depth: 30px;
    --block-height: 48px;
    --block-gap: 8px;
    --block-radius: 16px;
    width: 260px;
    height: 280px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .stack-layer,
  .stack-assembled .stack-layer {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  .stack-assembled .stack-layers::after {
    animation: none;
    opacity: 1;
  }

  .legend-item {
    transition: none;
  }
}


/* =============================================================================
   ESCROW SERVICES - Circle/Node Visualization
   ============================================================================= */

.escrow-nodes-container {
  max-width: 800px;
  margin: 0 auto;
}

.escrow-nodes {
  position: relative;
  padding: 2rem 0 4rem;
}

/* SVG Connection Lines */
.nodes-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.node-line {
  stroke: #cbd5e1;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Node Grid */
.nodes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 3rem;
  position: relative;
  z-index: 1;
}

/* Individual Node */
.escrow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.escrow-node:hover {
  z-index: 10;
}

.node-circle {
  width: 72px;
  height: 72px;
  background: white;
  border: 3px solid #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  position: relative;
}

.node-circle i {
  font-size: 1.5rem;
  color: #1e40af;
  transition: all 0.3s ease;
}

.node-title {
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: #334155;
  text-align: center;
  transition: all 0.3s ease;
}

/* Hover state - circle expands to show content */
.escrow-node:hover .node-circle {
  width: 160px;
  height: 160px;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-color: #1e40af;
  box-shadow: 0 12px 40px rgba(30, 64, 175, 0.4);
}

.escrow-node:hover .node-circle i {
  opacity: 0;
  visibility: hidden;
}

.escrow-node:hover .node-title {
  color: #1e40af;
  font-weight: 700;
}

/* Expanded circle content - shown inside the circle on hover */
.node-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
  z-index: 10;
  pointer-events: none;
  width: 140px;
  height: 140px;
  padding: 16px;
  box-sizing: border-box;
}

.escrow-node:hover .node-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hide the duplicate title - we already show node-title below */
.node-tooltip strong {
  display: none !important;
}

.node-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.node-tooltip li {
  font-size: 0.7rem;
  color: white;
  padding: 0.2rem 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  line-height: 1.3;
}

.node-tooltip li::before {
  display: none;
}

/* Mobile: 2 columns, hide SVG lines */
@media (max-width: 768px) {
  .nodes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  .nodes-connections {
    display: none;
  }

  .node-circle {
    width: 64px;
    height: 64px;
  }

  .node-circle i {
    font-size: 1.25rem;
  }

  .escrow-node:hover .node-circle {
    width: 140px;
    height: 140px;
  }

  .node-tooltip {
    width: 120px;
  }

  .node-tooltip li {
    font-size: 0.6875rem;
  }
}

/* Small mobile: still 2 columns */
@media (max-width: 480px) {
  .nodes-grid {
    gap: 3rem 1rem;
  }

  .node-circle {
    width: 56px;
    height: 56px;
  }

  .node-circle i {
    font-size: 1.125rem;
  }

  .escrow-node:hover .node-circle {
    width: 120px;
    height: 120px;
  }

  .node-tooltip {
    width: 100px;
  }

  .node-tooltip li {
    font-size: 0.625rem;
  }

  .node-title {
    font-size: 0.75rem;
  }
}

/* =============================================================================
   NOTARY SERVICES SECTION
   ============================================================================= */

.notary-section {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Notary icon hover */
.notary-icon-circle:hover {
  background: #1e40af;
  border-color: #1e40af;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.3);
}

.notary-icon-circle:hover i {
  color: white !important;
}

/* Responsive: 2x2 grid on small screens */
@media (max-width: 480px) {
  .notary-section .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}