/* Pen Intro layer. Additive; nothing in site.css or site-motion.css changes. */

/* During the open, the film carries the frame at near-full presence. */
.cc-hero-video.cc-intro.cc-loaded { opacity: .95; }

/* While the intro holds the page (pre-touch), the hero copy waits in the dark.
   site-motion.js reveals it the moment the nib touches the parchment. */
.cc-intro-hold section.hero h1 ~ p,
.cc-intro-hold section.hero .btn-row a.btn,
.cc-intro-hold section.hero aside.framed { opacity: 0; }

/* Word masks are hidden by their own default state until .cc-in arrives. */

@media (prefers-reduced-motion: reduce) {
  .cc-hero-video.cc-intro.cc-loaded { opacity: .7; }
  .cc-intro-hold section.hero h1 ~ p,
  .cc-intro-hold section.hero .btn-row a.btn,
  .cc-intro-hold section.hero aside.framed { opacity: 1; }
}

/* ================================================================
   The pen writes the site's brass underlines.
   One gesture, used sparingly: the hero "Built" bar at the touch
   moment, and each section statement's italic word, once, on first
   view. Nothing else moves.
   ================================================================ */
.cc-penline { position: relative; display: inline-block; }
.pen-bar {
  position: absolute; left: 0; right: 0; bottom: .04em; height: .07em;
  background: var(--brass); border-radius: 1px;
  transform: scaleX(0); transform-origin: left center;
}
.pen-write .pen-bar { transform: scaleX(1); transition: transform 1s var(--cc-ease, cubic-bezier(.2,.7,.1,1)) .15s; }
.pen-nib {
  position: absolute; left: -2px; bottom: -.14em;
  width: 15px; height: 15px;
  opacity: 0; pointer-events: none;
  color: var(--brass-2, #EBCF98);
  filter: drop-shadow(0 0 6px rgba(235, 207, 152, .55));
  will-change: transform, opacity;
}
.pen-nib svg { display: block; width: 100%; height: 100%; transform: rotate(-38deg); }
.pen-nib::after {
  content: ""; position: absolute; left: -3px; bottom: -1px;
  width: 10px; height: 6px;
  background: radial-gradient(closest-side, rgba(235, 207, 152, .5), transparent);
}
.pen-write .pen-nib {
  animation: ccPenGlide 1s cubic-bezier(.2,.7,.1,1) .15s both;
}
/* hero: ride the production cc-bar timing exactly (1.1s, +.8s delay) */
.cc-word-wrap.cc-in .pen-nib {
  animation: ccPenGlide 1.1s cubic-bezier(.2,.7,.1,1) .8s both;
}
@keyframes ccPenGlide {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(var(--penw, 120px)); opacity: 0; }
}
@media (max-width: 760px) { .pen-nib { width: 12px; height: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .pen-nib { display: none; }
  .pen-bar { transform: scaleX(1); transition: none; }
}