/* Cinematic workshop ident using the original Pablo Lozano lockup. */
.brand-intro { display: none; }
.brand-intro-active .brand-intro {
  position: fixed; inset: 0; z-index: 10000; display: grid !important; place-items: center;
  overflow: hidden; padding: clamp(24px, 4vw, 58px); color: #f2f7f6; background: #071013;
  isolation: isolate; animation: brand-studio-out 4s cubic-bezier(.65, 0, .35, 1) both;
}
html.brand-intro-active { scrollbar-color: #071013 #071013; }
.brand-intro-atmosphere {
  position: absolute; z-index: -3; inset: -2.5%; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 9, 11, .74) 0%, rgba(3, 10, 12, .38) 43%, rgba(3, 10, 12, .53) 72%, rgba(3, 9, 11, .88) 100%),
    linear-gradient(90deg, rgba(2, 8, 10, .62), rgba(2, 8, 10, .08) 38%, rgba(2, 8, 10, .1) 62%, rgba(2, 8, 10, .62)),
    url('assets/taller-interior-overview.webp') center 45% / cover no-repeat;
  animation: brand-atmosphere 3.55s cubic-bezier(.18, .72, .18, 1) both;
}
.brand-intro-atmosphere::before, .brand-intro-atmosphere::after { content: ""; position: absolute; inset: 0; }
.brand-intro-atmosphere::before {
  background: linear-gradient(rgba(129, 202, 207, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 202, 207, .035) 1px, transparent 1px);
  background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 72%, transparent);
  opacity: 0; animation: brand-grid-arrive .9s ease 1.15s forwards;
}
.brand-intro-atmosphere::after {
  background: radial-gradient(ellipse at 50% 51%, rgba(2, 10, 12, .2) 0%, rgba(2, 9, 11, .42) 49%, rgba(2, 7, 9, .68) 100%), linear-gradient(105deg, transparent 36%, rgba(134, 219, 222, .06) 48%, transparent 59%);
  background-size: auto, 220% 100%; animation: brand-light-pass 3.15s ease .25s both;
}
.brand-intro-studio { position: relative; width: min(710px, 82vw); transform: translateY(-1.5vh); text-align: center; }
.brand-intro-kicker { margin: 0 0 21px; color: rgba(220, 234, 234, .75); font: 600 9px/1.4 var(--mono, "Consolas", monospace); letter-spacing: .3em; animation: brand-details-arrive .6s ease .7s both; }
.brand-intro-kicker span { color: #70cbd2; }
.brand-intro-lockup { position: relative; width: 100%; aspect-ratio: 3 / 1; clip-path: inset(0 50% 0 50%); filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28)); animation: brand-logo-reveal .92s cubic-bezier(.16, .78, .22, 1) .48s forwards; }
.brand-intro-lockup img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; opacity: 0; transform: scale(.945); animation: brand-mark-settle 1.15s cubic-bezier(.16, .78, .22, 1) .36s forwards; }
.brand-intro-rule { position: relative; width: min(270px, 46%); height: 1px; margin: 5px auto 0; overflow: visible; background: rgba(191, 221, 223, .18); transform: scaleX(0); animation: brand-rule-draw .72s cubic-bezier(.16, .78, .22, 1) 1.18s forwards; }
.brand-intro-rule span { position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #6bc6cc; box-shadow: 0 0 12px rgba(107, 198, 204, .45); transform: translateX(-50%); }
.brand-intro-caption { margin: 19px 0 0; color: #d2dddd; font: 400 clamp(13px, 1.2vw, 16px)/1.55 var(--body, "Segoe UI", sans-serif); letter-spacing: .055em; animation: brand-caption-arrive .66s ease 1.38s both; }
.brand-intro-signature { position: absolute; right: max(32px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); left: max(32px, env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(175, 212, 216, .16); color: rgba(187, 207, 209, .67); font: 8px/1.5 var(--mono, "Consolas", monospace); letter-spacing: .19em; animation: brand-details-arrive .62s ease .9s both; }
.brand-intro-signature > span:first-child { text-align: left; }
.brand-intro-signature > span:last-child { text-align: right; }
.brand-intro-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(218, 232, 233, .78); }
.brand-intro-status i { width: 5px; height: 5px; border-radius: 50%; background: #6bc6cc; animation: brand-status-pulse 1.7s ease-in-out infinite; }
/* This ident deliberately outranks older site-wide logo treatments loaded later. */
html.brand-intro-active .brand-intro .brand-intro-studio { width: min(710px, 82vw) !important; }
html.brand-intro-active .brand-intro .brand-intro-lockup.brand-intro-original {
  width: min(650px, 76vw) !important;
  aspect-ratio: 3 / 1 !important;
  clip-path: inset(0 50% 0 50%);
  animation: brand-logo-reveal .92s cubic-bezier(.16, .78, .22, 1) .48s forwards !important;
}
html.brand-intro-active .brand-intro .brand-intro-lockup.brand-intro-original img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  clip-path: none !important;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .28)) !important;
  animation: brand-mark-settle 1.15s cubic-bezier(.16, .78, .22, 1) .36s forwards !important;
}
html.brand-intro-active .brand-intro .brand-intro-lockup.brand-intro-original::after { display: none !important; }
html.brand-intro-active .brand-intro .brand-intro-studio::before { opacity: .18 !important; animation: brand-details-arrive .8s ease .65s both !important; }
@keyframes brand-logo-reveal { to { clip-path: inset(0); } }
@keyframes brand-mark-settle { from { opacity: 0; transform: scale(.945); } to { opacity: 1; transform: scale(1); } }
@keyframes brand-caption-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes brand-details-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes brand-grid-arrive { to { opacity: .52; } }
@keyframes brand-rule-draw { to { transform: scaleX(1); } }
@keyframes brand-status-pulse { 50% { opacity: .35; } }
@keyframes brand-light-pass { from { background-position: center, 100% 0; } to { background-position: center, -110% 0; } }
@keyframes brand-atmosphere { from { opacity: 0; transform: scale(1.055); filter: blur(7px) brightness(.62); } 38% { opacity: 1; filter: blur(2px) brightness(.78); } to { opacity: 1; transform: scale(1.012); filter: blur(.25px) brightness(.84); } }
@keyframes brand-studio-out { 0%, 86% { opacity: 1; visibility: visible; } 98% { opacity: 0; visibility: visible; pointer-events: none; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 760px) {
  .brand-intro-active .brand-intro { padding: 22px; }
  .brand-intro-atmosphere { background-position: center, center, 42% center; }
  .brand-intro-atmosphere::before { background-size: 46px 46px; }
  .brand-intro-studio { width: min(500px, 91vw); transform: translateY(-2vh); }
  .brand-intro-kicker { margin-bottom: 18px; font-size: 8px; letter-spacing: .22em; }
  .brand-intro-lockup { aspect-ratio: 2.72 / 1; }
  .brand-intro-rule { width: min(190px, 48%); margin-top: 7px; }
  .brand-intro-caption { margin-top: 18px; font-size: 13px; }
  .brand-intro-signature { right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); left: 22px; grid-template-columns: 1fr 1fr; padding-top: 12px; font-size: 7px; letter-spacing: .11em; }
  .brand-intro-status { display: none; }
  html.brand-intro-active .brand-intro .brand-intro-studio { width: min(500px, 91vw) !important; }
  html.brand-intro-active .brand-intro .brand-intro-lockup.brand-intro-original { width: min(430px, 84vw) !important; aspect-ratio: 2.72 / 1 !important; }
}
@media (max-width: 350px) { .brand-intro-signature { gap: 8px; font-size: 6.5px; } }
@media (prefers-reduced-motion: reduce) { .brand-intro-active .brand-intro { display: none !important; animation: none; } }