/* Contacts page: 3D crows over the burnt tree (see tools/baron-crows/CLAUDE_CODE_TASK.md).
   Values come from the approved scene's baron-crows.css; everything is scoped under
   .crows-hero so nothing here can touch other pages or the site's own .card / .hero rules.
   Layer order inside the section: tree z1 -> content z5 -> WebGL canvas z8.
   Inside a card: base text z2, cells z3, blob z4, splat z5, dark text z6. */

.crows-hero{
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 77px);   /* 77px = fixed header */
  padding: 56px 0 72px;
}

.crows-tree{
  position: absolute;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  background: linear-gradient(175deg, #31423f 0%, #22302d 34%, #16201e 66%, #0b1211 100%);
  transform-origin: 50% 100%;
  will-change: transform;
}

.crows-hero #crows3d{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  display: block;
}

.crows-content{
  position: relative;
  z-index: 5;
}
.crows-content .lead{ max-width: 640px; }
.crows-cards{ margin-top: 32px; }

/* --- the three contact cards --- */
/* The site's global .card is translucent + backdrop-blurred. Here the tree sways and the WebGL
   canvas animates directly behind/over these cards, so a live blur would be resampled every
   frame — replaced by a flat, more opaque panel (same trade already made on the homepage).
   Padding moves from the card onto .layer so the dark copy (.layer.top) can sit exactly on top
   of the light text with identical metrics. */
.crows-cards .card{
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(14,17,19,.86);
  color: var(--text);
}
.crows-cards .card.hit{ border-color: rgba(10,164,159,.55); }

.crows-cards .layer{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
}
.crows-cards .layer .t{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--text);
}
.crows-cards .layer .v{ color: var(--muted); }
.crows-cards .layer.top{
  position: absolute;
  inset: 0;
  z-index: 6;
  color: #02100f;
  /* hidden until the scene reveals parts of it (inline masks from baron-crows.bundle.js) — also
     when the scene never starts (no WebGL / script blocked), so the card text stays light */
  -webkit-mask: linear-gradient(#000,#000) 0 0 / 0 0 no-repeat;
  mask: linear-gradient(#000,#000) 0 0 / 0 0 no-repeat;
}
.crows-cards .layer.top .t{ color: #02100f; }
.crows-cards .layer.top .v{ color: rgba(2,16,15,.9); }

/* fill cell: a shrunken copy of the card (same proportion), no gaps */
.crows-cards .cell{
  position: absolute;
  z-index: 3;
  background: #0aa49f;
  opacity: 0;
  transform: scale(.72);
  will-change: transform, opacity;
}
.crows-cards .cell.on{
  opacity: 1;
  transform: scale(1);
  transition: opacity .07s linear, transform .13s cubic-bezier(.2,1.5,.4,1);
}
.crows-cards .cell.flick{ opacity: .3; transform: scale(.94); }

/* the drop that turns into the first cell */
.crows-cards .blob{
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  background: #0aa49f;
  opacity: 0;
  pointer-events: none;
}
/* liquid splat (SVG built by the scene) */
.crows-cards .splat{
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce){
  .crows-cards .cell.on{ transition: none; }
}

/* 2026-10-19: the three contact cards are liquid glass (class .glass in style.css). This rule only
   has to out-rank the flat panel above; the fill animation (cells z3, blob z4, splat z5, dark text
   z6) still paints over the glass. Measured: crows scene stays at 60fps desktop + phone. */
.crows-cards .card.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 42%, rgba(255,255,255,.10));
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.1);
  backdrop-filter: blur(16px) saturate(180%) brightness(1.1);
  border: 1px solid rgba(255,255,255,.30);
}
.crows-cards .card.glass .layer.base .v{ color: #d9d6d0; }

/* After the matrix fill (JS adds .filled when every cell is on): the cells fade out and the card
   itself becomes teal liquid glass — translucent teal over the blurred backdrop, white rim, top
   highlight and one light sweep. Teal alpha stays high enough for the dark text (contrast ≥ 4.5). */
.crows-cards .card.glass.filled{
  background: linear-gradient(135deg, rgba(14,206,200,.92), rgba(10,164,159,.84) 48%, rgba(8,150,146,.92));
  border-color: rgba(200,255,252,.62);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 0 32px rgba(255,255,255,.16),
    0 14px 36px rgba(0,0,0,.38),
    0 0 34px rgba(10,186,181,.30);
  transition: background .7s ease, box-shadow .7s ease, border-color .7s ease;
}
.crows-cards .card.glass.filled .cell,
.crows-cards .card.glass.filled .cell.on{ opacity: 0; transition: opacity .7s ease; }
.crows-cards .card.glass.filled::after{ animation: glassSweep 1.3s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes glassSweep{ from{ transform: translateX(0) skewX(-12deg); } to{ transform: translateX(420%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce){
  .crows-cards .card.glass.filled::after{ animation: none; }
}