/* name-reveal.css — styles for the big "ARNEL" photo-trail wordmark.
 * Kept in its own file so a future Claude-design update (which rewrites
 * css/site.css) can't wipe it. Loaded from index.html after site.css. */

.name-reveal-section { padding-top: var(--space-10, 64px); }

/* Full-bleed wrapper: the wordmark runs edge-to-edge instead of being
   boxed by .container's max-width, so it reads as big as possible. */
.name-reveal-bleed {
  width: 100%;
  padding: 0 clamp(12px, 2.5vw, 48px);
  box-sizing: border-box;
}

.name-reveal {
  position: relative;
  margin-top: 18px;
  cursor: default; /* keep the normal arrow — no custom cursor on hover */
  isolation: isolate;
}

.name-reveal-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y; /* let the page still scroll on touch */
}

/* Both copies of the word share these metrics so the mask lines up exactly. */
.nr-word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 320px; /* taller letterforms; textLength controls the width */
  letter-spacing: 0;
  text-transform: uppercase;
}

.nr-fill { fill: var(--color-accent); }

/* --- Dropped photos -------------------------------------------------
 * Each drop starts small + invisible, pops to full size, then fades out
 * on its way back down. Rotation comes from --rot set per element. */
.nr-drop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--rot, 0deg)) scale(.45);
  transition: transform .42s cubic-bezier(.2, .9, .25, 1.1), opacity .3s ease;
  pointer-events: none;
}

.nr-drop.is-in {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) scale(1);
}

.nr-drop.is-out {
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(.92);
  transition: transform .5s ease, opacity .5s ease;
}

.name-reveal-hint {
  position: absolute;
  right: 4px;
  bottom: -6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  transition: opacity .4s ease;
  pointer-events: none;
}

/* Hint retires once the visitor has discovered the effect. */
.name-reveal.is-touched .name-reveal-hint { opacity: 0; }

@media (max-width: 720px) {
  .name-reveal-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nr-drop { transition: opacity .2s ease; transform: rotate(var(--rot, 0deg)) scale(1); }
  .nr-drop.is-in { transform: rotate(var(--rot, 0deg)) scale(1); }
}